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

[源码下载]

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

作者：webabcd

介绍
演示 Flex 3.0 中的转换状态及转换状态中的过度效果，自定义鼠标指针 
状态转换(State) - 对 UI 状态，以某一种编程模型做转换 
状态转换的过渡效果(State Transition) - 设置 UI 状态的转换过程中的过渡效果 
自定义鼠标指针 - 对鼠标指针的样式做自定义设置

在线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 (状态的应用)">




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



OK
[源码下载]