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

Flash10でライブラリ無しでFlip3Dアニメーションを行う方法

Flex Flash10


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>