- 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 
.
)
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 onto the Stage.
- Select the button instance, and enter a descriptive name in the Properties inspector. Add the suffix _btn to the name. In this example, the button name is mybutton_btn
.
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 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
.
- Choose Control > Test Movie > in Flash Professional.
Whenever you click the mouse button on the button instance, Flash performs the actions listed within the reportClick function
.
)
)
)
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.MOUSE_MOVE, MouseEvent.MOUSE_OVER, and so on)
.
TIP
Don’t confuse the MouseEvent.MOUSE_OVER event with the Over keyframe of your button symbol. Both involve detecting when the pointer is over the hit area. But the Over state describes how your button appears when the mouse is over the hit area, whereas the MouseEvent.MOUSE_OVER event triggers the function for that event. The keyframes of a button symbol define how it looks, and the event handler defines what it does
.
)
)