- 2009年05月28日 (木)
- Tweet
フレームアクションで覚える PV3D Vol.06 : スライドショー
Flashの3Dライブラリ「Papervision3D」チュートリアルの最終回。今回は今までの応用としてフォトスライドショーを3Dで作ってみたいと思います。今回の成果物であるFlashのデモとソースファイルはこちら。デモは写真をクリックで拡大表示ができ、スクロールバーで俯瞰図の視点を横に動かせます。
※今回はPapervision3Dの他、トゥイーンエンジンのTweenerも併用しています。写真は私の撮影したものでflickrにアップしているものを使ってます。
以下、技術的な解説です。
技術的なポイント
細かい作りなどはflaファイルにコメントを書きましたのでそちらを参照いただくとして、今までチュートリアルで触れていなかった大きなポイントは以下の二つ。
- 3Dオブジェクトにクリックを設定
- 自前のインターフェース(スライダー)と連動させる方法
こちらを細かく説明しておきます。
3Dオブジェクトにクリックを設定する方法
3Dのマウスイベントの設定方法は、通常のムービークリップ等と違い、手順が複雑になります。
BasicViewのインスタンス生成時にinteractiveプロパティー(4番目の引数)をtrueに設定する
var world:BasicView = new BasicView(720,430,false,true,CameraType.FREE)
マテリアルのinteracitveプロパティーをtrueにする
// ビットマップファイルマテリアルは引数にライブラリの画像を指定します
var material:BitmapFileMaterial = new BitmapFileMaterial("res/img_"+i+".jpg")
// イベントを拾えるように記述
material.interactive = true
3Dオブジェクトにイベントを登録する
// イベントの設定
photo.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickHandler)
function clickHandler(e:InteractiveScene3DEvent){
// いろいろ記述
}
自前のインターフェース(スライダー)と連動させる方法
Papervision3Dのインスタンスもムービークリップなので(厳密にはSpriteの継承)、Flashコンテンツを形成する通常のムービークリップのパーツとして設計を考えます。
スクロールバーのプロパティーをBasicViewのカメラプロパティーとひもづけて制御しています。
チュートリアルのまとめ
6回に渡って連載してきたPapervision3Dチュートリアルいかがでしたか？
Flashで3D、それもスクリプトといっても少ない行数で簡単に書けることが伝わりましたでしょうか。
今までフレームアクションで説明してきましたが、フレームアクションでは大変なことも多いです。ライブラリには多くのクラスファイルがあり、importしたり、機能を調べたりしながら手打ちでスクリプトを書くのは実際大変だと思います。
習得を早めたり、より高度な実装をしていくにあたり、コード補間機能のあるエディターを併用し、クラスベースで設計することを強くオススメします。
コードヒント機能がある有名なエディター
- Windows :FlashDevelop (インストールチュートリアル)
- Mac OS X : FDT
- Win & Mac : Adobe – Flex Builder
最後に
もし習作を作られたらwonderflではPapervision3Dも動作しますので、練習がてらwonderflに投稿するもの良いと思います。私も日々チェックしてますので、Q&Aがあればfolkして答えることもあるかもしれません。
たくさんのPapervision3Dの作品を楽しみにしています。
書籍になりました
なお、Papervision3Dの解説はさらに詳しく書籍にもまとめています。このブログを読んでさらにスキルを高めたいという方がいましたら当ブログ管理者が執筆した次の書籍をオススメします。書籍はこちらのページで紹介してますので、興味がありましたらぜひご確認ください。
「Flash3Dコンテンツ制作のためのPapervision3D入門
2009年05月29日(金) 14:22
[…] フレームアクションで覚える PV3D Vol.06 : スライドショー […]
2009年06月01日(月) 16:22
はじめまして。hiroです。
大変、分かりやすいPapervision3dの使い方に感動しました。
テクスチャを貼ったオブジェクトに光源を設定させることはできるのでしょうか？たとえば、プリミティブなオブジェクトや外部からロードしたdaeファイルとかに、光源を設定できる機能などはあるのでしょうか？
2009年06月01日(月) 17:43
hiroさん
はじめまして、ブログのYasuです。
頂いた質問ですが、おそらくできると思います。次のデモの右ナビにあるFlatShaderを試してみてください。ビットマップのテクスチャにPV3Dのフラットシェーディングが適用されています。
http://tinyurl.com/nj4sq8
実はまだ試したことのない機能なんですが、こういった表現試してみたいですよね。ちょっと動作負荷的に重そうな感じがするのが懸念点ですが。
2009年06月01日(月) 23:50
hiroさん
この手の質問はよくあるので、別途ブログ記事にまとめました。そちらを参考くださいませ。
http://tr.im/n2Ud
2010年10月21日(木) 04:33
はじめまして。hydekickです。
clockmakerさんのpapervision3Dの本を参考に、Blenderでモデリングしたオブジェクトを.daeで書き出し、読み込みを試みたのですが、オブジェクトが表示されません。
原因は書き出しの段階だと思い、Pythonの最新版のインストールなどしてみましたがダメでした。
Blenderの設定でpythonのファイルパス、カメラやライティングなど特別に必要なことはあるのでしょうか？
環境はmac OS 10.5、Flash CS5です。
2010年10月21日(木) 08:07
＞hydekickさん
はじめまして。
まずは思い当たる節をいくつかピックアップしてみました。
・スケールが小さくて表示されない(PV3DとBlenderのDAEだとスケールの差が大きく、実際に表示されていても、小さくて見えないことがあります。
・何らかのテクスチャを貼りつけていますか？
・テクスチャは三角ポリゴンになっていますでしょうか？
・オブジェクト書き出した.daeファイルをテキストエディタで開くとXMLが記述されてますでしょうか？
もう一つ環境で調べることがあるとすれば、Blenderのバージョンについてです。書籍のほうではBlender 2.49bを扱っていましたが、hydekickさんがお使いのバージョンはどちらになりますか？
2010年10月22日(金) 02:05
hydekickです。
返信ありがとうございました。
・まずスケールですが、scale = 100 でやってみた上で、さらに.swfの設定で再描画領域を表示させましたが、オブジェクトが何もない状態でした。
・.daeファイルをテキストエディタで開いて確認してみましたが、ちゃんとXMLで記述されていました。
・テクスチャはなく、書き出しのオプション設定も参考書に従いました。
blenderのバージョンは2.49bでした。pythonのバージョンを対応したものにする必要があるという記事を見つけたのですが、その点で問題はあるのでしょうか？
最後に、.fla2のサンプルであったsaqooshaさんの虹の.blendファイルを自分のblenderで書き出してみたのですが、その.daeでうまくいかなかったので、オブジェクトに問題はないと思われます。
何か他に思いあたる点がありましたら、また返信いただけると幸いです。
2010年10月24日(日) 04:48
hydekickです。
この間のblenderの3Dオブジェクトのpapervision3Dでの表示の問題はやはり解決しませんでした。
しかし自己流で別の方法を思いつきました！
既存のものかもしれませんが…
photoshopの3D機能を使って3Dを生成、dae書き出しもphotoshopで行うというものです。
この方法で無事表示できました。
しかし、メッシュの数が多すぎて表示に時間を要します。
解決策はあるか分かりませんが試行錯誤してみます。
clockmakerさんも試したことがなければ、一度やってみて実用性などお聞かせください。