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