Pressing and Releasing a Movie Clip

The mouse is a pretty cool invention, but in essence, its a simple device. It really does only two things: It detects motion and button clicks. Of course, the computer then uses that information to do a lot more: keeping track of the position of a mouse cursor, determining where the cursor is when the click occurs, determining how fast the mouse is moving, and figuring out when a double-click occurs. But really, when you look at it in terms of events, it all comes down to clicks and movement.

You can also break clicks down into two parts : the event that occurs when the mouse button goes down and the next event when it comes up. Sometimes, those events occur almost instantaneously. Other times, the events are separated by time and motion, which is usually interpreted as a drag click, move, and then release. In this chapter, youll concentrate on those three things: the mouse going down, the mouse going up, and any motion that occurs in between the two.

A movie clip can respond to most mouse events at any time, regardless of the position of the mouse and the movie clip. Even if the mouse cursor is nowhere near the clip, or the clip is empty of any graphical content, or the clip is invisible, it can still get mouse events. But of course, its very valuable to know when the mouse is clicked on a movie clip. Thus, you need some way of differentiating between when the mouse button is being pressed or released over the movie clips graphics and when it is being pressed anywhere else in the movie. This is why ActionScript has five separate events for mouse clicks: onMouseDown , onMouseUp , onPress , onRelease , and onReleaseOutside .

The onMouseDown and onMouseUp event handlers are called for every movie clip in the movie, whenever the mouse button is pressed or released, regardless of mouse position in relationship to the movie clip. If the movie clip is in existence in the movie at the time of the mouse event, it will get the event.

The onPress event handler is called only when the mouse button is pressed while the mouse cursor is over some graphical portion of a movie clip. I guess the idea is to simulate your finger touching an actual button and pressing it down. Furthermore, only one movie clip will receive the onPress event when it is fired . That is the topmost movie clip with graphical content that has any defined onPress , onRelease , or onReleaseOutside event handlers. In other words, if two overlapping movie clips both have some kind of mouse-click-handling functions assigned, only the top clip will receive any of the mouse events, as illustrated in Figure 7-1. A clip without any of these event handlers assigned will allow these events to pass through to any movie clip below it that is interested in handling them.

Figure 7-1: Two overlapping movie clips with mouse event handlers. Only the top one receives the event.

Another tricky aspect of this is a movie clip that contains other movie clips. If you define onPress , onRelease , or onReleaseOutside on the outer clip, it will capture all of these events, and the inner movie clips will not be able to respond to them.

The onRelease handler is called only after an onPress event occurs, when the mouse button is released while the mouse cursor is still over the movie clip. In other words, for an onRelease event to occur, the mouse cursor must be over the movie clips graphics when the mouse is clicked and when it is released. For an onReleaseOutside to occur, first an onPress must occur, then the mouse cursor is moved off the graphics, and then the mouse button is released. Thus, you can see that an onPress event must always be followed by either an onRelease event or an onReleaseOutside event (unless, of course, youve spilled a beverage of some sort onto your mouse and the buttons get permanently stuck in a down state).

The next important feature about mouse events is that, like onEnterFrame , all of them are automatically listened for by every movie clip in the movie. All you need to do is create a function with the appropriate name , and it will be called as soon as that event occurs for that movie clip.

OK, lets see some of this in action. Youll mostly be working on a single file throughout this chapter, so go ahead and set up a new FLA file with the usual ball movie clip. Place an instance of the ball on stage and name it ball . Place the following code (found in ch07_01.fla ) on frame 1:

 ball.onMouseDown = function() {       trace("mouse down"); } ball.onMouseUp = function() {       trace("mouse up"); } ball.onPress = function() {       trace("press"); } ball.onRelease = function() {       trace("release"); } ball.onReleaseOutside = function() {       trace("release outside"); } 

This just sets up handlers for the five mouse button events and lets you know when they occur. You can build this file and play around with it to see exactly when and where particular mouse events occur, until it is all clear. Here are some things to notice:

• Mouse down and mouse up events occur no matter where you click.

• If you click on the ball, you get a mouse down event and a press event.

• When you then release the mouse, you get a mouse up event and then either a release or release outside event.

• Its impossible to get a release or release outside event without first getting a press event.

Now that you know how to press and release a movie clip, well move on to the dragging part.