11.2.为进入和离开States创建Transitions
11.2.1. 问题
我想创建一个特效，当进入或退出state 时进行播放
11.2.2. 解决办法
使用Transitions 对象，设置其fromState 和toState 属性。
11.2.3. 讨论
一个transition 就是一个特效或一系列特效。Transition 对象给出了fromState 和toState 属性定义何时播放。fromState 和toState 属性及可以是特定的states 或通配符(*)。
有几个方法创建Transition 对象，添加一个特效到组件，绑定Transition 的effect 属性到特效。
下面的代码定义了一个Transition，其effect 属性绑定到id 为glow 的特效上。
就像State 那样，一个Transition 对象定义被执行的行为。该行为需要一个目标，但是这个目标并不是Tansition 本身的一部分。你可以在Transition 中添加SetPropertyStyle 或SetPropertyAction 来改变样式或当前组件的子组件属性如height 或width 等：
使用SetStyleAction 时Transition 将设置目标组件的style 属性：
下面的代码创建三个States，定义Transition 对象在各个states 之间切换：
这里定义了多个Transition 对象，设置了fromState 和toState 属性，指示何时播放：
我想创建一个特效，当进入或退出state 时进行播放
11.2.2. 解决办法
使用Transitions 对象，设置其fromState 和toState 属性。
11.2.3. 讨论
一个transition 就是一个特效或一系列特效。Transition 对象给出了fromState 和toState 属性定义何时播放。fromState 和toState 属性及可以是特定的states 或通配符(*)。
有几个方法创建Transition 对象，添加一个特效到组件，绑定Transition 的effect 属性到特效。
下面的代码定义了一个Transition，其effect 属性绑定到id 为glow 的特效上。
+展开
-XML
<mx:Transition id="thirdTrans" fromState="edit" toState="show" effect="{glow}"/>
就像State 那样，一个Transition 对象定义被执行的行为。该行为需要一个目标，但是这个目标并不是Tansition 本身的一部分。你可以在Transition 中添加SetPropertyStyle 或SetPropertyAction 来改变样式或当前组件的子组件属性如height 或width 等：
+展开
-XML
<mx:Transition id="firstTrans" fromState="show" toState="edit">
<mx:SetPropertyAction target="{holder}" name="alpha" value="0"/>
</mx:Transition>
<mx:SetPropertyAction target="{holder}" name="alpha" value="0"/>
</mx:Transition>
使用SetStyleAction 时Transition 将设置目标组件的style 属性：
+展开
-XML
<mx:Transition id="secondTrans" fromState="*" toState="upload">
<mx:SetStyleAction target="{holder}" name="backgroundColor" value="#ff0000"/>
</mx:Transition>
<mx:SetStyleAction target="{holder}" name="backgroundColor" value="#ff0000"/>
</mx:Transition>
下面的代码创建三个States，定义Transition 对象在各个states 之间切换：
+展开
-XML
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" currentState="show">
<mx:Script>
<![CDATA[
[Bindable]
private var _imgURL:String;
[Bindable]
private var _title:String;
]]>
</mx:Script>
<mx:Glow blurXTo="20" blurYTo="20" duration="1000"
color="0xffff00" id="glow" target="{holder}"/>
<mx:Glow blurXTo="25" blurYTo="25" duration="1000"
color="0xffffff" id="fade" target="{holder}"/>
<mx:Script>
<![CDATA[
[Bindable]
private var _imgURL:String;
[Bindable]
private var _title:String;
]]>
</mx:Script>
<mx:Glow blurXTo="20" blurYTo="20" duration="1000"
color="0xffff00" id="glow" target="{holder}"/>
<mx:Glow blurXTo="25" blurYTo="25" duration="1000"
color="0xffffff" id="fade" target="{holder}"/>
这里定义了多个Transition 对象，设置了fromState 和toState 属性，指示何时播放：
+展开
-XML
<mx:transitions>
<mx:Transition id="firstTrans" fromState="show"
toState="edit">
<mx:SetPropertyAction target="{holder}" name="alpha"
value="0"/>
</mx:Transition>
<mx:Transition id="secondTrans" fromState="*"
toState="upload">
<mx:SetStyleAction target="{holder}"
name="backgroundColor" value="#ff0000"/>
</mx:Transition>
<mx:Transition id="thirdTrans" fromState="edit"
toState="show" effect="{glow}"/>
<mx:Transition id="fifthTrans" fromState="upload"
toState="*" effect="{fade}"/>
</mx:transitions>
<mx:states>
<mx:State/>
<mx:State name="show">
<mx:AddChild relativeTo="{holder}">
<mx:HBox>
<mx:Label text="{_title}"/>
<mx:Image source="{_imgURL}"/>
</mx:HBox>
</mx:AddChild>
</mx:State>
<mx:State name="edit" exitState="_title = input.text;">
<mx:AddChild relativeTo="{holder}">
<mx:HBox>
<mx:TextInput id="input" text="{_title}"/>
</mx:HBox>
</mx:AddChild>
</mx:State>
<mx:State name="upload">
<mx:AddChild relativeTo="{holder}">
<mx:HBox>
<mx:Button label="start upload"/>
</mx:HBox>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:ComboBox dataProvider="{[''show', 'edit', 'upload']}"
change="{this.currentState = cb.selectedItem as String}"
id="cb"/>
<mx:Canvas id="holder"/>
</mx:HBox>
<mx:Transition id="firstTrans" fromState="show"
toState="edit">
<mx:SetPropertyAction target="{holder}" name="alpha"
value="0"/>
</mx:Transition>
<mx:Transition id="secondTrans" fromState="*"
toState="upload">
<mx:SetStyleAction target="{holder}"
name="backgroundColor" value="#ff0000"/>
</mx:Transition>
<mx:Transition id="thirdTrans" fromState="edit"
toState="show" effect="{glow}"/>
<mx:Transition id="fifthTrans" fromState="upload"
toState="*" effect="{fade}"/>
</mx:transitions>
<mx:states>
<mx:State/>
<mx:State name="show">
<mx:AddChild relativeTo="{holder}">
<mx:HBox>
<mx:Label text="{_title}"/>
<mx:Image source="{_imgURL}"/>
</mx:HBox>
</mx:AddChild>
</mx:State>
<mx:State name="edit" exitState="_title = input.text;">
<mx:AddChild relativeTo="{holder}">
<mx:HBox>
<mx:TextInput id="input" text="{_title}"/>
</mx:HBox>
</mx:AddChild>
</mx:State>
<mx:State name="upload">
<mx:AddChild relativeTo="{holder}">
<mx:HBox>
<mx:Button label="start upload"/>
</mx:HBox>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:ComboBox dataProvider="{[''show', 'edit', 'upload']}"
change="{this.currentState = cb.selectedItem as String}"
id="cb"/>
<mx:Canvas id="holder"/>
</mx:HBox>
加支付宝好友偷能量挖...
