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

マクロスっぽいちょっとした演出

Flex

最近ちとマクロスFにハマっているのでせっかくなのでFlashでも作れないかなぁってことで遊んでます。
こんな感じ
http://moeten.info/flex/20091204_macrossEffects/bin-release/main.html

ただ、うにょーんって出てくるだけなんだけどね
Flash10だけでも、結構遊べるよってサンプルです。
マクロスFな動画

すべてのソースはこちら。
特に新しいことはしてないでっす。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundAlpha="1" backgroundGradientAlphas="[1,1]" backgroundGradientColors="[#000000, #848484]"
    creationComplete="init()"
     viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.effects.easing.Back;
import mx.effects.Resize;
private function init():void{
    //パースペクティブの変更
    var pp:PerspectiveProjection = new PerspectiveProjection();
    //中心に設定
//    pp.projectionCenter = new Point( this.width/2 , this.height/2);
//    pp.fieldOfView = 1;
//    myCanvas.transform.perspectiveProjection = pp;
    for( var i:int = 0 ; i < 30; i ++ ){
        var canvas:Canvas = new Canvas();
        canvas.width = 30;
        canvas.height = 0;
        canvas.setStyle( "backgroundColor" , "0xd87f00" );
        canvas.x = 40 * i -200 ;
        canvas.y = -100 ;
        canvas.alpha = 0.5;
        canvas.rotationX = 90;
        canvas.filters = [gf2,gf];
        myCanvas.addChild( canvas );
        var resize:Resize = new Resize();
        resize.heightFrom = 0;
        resize.heightTo = 60;
        resize.easingFunction = Back.easeInOut;
        resize.duration = 500;
        resize.startDelay = i * 100;
        resize.play([canvas]);
    }
    for( var i:int = 0 ; i < 30; i ++ ){
        var canvas:Canvas = new Canvas();
        canvas.width = 30;
        canvas.height = 0;
        canvas.setStyle( "backgroundColor" , "0xd87f00" );
        canvas.x = 40 * i  -200 ;
        canvas.rotationX = 90;
        canvas.y = 100 ;
        canvas.alpha = 0.5;
        canvas.filters = [gf2,gf];
        myCanvas.addChild( canvas );
        var resize:Resize = new Resize();
        resize.heightFrom = 0;
        resize.heightTo = 60;
        resize.easingFunction = Back.easeInOut;
        resize.duration = 500;
        resize.startDelay = i * 100;
        resize.play([canvas]);
    }
    this.addEventListener(Event.ENTER_FRAME , onTimer );
    myCanvas.rotationX = 437;
    myCanvas.rotationY = 638;
}
private var i:int = 0;
private function onTimer(e:Event):void{
    i++;
    myLog.text = ""+ i;
    myCanvas.rotationX += .2;
    myCanvas.rotationY += .3;
    myCanvas.scaleX += 0.03;
    myCanvas.scaleY += 0.02;
//    myCanvas.rotationX = this.mouseY;
//    myCanvas.rotationY = this.mouseX;
//    myLog.text = "" + this.mouseX +  "," +  this.mouseY;
}
import mx.effects.easing.*;
]]>
</mx:Script>
<mx:GlowFilter id="gf" color="0xfff94f" blurX="8" blurY="8" alpha="1" />
<mx:GlowFilter id="gf2" color="0xffffff" blurX="4" blurY="4" alpha="1"  strength="10" />
<mx:Parallel id="myAnim">
    <mx:Zoom zoomHeightFrom="0" zoomHeightTo="0.4" zoomWidthFrom="0" zoomWidthTo="0.4" duration="2000" easingFunction="Back.easeInOut"/>
    <mx:AnimateProperty property="rotationY" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" duration="1000"  repeatCount="0"/>
</mx:Parallel>
<mx:Parallel id="myAnim2">
    <mx:Zoom zoomHeightFrom="0" zoomHeightTo="1" duration="1000" easingFunction="Back.easeInOut"/>
</mx:Parallel>
<mx:Canvas id="myCanvas" width="1" height="1" backgroundColor="0xffffff" x="{this.width/2}" y="{this.height/2}" clipContent="false">
    <mx:Canvas clipContent="false" width="1" height="1" x="-100"  rotationX="90" creationCompleteEffect="myAnim" rotationZ="90" >
        <mx:Image id="star" source="star.png" horizontalCenter="0" verticalCenter="0" alpha="0.5"/>
    </mx:Canvas>
        <mx:Canvas clipContent="false" width="1" height="1" x="-0"   rotationX="90" creationCompleteEffect="myAnim" rotationZ="90" >
        <mx:Image  source="star.png" horizontalCenter="0" verticalCenter="0" x="0" alpha="0.5" />
    </mx:Canvas>
    <mx:Canvas clipContent="false" width="1" height="1" x="100"  rotationX="90" creationCompleteEffect="myAnim" rotationZ="90" >
        <mx:Image  source="star.png" horizontalCenter="0" verticalCenter="0" x="0" alpha="0.5" />
    </mx:Canvas>
    <mx:Canvas clipContent="false" width="1" height="1" x="200"  rotationX="90" creationCompleteEffect="myAnim" rotationZ="90" >
        <mx:Image  source="star.png" horizontalCenter="0" verticalCenter="0" x="0" alpha="0.5"/>
    </mx:Canvas>
    <mx:Canvas clipContent="false" width="1" height="1" x="300"  rotationX="90" creationCompleteEffect="myAnim" rotationZ="90" >
        <mx:Image  source="star.png" horizontalCenter="0" verticalCenter="0" x="0"  alpha="0.5"/>
    </mx:Canvas>
    <mx:Canvas y="-400" width="2000" height="400" backgroundAlpha="0.4" creationCompleteEffect="myAnim2"
        backgroundColor="0xffffff" borderThickness="2" borderStyle="solid" borderColor="0xffaa4f" verticalCenter="0" horizontalCenter="0"/>
</mx:Canvas>
<mx:TextArea id="myLog"/>
</mx:Application>