An Example Working with Events

In this example, we're going to create and implement a custom icon button in order to better understand events. The button has three elements: an icon, a text field, and a background. Each of these elements triggers different events. We can examine these events to see exactly how the event flow works.

Creating the IconButton Class

The first thing we need to do is create our IconButton class. We will generate all the elements for this class inside its constructor. The background will be a Shape object. We'll simply draw a gray rectangle on that shape. The next element is our icon. For our example, this icon is a simple square, so we'll use a Sprite. Even though we're still just drawing a shape, we want to use the Sprite class because it allows the icon to dispatch mouseOver and mouseOut events. The last element is the label, which is a text field that will hold the button label text.

We'll also add a couple listeners to the icon Sprite so we can have a rollover on that item. When the user rolls over the icon, we'll use a ColorTransform object to make the icon white. When the user rolls off the icon, it will go back to grey.

package {    import flash.display.Shape;    import flash.display.Sprite;    import flash.events.MouseEvent;    import flash.geom.ColorTransform;    import flash.text.TextField;    import flash.text.TextFieldAutoSize;    public class IconButton extends Sprite {    public function IconButton(text:String) {       // Create the button background, drawing a       // rectangle.       var background:Shape = new Shape();       background.graphics.beginFill(0xEEEEEE, 1);       background.graphics.drawRect(0, 0, 100, 20);       background.graphics.endFill();       addChild(background);       // Create the icon, and also draw a rectangle        // within the icon.       var icon:Sprite = new Sprite();       icon.graphics.beginFill(0xAAAAAA, 1);       icon.graphics.drawRect(4, 4, 12, 12);       icon.graphics.endFill();       // Listen for mouse events on the icon.       icon.addEventListener(MouseEvent.MOUSE_OVER, onIconMouseOver, false, 0, true);        icon.addEventListener(MouseEvent.MOUSE_OUT, onIconMouseOut, false, 0, true);       addChild(icon);       // Create a text field to use as a label.       var label:TextField = new TextField();       label.height = 20;       label.x = 22;       label.text = text;       label.selectable = false;       label.autoSize = TextFieldAutoSize.LEFT;        addChild(label);      }      private function onIconMouseOver(event:MouseEvent):void {        var colorTransform:ColorTransform = new ColorTransform();        colorTransform.color = 0xFFFFFF;        (event.target as Sprite).transform.colorTransform = colorTransform;      }      private function onIconMouseOut(event:MouseEvent):void {        var colorTransform:ColorTransform = new ColorTransform();        colorTransform.color = 0xAAAAAA;         (event.target as Sprite).transform.colorTransform = colorTransform;      }    } }

The preceding code is fairly basic. When the user moves the mouse over the icon, the icon changes color using events. Next we'll look at how to use this button.

Creating the Main Class

Now that we have our IconButton class, we need to create a simple main class that uses the button We'll do this with a ButtonExample class that will serve as the main class for this project. In the constructor, we create an instance of the IconButton class, add a couple event listeners, and add the IconButton instance to our display list. Notice that we add two listeners that are nearly the same. We're doing this to illustrate the useCapture functionality. The second listener has the useCapture parameter set to true. Each of these listeners is treated separately, so our class should get the MOUSE_UP event twice: once during the capture phase and the second during either the target or bubble phase.

That last statement may seem a bit confusing. What determines whether the MOUSE_UP event will be dispatched to our ButtonImp class during the target phase versus the bubble phase? Well, it all comes down to which element inside our button is clicked on. If the user clicks on the icon Sprite, then the icon is going to be the target of the event. Because our ButtonImp class registered itself directly to the IconButton class, we wouldn't get that event during the target phase. However, the MOUSE_OVER and MOUSE_OUT events inside the IconButton class would occur in the target phase because the IconButton registered itself directly to the icon Sprite. The same would be true if the user clicked on the TextField. Therefore, the ButtonImp gets those events through bubbling.

Recall that we also have a third element in our button: the background Shape. If the user clicks on it, the Shape does nothing because Shape doesn't dispatch a MOUSE_UP event. Therefore, the IconButton would dispatch the event and our ButtonImp would get its event during the target phase.

The following code is our ButtonImp class. Notice the trace statements in the listener function. These trace statements allow you to see the event's phase and the difference between the target and currentTarget properties for each event.

package {    import flash.display.Sprite;    import flash.events.MouseEvent;    public class ButtonExample extends Sprite {       public function ButtonExample() {          var button:IconButton = new IconButton("Test");          button.addEventListener(MouseEvent.MOUSE_UP, onMouseUp, false, 0, true);          button.addEventListener(MouseEvent.MOUSE_UP, onMouseUp, true, 0, true);          addChild(button);       }       private function onMouseUp(event:MouseEvent):void {          trace("phase: " + event.eventPhase);          trace("target: " + event.target);          trace("currentTarget: " + event.currentTarget);       }    }  }