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

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

​​[索引页]​​

​​[源码下载]​​

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

作者：​​webabcd​​

介绍

演示 Flex 3.0 中的转换状态及转换状态中的过度效果，自定义鼠标指针 

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

在线DEMO

​​

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

​​[源码下载]​​