マクロスっぽいちょっとした演出
最近ちとマクロス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>