ProgressionとPapervision3Dの連携 No.02

前回はPapervision3DとProgressionを連携させてみようということで、PV3DにProgressionのシーン(ページID)を割り振る事を試しました。

ただ、PV3Dと連携させるにあたってやや冗長にスクリプトを書く必要があり、世界観を作り込んだPV3Dのフルフラッシュサイトになると根気がいりそうな気配を感じておりました。私が本当にやりたいのは、そんな根気はなくても手軽にクールな演出がProgressionでできるというものです。

Progression公式ブログで掲載されているスライドショーの7ページを拝借(勝手に引用してすみません！)。私の理想系は画面AとBは作られていて、その遷移のトランジションがPapervision3Dというもの。

前回の例は画面AもBもPV3Dで作られていて、それを力技でProgressionと結びつけるということになってました。いずれはそれも簡単にできる作り方を考えていきたいと思いますが、当面は画面遷移中のPV3D演出ということで調べていきたいと思います。

EasyCastingのサンプル

前置きが長くなりましたが、今回作成したサンプルです。

• demo (要 Flash Player 9)
• Progression 4 用サンプル (Flash CS3 形式)
• Progression 3 用サンプル (Flash CS3 形式)

※特に理由がない限り、Progression 4 用サンプルをダウンロードください。

今回はまだPV3Dを使ってませんが、取り合えずEasyCastingというコンポーネントだけで画面制御ができるサンプルを作ってみました。噂通り1行もスクリプトを書かずにサイトの骨格ができています。

シーンエディターはすごい

サイトの構造はProgressionシーンエディターを使っています。これはサイト構造のXMLファイルに書き出してくれるGUIのツールです。便利だと思ったのは「キャストをシンボルとして書き出す」を行う事でエディター上の構造通りに、ライブラリパネルにMovieClipを自動生成してくれます。なのであとは自動生成されたMovieClipの中にグラフィック・演出とリンク設定を作り込んでいけば完成してしまいます。

(クリックで拡大)

シーンエディターで作った画面制御のXMLはこちらで確認する事ができます。中途半端なところですが、次回以降に続くという事で今回の記事はここまで。

まとめ

このシリーズのエントリーは「Progression チュートリアル」のまとめにまとめています。