• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Mouse Detection

The Mouse class, like the Key class, is one of the few ActionScript classes that do not need to be instantiated before you can use it. Its properties are available immediately, and its methods are called with the class name (Mouse). You will learn about its methods and properties in Chapter 7 when you learn more about the movie clip. Here, you’ll learn about the mouse events and how to detect them.

You can detect four mouse events: onMouseMove, onMouseDown, onMouseUp, and onMouseWheel. The onMouseMove event happens whenever the user moves the mouse pointer, onMouseDown happens when the mouse button is pressed, onMouseUp happens when the mouse button is released, and onMouseWheel happens when the user scrolls the mouse wheel. To detect onMouseMove, onMouseDown, or onMouseUp, you can assign an anonymous function on the main Timeline, like this (_root is an ActionScript word that refers to the main Timeline):

_root.onMouseMove = function(){ }

Another way to detect any of the mouse events is to create a listener, just as you do to detect key events. Create a listener from the generic Object class. Assign a mouse-event handler to the listener and then register your listener with the Mouse class, using the method Mouse.addListener().

To detect mouse movement:

1.
Select the first frame of the main Timeline, and open the Actions panel.

2.
Choose Built-in Classes > Movie > Mouse > Listeners > onMouseMove. Complete the handler by adding =function(){} (Figure 4.83).

Figure 4.83. An onMouseMove event handler.


3.
Because no instance was defined, select and delete instanceName from the Script pane and replace it with _root, which refers to the main Timeline.

The onMouseMove event handler is assigned to the main Timeline.

4.
Choose an action as a response to this event.

Whenever the mouse moves, Flash performs the actions listed within the onMouseMove event handler (Figure 4.84).

Figure 4.84. This movie contains a frame-by-frame animation of a three-wheeler that rotates. Anytime the mouse pointer moves, Flash advances to the next frame.


5.
Choose Global Functions > Movie Clip Control > updateAfterEvent.

The updateAfterEvent action forces Flash to refresh the display. For certain events, such as onMouseMove, updateAfterEvent makes certain that the graphics are updated according to the event, not the frame rate.

To create a listener to detect a mouse press:

1.
Select the first frame of the main Timeline, and open the Actions panel.

2.
Enter a name for your listener object, followed by the equals sign (=).

3.
Choose Built-in Classes > Core > Object > new Object.

The constructor function new Object() appears. Flash instantiates a new generic object, using the name you entered for your listener (Figure 4.85).

Figure 4.85. A listener called myListener has been created.


4.
On a new line, enter the name for the listener object that you just created.

5.
Choose Built-in Classes> Movie > Mouse > Listeners > onMouseDown. Complete the handler by adding =function(){}.

The onMouseDown event handler for your listener is created (Figure 4.86).

Figure 4.86. The onMouseDown event is assigned to your listener.


6.
Now choose an action as the response to the onMouseDown event (Figure 4.87).

Figure 4.87. When the listener detects the mouse button being pressed, Flash goes to the next frame.


7.
On a new line, choose Built-in Objects > Movie > Mouse > Methods > addListener.

8.
Enter the name of your listener between the opening and closing parentheses (Figure 4.88).

Figure 4.88. The final step in using this listener is registering it to the Mouse class. The stop action has been added here to keep the movie at Frame 1 until the event happens.


Your listener is registered and will now listen and respond to the onMouseDown event.

The mouse wheel

Available only on Windows machines, 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 assigning the mouse event onMouseWheel to a listener, you can detect and respond to the mouse wheel motion. 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.

Two parameters are available when you define the function for the onMouseWheel event: delta and scrollTarget. The parameter delta is a number that indicates how quickly the user spins the mouse wheel. A positive (+) delta refers to a forward motion of the mouse wheel (Figure 4.89). A negative () delta refers to a backward motion. The parameter scrollTarget refers to the movie-clip instance over which the mouse wheel was scrolled. This parameter is useful to target only the object that lies under the mouse pointer.

Figure 4.89. The mouse wheel returns a positive delta when it rolls forward and a negative delta when it rolls backward.


To detect mouse wheel motion:

1.
Select the first frame of the main Timeline and open the Actions panel.

2.
Enter a name for your listener object, followed by the equals sign (=).

3.
Choose Built-in Classes > Core > Object > new Object.

A listener object is instantiated.

4.
On the next line, enter the name for the listener object that you just created.

5.
Choose Built-in Classes> Movie > Mouse > Listeners > onMouseWheel. Complete the handler by adding =function before the parentheses and {} after the parentheses. The onMouseWheelevent handler for your listener is created (Figure 4.90).

Figure 4.90. The onMouseWheel event is assigned to your listener called myListener.


6.
Inside of the function (between the opening and closing curly braces), enter an action that will respond to the motion of the scroll wheel (Figure 4.91).

Figure 4.91. For each notch that the user scrolls on the mouse wheel, Flash will move the movie clip called rocket_mc up or down on the y-axis.


7.
On the next line, select Built-in Classes > Movie > Mouse > Methods > addListener.

8.
As the parameter of the addListener method, enter the name of the listener object you wish to register.

Your listener is registered and will now listen and respond to the motion of the mouse wheel (Figure 4.92).

Figure 4.92. The completed code (top) allows the user to decrease the y position of the movie clip called rocket_mc by rolling the mouse wheel forward or increase the y position by rolling the mouse wheel backward.


Often, there is more than one object on the Stage that can respond to the mouse wheel. In those cases, the object that is directly under the mouse pointer is usually the one that responds. For example, in a browser window, the mouse wheel controls text scrolling only in the frame that is under the pointer. The onMouseWheel event provides the parameter scrollTarget, which returns the name of the object that is under the mouse pointer. Knowing the name of the object lets you control it according to the motion of the mouse wheel.

To target an object to respond to mouse wheel motion:

1.
Create multiple movie-clip symbols and place them on the main Stage.

2.
Select the first frame of the main Timeline and open the Actions panel.

3.
Enter a name for your listener object followed by the equals sign (=).

4.
Choose Built-in Classes > Core > Object > new Object.

Your listener object is instantiated.

5.
On the next line, enter the name for the listener object that you just created.

6.
Choose Built-in Classes> Movie > Mouse > Listeners > onMouseWheel. Complete the handler by adding =function before the parentheses and {} after the parentheses.

The onMouseWheel event for your listener is created (Figure 4.93).

Figure 4.93. The onMouseWheel event is assigned to the listener called mouseListener.


7.
Inside the function (between the opening and closing curly braces), enter an action that tells the parameter scrollTarget to respond to the motion of the mouse wheel.

In this example (Figure 4.94), the rotation property of the object directly under the mouse pointer changes according to the mouse wheel motion.

Figure 4.94. The scrollTarget returns the name of the movie clip directly under the mouse pointer. Line 3 in this Script pane allows the mouse wheel to change the rotation of any movie clip that is under the mouse pointer.


8.
On the next line, select Built-in Classes > Movie > Mouse > Methods > addListener.

9.
As the parameter of the addListener method, enter the name of the listener object you created in step 3 (Figure 4.95).

Figure 4.95. Here, the top-right dial is a movie clip whose rotation property can be currently affected by the mouse wheel.


Your listener is registered and will now listen and respond to the motion of the mouse wheel.

✓ Tip

  • Multiline textfields (discussed in Chapter 10) automatically scroll in response to the mouse wheel. You can, however, disable the mousewheel with the textfield property mouseWheelEnabled. Set the mouseWheelEnabled property of any textfield to false like so:

    myTF_txt.mouseWheelEnabled = false
    

    The textfield called myTF will no longer respond to the mouse wheel.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint