Flex中ViewStack使用Efflex特效

先看效果：（录制问题，实际效果要比图片上的流畅）

代码：

 

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ViewStack layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*"
                >

    <!-- 幻灯片效果 -->
    <viewStackEffects:Slide direction="down" id="effect_down"/>
    <viewStackEffects:Slide direction="up" id="effect_up"/>

    <mx:Panel title="ViewStack Container Example" height="95%" width="95%"
              paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue"
                 text="Use the Button controls to change panels of the ViewStack container."/>

        <mx:HBox borderStyle="solid" width="100%"
                 paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

            <mx:Button id="searchButton" label="Search Panel"
                       click="myViewStack.selectedChild=search;"/>
            <mx:Button id="cInfoButton" label="Customer Info Panel"
                       click="myViewStack.selectedChild=custInfo;"/>
            <mx:Button id="aInfoButton" label="Account Panel"
                       click="myViewStack.selectedChild=accountInfo;"/>
        </mx:HBox>

        <!-- Define the ViewStack and the three child containers and have it
        resize up to the size of the container for the buttons. -->
        <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

            <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%" showEffect="effect_up" hideEffect="effect_down">
                <mx:Label text="Search Screen" color="#000000"/>
            </mx:Canvas>

            <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%" showEffect="effect_up" hideEffect="effect_down">
                <mx:Label text="Customer Info" color="#000000"/>
            </mx:Canvas>

            <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%" showEffect="effect_up" hideEffect="effect_down">
                <mx:Label text="Account Info" color="#000000"/>
            </mx:Canvas>
        </mx:ViewStack>

    </mx:Panel>
</mx:Application>

 

代码中的：org.efflex.mx.viewStackEffects.*

需要下载swc文件：http://code.google.com/p/efflex/downloads/list
效果页面：http://www.efflex.org/EfflexExplorer.html

Flex-ViewStack的官方详解：http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/mx/core/Container.html

如遇到实例化问题：请设置此组件的属性 creationPolicy="all"，请求参见组件的子代创建策略http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/mx/core/Container.html#creationPolicy