Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

Advanced Buttons and Event Handling

  • Print
  • + Share This
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 via buttons, the keyboard, and the mouse. Interactivity is essential for basic site navigation and interfaces on the Web, as well as for game development, online tutorials, or anything else that requires the viewer to make choices.

What makes a movie interactive? Interactivity is the back-and-forth communication between the user and the movie. In a Flash movie, the user might react to something that's going on by moving the pointer, clicking the mouse button, or pressing a key on the keyboard. That reaction may trigger a response from the Flash movie, which in turn prompts the user to do something else. The things that the user does—mouse movements, button clicks, or keyboard presses—are part of things that happen, called events. Events form the basis of interactivity. There are many kinds of events—some are user driven while others are not. You'll learn to make Flash listen for these events and respond to them. This whole process is known as 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 how to extend its functionality by creating invisible buttons, animated buttons, and more complex buttons, such as a pull-down menu. You'll also learn about the classes and events that are involved in keyboard input and the contextual menu. Finally, 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 on the keyboard. 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 listener (or event handler). An event listener is simply a function that tells Flash what to do when a specific kind of event happens. Creating an event listener is a two-part operation: first you create a function, and second, you tell Flash where to put the listener. (It actually doesn't matter if you create the function first or the event listener 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, you create a function with a parameter strictly typed to the MouseEvent object like so:

function reportClick (myevent:MouseEvent):void {
   // do something in response

In 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. Next, you decide where you want to listen for the mouse click. If you want to listen for a mouse click on top of a particular button, then you add an event listener to that object:

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.

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 example above, the expression 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.

  • + Share This
  • 🔖 Save To Your Account