积少成多Flash(10) -电脑资料

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

介绍

演示 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;
              // 以 类 的形式引用内嵌资源，
积少成多Flash(10)
，
电脑资料
《积少成多Flash(10)》(https://www.unjs.com)。（另一种以字符串的形式引用内

嵌资源的方式：@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