読者です 読者をやめる 読者になる 読者になる

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>