簡単なトランジションをFlexでしてみた
こんな感じ
なんか何度か再生するとOSごと落ちる・・。Windows7 64bitだからなのかなぁ。
もちっと調べてみます。
XPだと問題ないでっす。
http://moeten.info/flex/20091123_maskTest/bin-release/main.html
今回はFlexのRepeaterを使用して、スプライトを複数一度に配置し、アニメーションさせています。
あとアニメーションクラスのIrisは星でマスキングしたりできるので、かなり楽しいです。
参考リンク
星型にIrisする
http://moeten.info/flex/20080716_maskTest/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, #D4D4D4]" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import flash.net.navigateToURL; import mx.effects.easing.*; [Bindable]private var dp:Array = new Array(); //init private function init():void{ for( var i:int = 0 ; i < 100; i++ ){ dp.push(i); } rep.dataProvider = dp; } //iris star sprite private function createLargeMask(targ:Object, bounds:Rectangle):Shape{ var star:PolyStar = new PolyStar( 200 ); return star; } ]]> </mx:Script> <!--anime--> <mx:Sequence id="myAnim"> <mx:Parallel> <mx:Move xFrom="200" xTo="0" yFrom="200" yTo="0" easingFunction="Back.easeInOut" duration="2000"/> <mx:Rotate angleFrom="360" angleTo="0" easingFunction="Back.easeInOut" duration="2000"/> </mx:Parallel> <mx:Zoom startDelay="1000" zoomHeightFrom="0" zoomHeightTo="1" zoomWidthFrom="0" zoomWidthTo="1" duration="2000" easingFunction="Bounce.easeInOut"/> <mx:Iris startDelay="1000" scaleEasingFunction="Back.easeInOut" duration="2000"/> <mx:WipeLeft startDelay="1000" scaleEasingFunction="Back.easeInOut" duration="2000"/> <mx:Parallel> <mx:AnimateProperty startDelay="1000" property="rotationX" fromValue="0" toValue="360" easingFunction="Back.easeInOut" duration="2000"/> <mx:AnimateProperty startDelay="1000" property="rotationY" fromValue="0" toValue="360" easingFunction="Back.easeInOut" duration="2000"/> </mx:Parallel> <mx:Iris startDelay="1000" createMaskFunction="createLargeMask" duration="2000" moveEasingFunction="Back.easeInOut" scaleEasingFunction="Back.easeInOut" /> </mx:Sequence> <!--filter--> <mx:DropShadowFilter id="dsf" blurX="12" blurY="12" color="0x000000" distance="0"/> <mx:GlowFilter id="gf" blurX="4" blurY="4" color="0xffffff" strength="10"/> <!--image--> <mx:Image id="myImage" source="@Embed('image.jpg')" cacheAsBitmap="true" mask="{myOut}" width="800" height="600" filters="{[gf,dsf]}" verticalCenter="0" horizontalCenter="0"/> <!--mask--> <mx:Tile width="802" height="602" x="{myImage.x}" y="{myImage.y}" id="myOut" cacheAsBitmap="true" clipContent="false" horizontalGap="0" verticalGap="0"> <mx:Repeater id="rep"> <!--mask sprite--> <mx:Canvas width="80" height="60" cacheAsBitmap="true" clipContent="false" verticalScrollPolicy="off" horizontalScrollPolicy="off"> <mx:Canvas width="80" height="60" clipContent="false" cacheAsBitmap="true" creationCompleteEffect="myAnim" backgroundAlpha="1" backgroundColor="0xffffff"/> </mx:Canvas> </mx:Repeater> </mx:Tile> <!--title & sig--> <mx:LinkButton x="624" y="848" label="Presented by komugi" color="#929292" bottom="10" horizontalCenter="0"/> <mx:Label text="Mask Test" fontSize="36" fontStyle="italic" fontWeight="bold" x="228" y="782" left="10" top="10" click="navigateToURL(new URLRequest('http://d.hatena.ne.jp/haru-komugi/'))"/> </mx:Application>