Advanced Buttons and Event Handling in Adobe Flash CS5
- Listening for Events
- Mouse Detection
- The SimpleButton Class
- Invisible Buttons
- Animated Buttons and the Movie Clip Symbol
- Complex Buttons
- Button-tracking Options
- Changing Button Behavior
- Creating Buttons Dynamically
- Keyboard Detection
- The Contextual Menu
- Creating Continuous Actions
- A Summary of Events
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating graphics and animation in Flash is only half the story. The other half is interactivity, which involves giving the viewer control of those graphics and animation. What makes a movie interactive? It’s the back-and-forth communication between the user and the movie. Mouse movements, button clicks, or keypresses are examples of things that happen, called events. Events form the basis of interactivity. There are many kinds of events—some are user driven whereas others are not. You’ll learn to make Flash listen for and respond to these events (event handling).
This chapter first introduces events, listeners, and functions used to respond to events. Next, it explores the simplest class for creating interactivity: the SimpleButton class. You’ll learn about invisible buttons, animated buttons, and more complex buttons. You’ll also learn about the classes and events that are involved in keyboard input and the context menu. Additionally, you’ll learn an important event known as the ENTER_FRAME event, which you’ll rely on to create continuously running actions. Understanding these classes and event handling is essential to creating Flash interactivity because these elements are the scaffold on which you’ll hang virtually all your ActionScript.
Listening for Events
Events are things that happen that Flash can recognize and respond to. A mouse click is an event, as are mouse movements and keypresses. Events can also be things that the user doesn’t initiate. The completion of a sound, for example, is an event. Anytime an event happens, an object of the Event class is created. When the mouse button is clicked, a MouseEvent object (a subclass of the Event class) is created. When a key on the keyboard is pressed, a KeyboardEvent object (another subclass of the Event class) is created. It may seem a little strange that an object represents an event, but remember Flash objects can be very abstract!
With all these events happening, you need a way to detect and respond to them. You detect an event by creating an event handler. An event handler simply tells Flash what to do when a specific kind of event happens. Creating an event handler is a two-part operation: first, you add, or “register,” a listener to detect the event and trigger a function, and second, you create the function that tells Flash how to respond. (It doesn’t matter if you register the listener first or create the function first. As long as they are both in the same block of code, the event handler will work.)
For example, if you want to listen for a mouse click on top of a particular button, you add an event listener to that object as follows:
myButton_btn.addEventListener(MouseEvent.CLICK, reportClick);
The addEventListener() method takes two parameters. The first is the specific kind of event that you want to detect. All the event objects have properties (like MouseEvent.CLICK), which give more specificity to the event. The second parameter is the name of your function, which is triggered when the event is detected.
Next, add a function as the response to the event. Create the function with a parameter strictly typed to the MouseEvent object, like so:
function reportClick(myevent:MouseEvent):void {
// do something in response
}
Between the curly braces of the function, you add actions as the response. The word myevent in this example is the parameter name that you make up that refers to the event.
The actual object that receives the event (in this example, it is the button called myButton_btn) can be referenced in the function by using the property target. In the preceding example, the expression myevent.target references myButton_btn.
When you no longer need to listen for an event, you can delete the listener with the method removeEventListener(). The method takes two parameters, which are identical to the ones in the addEventListener() method.
Event Flow
Event handling is a little more involved than what is described here. When an event occurs and an Event object is created, the Event object systematically moves through other objects on the Flash Stage in a process known as the event flow. There are three
parts to the event flow: a capture phase, a target phase, and a bubbling phase. Imagine that a mouse click happens on a button
that is inside a movie clip on the Stage 
. The MouseEvent object is created, is dispatched from the Stage, and flows down to the movie clip and to the button inside the movie clip.
That downward flow through those objects is the capture phase. The target phase involves the time the MouseEvent object is at the target (the button). Then the MouseEvent object proceeds to bubble, or flow, up the hierarchy to the main Stage 
. This round-trip flow is important because it lets you put a listener at any point along its path and still detect the event.
In other words, the listener doesn’t have to be tied to the object where the event occurs.
)
)
However, many events don’t proceed through all three phases of the event flow. Some events, such as the Event.ENTER_FRAME object, are dispatched directly to the target object and don’t participate in a capture or bubbling phase. Consult the Adobe ActionScript 3.0 Language Reference to learn more about each particular kind of event.