You can declare and play effects in ActionScript, often as part of an event listener. To invoke the effect, you call the effect's play() method.

This technique is useful for using one control to invoke an effect on another control. The following example uses the event listener of a Button control's click event to invoke a Resize effect on an TextArea control:

<?xml version="1.0"?>
<!-- behaviors\ASplayVBox.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="createEffect(event);" 
>
    <mx:Script>
        <![CDATA[
            // Import effect class.
            import mx.effects.Resize;

            // Create a Resize effect 
            private var resizeLarge:Resize = new Resize();

            private function createEffect(eventObj:Event):void {
                // Set the TextArea as the effect target.
                resizeLarge.target=myTA;
                
                // Set resized width and height, and effect duration.
                resizeLarge.widthTo=150;
                resizeLarge.heightTo=150;
                resizeLarge.duration=750;
            }
        ]]>
    </mx:Script>

    <mx:VBox borderStyle="solid">
        <mx:HBox>
            <mx:Button label="Start" click="resizeLarge.end();resizeLarge.play();"/>
            <mx:Button label="Reset" click="myTA.width=100;myTA.height=100;"/>          
        </mx:HBox>
        <mx:TextArea id="myTA" height="100" width="100" text="Here is some text."/>
    </mx:VBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, use the application's creationComplete event to configure the effect, and then invoke it by calling the play() method in response to a user clicking the Button control. Because you invoke the effect programmatically, you do not need an event trigger to invoke it.

Notice that this example first calls the Effect.end() method before it calls the play() method. You call the end() method before you call the play() method to ensure that any previous instance of the effect has ended before you start a new one.

This example also defines the effect using ActionScript. You are not required to define the effect in ActionScript. You could rewrite this code using MXML to define the effect, as the following example shows:

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

    <mx:Resize id="resizeLarge" 
        target="{myTA}" 
        widthTo="150" 
        heightTo="150" 
        duration="750" 
    />

    <mx:Canvas height="300" width="400" borderStyle="solid">
        <mx:Button label="Start" 
            x="50" y="50" 
            click="resizeLarge.end();resizeLarge.play();" 
        />
        <mx:TextArea id="myTA" 
            x="100" y="100"
            height="100"
            width="100" 
            text="Here is some text."
        />
        <mx:Button label="Reset"
            x="135" y="50"
            click="myTA.height=100;myTA.width=100;"         
        />
    </mx:Canvas>
</mx:Application>
The executing SWF file for the previous example is shown below:

Optionally, you can pass an Array of targets to the play() method to invoke the effect on all components specified in the Array, as the following example shows:

resizeLarge.play([comp1, comp2, comp3]); 

This example invokes the Zoom effect on three components. Notice that the end() method does not take an effect target as an argument but an effect instance. Therefore, you end this effect by calling the end() method on the effect itself, as the following example shows:

resizeLarge.end(); 

When you call the play() method, you essentially replace the effect trigger with the method call. You use the Effect.target or Effect.targets properties to specify the target components of an effect when you invoke them using the play() method. This example uses the target property of the effect to specify the single target component. If you want to play the effect on multiple components, you can use the Effects.targets property to specify an array of target components. For more information, see Applying behaviors using the Effect.target and Effect.targets properties.

Rather than using the target property to specify the target component of the effect, you can also pass the target component to the constructor, as the following example shows:

// Create a Resize effect. 
var resizeLarge = new mx.effects.Resize(myTA);

Playing an effect backward

You can pass an optional argument to the play() method to play the effect backward, as the following example shows:

resizeLarge.play([comp1, comp2, comp3], true); 

In this example, you specify true as the second argument to play the effect backward. The default value is false.

You can also use the Effect.pause() method to pause an effect, the Effect.resume() method to resume a paused effect, and the Effect.reverse() method to play an effect backward.

Ending an effect

You can use the end() method to terminate an effect at any time, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\ASend.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="createEffect(event);" 
>
    <mx:Script>
        <![CDATA[
            // Import effect class.
            import mx.effects.Resize;

            // Create a Resize effect 
            private var resizeLarge:Resize = new Resize();

            private function createEffect(eventObj:Event):void {
                // Set the TextArea as the effect target.
                resizeLarge.target=myTA;
                
                // Set resized width and height, and effect duration.
                resizeLarge.widthTo = 150;
                resizeLarge.heightTo = 150;
                
                // Set a long duration.
                resizeLarge.duration = 5000;
            }
        ]]>
    </mx:Script>

    <mx:Canvas height="228" width="328" borderStyle="solid">
        <mx:Button label="Start"
            x="10" y="10" 
            click="resizeLarge.end();resizeLarge.play();"
        />
        <mx:Button label="End" 
            x="86" y="10" 
            click="resizeLarge.end();"
        />        
        <mx:Button label="Reset"
            click="myTA.height=100;myTA.width=100;"
            x="151" y="10"
        />
        <mx:TextArea id="myTA" 
            x="10" y="40"
            height="100"
            width="100" 
            text="Here is some text."
        />
    </mx:Canvas>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you set the duration property of the Resize effect to 10 seconds, and add a new Button control that uses the end() method to terminate the effect when the user clicks the button.

When you call the end() method, the effect jumps to its end state and then terminates. In the case of the Resize effect, the effect sets the final size of the expanded TextArea control before it terminates, just as if you had let the effect finish playing. If the effect was a Move effect, the target component moves to its final position before terminating.

You can end all effects on a component by calling the UIComponent.endEffectsStarted() method on the component. The endEffectsStarted() method calls the end() method on every effect currently playing on the component.

If you defined a listener for the effectEnd event, that listener gets invoked by the end() method, just as if you had let the effect finish playing. For more information on working with effect events, see Handling effect events.

You can also use the stop() method with an effect. The stop() method halts the effect in its current state, but does not jump to the end state. A call to the stop() method dispatches the effectEnd event. Unlike a call to the pause() method, you cannot call the resume() method after calling the stop() method. However, you can call the play() method to restart the effect.

Creating a reusable effect

The next example creates a reusable function that takes three arguments corresponding to the target of a Move effect and the coordinates of the move. The function then creates the Move effect and plays it on the target:

<?xml version="1.0" encoding="utf-8"?>
<!-- behaviors\PlayEffectPassParams.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import flash.events.Event;
            import mx.effects.Effect;
            import mx.effects.Move; 

            private var myMove:Move = new Move();

            /* Click event listener that passes the target component
               and the coordinates of the center of the parent container
               to the function that creates the effect. */ 
            private function playMove(target:Object, 
                    newX:Number, newY:Number):void {
                myMove.end();
                myMove.target=target;
                myMove.duration = 1000;
                myMove.xTo = newX - target.width/2;
                myMove.yTo = newY - target.height/2;
                myMove.play();
            }

            /* Create the Move effect and play it on the target 
               component passed to the function. */
            private function handleClick(eventObj:Event):void {
                var targetComponent:Object = eventObj.currentTarget;
                var parentCont:Object = targetComponent.parent;
                playMove(eventObj.target, parentCont.width/2, 
                    parentCont.height/2); 
            } 
        ]]>
    </mx:Script>

    <mx:Canvas width="200" height="200" borderStyle="solid">
        <mx:Button id="myButton" 
            label="Center me" 
            x="0"
            y="0"
            click="handleClick(event);"
        /> 
    </mx:Canvas>
    <mx:Button label="Reset" click="myButton.x=0;myButton.y=0;"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

Applying behaviors in ActionScript using styles

Because Flex implements the properties corresponding to effect triggers as styles, you can use style sheets and the setStyle() and getStyle() methods to apply effects. Therefore, you can create an effect in ActionScript, and then use the setStyle() method to associate it with a trigger, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\BehaviorsASStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
    <mx:Script>
        <![CDATA[        
            import mx.effects.Zoom;

            // Define a new Zoom effect.
            private var zEffect:Zoom = new Zoom();

            private function initApp():void {
                // Set duration of zoom effect. 
                zEffect.duration = 1000;

                // Define zoom in ratio.        
                zEffect.zoomHeightTo = 1.0; 
                zEffect.zoomWidthTo = 1.0; 
            }
        
            private function applyZoomEffect(newZoom:Number):void {
                zEffect.zoomHeightTo = newZoom; 
                zEffect.zoomWidthTo = newZoom;             

                // Apply or re-apply the Zoom effect to the Button control. 
                b1.setStyle("mouseDownEffect", zEffect);                
            }
            
            private function resizeButton():void {
                var newZoom:Number;
                var n:Number = zEffect.zoomHeightTo;
                if (n == 1.0) {
                    newZoom = 2.0;
                } else {
                    newZoom = 1.0;
                }
                applyZoomEffect(newZoom);
            }
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:Button id="b1" label="Click Me" click="resizeButton();"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can also define the effect in MXML, then use ActionScript to apply it, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\ASStylesMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="initializeEffect(event);"
>
    <mx:Script>
        <![CDATA[        
            import flash.events.Event;
        
            private function initializeEffect(eventObj:Event):void {
                myB.setStyle("mouseDownEffect", myWL); 
            } 
        ]]>
    </mx:Script>

    <mx:WipeLeft id="myWL" duration="1000"/>

    <mx:Button id="myB" label="Click Me"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

The code in the following example alternates the WipeRight and WipeLeft effects for the mouseDownEffect style of a Button control:

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

    <mx:Script>
        <![CDATA[
                        
            private function changeEffect():void {           
                if (myButton.getStyle("mouseUpEffect") == myWR) {
                    myButton.setStyle("mouseUpEffect", myWL);
                }
                else if (myButton.getStyle("mouseUpEffect") == myWL) {
                    myButton.setStyle("mouseUpEffect", myWR);
                }
            }   
        ]]>
    </mx:Script>

    <mx:WipeRight id="myWR" duration="1000"/>
    <mx:WipeLeft id="myWL" duration="1000"/>

    <mx:Button id="myButton" 
        label="Click Me"
        click="changeEffect();" 
        mouseUpEffect="{myWL}"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

Applying behaviors using the Effect.target and Effect.targets properties

You can use the Effect.target or Effect.targets properties to specify the effect targets, typically when you use the play() method to invoke the effect, rather than a trigger. You use the Effect.target property in MXML to specify a single target, and the Effect.targets property to specify an array of targets, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\TargetProp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Zoom id="myZoom" 
        zoomHeightFrom="0.10" zoomWidthFrom="0.10"        
        zoomHeightTo="1.00" zoomWidthTo="1.00" 
        target="{myButton}"/>
        
    <mx:Button id="myButton" 
        label="Zoom target" 
        click="myZoom.end();myZoom.play();"/>        
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you use data binding to the target property to specify that the Button control is the target of the Zoom effect. However, you do not associate the effect with a trigger, so you must call the effect's play() method to invoke it.

In the next example, you apply a Zoom effect to multiple Button controls by using data binding with the effect's targets property:

<?xml version="1.0"?>
<!-- behaviors\TargetProp3Buttons.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Zoom id="myZoom" 
        zoomHeightFrom="0.10" 
        zoomWidthFrom="0.10" 
        zoomHeightTo="1.00" 
        zoomWidthTo="1.00" 
        targets="{[myButton1, myButton2, myButton3]}"
    />

    <mx:Button id="myButton1" label="Button 1"/>
    <mx:Button id="myButton2" label="Button 2"/>
    <mx:Button id="myButton3" label="Button 3"/>
    
    <mx:Button id="myButton4" 
        label="Zoom targets"
        click="myZoom.end();myZoom.play();"
    />
</mx:Application>
The executing SWF file for the previous example is shown below:

You do not define a trigger to invoke the effect, so you must call the effect's play() method to invoke it. Because you specified three targets to the effect, the play() method invokes the effect on all three Button controls.

You can also set the target and targets properties in ActionScript, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\TargetPropAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="createEffect(event);"
>
    <mx:Script>
        <![CDATA[
            import mx.effects.Fade;
            import flash.events.Event;

            private var myFade:Fade = new Fade();
        
            private function createEffect(eventObj:Event):void {
                myFade.duration=5000;

                /* Pass Array of targets to play(). */
                myFade.play([myPanel1, myPanel2]);

                /* Alternatively, set targets to an array of components.
                   myFade.targets = [myPanel1, myPanel2];            
                   myFade.play(); */
            }

            private function playZoom(eventObj:Event):void {
                myZoom.end();

                /* Alternatively, pass Array of targets to play().
                   myZoom.play([myTA]); */

                // Set target to a single component.
                myZoom.target = myTA;
                myZoom.play();
            }
    ]]>
    </mx:Script>

    <mx:Zoom id="myZoom" 
        duration="2000" 
        zoomHeightFrom="0.10" 
        zoomWidthFrom="0.10" 
        zoomHeightTo="1.00" 
        zoomWidthTo="1.00"
    />

    <mx:Panel id="myPanel1">
        <mx:TextArea id="myTA"/>
    </mx:Panel>

    <mx:Panel id="myPanel2">
        <mx:Button id="myButton" label="Click Me" click="playZoom(event);"/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you use the targets property of the Fade effect to specify the two Panel containers as the effect target, and the target property of the Zoom effect to specify the Button control as the single target.

If you use the targets property to define multiple event targets, and you want to later use the end() method to terminate the effect, you must save the return value of the play() method and pass it as an argument to the end() method, as the following example shows:

var myFadeArray:Array = myFade.play();

Then you can pass the array to the end() method to end the effect on all targets, as the following example shows:

myFade.end(myFadeArray);