states:应用程序或组件的布局
transitions:变换效果
设计步骤:
1、设计基础状态
2、添加并设置视图状态
3、定义状态间的转换方法
4、创建并绑定变换
Demo:
<?
xml version
=
"
1.0
"
encoding
=
"
utf-8
"
?>
< mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml " layout = " absolute " >
<!-- 定义新的状态集,包括多个State -->
< mx:states >
< mx:State name = " Advanced " >
< mx:AddChild relativeTo = " {panel1} " position = " lastChild " >
< mx:VBox x = " 20 " y = " 160 " width = " 160 " height = " 80 " id = " myVBox " >
< mx:CheckBox label = " Regular Expression " />
< mx:CheckBox label = " Case Sensitive " />
< mx:CheckBox label = " Exact Phrase " />
</ mx:VBox >
</ mx:AddChild >
<!-- 为LinkButton关联事件,改变状态,即恢复的原始状态 -->
< mx:SetEventHandler target = " {linkbutton1} " name = " click " handler = " currentState="" " />
</ mx:State >
</ mx:states >
<!-- 定义变换效果集,包括多个变换Transition -->
< mx:transitions >
< mx:Transition id = " myTransition " fromState = " * " toState = " Advanced " >
<!-- 并行效果 -->
< mx:Parallel target = " {myVBox} " >
< mx:WipeDown duration = " 2000 " />
< mx:Dissolve alphaFrom = " 0.0 " alphaTo = " 1.0 " duration = " 2000 " />
</ mx:Parallel >
</ mx:Transition >
</ mx:transitions >
< mx:Panel x = " 5 " y = " 5 " width = " 300 " height = " 400 " layout = " absolute " id = " panel1 " title = " View States " >
< mx:Label x = " 20 " y = " 70 " text = " Search " />
< mx:TextInput x = " 20 " y = " 90 " />
< mx:Button x = " 185 " y = " 90 " label = " Go " />
<!-- 通过LinkButton的click事件改变状态,进入Advanced状态 -->
< mx:LinkButton x = " 20 " y = " 120 " label = " AdvancedOption " click = " currentState="Advanced" " id = " linkbutton1 " />
</ mx:Panel >
</ mx:Application >
< mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml " layout = " absolute " >
<!-- 定义新的状态集,包括多个State -->
< mx:states >
< mx:State name = " Advanced " >
< mx:AddChild relativeTo = " {panel1} " position = " lastChild " >
< mx:VBox x = " 20 " y = " 160 " width = " 160 " height = " 80 " id = " myVBox " >
< mx:CheckBox label = " Regular Expression " />
< mx:CheckBox label = " Case Sensitive " />
< mx:CheckBox label = " Exact Phrase " />
</ mx:VBox >
</ mx:AddChild >
<!-- 为LinkButton关联事件,改变状态,即恢复的原始状态 -->
< mx:SetEventHandler target = " {linkbutton1} " name = " click " handler = " currentState="" " />
</ mx:State >
</ mx:states >
<!-- 定义变换效果集,包括多个变换Transition -->
< mx:transitions >
< mx:Transition id = " myTransition " fromState = " * " toState = " Advanced " >
<!-- 并行效果 -->
< mx:Parallel target = " {myVBox} " >
< mx:WipeDown duration = " 2000 " />
< mx:Dissolve alphaFrom = " 0.0 " alphaTo = " 1.0 " duration = " 2000 " />
</ mx:Parallel >
</ mx:Transition >
</ mx:transitions >
< mx:Panel x = " 5 " y = " 5 " width = " 300 " height = " 400 " layout = " absolute " id = " panel1 " title = " View States " >
< mx:Label x = " 20 " y = " 70 " text = " Search " />
< mx:TextInput x = " 20 " y = " 90 " />
< mx:Button x = " 185 " y = " 90 " label = " Go " />
<!-- 通过LinkButton的click事件改变状态,进入Advanced状态 -->
< mx:LinkButton x = " 20 " y = " 120 " label = " AdvancedOption " click = " currentState="Advanced" " id = " linkbutton1 " />
</ mx:Panel >
</ mx:Application >
Result: