ProgressionとPapervision3Dの連携 No.03 : 3Dの画面遷移エフェクト完成

[追記] 08.12.16
この記事をもとに Flash でスクリプト不要の 3D トランジション効果 ClockMaker Effects という拡張コンポーネントを作成しました。コンポーネントのほうが使い易くエフェクトも強力になってますので、上記リンクをご覧ください。

汎用3Dライブラリの「Papervision3D」と画面遷移がスマートに作成できる人気のフレームワーク「Progression」を組み合わせるシリーズ３回目です。ついに画面遷移に3Dエフェクトを適用することができました。それもちょっとした設定で色んなプロジェクトにも利用できるように”それっぽく”クラス化しています。まずはサンプルをご覧ください。

• demo (要Flash Player 9)
• ZIPのソースファイル(Flash CS3)
• 使用したライブラリはこちらからDL下さい。
  • progression 3.0.7
  • papervision3d 2.0 beta

作った感想としてはエフェクトがそこそこ汎用化できたので、ちょっとしたサイトに気軽に利用できるのではと思いました。利用するにあたり具体的なスキルレベルとしてはActionScriptは全く書く必要がないので、Progressionのコンポーネントベースでサンプルが作れる+αぐらいでしょうか。

さて、具体的な実装方法ですが、サイトの骨格は前回の記事でEasyCastingモードを使うとスクリプトを1行も書かずに設定できることを紹介しました。今回はそれを応用して下記3ステップでPapervision3Dを使えるようにしてみます。

以下はProgressionのコンポーネントスタイルで作っている事を前提としてみます。

ステップ1 : 必要ライブラリを設置する

このデモでは私が作成したPaperEffectCastSpriteクラスとPapervison3Dライブラリを使用しますので、上記のソースからDLして所定の場所に設置します。上画像をクリックすると拡大しますので、こちらを参考にファイルを設置します。ちなみにlibフォルダはProgressionライブラリがアップデートしたときに自動更新するときのものだと思いますので、この中にPV3Dは入れないようにします。

ステップ2 : エフェクトを適用したい画面にPaperEffectCastSpriteクラスを設定する

3Dエフェクトを適用したいオブジェクトに PaperEffectCastSprite クラスを基底クラスとして設定します。Progression シーンエディターを使って作成したムービークリップであれば「ActionScriptに書き出し」のチェックは入っていると思いますが、基底クラスの箇所に次のクラス名を記入します

jp.clockmaker.casts.PaperEffectCastSprite

ステップ3 : ムービークリップを仕様通りに設定する

ステップ2で設定したシンボルに対して構造に一つ決まりを設けました。中身にはインスタンス graphics_mc だけを置くというルールです。ボタンや画像など色んな要素をレイアウトする場合はgraphics_mcの中に配置ください。graphics_mc に透明座布団を敷いていますが、この扱いで演出が大きく変わるので、ここがたぶん一番難しいところです。

パブリッシュすれば動くはず・・・

これでパブリッシュすれば動作すると思います。ただPapervision3Dの設定がセンシティブであるため、場合によっては演出がトンでもないことになることもあるかもしれません。その理由は・・・

本題：技術的な解説

画面オブジェクトの階層をわざわざ下げた理由は、graphics_mcと同階層にPapervision3Dの演出レイヤーを作成しているからです。簡単に説明すると演出されているときはPV3Dのレイヤーを表示し、画面オブジェクトは非表示にしています。演出が終了した時点でそれらを切り替えるようにしています。わざわざそんなことをする理由は、PV3Dを使うとマウスクリックなどインタラクティブやタイムラインアニメーションが扱いづらくなるからです。

難しかった点としては、PV3Dの３次元座標と表示オブジェクトをぴったり位置をあわせることです。この点についてはnote.x先生のピクセル等倍TIPSが参考になります。

• note.x | [Papervision3D2.0] ピクセル等倍表示にトライ

Progressionのコマンドに登録することが鍵

PaperEffectCastSprite は プログレッションのCastSpriteを継承し、画面表示・非表示時のタイミングに演出するようにコマンドを登録しています。ロジック自体は当ブログで紹介した細切れフォトグラフと同じ物ですが、addCommandに同期するように全てCommandを利用したスクリプトに移植しています。具体的にはTweenerでアニメーションしていたところは全部DoTweenerにしています。その事によりProgressionによって演出の同期処理が管理されるようになり、時間差演出が作り易くなります。

この作り方を覚えてしまえば、もっと他の演出も自在に作れるはず。当面は今回のエフェクトの完成度を上げたいので、もしご要望があればコメント頂ければ幸いです。

＜追記＞

Progression公式ブログにご紹介頂きました!!

• blog.progression.jp» ブログアーカイブ » [拡張機能] 3D の画面遷移エフェクト

ブログ内の関連記事

• ProgressionとPapervision3Dの連携 No.02
  
• ProgressionとPapervision3Dの連携 No.01
  
• Papervision3D演出サンプルNo.04:細切れフォトグラフ