積少成多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