Flexで簡単3Dアニメーション


Flexで簡単3Dアニメーションをやってみました。
こんな感じ
http://moeten.info/flex/20091106_text3D/bin-release/main.html
3Dアニメーションを使うときのコツですが、z座標とrotationXをAnimationPropertyを使って、アニメーションさせるとそれっぽいのができちゃいます。
ただ、通常ですと、回転ポイントがオブジェクトの左上になるので、Canvasなどを使って、回転ポイントをづらしてあげると、オブジェクトの真ん中から3D回転させることができます。
#Matrix3Dを使ってもいいと思うけどむずい・・・。
すべてのソースはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #D5D5D5]" viewSourceURL="srcview/index.html">
<!-- ################## アニメーション ################## -->
<mx:Parallel id="myAnim">
    <mx:AnimateProperty property="rotationX" fromValue="300" toValue="360" duration="2000"/>
    <mx:AnimateProperty property="rotationY" fromValue="300" toValue="360" duration="2000"/>
</mx:Parallel>
<mx:Parallel id="myAnim2">
    <mx:AnimateProperty property="z" toValue="20" duration="2000"/>
</mx:Parallel>
<mx:Fade id="myAnim3" alphaFrom="0" alphaTo="1" startDelay="2000" duration="1000" />
<!-- ################## フィルター ################## -->
<mx:GlowFilter id="gf" blurX="4" blurY="4" color="0xffffff" strength="10"/>
<mx:DropShadowFilter id="dsf" blurX="6" blurY="6" distance="0" alpha="0.5" />
<!-- ################## コンポーネント ################## -->
<mx:Canvas id="myCanvas" x="300" y="299" width="600" height="600" clipContent="false" creationCompleteEffect="myAnim">
    <mx:Canvas width="500" height="300" x="-150" y="-150"
        backgroundAlpha="0.2" backgroundColor="0xffffff" filters="{[gf,dsf]}"
        cornerRadius="10" borderStyle="solid" borderThickness="3" borderColor="#D4D4D4"/>
    <mx:Label x="-130" y="-140" text="TITLE" fontSize="26"
        z="-100" creationCompleteEffect="myAnim2" filters="{[gf,dsf]}"/>
    <mx:Label x="-130" y="-100" text="XXXXXXXXXXXXXXXXXXX"
        fontSize="26" z="-120" creationCompleteEffect="myAnim2" filters="{[gf,dsf]}"/>
    <mx:Label x="-130" y="-70" text="XXXXXXXXXXXXXXXXXXX"
        fontSize="26" z="-180" creationCompleteEffect="myAnim2" filters="{[gf,dsf]}"/>
    <mx:Image x="-130" y="-20" source="@Embed('240317_2911725223.jpg')"
        z="-100" creationCompleteEffect="myAnim2" filters="{[gf,dsf]}"/>
    <mx:Button x="204" y="81" label="ボタン" width="114" height="43"
        creationCompleteEffect="myAnim3" alpha="0" filters="{[gf,dsf]}"/>
</mx:Canvas>
</mx:Application>