The Glow effect
Figure 7 shows the bottom button in the middle of a yellow 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.
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 apicture 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 classnamed 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:
- 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.
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 buttoneach time it is shown.
Beginning of the constructor for Effects05
The constructor for the Driver class begins in 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);