ProgressionとPapervision3Dの連携 No.01

• 2008年11月18日 (火)
• 

昨日のブログでF-siteセミナーにいったことをレポートしましたが、学んだ事は忘れないうちに復習するということでAS3フレームワークの Progression を試してみたいと思います。敢えて説明するまでもないと思いますが、Progression とは Flash の画面遷移をスマートに作成できる Flasher 向けのフレームワークです。

ということで作成したものは Papervision3D を Progression 3 で制御するというもの。

• demo (要 Flash Player 9)

ブロックをクリックすると Scene が切り替わるように設定しているので、URL のアンカーが切り替わります。もちろんアンカーからページに入るとSceneが復元されそのブロックが表示された状態になります。例えば紫のブロックのリンクはこちらです。以下は技術的な解説です。

ProgressionとPapervision3Dを連携させる

Progressionを公式サイトの手順を参考に導入し、PV3Dを自分のライブラリ(classesフォルダ)の方に入れておきます。とりあえず今回はクラスベースで作成。ポイントはPV3DのコンテナーをCastSprite(もしくはCastMovieClip)に設定する事かと思いました。

public class Papervision3DWorld extends CastSprite

CastSpriteを継承しておけば、_onCastAddedやaddCommandのような画面遷移に伴う同期処理に様々な関数やアニメーションを設定することができます。

/*======================================================================*//**
* ICastObject オブジェクトが AddChild コマンド、または AddChildAt コマンド経由でディスプレイリストに追加された場合に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onCastAdded():void {
    // 実行したいコマンドを登録します。
    addCommand(
    );
}

addCommandの中にDoTweenerコマンドを含める事でPapervision3Dを制御することができました。

Sceneを動的に作成する

今回のように3D空間の中に複数のインスタンスがあるケースで考えます。一つ一つに対してユニークURLを設定するにはSceneをそれらの数だけ用意し、PV3Dの制御系と同期をとる必要があると考えました。
PV3D内部でクリックイベントを取得しておりますがそのタイミングでトゥイーンを発動させるのではなく、Progressionを経由してアニメーションするようにしております。

PV3D→Progressionへの通知 (3D空間内でブロックがクリックされたときのハンドラー)

/*======================================================================*//**
* オブジェクトがクリックされたときの処理を設定します
* @param e
*/
private function onClickHandler(e:InteractiveScene3DEvent):void
{
var o:DisplayObject3D = e.target as DisplayObject3D;
var pageNo:int = int(o.name.split(OBJ_NAME)[1]);

prog = getProgressionById(“index”);
prog.goto(new SceneId(“/index/page” + pageNo));
}

Progression→PV3Dへの命令 (IndexSceneクラスのコンストラクター)

world = new Papervision3DWorld();

var page0:SceneObject = addScene(new SceneObject(“page0″));
page0.onInit = function():void { world.gotoPage(0); };
// これで”/index/page0″が作成されました
// “/index/page0″に画面遷移が到着したらonInit内の関数が実行されます

コンポーネントを使ってボタンを作成する

今回はNextButtonとPreviousButtonを利用したのですが、RollOverButton系のトゥイーンアニメーションはProgression2のときと同じようにフレームラベルを割り振るだけで簡単に設定することができました。

※今回はクラスベースで作成しましたが、そのflaでもコンポーネントの併用ができるようです。

考察

今回はサイト構築に関するところまで掘り下げられませんでしたが、今後の目標としてPV3Dの演出性とProgressionのユーザビリティーの高さを連携させ、かつ効率の良い制作スタイルを探っていきたいと思います。

今回のソース

• zip (Flash CS3)
  

使用したライブラリはこちらからDL下さい。

• progression 3.0.7
• papervision3d 2.0 beta
  

参考リンク

• blog.progression.jp» ブログアーカイブ » [イベント] F-site セミナー終了しました
• Adobe – デベロッパーセンター : Progression Framework 2　初級編：ActionScriptを書かずにFlashサイトを簡単に構築する
• flabaka – Progression Archive