积少成多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
[源码下载]
posted @ 2009-11-11 13:27  webabcd  阅读(5091)  评论(2编辑  收藏  举报