演示 Flex 3.0 中的转换状态及转换状态中的过度效果，自定义鼠标指针

1、演示 State 的应用
State.mxml

<?xml?version="1.0"?encoding="utf-8"?>
<mx:Panel?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute"?width="400"?height="300"
????title="State?(状态的应用)">

????<mx:states>
????????<mx:State?name="state2">???????????
???????????????<!--
???????????????????<mx:AddChild?/>?-?在指定的关联控件的指定位置新增指定的控件
???????????????????????relativeTo?-?关联的控件
???????????????????????position?-?在关联控件的指定位置增加控件
???????????????????????????关联控件为元素类型则此处可能的值为：before?或?after??
???????????????????????????关联控件为集合类型则此处可能的值为：firstChild?或?lastChild
???????????????????<mx:SetProperty?/>?-?设置指定控件的某属性的值
???????????????????<mx:RemoveChild?/>?-?移除指定的控件
???????????????-->
????????????<mx:AddChild?relativeTo="{form}"?position="lastChild">
????????????????<mx:FormItem?label="Label2:">
????????????????????<mx:TextInput/>
????????????????</mx:FormItem>
????????????</mx:AddChild>
????????????<mx:SetProperty?target="{panel}"?name="title"?value="状态2"/>
????????????<mx:RemoveChild?target="{toggle}"/>
??????????????????????
????????????<mx:AddChild?relativeTo="{bar}"?position="firstChild">
????????????????<!--
????????????????????设置状态为空，即转换到原始状态
????????????????-->
????????????????<mx:LinkButton?label="转换到状态1"?click="this.currentState=''"/>
????????????</mx:AddChild>
????????</mx:State>
????</mx:states>

????<!--
????????以下为?状态1?的?ui
????-->
????<mx:Panel?id="panel"?title="状态1">
????????
????????<mx:Form?id="form">
????????????<mx:FormItem?label="Label1:">
????????????????<mx:TextInput/>
????????????</mx:FormItem>
????????</mx:Form>
????????
????????<mx:ControlBar?id="bar">???????????????????
????????????<!--
????????????????ui?状态转换到名为?state2?的?<mx:State?/>
????????????-->
????????????<mx:LinkButton?id="toggle"?label="转换到状态2"?click="this.currentState='state2'"?/>
????????</mx:ControlBar>
????</mx:Panel>
????
</mx:Panel>

2、演示 State Transition 的应用
StateTransition.mxml

<?xml?version="1.0"?encoding="utf-8"?>
<mx:Panel?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute"?width="400"?height="300"
????title="State?Transition?(状态过渡的应用)">
????
????<mx:Script>
????????<![CDATA[
????????????
????????????import?mx.effects.easing.Bounce;
????????????
????????]]>
????</mx:Script>
????
????<!--
????????<mx:Transition?/>?-?用于设置状态转换间的过渡效果
????-->
????<mx:transitions>
????????<mx:Transition>
????????????<mx:Parallel?targets="{[panel,?toogleTo1,?toogleTo2,?formItem]}">
????????????????<mx:Resize?duration="500"?easingFunction="Bounce.easeOut"/>
????????????????<mx:Sequence?target="{formItem}">
????????????????????<mx:Blur?duration="200"?blurYFrom="1.0"?blurYTo="20.0"/>
????????????????????<mx:Blur?duration="200"?blurYFrom="20.0"?blurYTo="1"/>
?????????????????</mx:Sequence>
????????????</mx:Parallel>
????????</mx:Transition>
????</mx:transitions>
????
????<!--
????????以下关于状态转换的部分参见?State.mxml
????-->
????<mx:states>
????????<mx:State?name="state2">???????????
????????????<mx:AddChild?relativeTo="{form}"?position="lastChild">
????????????????<mx:FormItem?id="formItem"?label="Label2:">
????????????????????<mx:TextInput/>
????????????????</mx:FormItem>
????????????</mx:AddChild>
????????????
????????????<mx:SetProperty?target="{panel}"?name="title"?value="状态2"/>
???
????????????<mx:RemoveChild?target="{toogleTo2}"/>
??????????????????????
????????????<mx:AddChild?relativeTo="{bar}"?position="firstChild">
????????????????<mx:LinkButton?id="toogleTo1"?label="转换到状态1"?click="this.currentState=''"/>
????????????</mx:AddChild>
????????</mx:State>
????</mx:states>

????<mx:Panel?id="panel"?title="状态1">
????????
????????<mx:Form?id="form">
????????????<mx:FormItem?label="Label1:">
????????????????<mx:TextInput/>
????????????</mx:FormItem>
????????</mx:Form>
????????
????????<mx:ControlBar?id="bar">???????????????????
????????????<mx:LinkButton?id="toogleTo2"?label="转换到状态2"?click="this.currentState='state2'"?/>
????????</mx:ControlBar>
????</mx:Panel>
????
</mx:Panel>

3、演示如何自定义鼠标指针
Cursor.mxml

<?xml?version="1.0"?encoding="utf-8"?>
<mx:Panel?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute"?width="400"?height="300"
????title="Cursor?自定义鼠标指针">
????
??????<mx:Script>
????????<![CDATA[

????????????import?mx.managers.CursorManager;

????????????//?以?类?的形式引用内嵌资源。（另一种以字符串的形式引用内嵌资源的方式：@Embed('images/logo.png')）
????????????[Embed(source="images/logo.png")]
????????????private?var?customCursor:Class;??
????????????
????????????private?function?cursorChange(e:Event):void
????????????{
????????????????switch?(radioGroup.selectedValue)
????????????????{
????????????????????//?正常时候的鼠标指针
????????????????????case?"Normal"?:
????????????????????????CursorManager.removeAllCursors();
????????????????????????break;
????????????????????//?繁忙时，鼠标指针的样式
????????????????????case?"Busy"?:
????????????????????????CursorManager.removeAllCursors();
????????????????????????CursorManager.setBusyCursor();
????????????????????????break;
????????????????????//?自定义鼠标指针的样式
????????????????????case?"Custom"?:
????????????????????????CursorManager.removeAllCursors();????????????????????
????????????????????????CursorManager.setCursor(customCursor);
????????????????????default?:
????????????????????????break;
????????????????}
????????????}
????????????????????????
????????]]>
????</mx:Script>
????
????<mx:RadioButtonGroup?id="radioGroup"?change="cursorChange(event);"/>
????<mx:RadioButton?x="10"?y="10"?label="普通指针"?value="Normal"?groupName="radioGroup"?selected="true"/>
????<mx:RadioButton?x="10"?y="36"?label="繁忙指针"?value="Busy"?groupName="radioGroup"/>
????<mx:RadioButton?x="10"?y="62"?label="自定义指针"?value="Custom"?groupName="radioGroup"/>

</mx:Panel>

?