Question

如何做FLEX的悬浮窗口

Answer 1

Flex的行为机制使得开发者可以很方便地为应用程序添加动画效果，从而使用户界面更加丰富多彩。本章将介绍如何在Flex应用程序中创建行为及动画效果。
9.1 什么是行为
Flex中的行为（Behavior）是由触发器（Trigger）和效果（Effect）组合而成。当用户在界面中进行某项操作时，如单击某个按钮，触发器会被激活，从而使目标组件发生某些视觉或听觉上的变化，例如播放一段逐渐显示的动画或发出声响等。触发器可以由用户操作触发，也可以由程序触发，一个触发器可以对应多个效果。
9.1.1 触发器与效果
触发器的使用非常简单，可以作为MXML标记中的一个属性，也可以在<mx:Style>标记中调用，或者在ActionScript中用setStyle()和getStyle()方法调用。触发器的名称为triggerEvent名称 + “Effect”后缀。按照这种名称约定，mouseDown事件的触发器名称为mouseDownEffect。Flex中提供的触发器名称包括以下几种。
l addedEffect：当组件添加到容器中时触发。
l creationCompleteEffect：组件创建完毕时触发。
l focusInEffect：组件获得焦点时触发。
l focusOutEffect：组件失去焦点时触发。
l hideEffect：当组件的visible属性更改为false时触发。
l mouseDownEffect：按下鼠标时触发。
l mouseUpEffect：释放鼠标时触发。
l moveEffect：组件移动时触发。
l removedEffect：组件被移除时触发。
l resizeEffect：组件改变大小时触发。
l rollOutEffect：鼠标从组件上移开时触发。
l rollOverEffect：鼠标移动到组件上时触发。
l showEffect：组件的visible属性更改为true时触发。
Flex的动画效果由一个工厂类（Factory）和一个实例类（Instance）构成。工厂类用来处理事件、控制动画，它的名称就是效果的名称，如Zoom。通常我们在应用程序中创建一个工厂类的实例，设置必要的参数，然后将该实例与触发器关联。实例类则用来实现动画效果，当触发器被触发或调用play()方法时，工厂类创建一个实例类的实例来播放所需效果，执行结束后，该实例会被销毁，如果一个效果对应多个目标对象，每一个目标对象都会有一个自己的实例。实例类的命名规则为效果名+Instance。如之前定义的工厂类名为Zoom，那么实例类名就是ZoomInstance。Effect的这种机制，是设计模式中工厂模式的一种应用，效果执行的时候，运行的不是Zoom，而是ZoomInstance。
下面的图9-1分别表现了工厂类和实例类的层级关系。Effect类是一个抽象基类，是定义所有效果的基本工厂类。EffectInstance类是定义所有效果实例子类的基类。在应用程序中不会创建Effect类本身的实例，而是创建一个子类的实例，如Mask或Tween。
图9-1 工厂类与实例类
9.1.2 简单效果组件
Flex中提供了丰富的效果组件。由于效果是一种根据时间渐变的过程，因此所有效果都具有duration属性，用来设置播放时间（以毫秒为单位）。也可以通过设置repeatCount属性和repeatDelay属性，来分别控制效果播放的次数和重复播放效果的时间间隔（以毫秒为单位）。如果希望在触发器被触发后，延迟一段时间调用效果，可以使用startDelay属性。
1）AnimateProperty动画效果
AnimateProperty是用来为组件的属性或样式设置动画的效果。我们可以通过其property属性设定目标对象上需要设置动画效果的属性，然后设置fromValue属性和toValue属性，为效果提供属性的起始值和结束值。例如下面的代码使用mouseDownEffect触发器，当单击图片时，触发AnimateProperty效果，在1秒钟内，Image对象的scaleX属性由1变为2，被横向拉伸。代码如下：
<mx:AnimatePropertyid="animateProperty"property="scaleX"fromValue="1
" toValue="2"
duration="1000" />
<mx:Imageid="img"source="assets/plane.png"mouseDownEffect="{animateP
roperty}"/>
如果希望通过样式设置效果，可以将isStyle属性设置为ture，然后通过setStyle()方法设置目标对象的样式，从而达到设置效果的目的。
2）Blur模糊效果
Blur 是一种模糊效果。该效果使用了flash.filters.BlurFilter滤镜，如果对某个组件应用了Blur 效果，就不能再对该组件应用BlurFilter滤镜，也无法再次应用Blur效果。下面的代码通过Image对象的mouseDownEffect触发器触发Blur效果，在1秒钟内，Image对象将逐渐变得模糊。代码如下：
<mx:Blur id="blurImage" duration="1000" blurXFrom="0.0" blurXTo="10.0"
blurYFrom="0.0" blurYTo="10.0"/>
<mx:Imageid="img"source="assets/plane.png"mouseDownEffect="{blurImage}"/>