Flash10でライブラリ無しでFlip3Dアニメーションを行う方法
Flash10で中心からコンポーネントを回転することができることが分かったので、せっかくなのでフリップしてみました。
こんな感じ
http://moeten.info/flex/20091109_flip3D/bin-release/main.html
#rotationを行うと文字がぼやけるのはなんとかならないのかなぁ。
すべてのソースはこちら
<?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, #E6E6E6]"> <mx:Script> <![CDATA[ import mx.effects.easing.Back; ]]> </mx:Script> <!--アニメーション--> <mx:Sequence id="form2finishAnim" target="{myCanvas}"> <!-- rotationYが90度になったらBページへ切り替える --> <mx:AnimateProperty property="rotationY" fromValue="0" toValue="90" easingFunction="Back.easeIn" duration="500" effectEnd="{viewstack1.selectedIndex = viewstack1.selectedIndex ? 0:1; }"/> <mx:AnimateProperty property="rotationY" fromValue="-90" toValue="0" easingFunction="Back.easeOut" duration="500"/> </mx:Sequence> <!-- タイトル --> <mx:Label x="10" y="10" text="Flip 3D on Flash 10" fontSize="80" letterSpacing="0" fontWeight="bold" fontStyle="italic" color="#888888"/> <!-- フリップさせるコンポーネント --> <mx:Canvas id="myCanvas" width="1" height="1" clipContent="false" y="254" x="212"> <!-- ViewStackを使うと表示の切り替えがラクチンです。 --> <mx:ViewStack verticalCenter="0" horizontalCenter="0" id="viewstack1" clipContent="false" creationPolicy="all"> <!-- Aページ --> <mx:Canvas backgroundAlpha="0.5" backgroundColor="0xffffff" borderColor="0xffccff" borderStyle="solid" borderThickness="3" dropShadowEnabled="true" cornerRadius="10"> <mx:Image x="10" y="10" width="318" height="68"/> <mx:Form x="10" y="86" width="318" height="326"> <mx:FormHeading label="見出し"/> <mx:FormItem label="ラベル"> <mx:TextInput width="239"/> </mx:FormItem> <mx:FormItem label="ラベル"> <mx:TextArea width="240" height="157"/> </mx:FormItem> <mx:FormItem label="ラベル"> <mx:Button label="Click Me" width="140" height="55" click="{form2finishAnim.play();}"/> </mx:FormItem> </mx:Form> </mx:Canvas> <!-- Bページ --> <mx:Canvas backgroundAlpha="0.5" backgroundColor="0xffccff" borderColor="0xffccff" borderStyle="solid" borderThickness="3" dropShadowEnabled="true" cornerRadius="10"> <mx:Label x="84" y="90" text="ラベル"/> <mx:Image x="84" y="37"/> <mx:Button x="72" y="126" label="Click Me" click="{form2finishAnim.reverse();form2finishAnim.play();}"/> </mx:Canvas> </mx:ViewStack> </mx:Canvas> </mx:Application>