spark下_3D翻转特效（一）

 

一．基本讲解

1.        将DistortionEffects.swc文件拷贝到lib文件夹中

2.        引入需要用到的类库xmlns:mxeffects="com.adobe.ac.mxeffects.*"

3.        在<fx:Declarations>标签中编写特效的代码段：

<mxeffects:CubeRotate

ü  Target：作用的对象id

ü  Siblings： 要跳转的界面的集合id

ü  Direction： 翻转的方向（LEFT,RIGHT,TOP,BOTTOM）

ü  Duration：翻转的时间num/>

4.        在作用的对象（ViewStack的子对象）中设置属性hideEffect= CubeRotate的id

二．源代码

<?xml version="1.0" encoding="utf-8"?>

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

                       xmlns:s="library://ns.adobe.com/flex/spark"

                       xmlns:mx="library://ns.adobe.com/flex/mx"

                       xmlns:_3dcomp="_3dcomp.*"

                       xmlns:mxeffects="com.adobe.ac.mxeffects.*"

                       width="466" height="370">

   

    <fx:Script>

        <![CDATA[

            protected function login1_changeHandler(event:Event):void

            {

                // TODO Auto-generated method stub

                viewstack1.selectedChild=two;

            }

            protected function regi1_changeHandler(event:Event):void

            {

                // TODO Auto-generated method stub

                viewstack1.selectedChild=one;  

            }

        ]]>

    </fx:Script>

   

    <fx:Declarations>

        <!-- 将非可视元素（例如服务、值对象）放在此处 -->

       

        <mxeffects:CubeRotate

            id="toTwo"

            target="{ one }" siblings="{ [ two ] }"

            direction="BOTTOM" duration="1000"/>

        <mxeffects:CubeRotate

            id="backToOne"

            target="{ two }" siblings="{ [ one ] }"

            direction="LEFT" duration="1000"/>

    </fx:Declarations>

    <mx:ViewStack id="viewstack1" width="322" height="300" horizontalCenter="0" verticalCenter="0">

        <s:NavigatorContent width="100%" height="100%" label="视图 1"  hideEffect="{toTwo}" id="one">

            <s:Panel left="5" right="5" top="5" bottom="5">

                <s:Button bottom="20" label="按钮" horizontalCenter="0" click="login1_changeHandler(event)"/>

                <s:Label fontSize="25" fontWeight="bold" horizontalCenter="0" text="第一个"

                         verticalCenter="0"/>

            </s:Panel>

        </s:NavigatorContent>

        <s:NavigatorContent width="100%" height="100%" label="er"   hideEffect="{backToOne}" id="two">

            <s:Panel left="5" right="5" top="5" bottom="5">

                <s:Button bottom="20" label="按钮" horizontalCenter="0" click="regi1_changeHandler(event)"/>

                <s:Label fontSize="25" fontWeight="bold" horizontalCenter="0" text="第二个"

                         verticalCenter="0"/>

            </s:Panel>

        </s:NavigatorContent>

    </mx:ViewStack>

</s:WindowedApplication>

三．预览