■

簡単にFlexでアニメーションを作ってみた。
http://moeten.info/maidcafe/?m=baito
Flexでのアニメーションは以下のような感じで記述していきます。

<mx:Sequence id="model1anim">
    <mx:Parallel duration="700">
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:Move xFrom="-30" xTo="30" yFrom="-40" yTo="-50"/>
    </mx:Parallel>
    <mx:Parallel>
        <mx:Fade alphaFrom="1" alphaTo="0" duration="500"/>
    </mx:Parallel>
</mx:Sequence>

Sequenceは順番に実行で、Parallelは並行しで実行をします。
ソースコードはこんな感じ。
整理していないけど、Flexでもこういったアニメーションができます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     creationComplete="hts.send();"
     layout="absolute" width="715" height="288" backgroundGradientColors="[0xffffff,0xffffff]" backgroundColor="0xffffff">
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
]]>
</mx:Script>
<mx:Sequence id="model1anim">
    <mx:Parallel duration="700">
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:Move xFrom="-30" xTo="30" yFrom="-40" yTo="-50"/>
    </mx:Parallel>
    <mx:Parallel>
        <mx:Fade alphaFrom="1" alphaTo="0" duration="500"/>
    </mx:Parallel>
</mx:Sequence>
<mx:Sequence id="model2anim" startDelay="700">
    <mx:Parallel duration="700">
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:Move xFrom="30" xTo="-30" yFrom="-40" yTo="-50"/>
    </mx:Parallel>
    <mx:Parallel>
        <mx:Fade alphaFrom="1" alphaTo="0" duration="500"/>
    </mx:Parallel>
</mx:Sequence>
<mx:Sequence id="titleanim" startDelay="1400">
    <mx:Parallel>
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:Rotate originX="160" originY="30" angleFrom="0" angleTo="360" easingFunction="Back.easeInOut" duration="1000"/>
    </mx:Parallel>
</mx:Sequence>
<mx:Sequence id="model1aanim" startDelay="2800">
    <mx:Parallel>
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:Zoom zoomHeightFrom="0.2" zoomHeightTo="1" zoomWidthFrom="0.2" zoomWidthTo="1" originX="200" originY="200" easingFunction="Back.easeOut"/>
    </mx:Parallel>
</mx:Sequence>
<mx:Sequence id="model2aanim" startDelay="2400">
    <mx:Parallel>
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:Zoom zoomHeightFrom="0.2" zoomHeightTo="1" zoomWidthFrom="0.2" zoomWidthTo="1" originX="200" originY="200" easingFunction="Back.easeOut"/>
    </mx:Parallel>
</mx:Sequence>
<mx:Sequence id="bganim" startDelay="2900">
    <mx:Parallel>
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:WipeRight/>
    </mx:Parallel>
</mx:Sequence>
<mx:Sequence id="whitebordanim" startDelay="3700" effectEnd="{shopnum.visible = allnum.visible = monthnum.visible = yesterdaynum.visible = true;}">
    <mx:Parallel>
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:Iris/>
    </mx:Parallel>
</mx:Sequence>
<mx:Sequence id="nanoanim" startDelay="3500">
    <mx:Parallel>
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:Iris/>
    </mx:Parallel>
</mx:Sequence>
<mx:Sequence id="modelnameanim" startDelay="4000">
    <mx:Parallel>
        <mx:Fade alphaFrom="0" alphaTo="1"/>
        <mx:WipeLeft/>
    </mx:Parallel>
</mx:Sequence>
<mx:GlowFilter id="gf" blurX="4" blurY="4" strength="10" color="0xffffff"/>
<mx:DropShadowFilter id="dsf" blurX="4" blurY="4" distance="3" color="0xffccff"/>
<mx:HTTPService id="hts" url="http://moeten.info/maidcafe/?&amp;m=flex&amp;type=baitonum" resultFormat="e4x"/>
<mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off" x="0" y="0" width="100%" height="100%" borderColor="0xffccff" borderStyle="solid" borderThickness="3" cornerRadius="5">
    <mx:Image source="@Embed('bg.png')" creationCompleteEffect="bganim" alpha="0"/>
    <mx:Image id="model1" x="-27" y="-83" source="@Embed('model1.jpg')" creationCompleteEffect="model1anim" alpha="0"/>
    <mx:Image id="model2" x="-27" y="-83" source="@Embed('model2.jpg')" creationCompleteEffect="model2anim" alpha="0"/>
    <mx:Image x="204" y="-25" alpha="0" source="@Embed('model2a.png')" creationCompleteEffect="model2aanim"/>
    <mx:Image x="362" y="-57" alpha="0" source="@Embed('model1a.png')" creationCompleteEffect="model1aanim"/>
    <mx:Image alpha="0" x="414" y="260" source="@Embed('modelname.png')" creationCompleteEffect="modelnameanim"/>
    <mx:Image x="8" y="1" alpha="0" source="@Embed('nano.png')" creationCompleteEffect="nanoanim"/>
    <mx:Image x="8" y="154" alpha="0" source="@Embed('whitebord.png')" creationCompleteEffect="whitebordanim"/>
    <mx:Image id="titleimage" alpha="0" x="10" y="10" source="@Embed('title.PNG')" creationCompleteEffect="titleanim"/>
    <mx:Text x="204" y="166" fontSize="16" visible="false" id="shopnum" text="{hts.lastResult.shopnum}" filters="{[gf,dsf]}"/>
    <mx:Text x="204" y="190" fontSize="16" visible="false" id="allnum" text="{hts.lastResult.allnum}" filters="{[gf,dsf]}"/>
    <mx:Text x="204" y="214" fontSize="16" visible="false" id="monthnum" text="{hts.lastResult.monthnum}" filters="{[gf,dsf]}"/>
    <mx:Text x="204" y="238" fontSize="16" visible="false" id="yesterdaynum" text="{hts.lastResult.yesterdaynum}" filters="{[gf,dsf]}"/>
</mx:Canvas>
</mx:Application>