PHP,MySQL,Flexな日々＋イラストとか

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

Flex | 00:28 |

最近ちとマクロスＦにハマっているのでせっかくなのでFlashでも作れないかなぁってことで遊んでます。

こんな感じ

http://moeten.info/flex/20091204_macrossEffects/bin-release/main.html

ただ、うにょーんって出てくるだけなんだけどね

Flash10だけでも、結構遊べるよってサンプルです。

マクロスＦな動画

すべてのソースはこちら。

特に新しいことはしてないでっす。

<?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>

ツイートする