- 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
Mouse Detection
Mouse events such as a button click, double-click, or simply moving the mouse are handled by the MouseEvent class. Since the mouse is one of the primary means through which a user interacts with a Flash movie, it's important to understand how to listen and respond to mouse events.
The simplest event is the button click, which happens when the user presses and then releases the mouse button. You can detect and respond to a button click by first creating a function with a MouseEvent parameter:
function reportClick (myevent:MouseEvent):void {
// do something in response
};
Next, you can detect a click by attaching a listener to the main Stage (referred to as stage) and using the property MouseEvent.CLICK as follows:
stage.addEventListener(MouseEvent.CLICK, reportClick);
If you want to detect a click on a particular object, use the object's name instead of the word stage. Flash can listen for a mouse event on any object of the InteractiveObject class displayed on the Stage (button, text field, Loader, Sprite, movie clip, or the Stage).
Table 4.1 details the specific properties that describe the events of the MouseEvent object.
Table 4.1. MouseEvent Properties
|
Property |
Description |
|
CLICK |
Happens when the mouse button is pressed and then released |
|
DOUBLE_CLICK |
Happens when the mouse button is clicked twice in rapid succession |
|
MOUSE_MOVE |
Happens when the mouse pointer moves |
|
MOUSE_DOWN |
Happens when the mouse button is pressed |
|
MOUSE_UP |
Happens when the mouse button is released |
|
MOUSE_OVER |
Happens when the mouse moves from a non-target area over a target area |
|
MOUSE_OUT |
Happens when the mouse moves from a target area out of the target area |
|
MOUSE_WHEEL |
Happens when the mouse wheel is rotated |
To detect a mouse click on the Stage
- Select the first frame of the main Timeline, and open the Actions panel.
- Enter the following function:
function reportClick (myevent:MouseEvent):void { // do something in response };In between the curly braces, enter actions as a response. - On the next available line, assign a listener to the main Stage with the following code:
stage.addEventListener (MouseEvent.CLICK, reportClick);
When the MouseEvent.CLICK event is detected on the main Stage, the function called reportClick is called. Choose Control > Test Movie.
Whenever you click the mouse button, Flash performs the actions listed within the reportClick function (Figure 4.3).
Figure 4.3 The event handler in the Actions panel (above) makes the Output window display "click" in authoring mode whenever the mouse button is clicked (below).
)
To detect a mouse movement on the Stage
- Select the first frame of the main Timeline, and open the Actions panel.
- Enter the following function:
function reportMove (myevent:MouseEvent):void { // do something in response };In between the curly braces, enter actions as a response. - On the next available line, assign a listener to the main Stage with the following code:
stage.addEventListener (MouseEvent.MOUSE_MOVE, reportMove);
When the MouseEvent.MOUSE_MOVE event is detected on the main Stage, the function called reportMove is called. Choose Control > Test Movie.
Whenever you move the mouse button, Flash performs the actions listed within the reportMove function (Figure 4.4).
Figure 4.4 This movie contains a frame-by-frame animation of a three-wheeler that rotates. Any time the mouse pointer moves, Flash advances to the next frame.
)
The mouse wheel
The mouse wheel is a third button that is nestled between the left and right mouse buttons and spins forward or backward like a wheel. By listening for the MouseEvent.MOUSE_WHEEL event, you can respond to the mouse wheel motion and direction. For example, you can connect the forward or backward motion of the mouse wheel to the up or down scrolling of text or to the selection of items in a pull-down menu.
The MOUSE_WHEEL event has the property delta, which is a number that indicates how quickly and in what direction the user spins the mouse wheel. A positive (+) delta refers to a forward motion (away from the user) of the mouse wheel (Figure 4.5). A negative (–) delta refers to a backward motion (toward the user). The values of delta range from -3 to 3. You can use the delta property within the function of your event handler to respond according to the direction of the mouse wheel.
)
Figure 4.5 The mouse wheel returns a positive delta when it rolls forward and a negative delta when it rolls backward.
Although you can author the MOUSE_WHEEL event handler on either a Macintosh or Windows, the playback functionality is only available on Windows.
To detect mouse wheel motion
- Select the first frame of the main Timeline, and open the Actions panel.
- Create the function that will respond to the MouseEvent. In between the curly braces of the function, incorporate the delta property of the MouseEvent object to reflect the forward or backward roll of the mouse wheel:
function moveRocket (myevent:MouseEvent):void{ myRocket_mc.x += myevent.delta; };In this event handler, the movement of the mouse wheel adds or subtracts from the horizontal position of the movie clip called myRocket_mc (Figure 4.6).
Figure 4.6 The movie clip on the Stage moves to the right if the delta property is positive, and moves to the left if the delta property is negative.
- On the next line, add the listener to the stage:
stage.addEventListener (MouseEvent.MOUSE_WHEEL, moveRocket);
Choose Control > Test Movie on a Windows computer.
As you move the mouse wheel backward or forward, the movie clip on the Stage changes its position (Figure 4.7).
Figure 4.7 The full code for responding to the mouse wheel on the Stage. When the mouse wheel rolls forward, the movie clip moves to the right. When the mouse wheels rolls backward, the movie clip moves to the left.
)
)
To target an object to respond to mouse wheel motion
- Continue with the previous task.
- Select the first frame of the main Timeline, and open the Actions panel.
- Change the addEventListener() method to target the movie clip myRocket_mc instead of the stage (Figure 4.8).
Figure 4.8 To detect the mouse wheel event just on the target, add the listener to the target instead of the Stage.
Choose Control > Test Movie on a Windows computer.
Now the listener only detects the MOUSE_WHEEL event over the movie clip instance. When you move the mouse wheel over the movie clip on the Stage, the movie clip changes its position (Figure 4.9).
Figure 4.9 The movie clip called myRocket_mc will change its x-position only when the user rolls the mouse wheel when it is over the movie clip.
)
)