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>