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

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

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

Papervision3D meets Progression

作った感想としてはエフェクトがそこそこ汎用化できたので、ちょっとしたサイトに気軽に利用できるのではと思いました。利用するにあたり具体的なスキルレベルとしては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の3次元座標と表示オブジェクトをぴったり位置をあわせることです。この点についてはnote.x先生のピクセル等倍TIPSが参考になります。

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

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

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

<追記>

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

ブログ内の関連記事

投稿者 : 池田 泰延

BookMark

いかがでしたでしょうか、ブックマークはこちらからどうぞ。

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

Comment/Trackback 4件

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

    […] ClockMaker Blog さんが Papervision3D と連携した画面遷移エフェクトをカンタンに使うことができるクラスを作成されました! […]

  • REI より:

    ClockMakerさん、はじめまして。
    昨日からProgressionを学び始めたREIといいます。
    わからない事ばかりだったのですが、
    ClockMakerさんのDLやTutorialのビデオを見て、
    すべてがクリアになりました。感激です!
    ありがとうございます。

    一つお聞きしたい事があるのですが、
    ユーザ側のアクションがないとき、
    一定時間が経つと各シーンを自動的にplayしてくれるような
    Progressionの拡張コンポーネントなどはご存知ないでしょうか?
    スクリプトが書けないので、できればコンポーネントスタイルで
    作成したいのですが、なかなか探せなくて。
    知識が豊富なYaseさんならご存知と思い、
    コメントさせていただきました。

    突然のコメントが質問で恐縮ですが、
    もしお時間ある時にでも、ご返信頂けるとうれしいです。

  • Yasu より:

    REIさん

    コメントありがとうございます。チュートリアルビデオがお役に立ててよかったです。

    さてユーザーアクションのアイドル状態を監視してシーンを自動的に遷移するような拡張コンポーネントですが、現状はないと思います。実装方法としてはその処理だけスクリプトで設計するのが一般的かと思います。(スクリプトが書けないとのことですので、お役に立てず申し訳ないです。)

    フォーラムでもありましたが、今後ユーザーサイドで自作コンポーネントの作成が活発になっていけば、望まれる追加機能やコンポーネントが現れる可能性はあると思います。どうしても必要で、一般的にニーズが高そうでしたらフォーラムにリクエストしてみるのもいいかもしれませんよ。

  • REI より:

    Yasuさん、ご返答ありがとうございます。
    これを機会に少しAS3も学習してみます。
    これからもYasuさんのサイトで、
    Progressionの知識を高めたいと思います。
    ありがとうございました。