スポンサーサイト

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

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

rotationYでcoverflow風に表示する

前回のエントリでは、Papervision3Dを使ってcoverflow風の表示をしてみましたが、今回はFlashPlayer10から使えるようになったDisplayObject.rotationYでカバーを回転させてみました。






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

今回のサンプルではPapervision3Dは使用していませんが、前回と同じくtweener_1_33_74_as3.zipは使用しています。
なのでサンプルコードをパブリッシュするにはダウンロードしたtweenerをflaファイルを同じディレクトリに展開しておく必要があります。

サンプルのスクリプトは、flaファイルの最初のフレームにアクションとして書いています。

import caurina.transitions.Tweener;
// カバーのサイズ
var spSize:Number = 200;
// カバーの間隔
var interval:Number = 50;
// 中心座標
var cx:Number = stage.stageWidth / 2;
var cy:Number = stage.stageHeight / 2;
// カバー配列
var coverArray:Array = [
createCover(1, 0x0000CC),
createCover(2, 0x0033CC),
createCover(3, 0x0066CC),
createCover(4, 0x0099CC),
createCover(5, 0x00CCCC),
createCover(1, 0x00CC00),
createCover(2, 0x33CC00),
createCover(3, 0x66CC00),
createCover(4, 0x99CC00),
createCover(5, 0xCCCC00)
];
// カバーの初期処理
for (var i:uint = 0, iEnd:uint = coverArray.length; i < iEnd; i++) {
var sp:Sprite = coverArray[i];
// 表示する
addChild(sp);
// y座標とz座標の初期値を設定する
sp.y = cy;
sp.z = 0;
// クリックイベントリスナを登録する
sp.addEventListener(MouseEvent.CLICK, createClickHandler(i));
}
// カバークリックイベントハンドラを生成して戻します
function createClickHandler(idx:uint):Function {
return function (e:MouseEvent):void {
// クリックしたカバーのインデックスを指定して再配置
arrangeCover(idx);
};
}
// 初期状態で表示されるカバーのインデックス
var cIdx:uint = coverArray.length / 2;
// 配置する
arrangeCover(cIdx);
// 移動情報配列
var movingInfoArray:Array = new Array();
// 指定したインデックスを選択した状態でカバーを配置します
function arrangeCover(idx:uint) {
// カバーにトィーンを付加する
for (var i:uint = 0, iEnd:uint = coverArray.length; i < iEnd; i++) {
var sp:Sprite = coverArray[i];
if (i < idx) {
// 指定インデックスより左ならy軸を中心に-90度傾ける
addTween(sp, cx - (idx - i) * interval - spSize /2, spSize / 2, -90);
} else if (i > idx) {
// 指定インデックスより右ならy軸を中心に90度傾ける
addTween(sp, cx + (i - idx) * interval + spSize / 2, spSize / 2, 90);
} else {
addTween(sp, cx, 0, 0);
}
}
// 重ね順を更新する
for (i = 0; i < idx; i++) {
addChild(coverArray[i]);
}
for (i = coverArray.length - 1; i > idx; i--) {
addChild(coverArray[i]);
}
addChild(coverArray[idx]);
}
// 指定したオブジェクトにトィーンを付加します
function addTween(sp:Sprite, newX:Number, newZ:Number, newRotationY:Number):void {
Tweener.addTween(sp, {
x:newX,
z:newZ,
rotationY:newRotationY,
time:0.3,
delay:0,
transition:"easeOutSine"
});
}
// 背景色
var bgColor:uint = 0x000000;
// サンプル用のカバームービークリップを生成して戻します
function createCover(num:uint, col:uint):Sprite {
var sp:Sprite = new Sprite();
// 背景を描画する
sp.graphics.beginFill(col);
sp.graphics.drawRect(0, 0, spSize, spSize);
sp.graphics.endFill();
// ラインを描画する
sp.graphics.beginFill(0xFFFFFF);
for (var i:uint = 0; i < num; i++) {
var w:Number = spSize / num;
var lw:Number = 10;
var lx:Number = i * w + w / 2 - lw / 2;
sp.graphics.drawRect(lx, 10, lw,spSize - 20);
}
sp.graphics.endFill();
// グラデーションを描画する
var mtx:Matrix = new Matrix();
mtx.createGradientBox(spSize, spSize, 0, 0, 0);
sp.graphics.beginGradientFill(GradientType.LINEAR,
[0xFFFFFF, 0xFFFFFF],
[0.8, 0.0],
[0x00, 0xFF],
mtx);
sp.graphics.drawRect(2, 2, spSize - 4, spSize - 4);
sp.graphics.endFill();
// 床面反射を生成する
var bd:BitmapData = new BitmapData(sp.width, sp.height, true, 0x000000);
mtx = new Matrix();
mtx.scale(1.0, -1.0);
mtx.ty = sp.height;
var rect:Rectangle = new Rectangle(0, 0, sp.width, sp.height);
bd.draw(sp, mtx, new ColorTransform(), BlendMode.NORMAL, rect, true);
var reflect:Bitmap = new Bitmap(bd);
reflect.smoothing = true;
// 床面反射のグラデーションを生成する
var reflectGrad:Shape = new Shape();
var g:Graphics = reflectGrad.graphics;
mtx = new Matrix();
mtx.createGradientBox(reflect.width, reflect.height, Math.PI / 2);
g.beginGradientFill(GradientType.LINEAR, [bgColor, bgColor], [0.4, 1.0], [0, 255], mtx);
g.moveTo(0, 0);
g.lineTo(0, reflect.height);
g.lineTo(reflect.width, reflect.height);
g.lineTo(reflect.width, 0);
g.lineTo(0, 0);
g.endFill();
// カバーを生成
var cover:Sprite = new Sprite();
sp.x = -spSize / 2;
sp.y = -spSize / 2;
cover.addChild(sp);
reflect.x = -spSize / 2;
reflect.y = spSize / 2;
cover.addChild(reflect);
reflectGrad.x = reflect.x;
reflectGrad.y = reflect.y;
cover.addChild(reflectGrad);
return cover;
}
 
最初のimport文はTweener用です。

coverArrayは、表示するカバー(スプライト)の配列デス。一番下で定義しているcreateCoverメソッドでSpriteオブジェクトを生成しています。今回は、床面反射画像も同時に生成しています。
カバー画像を上下逆にした画像の上に黒のグラデーションを重ねて床面反射としています。

arrangeCoverメソッドが、カバーをクリックしたときに実行されるメソッドで、この中で位置調整やrotationYをしています。
指定されたインデックスより左のものは-90度、右のものは90度y軸を中心に回転するようTweenerを実行します。
実際にTweener#addTweenを実行するのは、arrangeCoverメソッド内で実行されているaddTweenメソッドです。
また、中心に近いものほど前面に表示したいのでaddChildしなおすことで重ね順を変えています。
スポンサーサイト

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

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

コメント

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

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

ブログ内検索


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