Flex可视化组件效果控制

来源：互联网发布：python re模块 html 编辑：程序博客网时间：2024/06/05 16:11

所有效果对象都支持两个事件：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>

运行效果：