Events, Triggers, and Effects

I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures and listings while you are reading about them.

Figures

• Figure 1 . Program output at startup for Effects04.
• Figure 2 . Program output after clicking the button.
• Figure 3 . Program output at startup for Effects05.
• Figure 4 . Program output after clicking the bottom button.
• Figure 5 . The WipeRight effect.
• Figure 6 . The Rotate effect.
• Figure 7 . The Glow effect.
• Figure 8 . Three effects in parallel.

Listings

• Listing 1 . The MXML file used for both programs.
• Listing 2 . Beginning of the Driver class for Effects04.
• Listing 3 . Beginning of the constructor for Effects04.
• Listing 4 . Configuring the Glow effect.
• Listing 5 . Beginning of the Driver class for Effects05.
• Listing 6 . Beginning of the constructor for the Effects05.
• Listing 7 . Configure an Iris effect for the bottom button.
• Listing 8 . Configure three different effects targeted to the bottom button.
• Listing 9 . A click event handler on the bottom button.
• Listing 10 . An EFFECT_END handler for the Iris effect.
• Listing 11 . A click event handler for the top button.
• Listing 12 . Beginning of the Show event handler registered on the bottom button.
• Listing 13 . Code to play the Rotate effect.
• Listing 14 . Code to play the Glow effect.
• Listing 15 . Code to play three effects in parallel.
• Listing 16 . The MXML file used for both programs.
• Listing 17 . The Driver class for Effects04.
• Listing 18 . The Driver class for Effects05.

Supplemental material

I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com .

General background information

According to Using Behaviors ,

"Behaviors let you add animation and motion to your application in response to user or programmatic action. For example, you can use behaviors to cause a dialog box to bounce slightly when it receives focus, or to slowly fade in when it becomes visible."

You program behaviors into your applications using MXML, ActionScript, triggers, and effects.

According to About behaviors ,

"A behavior is a combination of a trigger paired with an effect. A trigger is an action, such as a mouse click on a component, a component getting focus, or a component becoming visible. An effect is a visible or audible change to the target component that occurs over a period of time, measured in milliseconds. Examples of effects are fading, resizing, or moving a component."

Triggers are not events

Triggers are caused by events, but triggers are different from events. For example, the trigger named mouseDownEffect results from the occurrence of a mouseDown event.

If an Effect object, such as a Glow effect has been associated with a mouseDownEffect trigger for a given target component, the Glow effect will be played when the user presses the mouse button while the mouse pointer is over the target component. This will be true regardless of whether or not a mouseDown event listener is registered on the component.

Thirteen standard triggers in Flex Builder 3

The UIComponent class lists thirteen triggers :

• addedEffect - Triggering Event: added. Played when the component is added as a child to a Container.
• creationCompleteEffect - Triggering Event: creationComplete Played when the component is created.
• focusInEffect - Triggering Event: focusIn Played when the component gains keyboard focus.
• focusOutEffect - Triggering Event: focusOut Played when the component loses keyboard focus.
• hideEffect - Triggering Event: hide Played when the component becomes invisible.
• mouseDownEffect - Triggering Event: mouseDown Played when the user presses the mouse button while over the component.
• mouseUpEffect - Triggering Event: mouseUp Played when the user releases the mouse button while over the component.
• moveEffect - Triggering Event: move Played when the component is moved.
• removedEffect - Triggering Event: removed Played when the component is removed from a Container.
• resizeEffect - Triggering Event: resize Played when the component is resized.
• rollOutEffect - Triggering Event: rollOut Played when the user rolls the mouse so it is no longer over the component.
• rollOverEffect - Triggering Event: rollOver Played when the user rolls the mouse over the component.
• showEffect - Triggering Event: show Played when the component becomes visible.

Effects are subclasses of the Effect class

Effects are subclasses of the Effect class a couple of levels down the inheritance hierarchy. Flex Builder 3 provides a number of built-in effects including the following:

• AnimateProperty
• Blur
• Dissolve
• Fade
• Glow
• Iris
• Move
• Pause
• Resize
• Rotate
• SoundEffect
• WipeDown
• WipeLeft
• WipeRight
• WipeUp
• Zoom

In addition, you can create your own effects.

One trigger, many effects

The same trigger can be used to trigger different types of effects. I suppose that in theory, you could create a different behavior for all possible combinations of the thirteen triggers and the sixteen different effects in the two lists provided above. In addition, you can program for multiple effects to play in response to a single trigger.

To use an effect...

By default, Flex components do not play an effect when a trigger occurs. To configure a component to use an effect, you must associate an effect with a trigger.

Preview

Two ways to play effects

There are at least two different ways to cause an effect to be played on a component in an ActionScript program. One way is to call the setStyle method on the component and associate an effect trigger with an effect. With that approach, the effect will be played each time the effect trigger fires.

The second way

The second way is to target an Effect object to the component and then call the play method on the effect object. This approach doesn't make explicit use of the effect trigger.

Two different programs

I will present and explain two different programs in this lesson. The first program will illustrate the first approach described above. The second program will illustrate and contrast the two approaches.

Discussion and sample code

A simple MXML file

Both programs that I will explain in this lesson are written almost entirely in ActionScript. There is just enough MXML code to make it possible to launch the programs from a browser window.

The MXML file is shown in Listing 1 and also in Listing 16.

LISTING 1: The MXML file used for both programs.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  xmlns:cc="CustomClasses.*">
  
  <cc:Driver/>

</mx:Application>

As you can see, this MXML file simply instantiates an object of the class named Driver in the cc namespace. Beyond that, the entire behavior of the program is controlled by ActionScript code.

The program named Effects04

Will explain in fragments

I will break the code for these two programs down and explain the code in fragments. Complete listings for the Driver classes for the two programs are provided in Listing 17 and Listing 18 near the end of the lesson.

Program output at startup

You can run this program online to get a better feel for its behavior. Figure 1 shows the program output at startup.

Figure 1: Program output at startup for Effects04.

Program output at startup for Effects04.

As you can see, the Flash Player output consists of a label and a button with the text "Click me and watch me glow" .

Associate a trigger with an effect

This program associates a mouseUpEffect trigger with a Glow effect to cause the button to glow when the user releases the mouse button while the mouse pointer is over the button.

Program output after clicking the button

Figure 2 shows the program output shortly after clicking the button.

Figure 2: Program output after clicking the button.

Program output after clicking the button.

As promised, the button begins to glow red when the mouse button is released while the mouse pointer is over the Button component. The button continues to glow for several seconds.

Beginning of the Driver class for Effects04

This program shows how to set the style on an object with a mouseUpEffect trigger and cause the object to glow. The entire program is written in the class named Driver . Listing 2 shows the beginning of the Driver class.

LISTING 2: Beginning of the Driver class for Effects04.

package CustomClasses{

  import mx.containers.VBox;
  import mx.controls.Button;
  import mx.controls.Label;
  import mx.effects.Glow;

  public class Driver extends VBox{
    //Instantiate and save references to all of the
    // objects needed by the program.
    private var title:Label = new Label();
    private var button:Button = new Button();
    private var glowEffect:Glow = new Glow();

You shouldn't find any surprises in Listing 2. I will simply highlight the last statement that instantiates an object of the Glow class. Note also that the Driver class extends the VBoxcontainer.

Beginning of the constructor for Effects04

The constructor begins in Listing 3.

LISTING 3: Beginning of the constructor for Effects04.

    public function Driver(){//constructor

      //Set title properties and add to the VBox.
      title.setStyle("color","0xFFFF00");
      title.setStyle("fontSize",14);
      title.text = "Demo mouseUpEffect trigger";
      addChild(title);

      button.label = "Click me and watch me glow.";
      addChild(button);

Once again, you shouldn't find anything new in Listing 3. This part of the constructor simply creates the yellow text label and the button shown in Figure 1 and adds them to the VBox.

Configuring the Glow effect

The first three statements in Listing 4 set property values on the Glow object that was instantiated in Listing 2.

LISTING 4: Configuring the Glow effect.

      glowEffect.color = 0xFF0000;
      glowEffect.strength = 255;
      glowEffect.duration = 10000;
      
      button.setStyle("mouseUpEffect",glowEffect);

    } //end constructor
    //--------------------------------------------------//

  } //end class
} //end package

The strength property

The purpose of the three properties should be fairly obvious on the basis of their names. However, here is what the documentation has to say about the strength property:

"The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are from 0 to 255."

A maximum red glow for ten seconds

The code in Listing 4 sets the effect to glow red with the maximum allowable strength and to continue to glow for ten seconds. If you run the program, you will see that the glow doesn't stay the same for ten seconds and then turn off. Instead, it decays over time.

Associate the trigger and the effect

The statement that begins with button.setStyle in Listing 4 is the key statement in the entire program. This statement associates the effect referenced by glowEffect with amouseUpEffect trigger. Therefore, the effect will be played each time the mouse button is released while the mouse pointer is over the Button component. In fact, it doesn't even matter if the mouse pointer was over the Button component when the mouse button was pressed as long as it is over the Button component when the mouse button is released.

The end of the program

Listing 4 also signals the end of the program. Note that even though the mouseUpEffect trigger resulted from a mouseUp event, an event listener was not registered to listen for and to service the mouseUp event.

Three steps are required

Generally speaking, three steps are required to implement this approach:

1. Instantiate an object of the desired effect from the above list , or from a custom effect if you have one.
2. Set property values on the effect object to cause it to have the desired behavior as in Listing 4.
3. Call the setStyle method to associate the effect with an effect trigger from the above list as in Listing 4.

That is all that is required to play an effect when an effect trigger occurs.

The program named Effects05

Suppose you want to do something a little more creative, such as to cause the effect that is played for a particular trigger to differ from one time to the next depending on some condition in the program.

Or, perhaps you want to play an effect on a component completely independent of triggers, such as when a player's score in a game reaches 10,000. I will show you how to do those kinds of things in this program.

Program output at startup

The best thing that you could do at this point would be to run the program online. That way, you can interact with the program as you read the following.

Figure 3 shows the program output at startup.

Figure 3: Program output at startup for Effects05.

Program output at startup for Effects05.

At this point, the output consists of one label and two buttons. The top button is disabled and the bottom button is asking to be clicked in order to be hidden.

Program output after clicking the bottom button

Figure 4 shows the program output after the bottom button from Figure 3 has been clicked.

Figure 4: Program output after clicking the bottom button.

Program output after clicking the bottom button.

Only the top button is showing

At this point, the bottom button in Figure 3 has been hidden and the top button in Figure 3 has been enabled. From this point forward, the user will alternate between clicking the top and bottom buttons.

Do it several times

You need to go through the sequence several times to experience the full effect. Each time the user clicks the top button, it becomes disabled and the bottom button becomes visible. Each time the bottom button becomes visible, an effect is played. Effects are played in the following sequence:

1. A WipeRight effect.
2. A Rotate effect.
3. A Glow effect.
4. All three of the above in parallel.

The sequence repeats after the three effects are played in parallel.

The next four figures show screen shots of the effects listed above caught in midstream.

The WipeRight effect

Figure 5 shows the restoration of the bottom button with a WipeRight effect. As you can see, only part of the button was visible when the screen show was taken.

Figure 5: The WipeRight effect.

The WipeRight effect.

The Rotate effect

Figure 6 shows the Rotate effect caught in midstream.

Figure 6: The Rotate effect.

The Rotate effect.

The bottom button rotates a full 360 degrees around its center point before coming to rest in the position shown in Figure 3 with its label restored.

The Glow effect

Figure 7 shows the bottom button in the middle of a yellow glow effect.

Figure 7: The Glow effect.

The Glow effect.

You are already familiar with this effect from the program named Effects04 that I explained earlier in this lesson.

Three effects in parallel

Figure 8 shows the three effects being played in parallel.

Figure 8: Three effects in parallel.

Three effects in parallel.

In this case, the bottom button goes through an interesting gyration before coming to rest in the position shown in Figure 3. Someone once said that a picture is worth a thousand words. In this case, actually running the program is worth a thousand pictures.

Will explain in fragments

As before, I will explain this program in fragments. Aside from the simple MXML file shown in Listing 16, this entire program is written in a class named Driver . A complete listing of theDriver class is provided in Listing 18.

Two ways to play effects

As I explained earlier , there are at least two different ways to write ActionScript code to play effects:

• Call the setStyle method on the target component passing an effect trigger and an effect as parameters to the method as described above . You saw an example of this in the program named Effects04.
• Create an Effect object targeted to the component and call the play method on the object. This approach doesn't require an effect trigger.

I will illustrate both approaches in this program.

Beginning of the Driver class for Effects05

The driver class for the program named Effects05 begins in Listing 5.

LISTING 5: Beginning of the Driver class for Effects05.

package CustomClasses{
  import flash.events.MouseEvent;
  
  import mx.containers.VBox;
  import mx.controls.Button;
  import mx.controls.Label;
  import mx.effects.Glow;
  import mx.effects.Iris;
  import mx.effects.Parallel;
  import mx.effects.Rotate;
  import mx.effects.WipeRight;
  import mx.events.EffectEvent;
  import mx.events.FlexEvent;

  public class Driver extends VBox{
    //Instantiate and save references to most of the
    // objects needed by the program.
    private var title:Label = new Label();
    private var btnA:Button = new Button();
    private var btnB:Button = new Button();

    private var irisEffect:Iris = new Iris();
    private var wipeEffect:WipeRight = new WipeRight();
    private var rotateEffect:Rotate = new Rotate();
    private var glowEffect:Glow = new Glow();

    private var effectCounter:uint = 0;

Instantiate four different Effect objects

The most interesting part of Listing 5 is the instantiation of four different effect objects :

• Iris
• WipeRight
• Rotate
• Glow

The Iris effect will be used along with the setStyle method to cause the bottom button in Figure 3 to play an Iris effect each time it is hidden.

The other three effects in the above list plus an object of the Parallel class will be used to apply one of four different effects to the bottom button each time it is shown.

Beginning of the constructor for Effects05

The constructor for the Driver class begins in Listing 6.

LISTING 6: Beginning of the constructor for the Effects05.

    public function Driver(){//constructor

      //Set title properties and add to the VBox.
      title.setStyle("color","0xFFFF00");
      title.setStyle("fontSize",14);
      title.text = "Demo two ways to play effects";
      addChild(title);
      
      //Put labels on the two buttons and disable one
      // of them.
      btnA.label = "Click me to show the other button.";
      btnB.label = "Click me to hide me.";
      btnA.enabled = false;//disable btnA at startup
      
      //Register click listeners on both buttons, 
      // register a show listener on btnB, and add
      // them to the VBox.
      btnA.addEventListener(MouseEvent.CLICK,btnAhandler);
      btnB.addEventListener(MouseEvent.CLICK,btnBhandler);
      btnB.addEventListener(FlexEvent.SHOW,showHandler);
      addChild(btnA);
      addChild(btnB);

If you have been studying this series of lessons from the beginning, you shouldn't find anything in Listing 6 that you don't understand.

Configure an Iris effect for the bottom button

Listing 7 configures an Iris effect that will be played each time the bottom button in Figure 3 is hidden.

LISTING 7: Configure an Iris effect for the bottom button.

      irisEffect.duration = 2000;
      irisEffect.addEventListener(
                EffectEvent.EFFECT_END,endEffectHandler);
                
      btnB.setStyle("hideEffect",irisEffect);

Note that the bottom button in Figure 3 is referred to by the variable named btnB and the top button in Figure 3 is referred to by the variable named btnA .

The code in Listing 7 is essentially the same as the code that I explained in the earlier program named Effects04.

Configure three different effects targeted to the bottom button

Listing 8 configures three different Effect objects that will be played individually and in combination when the bottom button in Figure 3 is shown.

LISTING 8: Configure three different effects targeted to the bottom button.

      //Configure a wipe effect that may be played
      // when btnB is shown.
      wipeEffect.target = btnB;
      wipeEffect.showTarget = true;
      wipeEffect.duration = 2000;

      //Configure a rotate effect that may be played 
      // when btnB is shown.
      rotateEffect.target = btnB;
      rotateEffect.angleFrom = 0;
      rotateEffect.angleTo = 360;
      rotateEffect.duration = 2000;
      
      //Configure a glow effect that may be played 
      // when btnB is shown.
      glowEffect.target = btnB;
      glowEffect.color = 0xFFFF00;
      glowEffect.duration = 4000;
      glowEffect.inner = true;
      glowEffect.strength = 255;

    } //end constructor

Different effects require different properties

The three Effect objects were instantiated in Listing 5. Different types of effects require that different types of properties be set. However, one property that is common for all types of effects when using this approach is to specify the target component on which the effect is to be played.

(Note that it isn't necessary to explicitly specify the target for the earlier approach shown in Listing 7. In that case, the target is the object on which the setStyle method is called.)

I will leave it as an exercise for the student to go into the documentation and gain an understanding of the behaviors imparted by the different property values in Listing 8.

Listing 8 also signals the end of the constructor.

A click event handler on the bottom button

Let's begin by disposing of the code that is executed when the bottom button is clicked. A click event handler was registered on the bottom button ( btnB ) in Listing 6. That event handler is shown in Listing 9.

LISTING 9: A click event handler on the bottom button.

    private function btnBhandler(event:MouseEvent):void{
      btnB.visible = false;
    } //end btnBhandler

A hideEffect trigger

The method shown in Listing 9 is executed each time the user clicks the bottom button. The method sets the visible property of the bottom button to false. This causes the bottom button to dispatch a hide event, which in turn results in a hideEffect trigger. As you saw in Listing 7, this causes the program to play an Iris effect to hide the button.

An EFFECT_END handler for the Iris effect

When the bottom button is showing, the top button is disabled. Therefore, when the bottom button becomes hidden, the top button must be enabled or there will be no way to show the bottom button again.

Listing 7 registers an event handler on the Iris effect that is called each time the effect finishes playing. That event handler is shown in Listing 10.

LISTING 10: An EFFECT_END handler for the Iris effect.

    private function endEffectHandler(
                                 event:EffectEvent):void{
      btnA.enabled = true;
    } //end event handler

The code in this method sets the enabled property of the top button to true making it possible to click that button to show the bottom button again.

That takes care of the code associated with clicking the bottom button.

A click event handler for the top button

Listing 6 registered a click event handler on the top button ( btnA ) . That event handler is shown in Listing 11. This method is called each time the top button is clicked while it is enabled.

LISTING 11: A click event handler for the top button.

    private function btnAhandler(event:MouseEvent):void{
      btnA.enabled = false;
      btnB.visible = true;
    } //end btnAhandler

The code in this method disables the top button and sets the visible property of the bottom button to true. This causes the bottom button to dispatch a show event.

A show event handler was registered on the bottom button in Listing 6.

Beginning of the show event handler registered on the bottom button

That show event handler begins in Listing 12.

LISTING 12: Beginning of the Show event handler registered on the bottom button.

    private function showHandler(event:FlexEvent):void{
      //Make certain that none of the effects are playing.
      wipeEffect.end();
      rotateEffect.end();
      glowEffect.end();
      
      //Select the effect or effects that will be
      // played.
      if(effectCounter == 0){
        wipeEffect.play();
        effectCounter++;//increment the effect counter.

This method is executed each time the visible property of the bottom button is changed from false to true. The transition of that property value from false to true causes the bottom button to dispatch a show event.

Stop all effects that may be playing

Listing 12 begins by calling the end method on three of the four Effect objects that were instantiated in Listing 5. If one of those effects is playing, calling the end method on the effect object causes the Flash Player to jump immediately to the end.

Determine which effect to play

Then Listing 12 begins executing a long if-else-if statement that determines which effect to play based on the current value of the variable named effectCounter that was declared and initialized to a value of zero in Listing 5.

Four possibilities

Depending on the current value of that counter, the program will play one of the following three effects or all three in parallel:

• WipeRight
• Rotate
• Glow

If the current value of the effect counter variable is 0, the last two statements in Listing 12 are executed. Otherwise, control passes to the test at the top of Listing 13.

Play the wipe effect and increment the counter

One of the statements in Listing 12 calls the play method on the effect object referred to by wipeEffect causing that effect to play. The last statement in Listing 12 increments the effect counter by a value of one. Then control passes to the end of the showHandler method near the bottom of Listing 15.

Code to play the Rotate effect

If the value of the effect counter was 1 when control entered the if-else-if statement in Listing 12, the last four statements in Listing 13 are executed. Otherwise, control passes to the top of Listing 14.

LISTING 13: Code to play the Rotate effect.

      }else if(effectCounter == 1){
        rotateEffect.originX = btnB.width/2;
        rotateEffect.originY = btnB.height/2;
        rotateEffect.play();
        effectCounter++;

If the value of the effect counter was 1 when the if-else-if statement began execution, the play method is called on the rotateEffect object by the code in Listing 13.

Establish the center of rotation

Before calling the play method, however, the code in Listing 13 establishes the center of the button as the point around which the button will be rotated. It was not possible to establish this point when the Rotate effect was configured in Listing 8 because reliable information about the width and height of the button was not yet available.

Could have used creationComplete

Perhaps a more elegant approach to establishing the center of rotation would have been to register a creationComplete listener on the VBox and to set the values for originX inoriginY in that handler. However, that seemed like overkill and I decided to do it in Listing 13.

Increment the counter and go to the end of the method

If the last four statements in Listing 13 are executed, the effect counter is incremented by one. Then control passes to the bottom of the method in Listing 15.

Code to play the Glow effect

If the value of the effect counter was 2 when control entered the if-else-if statement in Listing 12, the last two statements in Listing 14 are executed. Otherwise, control passes to the top of Listing 15.

LISTING 14: Code to play the Glow effect.

      }else if(effectCounter == 2){
        glowEffect.play();
        effectCounter++;

The last two statements in Listing 14 play the glow effect and increment the effect counter. Then control passes to the bottom of the method in Listing 15.

Code to play three effects in parallel

If the value of the effect counter was something other than 0, 1, or 2 when control entered the if-else-if statement in Listing 12, the code in the else clause in Listing 15 is executed.

LISTING 15: Code to play three effects in parallel.

      }else{
        //Play all three effects in parallel.
        var parallel:Parallel = new Parallel();
        parallel.addChild(rotateEffect);
        parallel.addChild(glowEffect);
        parallel.addChild(wipeEffect);
        parallel.play();
        //reset the effect counter
        effectCounter = 0;
      } //end else

    } //end showHandler
    //--------------------------------------------------//

  } //end class
} //end package

An object of the Parallel class

This code instantiates an object of the Parallel class and adds the three effects as children of that object. Then the code calls the play method on the Parallel object. This causes all three effects to play simultaneously.

Reset the counter

Finally, Listing 15 resets the value of the effect counter back to 0 so that the sequence will begin anew the next time the event handler for the show event is executed.

Play the same effect on multiple targets simultaneously

You can play the same effect on multiple targets simultaneously by setting the targets property on the effect object instead of the target object. The targets property requires an array containing references to the target objects.

Three steps are required

The following steps are required to play an effect in the Flash Player using this approach.

1. Instantiate and save a reference to an Effect object.
2. Set properties on the effect object. Be sure to set the target property for a single target or the targets property for multiple targets.
3. Call the play method on the effect object.

To play multiple effects in parallel or in sequence

1. Instantiate and save references to two or more Effect objects.
2. Set properties on the effect objects, being careful to set either the target property or the targets property.
3. Instantiate a Parallel object or a Sequence object.
4. Add the effect objects as children of the Parallel object or the Sequence object.
5. Call the play method on the Parallel object or the Sequence object.

Note that you can also add Sequence objects to Parallel objects and vice versa. Just make certain that you don't try to play two instances of the same effect on the same object at the same time.

The end of the program

Listing 15 also signals the end of the Driver class and the end of the program.

Run the programs

I encourage you to run these two programs from the web. Then copy the code from Listing 16 through Listing 18. Use that code to create Flex projects. Compile and run the projects. Experiment with the code, making changes, and observing the results of your changes. Make certain that you can explain why your changes behave as they do.

Resources

I will publish a list containing links to ActionScript resources as a separate document. Search for ActionScript Resources in the Connexions search box.

Complete program listings

Complete listings of the MXML and ActionScript files are provided in Listing 16 through Listing 18 below.

LISTING 16: The MXML file used for both programs.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  xmlns:cc="CustomClasses.*">
  
  <cc:Driver/>

</mx:Application>

LISTING 17: The Driver class for Effects04.

/*Effects04 11/22/09
This program shows how to set the style on an object with
 a mouseUpEffect trigger and cause the object to glow.
*/

package CustomClasses{

  import mx.containers.VBox;
  import mx.controls.Button;
  import mx.controls.Label;
  import mx.effects.Glow;

  public class Driver extends VBox{
    //Instantiate and save references to all of the
    // objects needed by the program.
    private var title:Label = new Label();
    private var button:Button = new Button();
    private var glowEffect:Glow = new Glow();
    //--------------------------------------------------//
    
    public function Driver(){//constructor

      //Set title properties and add to the VBox.
      title.setStyle("color","0xFFFF00");
      title.setStyle("fontSize",14);
      title.text = "Demo mouseUpEffect trigger";
      addChild(title);

      button.label = "Click me and watch me glow.";
      addChild(button);

      glowEffect.color = 0xFF0000;
      glowEffect.strength = 255;
      glowEffect.duration = 10000;
      button.setStyle("mouseUpEffect",glowEffect);

    } //end constructor
    //--------------------------------------------------//

  } //end class
} //end package

LISTING 18: The Driver class for Effects05.

/*Effects05 11/22/09
This program demonstrates two ways to play effects:
1. Call the play method on the effect.
2. Set the style on an object with a hideEffect trigger.
*********************************************************/
package CustomClasses{
  import flash.events.MouseEvent;
  
  import mx.containers.VBox;
  import mx.controls.Button;
  import mx.controls.Label;
  import mx.effects.Glow;
  import mx.effects.Iris;
  import mx.effects.Parallel;
  import mx.effects.Rotate;
  import mx.effects.WipeRight;
  import mx.events.EffectEvent;
  import mx.events.FlexEvent;

  public class Driver extends VBox{
    //Instantiate and save references to most of the
    // objects needed by the program.
    private var title:Label = new Label();
    private var btnA:Button = new Button();
    private var btnB:Button = new Button();
    private var irisEffect:Iris = new Iris();
    private var wipeEffect:WipeRight = new WipeRight();
    private var rotateEffect:Rotate = new Rotate();
    private var glowEffect:Glow = new Glow();
    private var effectCounter:uint = 0;
    //--------------------------------------------------//
    
    public function Driver(){//constructor

      //Set title properties and add to the VBox.
      title.setStyle("color","0xFFFF00");
      title.setStyle("fontSize",14);
      title.text = "Demo two ways to play effects";
      addChild(title);
      
      //Put labels on the two buttons and disable one
      // of them.
      btnA.label = "Click me to show the other button.";
      btnB.label = "Click me to hide me.";
      btnA.enabled = false;//disable btnA at startup
      
      //Register click listeners on both buttons, 
      // register a show listener on btnB, and add
      // them to the VBox.
      btnA.addEventListener(MouseEvent.CLICK,btnAhandler);
      btnB.addEventListener(MouseEvent.CLICK,btnBhandler);
      btnB.addEventListener(FlexEvent.SHOW,showHandler);
      addChild(btnA);
      addChild(btnB);
      
      //Configure an iris effect that will be played when
      // btnB is hidden.
      irisEffect.duration = 2000;
      irisEffect.addEventListener(
                EffectEvent.EFFECT_END,endEffectHandler);
      btnB.setStyle("hideEffect",irisEffect);
      
      //Configure a wipe effect that may be played
      // when btnB is shown.
      wipeEffect.target = btnB;
      wipeEffect.showTarget = true;
      wipeEffect.duration = 2000;

      //Configure a rotate effect that may be played 
      // when btnB is shown.
      rotateEffect.target = btnB;
      rotateEffect.angleFrom = 0;
      rotateEffect.angleTo = 360;
      rotateEffect.duration = 2000;
      
      //Configure a glow effect that may be played 
      // when btnB is shown.
      glowEffect.target = btnB;
      glowEffect.color = 0xFFFF00;
      glowEffect.duration = 4000;
      glowEffect.inner = true;
      glowEffect.strength = 255;

    } //end constructor
    //--------------------------------------------------//

    //This method is executed when btnB is clicked. It
    // hides itself, which in turn causes the Iris
    // hideEffect to be played on itself.
    private function btnBhandler(event:MouseEvent):void{
      btnB.visible = false;
    } //end btnBhandler
    //--------------------------------------------------//

    //This method is executed when btnA is clicked. It
    // disables itself and causes btnB to become visible.
    // This in turn causes btnB to dispatch a show event
    // which is handled by a different event handler.
    private function btnAhandler(event:MouseEvent):void{
      btnA.enabled = false;
      btnB.visible = true;
    } //end btnAhandler
    //--------------------------------------------------//

    //This method is executed when btnB is hidden and the
    // iris effect ends. It enables btnA so that the user
    // can click btnA to show btnB again.
    private function endEffectHandler(
                                 event:EffectEvent):void{
      btnA.enabled = true;
    } //end event handler
    //--------------------------------------------------//

    //This method is executed when btnB becomes visible
    // and dispatches a show event. It causes any effects
    // that may be playing to end. Then it one of three
    // effects or all three in parallel depending on the
    // value of an effect counter.
    private function showHandler(event:FlexEvent):void{
      //Make certain that none of the effects are playing.
      wipeEffect.end();
      rotateEffect.end();
      glowEffect.end();
      
      //Select the effect or effects that will be
      // played.
      if(effectCounter == 0){
        wipeEffect.play();
        effectCounter++;//increment the effect counter.
      }else if(effectCounter == 1){
        //Set the rotate origin to the center of the
        // button. This couldn't be done when the rotate
        // effect was configured because the true width
        // and height of the button weren't available at
        // that time. Another approach would be to use
        // a creationComplete event handler to set these
        // values.
        rotateEffect.originX = btnB.width/2;
        rotateEffect.originY = btnB.height/2;
        rotateEffect.play();
        effectCounter++;
      }else if(effectCounter == 2){
        glowEffect.play();
        effectCounter++;
      }else{
        //Play all three effects in parallel.
        var parallel:Parallel = new Parallel();
        parallel.addChild(rotateEffect);
        parallel.addChild(glowEffect);
        parallel.addChild(wipeEffect);
        parallel.play();
        effectCounter = 0;//reset the effect counter
      } //end else

    } //end showHandler
    //--------------------------------------------------//

  } //end class
} //end package