Progression + CMS + PaperVision3D

以前に、某コンテスト用にProgression + CMSで作った、PhotoAlbum的なもの。

• Photo Album（Progression + CMS）のデモ

それにPaperVision3Dを付け加えてみました。（とはいっても、Planeに貼り付けた単純なものなんですが…）

• Photo Album（Progression + CMS + PaperVision3D）のデモ

記事を投稿すれば、PaperVision3D空間にあるサムネイル画像が増えていきます。

データ＆ソースの殆どは、Progression + CMSの時に使ったものをそのまま流用しただけなんですが…

新たに付け加えたものとしては、CastSpriteを継承したPaperVision3Dのクラスを作ったくらい…

ProgressionとPaperVision3Dの連携は、ClockMakerのYasuさんの『ProgressionとPapervision3Dの連携 No.01』を大いに参考にさせて頂きました！

★作業手順

1. PaperVision3Dのクラスに、BasicViewを作成
2. BasicViewにPlaneを作成
3. Progression側のIndexSceneで動的に作成しているサムネイル画像を取得
4. MovieMaterialでPlaneに貼り付ける

簡単にいうと、こんな感じです。

BasicViewにPlaneを作成

2に関しては、サムネイルが投稿（更新）される度にfor文の数値を変えるのは面倒なので、PaperVision3Dのクラス側に以下の様な感じのソースを書いてます。

private var _scene:IndexScene;
/*IndexSceneの配列my_arrayを取得しておく*/
_scene = IndexScene(getSceneById("index"));
//trace(_scene.my_array);

for (var i:int = 0; i < _scene.my_array.length; i++) {
//Planeを作成

IndexScene側で動的に作成しているサムネイルを、配列にpushしておいて、PaperVision3Dのクラス側から、getSceneByIdを使って、その配列を取得しています。

で、その配列を使ってPlaneを作成してあげれば、いちいち（for文の数値を）変更しなくてもいいので、こんな手法を使ってみました。

Progression側のIndexSceneで動的に作成しているサムネイル画像を取得

IndexSceneで動的に動的に作成しているサムネイル画像に、個別のidを付けておきます。

var no:String = "imgBtn" + i;
var imageButton:Thumbnail = new Thumbnail( { id:no } );

こうしておいて、PaperVision3D側で、こんな感じに書いてあげます。

for (var i:int = 0; i < _scene.my_array.length; i++) {
　　　　var str:String = "imgBtn" + i;
　　　　img = Thumbnail(getInstanceById(str));

こうすれば、インスタンスを取得出来るので、あとは（幅と高さを指定した）Spriteにでもくるんであげて、MovieMaterialに渡してあげれば、無事表示されました。

サムネイルをクリックすると、シーンの遷移も行うことが出来ます。

マウスオーバー時の挙動とか、クリックがしづらいとか、（Progressionの）ツールチップの表示位置とか、ステージをグリグリしてカメラ位置を変更とか、やるべき（修正すべき）事は多々ありますが…

とりあえず、出来たということで…

今後ちょっとずつ機能を追加していく予定です。

★関連項目

• Progression + CMS（1）
• Progression + CMS（2）
• Progression + CMS（3）
• Progression + CMS（4）
• Progression + CMS（5）

★追記（2009/06/17）

Spriteでくるまなくても大丈夫！

先に、取得したインスタンスを、Spriteでくるんで～と書きました。

for (var i:int = 0; i < _scene.my_array.length; i++) {
　　　　var str:String = "imgBtn" + i;
　　　　img = Thumbnail(getInstanceById(str));
　　　　var mm:MovieMaterial = new MovieMaterial(img,true,true,true);

こんな感じにMovieMaterialの引数として、（取得したインスタンスを）そのまま渡してあげると、画像が意図したように表示されませんでした。

for (var i:int = 0; i < _scene.my_array.length; i++) {
　　　　var str:String = "imgBtn" + i;
　　　　img = Thumbnail(getInstanceById(str));
　　　　var sp:Sprite = new Sprite();
　　　　sp.graphics.beginFill(0xFFFFFF);
　　　　sp.graphics.drawRect(0, 0, 100, 80);
　　　　sp.graphics.endFill();
　　　　sp.addChild(img);
　　　　var mm:MovieMaterial = new MovieMaterial(sp,true,true,true);

そこで僕は、（取得したインスタンスを）こんな感じでSpriteでくるんであげて、それをMovieMaterialに渡す方法を採りました。

でも、こんなことしなくても…

for (var i:int = 0; i < _scene.my_array.length; i++) {
　　　　var str:String = "imgBtn" + i;
　　　　img = Thumbnail(getInstanceById(str));
　　　　var mm:MovieMaterial = new MovieMaterial(img,true,true,true,new Rectangle(0,0,100,80));

こんな感じで書いてあげても、上手くいったので、追記しておきます。