フレームアクションで覚える PV3D Vol.06 : スライドショー

• 2009年05月28日 (木)
• 

Flashの3Dライブラリ「Papervision3D」チュートリアルの最終回。今回は今までの応用としてフォトスライドショーを3Dで作ってみたいと思います。今回の成果物であるFlashのデモとソースファイルはこちら。デモは写真をクリックで拡大表示ができ、スクロールバーで俯瞰図の視点を横に動かせます。

• demo (require Flash Player 9)
• source (Flash CS3 Project / zip)

※今回は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入門」

連載目次

• フレームアクションで覚える PV3D Vol.01
• フレームアクションで覚える PV3D Vol.01 (補足)
• フレームアクションで覚える PV3D Vol.02 : Primitiveを理解する
• フレームアクションで覚える PV3D Vol.03 : Materialを理解する
• フレームアクションで覚える PV3D Vol.04 : BasicViewを理解する
• フレームアクションで覚える PV3D Vol.05 : Cameraを理解する
• フレームアクションで覚える PV3D Vol.06 : スライドショー