as3 carousel effect

flash 旋轉木馬的效果有很多方式可以實做出來，
從早期用  2D 的方式去模擬，
到後來用 pv3d or away3d 很多 3D framework 都可以辦到。

本篇文章用 flash 內建的 3D 功能來實做，

大概說明一下，
flash 3D 座標系，Z軸愈往螢幕愈大。

弧度，圓一圈為 Math.PI * 2
anglePer = (Math.PI * 2) / NUM_ITEMS;

從弧度推算 x/z，將物件依序排列
angle = i * anglePer;
mc.x = Math.cos(angle) * RADIU_X;
mc.z = Math.sin(angle) * RADIU_Z;

設定排在最前面的物件 z=0
container.z = RADIU_Z;

沿 Y 軸旋轉 conainer
container.rotationY += SPEED;

物件也要跟著反轉(這樣物件才能面向使用者)
arrItems[i].rotationY -= SPEED;

因為 flash 3D 不支援 ZSort，只好自己處理
SimpleZSort3D.simpleZSort3DChildren(container, false);

透視變形，取得 root 顯示物件的透視投影設定以及變更 perspectiveProjection 屬性的
視野和投影中心屬性
projection = root.transform.perspectiveProjection
預設為 stage 中心
projection.projectionCenter = new Point(stage.stageWidth >> 1, stage.stageHeight >> 1 - 100);

因為我很懶，
接下來改用 TweenLite 幫忙處理轉動的部份
先計算轉動要花的時間
var dif:Number = clickid - currid;
if (dif != dif % (NUM_ITEMS >> 1)) {
  dif = (dif < 0) ? dif + NUM_ITEMS : dif - NUM_ITEMS;
}
dif = (dif < 0 ? -dif : dif);
var time:Number = dif * SPEED;
計算旋轉角度
rotY = degPer * (clickid - frontid);

接下來就交給 TweenLite 處理
TweenMax.to(container, time, { shortRotation: { rotationY: rotY }} );
TweenMax.to(arrItems[i], time, { shortRotation:{rotationY: -rotY }} );

最後附上結果圖，

完整 code 如下。