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

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
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 attaching a listener to the main Stage (referred to as stage) and using the property MouseEvent.CLICK as follows:

stage.addEventListener(MouseEvent.CLICK, reportClick);

Next, create a function with a MouseEvent parameter:

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

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 clicked

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 nontarget 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

  1. Select the first frame of the main Timeline, and open the Actions panel.
  2. 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 triggered.

  3. On the next available line, enter the following function:
    function reportClick(myevent:MouseEvent):void {
       // do something in response
    }

    Between the curly braces, enter actions as a response.

  4. Choose Control > Test Movie > in Flash Professional.

    Whenever you click the mouse button, Flash performs the actions listed within the reportClick function circle-a.jpg. The function name reportClick and Event name myevent are names that you make up yourself, as long as they follow the standard naming rules laid out in Chapter 3, “Managing External Communication.”

To detect a mouse movement on the Stage

  1. Select the first frame of the main Timeline, and open the Actions panel.
  2. 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.

  3. On the next available line, enter the following function:
    function reportMove(myevent:MouseEvent):void {
       // do something in response
    }

    Between the curly braces, enter actions as a response.

  4. Choose Control > Test Movie > in Flash Professional.

    Whenever you move the mouse, Flash performs the actions listed within the reportMove function circle-b.jpg.

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 pulldown 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 circle-c.jpg. A negative (–) delta refers to a backward motion (toward the user). The values of delta typically 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.

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

  1. Select the first frame of the main Timeline, and open the Actions panel.
  2. Add the listener to the stage:
    stage.addEventListener(MouseEvent.MOUSE_WHEEL, moveRocket);
  3. On the next available line, create the function that will respond to the MouseEvent. 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 circle-d.jpg.

  4. Choose Control > Test Movie > in Flash Professional on a Windows computer.

    As you move the mouse wheel backward or forward, the movie clip on the Stage changes its position circle-e.jpg.

To target an object to respond to mouse wheel motion

  1. Continue with the previous task.
  2. Select the first frame of the main Timeline, and open the Actions panel.
  3. Change the addEventListener() method to target the movie clip myRocket_mc instead of the stage circle-f.jpg.
  4. Choose Control > Test Movie > in Flash Professional 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 circle-g.jpg.

  • + Share This
  • 🔖 Save To Your Account