Movie Clip Buttons

Just like the component Button is a movie clip, you can create your own movie-clip buttons. This allows you to create more than three states; for example, you may wish to create an inactive state. However, to make the movie clip button respond to mouse movements, you must attach ActionScript, whereas this response to mouse movements occurs automatically with button symbols.

Exercise: Choose Insert>New Symbol, choosing Movie Clip as the symbol type. Add two layers to the symbol (Actions and Labels), naming the original layer ButtonGraphics. Insert blank keyframes for layers 4,7, and 10; spacing out the keyframes lets you view the frame labels. In the ButtonGraphics layer, draw an oval and select the oval and choose Edit>Copy and then in the keyframe 4, select Edict>Paste in Place, changing the fill color. Repeat this for keyframes 7 and 10. (Note one could also have used F6 to cover over the content.

In the labels frame, add _up as the label name for frame 1, _over for frame 4, _down for frame 7, and Diasbled for frame 10. If your frame labels do not display, click at the right of the timeline and increase the size of the frames in the Timeline. Place an instance of the symbol on the Stage.

Adding comments - you can enter a frame comment, in the name field adding // followed by your comment. Since you cannot use frame labels and frame comments at the same time, you can create a separate layer for comments, putting comments in one layer and labels in another.

Scripting the Movie Clip to Act like a Button

In the symbol's timeline, in frame 1 of the Actions layer, enter the following code:

stop();
buttonMode = true;

Since movie clips will play by default, the stop() keeps the button in the over state (frame 1) until the user interacts with it. The second statement will make the movie clip act like a button, i.e. when you mouseover it, the pointer changes to a hand and the movie clip goes to and stops at the _over frame and when you click on the button, the playhead goes to and stops at the _down frame, just like a regular button.

To add a mouse event handler that displays the disabled state

Enter an instance name for the movie clip button, e.g. myBtn and name the layer containing the movie clip. Add a new layer called Actions. In frame 1 of the Actions layer, type // followed by a description (// is used to comment your code). Type myBtn followed by a period and notice that no code hints appear. Now add the following

// code-hint comments
// MovieClip myBtn;

This comment activates code hints by telling Flash that hte instance myBtn is a MovieClip object. Now type myBTN followed by a period like before -- now you will see code hints appearing. In earlier examples, we saw that if one named the instance name with particular endings, e.g. _btn or _mc or _txt, that code hints would appear. This shows how one can get code hints if one departs from this naming convention. One then can add the following code:

function handleClick (event:MouseEvent): void {
if (event.target == myBtn) {
myBtn.enabled = false;
myBtn.gotoAndStop("disabled");
}
}
myBtn.addEventListener(MouseEvent.CLICK, handleClick);

This ensures the the event was triggered by the button instance intended, myBtn, and prevents the button from receiving any more mouse events by setting the enabled property to false.

Revised: August 10, 2010. Source: Flash CS4 Professional Visual QuickStart Guide, Katherine Ulrich, pp. 415-418, 459-462.