- 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
The SimpleButton Class
In the previous section, you were able to listen for a mouse click on the Stage. But more often than not, you’ll want to detect a mouse click when it happens on a specific object on the Stage, like a button, movie clip, or a text field. The SimpleButton class handles the visual objects that interact with the mouse pointer. Flash lets you define four special keyframes of a button symbol that describe how the button looks and responds to the mouse: the Up, Over, Down, and Hit states. The Up state shows what the button looks like when the pointer isn’t over the button. Over shows what the button looks like when the pointer is over the button. Down shows what the button looks like when the pointer is over the button with the mouse button pressed. And Hit defines the actual active, or hot, area of the button (Figure 4.10).
)
Figure 4.10 The four keyframes of a button symbol.
It’s important to realize that events can target many kinds of objects, not just buttons. Buttons just give you a convenient way to create graphics that provide visual feedback when the mouse is interacting with them.
To detect a mouse event on a button:
- Create a button symbol (Insert > New Symbol), and drag an instance of the newly created button symbol from the Library on to the Stage.
Select the button instance, and enter a descriptive name in the Property inspector. Add the suffix _btn to the name. In this example, the button name is mybutton_btn (Figure 4.11).
Figure 4.11 The button instance is named mybutton_btn in the Property inspector.
This name is the name of your button object; you’ll use it to reference the button from ActionScript. This name is not the same one that appears in your Library.
- Select the first frame of the main Timeline, and open the Actions panel.
In the first line of the Script pane, assign a listener to your button. The target should be the name of your button, like so:
mybutton_btn.addEventListener (MouseEvent.CLICK, reportClick);
When the MouseEvent.CLICK event happens on the button, the function called reportClick is called.
On the next available line, enter the following function:
function reportClick (myevent:MouseEvent):void { // do something in response }The function name reportClick and parameter name myevent can be any name of your own choosing as long as they conform to the standard naming practice. In between the curly braces, enter actions as a response (Figure 4.12).
Figure 4.12 The event handler consists of an event listener and a function. In this example, the movie will stop when the button is clicked.
Choose Control > Test Movie.
Whenever you click the mouse button on the button instance, Flash performs the actions listed within the reportClick function (Figure 4.13).
Figure 4.13 When the mouse click occurs over this button, named mybutton_btn, the actions in the function are executed.
)
)
)
To select different mouse events:
- Highlight the existing first parameter of the addEventListener() method, and press the Delete key.
Type in the name of a different event that should trigger the function (such as MouseEvent.DOUBLE_CLICK, MouseEvent.MOUSE_OVER, etc.) (Figure 4.14).
Figure 4.14 Change the MouseEvent properties to listen for different kinds of mouse events.
)
)
Figure 4.15 The keyframes of a button symbol (top) provide the visual feedback to mouse interaction, and the ActionScript code on the Timeline (bottom) tells Flash what to do when an event happens.