スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

Papervision3Dでcoverflow風に表示する

遅ればせながら、最近になってPapervision3Dを使い始めてみました。
で、おそらく大勢のヒトがやってみたであろうcoverflow風の表示をオレもやってみました。実はcoverflowってちゃんと見たことないのですが、フンイキで。。。






並んでるカバー(のつもりの板)をクリックすると、それが中央に表示されます。

今回のサンプルでは、Papervision3D_2.0.883.ziptweener_1_33_74_as3.zipを使用しています。
なのでサンプルコードをパブリッシュするためにはそれぞれのzipファイルをダウンロードして、flaファイルと同じ場所に展開しておく必要があります。

サンプルのスクリプトは、flaファイルの最初のフレームにフレームアクションとしてこんなカンジに記述しました。

import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.core.effects.view.ReflectionView;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.events.InteractiveScene3DEvent;
import caurina.transitions.Tweener;
// カバー配列()
var coverArray:Array = [
createMovieClip(1, 0x0000CC),
createMovieClip(2, 0x0033CC),
createMovieClip(3, 0x0066CC),
createMovieClip(4, 0x0099CC),
createMovieClip(5, 0x00CCCC),
createMovieClip(1, 0x00CC00),
createMovieClip(2, 0x33CC00),
createMovieClip(3, 0x66CC00),
createMovieClip(4, 0x99CC00),
createMovieClip(5, 0xCCCC00)
];
// カバーの幅
var coverWidth:Number = coverArray[0].width;
// カバーの高さ
var coverHeight:Number = coverArray[0].height;
// カバーの間隔
var interval:Number = 60;
// ポリゴン分割係数
var d:Number = 8;
// 空間を生成する
var world:ReflectionView = new ReflectionView();
world.viewport.interactive = true;
world.surfaceHeight = -coverHeight;
world.viewportReflection.filters = [new BlurFilter(8, 8, 1)];
addChild(world);
// カメラ位置
world.camera.z = -1000;
// オブジェクト配列を生成する
var materialArray:Array = new Array();
var objArray:Array = new Array();
for (var i:uint = 0, iEnd:uint = coverArray.length; i < iEnd; i++) {
var mc:MovieClip = coverArray[i];
// ムービーマテリアルを生成する
var material:MovieMaterial = new MovieMaterial(mc, true);
material.interactive = true;
materialArray.push(material);
// 平面を生成し、シーンに追加する
var plane:Plane = new Plane(material, mc.width, mc.height, d, d);
plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK,
createCoverClickHandler(i));
world.scene.addChild(plane);
objArray.push(plane);
}
// フレームイベントリスナを登録する
addEventListener(Event.ENTER_FRAME,
function (e:Event):void {
// マウスカーソルの位置によってカメラ位置を移動する
if (mouseY < stage.stageHeight / 2) {
world.camera.orbit(60 + mouseY * 2 / stage.stageHeight * 30, -90, true);
} else {
world.camera.orbit(90, -90, true);
}
// 描画する
world.singleRender();
});

// 初期状態で表示されるカバーのインデックス
var cIdx:uint = coverArray.length / 2;
// 配置する
arrangeCoverObj(cIdx);

// 指定したインデックスのカバークリックイベントハンドラを生成し戻します
function createCoverClickHandler(idx:uint):Function {
return function (e:InteractiveScene3DEvent):void {
// 再配置する
arrangeCoverObj(idx);
}
}
// 指定したインデックスを選択した状態でカバーを配置します
function arrangeCoverObj(idx:uint) {
// 指定されたインデックスより左側のカバーを配置する
var xMin:Number = -interval * idx - coverWidth / 2;
for (var i:uint = 0; i < idx; i++) {
var obj:Plane = objArray[i];
addTween(obj, xMin + i * interval, 0, -90);
}
// 指定されたインデックスのカバーを配置する
obj = objArray[idx];
addTween(obj, 0, -coverWidth / 2, 0);
// 指定されたカバーより右側のカバーを配置する
xMin = coverWidth / 2 + interval;
for (i = idx + 1; i < coverArray.length; i++) {
obj = objArray[i];
addTween(obj, xMin + (i - idx - 1) * interval, 0, 90);
}
}
// 指定したオブジェクトにトィーンを付加します
function addTween(obj:Plane, newX:Number, newZ:Number, newRotationY:Number):void {
Tweener.addTween(obj, {
x:newX,
z:newZ,
rotationY:newRotationY,
time:0.3,
delay:0,
transition:"easeOutSine"
});
}
// サンプル用のカバームービークリップを生成して戻します
function createMovieClip(num:uint, col:uint):MovieClip {
var mcSize:Number = 500;
var mc:MovieClip = new MovieClip();
// 背景を描画する
mc.graphics.beginFill(col);
mc.graphics.drawRect(0, 0, mcSize, mcSize);
mc.graphics.endFill();
// ラインを描画する
mc.graphics.beginFill(0xFFFFFF);
for (var i:uint = 0; i < num; i++) {
var w:Number = mcSize / num;
var lw:Number = 50;
var lx:Number = i * w + w / 2 - lw / 2;
mc.graphics.drawRect(lx, 50, lw,mcSize - 100);
}
mc.graphics.endFill();
// グラデーションを描画する
mc.graphics.beginGradientFill(GradientType.LINEAR,
[0xFFFFFF, 0xFFFFFF],
[1.0, 0.0],
[0x00, 0xFF],
new Matrix());
mc.graphics.drawRect(10, 10, mcSize - 20, mcSize - 20);
mc.graphics.endFill();
return mc;
}


最初のimport org.papervision3d...は、Papervision3Dのクラスを使用するためのインポート文です。import caurina.transitions.Tweenerはtweenerのクラスのインポート文です。

coverArrayは、表示するカバー(ムービークリップ)の配列です。このサンプルでは一番最後に定義しているcreateMovieClipメソッドでテキトーなムービークリップを生成しています。

var world:ReflectionViewの定義以降がPapervision3Dを使うための処理です。
最初に3D空間となるworldを定義しています。これはReflectionViewのインスタンスなのですが、ReflecitonViewは床面反射の機能を備えたBasicView(のよう)デス。
surfaceHeightプロパティが床面の位置(y座標)の設定です。viewportReflection.filtersプロパティで床面反射でのぼかしを設定しています。

カバーの配置処理は、coverArrayに入ってるムービークリップでMovieMaterialのインスタンスを作り、そのマテリアルを指定してPlaneオブジェクトを作るというカンジでやっています。
カバーをクリックしたらソイツが表を向くようにしたいので、MovieMaterialのinteractiveはtrueに、Planeオブジェクトにはクリックイベントリスナを登録しています。
各イベントハンドラは、自身のインデックスを指定してarrangeCoverObjメソッドを実行しています。

arrangeCoverObjメソッドは、指定されたインデックスを表に向かせたときの各カバーのx座標、z座標、y軸を中心とした回転を算出してTweenerを実行します。
指定されたインデックスのカバーが中央で表を向くようにして手前に配置、それより左側はy軸を中心に-90度、それより右側は90度回転させています。

フレームアクションでは2つの処理をしています。
1つはマウスカーソルの位置によって視点を変える処理で、ステージ中央よりも上にマウスカーソルがある場合はカバーを上から見下ろすカンジにしてます。
2つめは、ReflectionViewのsingleRenderメソッドの実行デス。
BasicViewの場合は、startRenderingメソッドを実行しておけばENTER_FRAMEでは何もしなくてよいのですが、ReflectionViewの場合はsingleRenderを実行しなければいけないようデス。
スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2009.08.03 | | Comments(0) | Trackback(0) | Flash CS4

コメント

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。