キラッ☆っとアニメーション
11月21日にはマクロスフロンティアの劇場版公開ですね。
ってことでキラッ☆っとする3Dアニメーションを作ってみました。
こんな感じ
http://moeten.info/flex/20091107_kira3D/bin-release/main.html
今回のポイント
<mx:Canvas id="myCanvas" verticalCenter="0" horizontalCenter="0" width="1" height="1" clipContent="false"/>
clipContent="false" はキャンバスからはみ出た部分を切り取らないでそのまま表示できます。
verticalCenter="0" horizontalCenter="0" で画面の中央にオブジェクトを配置することができます。
#ある意味、上記の書き方でPaperVision3Dのシーン作成と同等になるので、覚えておくと便利かも?
すべてのソースコードはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" enterFrame="onTimer(event)" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFD7D7]" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.effects.Move; import mx.effects.Rotate; import mx.effects.easing.Back; import mx.effects.AnimateProperty; import mx.controls.Text; //初期化関数 private function init():void{ for( var i:int = 0 ; i <= 100 ; i ++ ){ //オブジェクト作成 var text:Text = new Text(); text.text = "★"; text.rotationX = Math.random()*100; text.rotationY = Math.random()*100; text.filters = [gf,dsf]; text.setStyle( "fontSize" , 30 ); text.setStyle( "color" , Math.random() * 0xffffff ); text.mouseEnabled = false; text.selectable = false; myCanvas.addChild( text ); //アニメーションの作成 var move:Move = new Move(); move.xFrom = 0; move.yFrom = 0; move.xTo = Math.random() * 1000 - 500; move.yTo = Math.random() * 1000 - 500; move.duration = 2000; move.easingFunction = Back.easeInOut move.play([text]); //z軸用にアニメーション作成 var anim:AnimateProperty = new AnimateProperty(); anim.property = "z"; anim.fromValue = 0; anim.toValue = Math.random() * 1000 - 500; anim.duration = 2000; anim.easingFunction = Back.easeInOut; anim.play([text]); } } //マウス位置でキャンバスを回転 private function onTimer(e:Event ):void{ myCanvas.rotationX = this.mouseY; myCanvas.rotationY = this.mouseX; } ]]> </mx:Script> <!--########### フィルター ###########--> <mx:DropShadowFilter id="dsf" blurX="6" blurY="6" distance="0" color="0xca00a2"/> <mx:GlowFilter id="gf" color="0xffffff" strength="10" blurX="4" blurY="4"/> <!--########### コンポーネント ###########--> <mx:Canvas id="myCanvas" verticalCenter="0" horizontalCenter="0" width="1" height="1" clipContent="false"/> </mx:Application>