Flash10で3D回転とか
どうも最近、マクロスの影響か、円が回転することに楽しさを感じます。
こんな感じ
http://moeten.info/flex/20091202_circle3DTest/bin-release/main.html
すべてのソースはこちら。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #D2D2D2]" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.controls.Label; import mx.effects.easing.Linear; //初期化関数 private function init():void{ //パースペクティブの変更 var pp:PerspectiveProjection = new PerspectiveProjection(); //中心に設定 pp.projectionCenter = new Point( this.width/2 , this.height/2); pp.fieldOfView = 1; myScene.transform.perspectiveProjection = pp; //テキストをちりばめる var num:int = 5; for( var i:int = 0 ; i < num ; i ++ ){ var label:Label = new Label(); label.text = "CIRCLE"; label.alpha = 0.5; label.blendMode = "invert"; label.setStyle("fontSize" , "32"); label.x = Math.cos( i / num * Math.PI * 2) * 300 - label.width; label.z = Math.sin( i / num * Math.PI * 2) * 300; label.rotationY = - 360/num * i; myCanvas.addChild( label ); } for( i = 0 ; i < num ; i ++ ){ var label:Label = new Label(); label.text = "CIRCLE"; label.alpha = 0.5; label.blendMode = "invert"; label.setStyle("fontSize" , "32"); label.y = Math.cos( i / num * Math.PI * 2) * 300 - label.width; label.x = Math.sin( i / num * Math.PI * 2) * 300; label.rotationX = - 360/num * i; myCanvas.addChild( label ); } this.addEventListener(MouseEvent.MOUSE_MOVE , onMouseMove ); } private function onMouseMove( e:Event ):void{ myScene.rotationX = this.mouseY * 0.5; myScene.rotationY = this.mouseX * 0.5; } ]]> </mx:Script> <!--アニメ--> <mx:Parallel id="myAnim1"> <mx:AnimateProperty property="rotationY" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" duration="3000" repeatCount="0"/> <mx:Sequence repeatCount="0"> <mx:Glow blurXFrom="0" blurYFrom="0" blurXTo="24" blurYTo="24" alphaFrom="1" alphaTo="1" color="0xffd630" duration="1500"/> <mx:Glow blurXFrom="24" blurYFrom="24" blurXTo="0" blurYTo="0" alphaFrom="1" alphaTo="1" color="0xffd630" duration="1500"/> </mx:Sequence> </mx:Parallel> <mx:Parallel id="myAnim2"> <mx:AnimateProperty property="rotationZ" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" duration="3000" repeatCount="0"/> <mx:Sequence repeatCount="0"> <mx:Glow blurXFrom="0" blurYFrom="0" blurXTo="24" blurYTo="24" alphaFrom="1" alphaTo="1" color="0xffd630" duration="1500"/> <mx:Glow blurXFrom="24" blurYFrom="24" blurXTo="0" blurYTo="0" alphaFrom="1" alphaTo="1" color="0xffd630" duration="1500"/> </mx:Sequence> </mx:Parallel> <mx:Parallel id="myAnim3"> <mx:AnimateProperty property="rotationX" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" duration="3000" repeatCount="0"/> <mx:Sequence repeatCount="0"> <mx:Glow blurXFrom="0" blurYFrom="0" blurXTo="24" blurYTo="24" alphaFrom="1" alphaTo="1" color="0xffd630" duration="1500"/> <mx:Glow blurXFrom="24" blurYFrom="24" blurXTo="0" blurYTo="0" alphaFrom="1" alphaTo="1" color="0xffd630" duration="1500"/> </mx:Sequence> </mx:Parallel> <mx:Parallel id="myAnim4"> <mx:Rotate angleFrom="0" angleTo="360" duration="10000" easingFunction="Linear.easeInOut" repeatCount="0"/> </mx:Parallel> <mx:Parallel id="myAnim5"> <mx:AnimateProperty property="rotationY" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" duration="10000" repeatCount="0"/> <mx:AnimateProperty property="rotationX" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" duration="10000" repeatCount="0"/> </mx:Parallel> <!--3D--> <mx:Canvas id="myScene" clipContent="false" width="1" height="1" verticalCenter="0" horizontalCenter="0" > <mx:Canvas clipContent="false" width="1" height="1" verticalCenter="0" horizontalCenter="0" creationCompleteEffect="myAnim1"> <mx:Image id="myImage1" source="circle.png" verticalCenter="0" horizontalCenter="0"/> </mx:Canvas> <mx:Canvas clipContent="false" width="1" height="1" verticalCenter="0" horizontalCenter="0" creationCompleteEffect="myAnim2"> <mx:Image id="myImage2" source="circle.png" verticalCenter="0" horizontalCenter="0"/> </mx:Canvas> <mx:Canvas clipContent="false" width="1" height="1" verticalCenter="0" horizontalCenter="0" creationCompleteEffect="myAnim3"> <mx:Image id="myImage3" source="circle.png" verticalCenter="0" horizontalCenter="0"/> </mx:Canvas> <mx:Canvas clipContent="false" width="1" height="1" verticalCenter="0" horizontalCenter="0" creationCompleteEffect="myAnim4"> <mx:Image id="myImage4" source="circle2.png" verticalCenter="0" horizontalCenter="0" blendMode="add"/> </mx:Canvas> <mx:Canvas id="myCanvas" clipContent="false" width="1" height="1" verticalCenter="0" horizontalCenter="0" creationCompleteEffect="myAnim5"/> </mx:Canvas> </mx:Application>