積少成多Flash(10) - Flex 3.0 狀態(tài)轉換(State), 狀態(tài)轉換的過渡效果(State Transition), 自定義鼠標指針
介紹
演示 Flex 3.0 中的轉換狀態(tài)及轉換狀態(tài)中的過度效果,自定義鼠標指針
狀態(tài)轉換(State) - 對 UI 狀態(tài),以某一種編程模型做轉換
狀態(tài)轉換的過渡效果(State Transition) - 設置 UI 狀態(tài)的轉換過程中的過 渡效果
自定義鼠標指針 - 對鼠標指針的樣式做自定義設置
在線DEMO
http://www.cnblogs.com/webabcd/archive/2009/11/09/1598980.html
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 (狀態(tài)的應用)"> <mx:states> <mx:State name="state2"> <!-- <mx:AddChild /> - 在指定的關聯(lián)控件的指定位置 新增指定的控件 relativeTo - 關聯(lián)的控件 position - 在關聯(lián)控件的指定位置增加控件 關聯(lián)控件為元素類型則此處可能的值為:before 或 after 關聯(lián)控件為集合類型則此處可能的值為: 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=" 狀態(tài)2"/> <mx:RemoveChild target="{toggle}"/> <mx:AddChild relativeTo="{bar}" position="firstChild"> <!-- 設置狀態(tài)為空,即轉換到原始狀態(tài) --> <mx:LinkButton label="轉換到狀態(tài)1" click="this.currentState=''"/> </mx:AddChild> </mx:State> </mx:states> <!-- 以下為 狀態(tài)1 的 ui --> <mx:Panel id="panel" title="狀態(tài)1"> <mx:Form. id="form"> <mx:FormItem label="Label1:"> <mx:TextInput/> </mx:FormItem> </mx:Form> <mx:ControlBar id="bar"> <!-- ui 狀態(tài)轉換到名為 state2 的 <mx:State /> --> <mx:LinkButton id="toggle" label="轉換到狀態(tài)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 (狀態(tài)過渡的應用)"> <mx:Script> <![CDATA[ import mx.effects.easing.Bounce; ]]> </mx:Script> <!-- <mx:Transition /> - 用于設置狀態(tài)轉換間的過渡效果 --> <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> <!-- 以下關于狀態(tài)轉換的部分參見 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=" 狀態(tài)2"/> <mx:RemoveChild target="{toogleTo2}"/> <mx:AddChild relativeTo="{bar}" position="firstChild"> <mx:LinkButton id="toogleTo1" label="轉換到狀態(tài)1" click="this.currentState=''"/> </mx:AddChild> </mx:State> </mx:states> <mx:Panel id="panel" title="狀態(tài)1"> <mx:Form. id="form"> <mx:FormItem label="Label1:"> <mx:TextInput/> </mx:FormItem> </mx:Form> <mx:ControlBar id="bar"> <mx:LinkButton id="toogleTo2" label="轉換到狀態(tài)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; // 以 類 的形式引用內(nèi)嵌資源,積少成多Flash(10)
,電腦資料
《積少成多Flash(10)》(http://www.ishadingyu.com)。(另一種以字符串的形式引用內(nèi) 嵌資源的方式:@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>
OK
來源: http://www.cnblogs.com/webabcd/archive/2009/11/11/1600874.html