积少成多Flash(10) - Flex 3.0 状态转换(State), 状态转换的过渡效果(State Transition), 自定义鼠标指针

<?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>

<?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>

<?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>