Movie Clip Events

Movie clips are another object that uses events regularly. They have several events that may look like duplicates of the button events, but they are independent of them.

Table 14.2 shows the events supported by movie clips.

Table 14.2. Movie Clip Events

Event Handler Actions	Event Handler Methods	Action Description
onClipEvent (load)	onLoad	The event that is triggered when a movie clip loads
onClipEvent (unload)	onUnload	The event that is triggered when a movie clip is unloaded
onClipEvent (enterFrame)	onEnterFrame	The event that is triggered as close to the frame rate of a movie clip as possible (the frame rate can be found in the Properties Inspector when the stage has focus)
onClipEvent (mouseDown)	onMouseDown	The event that is triggered whenever the mouse button is pressed anywhere on the stage
onClipEvent (mouseUp)	onMouseUp	The event that is triggered whenever the mouse button is released after an onMouseDown event
onClipEvent (mouseMove)	onMouseMove	The event that is triggered whenever the mouse moves anywhere on the stage
onClipEvent (KeyDown)	onKeyDown	The event that is triggered whenever the user presses a key (after the stage has received focus)
onClipEvent (keyUp)	onKeyUp	The event that is triggered when a user releases a key (after the stage has received focus)
onClipEvent (data)	onData	The event that is triggered when the movie clip receives data

Now that you've seen the events associated with movie clips, here is an example of how to use them:

1.

Create a new Flash document.

2.

Open the Actions panel in the first frame of the main timeline, and place these actions in it: //create the event for when a user presses the mouse button this.onMouseDown = function(){ //create the event for when the user moves the mouse this.onMouseMove = function(){ //send the mouse coordintates to the output panel trace("x="+this._xmouse+",y="+this._ymouse); } } //create the event for when the user releases the mouse this.onMouseUp = function(){ //destroy the onMouseMove event delete this.onMouseMove; }

The preceding code creates a callback for the onMouseDown event which, when triggered, will create another callback with the onMouseMove event that will continually trace the mouse position while the mouse moves. Then we created a callback for the onMouseUp event that will destroy the onMouseMove callback so that when the user releases the mouse, the trace function will no longer send the mouse position to the Output panel while the mouse moves.

Test the movie, and you will see that if you drag the mouse cursor around the stage, the position will continually be sent to the Output panel. When you release the mouse, the position will no longer be traced.

Even though we listed all the events associated with the movie clip object, those are the events that are associated solely with the movie clip object. The movie clip object itself actually shares other events with the button object.

Movie Clips Handling Button Events

The movie clip object can use all events associated with the button, as well as the movie clip events. Something to note about using button events with movie clips is that if you create a callback for a movie clip object with a button event, the movie clip will display the "button hand" when the mouse cursor is over the top of it.

Here is an example using a movie clip with button events:

1.	Create a new Flash document.
2.	Draw a square with both width and height of about 100 pixels.
3.	Highlight the square you just created, including the stroke, and choose Modify, Convert to Symbol.
4.	Give the square a symbol name of squareMC and choose Movie Clip for behavior.
5.	Back on the stage, give the instance of the square an instance name of square_mc.
6.	Create another layer and name the layer actions.
7.	In the actions layer, open the Actions panel, and place these actions in it: //stop the square_mc's playahead square_mc.stop(); //create the release function square_mc.onRelease = function(){ trace("movie clipped released"); }

The first thing the preceding code does is to stop the play head of the square_mc movie clip. Normally, this is not necessary because the movie clip only has one frame, but it will become necessary in the next example. The next thing the code does is create a callback event for the square_mc with the button event onRelease.

Now test the movie, and you will see that every time you click the square_mc movie clip, the message will be sent to the Output panel, as you can see in Figure 14.4.

Figure 14.4. Button events are supported by movie clips.

But it's not just the events of buttons that are supported by movie clipsyou can also use the special button frames within movie clips. All you have to do is create four keyframes and label each keyframe with these labels:

• _up This is the frame representing the up state of the button/movie clip.

• _over This is the frame representing the over state of the button/movie clip.

• _down This is the frame representing the down state of the button/movie clip.

• _hit This is the frame representing the hit area of the button/movie clip.

Now we are going to continue the preceding example by creating the button states in the movie clip:

1.	Close the test movie screen and return to the main timeline.
2.	Double-click the instance of the square to enter edit mode.
3.	Create three more keyframes, preferably spaced apart a bit so that you can easily read the states.
4.	Create a new layer and name it labels.
5.	Make sure the labels layer has the same keyframes as the other layer in the movie clip.
6.	Label each key frame in the labels layer; "_up", "_over", "_down", and "_hit" in that order.
7.	Then in each keyframe, change the fill color of the square (your screen should look similar to Figure 14.5). Figure 14.5. Using special frame labels, you can create button states within movie clips.
8.	Now test the movie.

Test the movie, and you will see that when you roll your mouse over or press the mouse over the square_mc movie clip, the button changes color to the colors we used in the keyframes.

Now you have seen the events for both buttons and movie clips, but they are not the only objects that have events. Many other objects have events, and here are a few of them starting with the Mouse object.