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

Flex中ViewStack使用Efflex特效_Flex ViewStack特效

代码：

 

  1. <?xml version="1.0"?> 
  2. <!-- Simple example to demonstrate the ViewStack layout container. --> 
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  4.                 xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*" 
  5.                 > 
  6.      
  7.     <!-- 幻灯片效果 --> 
  8.     <viewStackEffects:Slide direction="down" id="effect_down"/> 
  9.     <viewStackEffects:Slide direction="up" id="effect_up"/> 
  10.      
  11.     <mx:Panel title="ViewStack Container Example" height="95%" width="95%"  
  12.               paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> 
  13.          
  14.         <mx:Text width="100%" color="blue" 
  15.                  text="Use the Button controls to change panels of the ViewStack container."/> 
  16.          
  17.         <mx:HBox borderStyle="solid" width="100%" 
  18.                  paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"> 
  19.              
  20.             <mx:Button id="searchButton" label="Search Panel" 
  21.                        click="myViewStack.selectedChild=search;"/> 
  22.             <mx:Button id="cInfoButton" label="Customer Info Panel" 
  23.                        click="myViewStack.selectedChild=custInfo;"/> 
  24.             <mx:Button id="aInfoButton" label="Account Panel" 
  25.                        click="myViewStack.selectedChild=accountInfo;"/> 
  26.         </mx:HBox> 
  27.          
  28.         <!-- Define the ViewStack and the three child containers and have it 
  29.         resize up to the size of the container for the buttons. --> 
  30.         <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%"> 
  31.              
  32.             <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%" showEffect="effect_up" hideEffect="effect_down"> 
  33.                 <mx:Label text="Search Screen" color="#000000"/> 
  34.             </mx:Canvas> 
  35.              
  36.             <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%" showEffect="effect_up" hideEffect="effect_down"> 
  37.                 <mx:Label text="Customer Info" color="#000000"/> 
  38.             </mx:Canvas> 
  39.              
  40.             <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%" showEffect="effect_up" hideEffect="effect_down"> 
  41.                 <mx:Label text="Account Info" color="#000000"/> 
  42.             </mx:Canvas> 
  43.         </mx:ViewStack> 
  44.          
  45.     </mx:Panel> 
  46. </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