Back to Entry Page

Localizing Mouse Events
Or, The Click Problem

I. The Problem

ActionScript has many quirks and limitations, but perhaps none more bothersome than this: common mouse events are handled inconsistently by buttons and movie clips. Buttons automatically localize mouse events--i.e., a button registers whether a mouseDown or mouseMove happens inside its bounding rectangle. Movie Clips do not perform this function automatically.

Confusingly, ActionScript uses two different pairs of events to register the press and release of the mouse button, the beginning and end stages of what we loosely refer to as a click. Movie clips interpret these actions through the mouseDown and mouseUp events--whose names, at least, will be familiar from JavaScript and other languages. Buttons, on the other hand, respond to press and release.

Press and release are localized. That is, the release event happens only when the mouse button is released while the cursor is over a button Symbol. A button press/release that happens with the cursor outside any button generates no event.

As the demonstration below shows, this provision does not apply to the mouseDown and mouseUp events used by Movie Clips. The mouseDown event simply means that the physical mouse button has been pressed. It says nothing about the cursor position. If you write a script on a Movie Clip that handles the mouseDown event, it will respond no matter where the cursor is. Notably, it will also respond to a click on a button symbol, which in this case generates both a press and a mouseDown.

To see the problem in action, hold the mouse button down while over any of the symbols below. Then try mousing down while your cursor is over no symbol.

If you do not address this problem, you will not be able to use Movie Clips with mouse event handlers in any timeline that also includes buttons--clicks on the buttons will activate the clip handlers as well. Fortunately, there is a simple solution.

II. Localizing Mouse Events with hitTest()

You already know that the hitTest() method of a Movie Clip can determine whether two Movie Clips coincide on the screen. You can also use this method to tell whether the current mouse position, given as the coordinate pair _root._xmouse, _root._ymouse, coincides with a given Movie Clip.

Using the latter technique, here's a script to localize mouseDown:

onClipEvent(mouseDown){
  if(this.hitTest(_root._xmouse, _root._ymouse)){
      //...take some action
  }
}

To test this script in action, try the demonstration below:

If you want a Movie Clip to respond to movement of the mouse within its boundaries with no click (the classic mouseOver), then just change the handler from onClipEvent(mouseDown) to onClipEvent(mouseMove).

The source file for the solution above may be found on Crow as MMShare/clickProblem/clickFix1.fla.

III. Button Movie Clips

Flash MX offers a second solution to the localization problem--setting up a Movie Clip that has many features of a button, called a Button Movie Clip.

Because this technique is very complicated--requiring several layers in the main Movie Clip and a secondary Movie Clip to act as the hit area--we will not discuss it in detail. If you would like to find out more, see pages 128-34 of Chun.

Button Movie Clips can be useful for certain highly specialized applications--animated buttons, for instance--but for most purposes they are more trouble than they are worth. Remember also that you can only use Button Movie Clips in Flash MX.

Stick to the hitTest() solution for everyday use.


University of Baltimore Logo

Copyright © 2002 School of Information Arts and Technologies