Blog Top » Flash 3D »

  • 2009年05月28日 (木)
  • このエントリーをはてなブックマークに追加

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

Papervision3D スライドショー

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したり、機能を調べたりしながら手打ちでスクリプトを書くのは実際大変だと思います。

習得を早めたり、より高度な実装をしていくにあたり、コード補間機能のあるエディターを併用し、クラスベースで設計することを強くオススメします。

090528_slideshow_02

コードヒント機能がある有名なエディター

最後に

もし習作を作られたらwonderflではPapervision3Dも動作しますので、練習がてらwonderflに投稿するもの良いと思います。私も日々チェックしてますので、Q&Aがあればfolkして答えることもあるかもしれません。

たくさんのPapervision3Dの作品を楽しみにしています。

書籍になりました

なお、Papervision3Dの解説はさらに詳しく書籍にもまとめています。このブログを読んでさらにスキルを高めたいという方がいましたら当ブログ管理者が執筆した次の書籍をオススメします。書籍はこちらのページで紹介してますので、興味がありましたらぜひご確認ください。

51omh-g4sYL._SL500_AA240_

「Flash3Dコンテンツ制作のためのPapervision3D入門」

連載目次

投稿者 : 池田 泰延

BookMark

ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加

Comment/Trackback 8件

  • flabaka - Cubeをあれこれ動かしてみる より:
    2009年05月29日(金) 14:22

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

  • hiro より:
    2009年06月01日(月) 16:22

    はじめまして。hiroです。

    大変、分かりやすいPapervision3dの使い方に感動しました。

    テクスチャを貼ったオブジェクトに光源を設定させることはできるのでしょうか？たとえば、プリミティブなオブジェクトや外部からロードしたdaeファイルとかに、光源を設定できる機能などはあるのでしょうか？

  • Yasu より:
    2009年06月01日(月) 17:43

    hiroさん
    はじめまして、ブログのYasuです。

    頂いた質問ですが、おそらくできると思います。次のデモの右ナビにあるFlatShaderを試してみてください。ビットマップのテクスチャにPV3Dのフラットシェーディングが適用されています。
    http://tinyurl.com/nj4sq8

    実はまだ試したことのない機能なんですが、こういった表現試してみたいですよね。ちょっと動作負荷的に重そうな感じがするのが懸念点ですが。

  • Yasu より:
    2009年06月01日(月) 23:50

    hiroさん
    この手の質問はよくあるので、別途ブログ記事にまとめました。そちらを参考くださいませ。
    http://tr.im/n2Ud

  • hydekick より:
    2010年10月21日(木) 04:33

    はじめまして。hydekickです。

    clockmakerさんのpapervision3Dの本を参考に、Blenderでモデリングしたオブジェクトを.daeで書き出し、読み込みを試みたのですが、オブジェクトが表示されません。
    原因は書き出しの段階だと思い、Pythonの最新版のインストールなどしてみましたがダメでした。
    Blenderの設定でpythonのファイルパス、カメラやライティングなど特別に必要なことはあるのでしょうか？
    環境はmac OS 10.5、Flash CS5です。

  • Yasu より:
    2010年10月21日(木) 08:07

    ＞hydekickさん
    はじめまして。

    まずは思い当たる節をいくつかピックアップしてみました。
    ・スケールが小さくて表示されない(PV3DとBlenderのDAEだとスケールの差が大きく、実際に表示されていても、小さくて見えないことがあります。
    ・何らかのテクスチャを貼りつけていますか？
    ・テクスチャは三角ポリゴンになっていますでしょうか？
    ・オブジェクト書き出した.daeファイルをテキストエディタで開くとXMLが記述されてますでしょうか？

    もう一つ環境で調べることがあるとすれば、Blenderのバージョンについてです。書籍のほうではBlender 2.49bを扱っていましたが、hydekickさんがお使いのバージョンはどちらになりますか？

  • hydekick より:
    2010年10月22日(金) 02:05

    hydekickです。
    返信ありがとうございました。

    ・まずスケールですが、scale = 100 でやってみた上で、さらに.swfの設定で再描画領域を表示させましたが、オブジェクトが何もない状態でした。
    ・.daeファイルをテキストエディタで開いて確認してみましたが、ちゃんとXMLで記述されていました。
    ・テクスチャはなく、書き出しのオプション設定も参考書に従いました。

    blenderのバージョンは2.49bでした。pythonのバージョンを対応したものにする必要があるという記事を見つけたのですが、その点で問題はあるのでしょうか？

    最後に、.fla2のサンプルであったsaqooshaさんの虹の.blendファイルを自分のblenderで書き出してみたのですが、その.daeでうまくいかなかったので、オブジェクトに問題はないと思われます。

    何か他に思いあたる点がありましたら、また返信いただけると幸いです。

  • hydekick より:
    2010年10月24日(日) 04:48

    hydekickです。

    この間のblenderの3Dオブジェクトのpapervision3Dでの表示の問題はやはり解決しませんでした。
    しかし自己流で別の方法を思いつきました！
    既存のものかもしれませんが…

    photoshopの3D機能を使って3Dを生成、dae書き出しもphotoshopで行うというものです。
    この方法で無事表示できました。

    しかし、メッシュの数が多すぎて表示に時間を要します。
    解決策はあるか分かりませんが試行錯誤してみます。

    clockmakerさんも試したことがなければ、一度やってみて実用性などお聞かせください。