gotoAndLearn() の新しいサンプルを試した。
3D Photo Panels – Learn how to create a nice 3D hover and scale effect using the new features in Flash Player 10.
6枚の画像をマウスにあわせて3D回転させるサンプル。
回転アニメーションにTweenLiteを使う。
クリックされた画像が拡大される。
画像を1枚にし、クリックされた画像が拡大されるを無しで作ってみた。
demo : require Flash Plaer 10 above
Flash Player 10 から使える z プロパティって便利だな。
TweenEngine の使い方が参考になった。
単純な3Dもどきな動きなら3Dライブラリはいらないんだね。
package { import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.display.Sprite; import gs.TweenLite; import gs.easing.*; [SWF(width='700', height='500', backgroundColor='#000000', frameRate='60')] public class Rotate3D extends Sprite { [Embed(source="aviation.png")] private var Aviation:Class; public function Rotate3D() { super(); stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var avi:* = new Aviation(); avi.x -= avi.width/2; avi.y -= avi.height/2; _s = new Sprite(); addChild(_s); _s.addChild(avi); _s.x = stage.stageWidth / 2; _s.y = stage.stageHeight / 2; _s.z = 250; stage.addEventListener( Event.ENTER_FRAME, enterFrameHandler ); } private function enterFrameHandler(event:Event):void { var distX:Number = mouseX / stage.stageWidth; var distY:Number = mouseY / stage.stageHeight; var moveV:Number = 70; TweenLite.to(_s, 2, { rotationY:(-moveV + (2*moveV*distX)) ,rotationX:(moveV - (2*moveV*distY)) ,ease:Expo.easeOut }); } private var _s : Sprite; } } |
moveV に設定する数値が動きを決定する。
大きくすると動きは速くなりたくさん回転するようになる。
制作は TextMate + Flex SDK 3.3 でしました。
コンパイルするものを作るときはプロジェクトを作って制作をすると楽なことが分かった。