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

簡単なトランジションをFlexでしてみた

Flex ActionScript3.0

こんな感じ
なんか何度か再生すると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>