This tutorial lesson is part of a series of lessons dedicated to object-oriented programming (OOP) with ActionScript.

Several ways to create and launch ActionScript programs

There are several ways to create and launch programs written in the ActionScript programming language. Most of the lessons in this series will use Adobe Flex as the launch pad for the sample ActionScript programs.

An earlier lesson titled The Default Application Container provided information on how to get started programming with Adobe's Flex Builder 3. (See Baldwin's Flex programming website .) You should study that lesson before embarking on the lessons in this series.

Some understanding of Flex MXML will be required

I also recommend that you study all of the lessons on Baldwin's Flex programming website in parallel with your study of these ActionScript lessons. Eventually you will probably need to understand both ActionScript and Flex and the relationships that exist between them in order to become a successful ActionScript programmer.

Will emphasize ActionScript code

It is often possible to use either ActionScript code or Flex MXML code to achieve the same result. Insofar as this series of lessons is concerned, the emphasis will be on ActionScript code even in those cases where Flex MXML code may be a suitable alternative.

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.

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 .

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.

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 VBox container.

Beginning of the constructor for Effects04

The constructor begins in Listing 3.

    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.

      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 a mouseUpEffect 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:

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

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:

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 the Driver 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:

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.

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 :

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.

    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.

      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.

      //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.

    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.

    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.

    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.

    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:

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.

      }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 in originY 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.

      }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.

      }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.

To play multiple effects in parallel or in sequence

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.