所有效果对象都支持两个事件:effectStart 和 effectEnd,分别在效果开始的效果结束的时候进行事件触发。
-
effectStart:
当效果开始时触发事件,事件对象的type属性为EffectEvent.EFFECT_START。
-
effectEnd:
当效果结束时触发事件,效果结束包括效果正常执行完毕或通过调用end方法打断。事件对象的type属性为EffectEvent.EFFECT_END。
Flex通过效果对象的target属性来确定事件触发的对象。因此,当仅定义一个target的目标组件时,Flex智慧触发一个effectStart事件和一个effectEnd事件;当定义了多个target目标组件时,Flex也会触发多个effectStart事件和effectEnd事件。
传送到事件监听器中的事件对象类型为:EffectEvent,同样这个事件类型是Event类型的子类,集成了Event类型所有的属性和方法,如target、type等。EffectEvent类型还定义了一个新的属性effectInstance。
EffectEvent属性的详细描述如下:
target:
用于引用触发事件的对象,即效果对象。
type:
用于判断当前事件类型是EffectEvent.EFFECT_START还是EffectEvent.EFFECT_END。
effectInstance:
用于引用一个EffectInstance实例类对象,即效果对象的实例类应用方式,Flex为target属性指定的每一个目标组件都创建一个效果实例对象,可以通过effectInstance.target进行引用。
上面的有点不好理解,看看下面的例子就明白了:
- <?xml version="1.0" encoding="utf-8" ?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="absolute" backgroundGradientAlphas="[0.48, 0.95]" backgroundGradientColors="[#36FFC9, #EAEAEA]">
- <mx:Script>
- <![CDATA[
- import mx.core.UIComponent;
- import mx.effects.Effect;
- import mx.events.EffectEvent;
- import mx.effects.Blur;
- var myBlur:Blur;
- private function init():void{
- myBlur = new Blur();
- myBlur.duration = 1000;
- ButtonA.setStyle('mouseDownEffect',myBlur);
- ButtonB.setStyle('mouseDownEffect',myBlur);
- ButtonC.setStyle('mouseDownEffect',myBlur);
- ButtonD.setStyle('mouseDownEffect',myBlur);
- }
- private function effectEndEvent(event:EffectEvent):void{
- var effObj:Effect = Effect(event.target);
- var ButtonComponent:UIComponent = UIComponent(event.effectInstance.target);
- ta.text += ButtonComponent.id +"触发:" + event.type+ effObj.toString() + "/n";
- }
- ]]>
- </mx:Script>
- <mx:Fade id="showFade" duration="2000" effectEnd="effectEndEvent(event)" />
- <mx:Panel width="424" height="287" layout="absolute" title="Flex可视化组件效果控制" fontSize="11" fontFamily="Georgia" fontWeight="normal" fontStyle="normal" backgroundColor="#EFEFEF" borderColor="#FFFFFF" themeColor="#FFFFFF" cornerRadius="14" verticalCenter="0" horizontalCenter="0" status="Active">
- <mx:TextArea id="ta" width="256" height="225" x="138" y="10"/>
- <mx:Button id="ButtonA" creationCompleteEffect="{showFade}" x="29" y="30" label="ButtonA"/>
- <mx:Button id="ButtonB" creationCompleteEffect="{showFade}" x="29" y="62" label="ButtonB"/>
- <mx:Button id="ButtonC" creationCompleteEffect="{showFade}" x="29" y="94" label="ButtonC"/>
- <mx:Button id="ButtonD" creationCompleteEffect="{showFade}" x="29" y="126" label="ButtonD"/>
- </mx:Panel>
- </mx:Application>
运行效果: