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

[源码下载]

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

作者： 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
[源码下载]