Handling effect events

Every effect class supports the following events:

effectStart Dispatched when the effect starts playing. The type property of the event object for this event is set to EffectEvent.EFFECT_START.
effectEnd Dispatched after the effect has stopped playing, either when the effect finishes playing or when the effect has been interrupted by a call to the end() method. The type property of the event object for this event is set to EffectEvent.EFFECT_END.

Flex dispatches one event for each target of an effect. Therefore, if you define a single target for an effect, Flex dispatches a single effectStart event, and a single effectEnd event. If you define three targets for an effect, Flex dispatches three effectStart events, and three effectEnd events.

The event object passed to the event listener for these events is of type EffectEvent. The EffectEvent class is a subclass of the Event class, and contains all of the properties inherited from Event, including target, and type, and defines a new property named effectInstance, where:

target

Contains a reference to the Effect object that dispatched the event. This is the factory class of the effect.

type

Either EffectEvent.EFFECT_END or EffectEvent.EFFECT_START, depending on the event.

effectInstance

Contains a reference to the EffectInstance object. This is the object defined by the instance class for the effect. Flex creates one object of the instance class for each target of the effect. You access the target component of the effect using the effectInstance.target property.

The following example defines an event listener for the endEffect event:

<?xml version="1.0"?>
<!-- behaviors\EventEffects2.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:Script>
        <![CDATA[
    
            import mx.effects.*;
            import mx.events.EffectEvent;
            import mx.core.UIComponent;
    
            private function endEffectListener(eventObj:EffectEvent):void {
                // Access the effect object.
                var effectObj:Effect = Effect(eventObj.target);

                // Access the target component of the effect.
                var effectTarget:UIComponent = 
                    UIComponent(eventObj.effectInstance.target); 
            
                myTA.text = effectTarget.id;
                myTA.text = myTA.text + " " + eventObj.type;
            } 
        ]]>
    </mx:Script>

    <mx:Fade id="myFade" effectEnd="endEffectListener(event);"/>
    <mx:Button id="myButton" label="Click Me" mouseUpEffect="{myFade}"/>

    <mx:TextArea id="myTA" />
</mx:Application>
The executing SWF file for the previous example is shown below:

If the effect has multiple targets, Flex dispatches an effectStart event and effectEnd event once per target, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\EventEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:Script>
        <![CDATA[
    
            import mx.effects.*;
            import mx.events.EffectEvent;
            import mx.core.UIComponent;
    
            private function endSlowFadeEffectListener(eventObj:EffectEvent):void  
            {
                // Access the effect object.
                var effectObj:Effect = Effect(eventObj.target);

                // Access the target component of the effect.
                var effectTarget:UIComponent = 
                    UIComponent(eventObj.effectInstance.target); 
            
                myTA.text = myTA.text + effectTarget.id + ' : ';
                myTA.text = myTA.text + " " + eventObj.type + '\n';
            } 
        ]]>
    </mx:Script>

    <mx:Fade id="slowFade" 
        duration="2000" 
        effectEnd="endSlowFadeEffectListener(event);"/>
    
    <mx:Button id="myButton1" label="Button 1" creationCompleteEffect="{slowFade}"/>
    <mx:Button id="myButton2" label="Button 2" creationCompleteEffect="{slowFade}"/>
    <mx:Button id="myButton3" label="Button 3" creationCompleteEffect="{slowFade}"/>
    <mx:Button id="myButton4" label="Button 4" creationCompleteEffect="{slowFade}"/>
    
    <mx:TextArea id="myTA" height="125" width="250"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

Flex dispatches an effectEnd event once per target; therefore, the endSlowFadeEffectListener() event listener is invoked four times, once per Button control.

Handling tween effect events

Every effect class that is a subclass of the TweenEffect class, such as the Fade and Move effects, supports the following events:

tweenStart Dispatched when the tween effect starts. The type property of the event object for this event is set to TweenEvent.TWEEN_START. The Effect.effectStart event is dispatched before the tweenStart event.
tweenUpdate Dispatched every time a TweenEffect class calculates a new value. The type property of the event object for this event is set to TweenEvent.TWEEN_UPDATE.
tweenEnd Dispatched when the tween effect ends. The type property of the event object for this event is set to TweenEvent.TWEEN_END.

The event object passed to the event listener for these events is of type TweenEvent. The TweenEvent class is a subclass of the Event class, and contains all of the properties inherited from Event, including target, and type, and defines the following new property:

value

Contains the tween value calculated by the effect. For example, for the Fade effect, the value property contains a single Number between the values of the Fade.alphaFrom and Fade.alphaTo properties. For the Move effect, the value property contains a two item Array, where the first value is the current x value of the effect target and the second value is the current y value of the effect target. For more information on the value property, see the instance class for each effect that is a subclass of the TweenEffect class.

Adobe Flex 3 Help

Handling effect events