Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Handling Events > Creating movie clips with button states

Creating movie clips with button states

When you attach an on() handler to a movie clip, or assign a function to one of the MovieClip mouse event handlers for a movie clip instance, the movie clip responds to mouse events in the same way as a button. You can also create automatic button states (Up, Over, and Down) in a movie clip by adding the frame labels _up, _over, and _down to the movie clip's timeline.

When the user moves the mouse over the movie clip or clicks it, the playhead is sent to the frame with the appropriate frame label. To designate the hit area that a movie clip uses, you use the hitArea (MovieClip.hitArea property) property.

To create button states in a movie clip:

1. Create a new Flash document and save it as mcbutton.fla.
2. Using the Rectangle Tool, draw a small rectangle (approximately 100 pixels wide by 20 pixels high) on the Stage.
3. Double-click the shape with the Selection tool and press F8 to launch the Convert to Symbol dialog box.
4. Enter a symbol name of mcbutton, set the symbol type to movie clip, and click OK.
5. Double-click the movie clip symbol on the Stage to enter symbol-editing mode.
6. Create a new layer in the movie clip's timeline and rename the new layer labels.
7. Enter a frame label of _up in the Property inspector.
8. Create a new layer above the default layer and labels layer.
9. Rename the new layer actions and add the following ActionScript to Frame 1 of the movie clip's timeline:

   stop();
   

10. Select Frame 10, all three layers, and select Insert > Timeline > Keyframe.
11. Add a stop() action on Frame 10 of the actions layer, and add a frame label of _over in frame 10 of the labels layer.
12. Select the rectangle on Frame 10 and use the Property inspector to select a different fill color.
13. Create new keyframes on frame 20 of each of the three layers, and add a frame label of _down in the Property inspector.
14. Modify the color of the rectangle in Frame 20 so each of the three button states have a different color.
15. Return to the main timeline.
16. To make the movie clip respond to mouse events, do one of the following:
    • Attach an on() event handler to the movie clip instance, as discussed in Using button and movie clip event handlers).
    • Assign a function to one of the movie clip object's mouse event handlers (onPress, onRelease, and so forth), as discussed in About ActionScript and events.
17. Select Control > Test Movie to test the Flash document.

    Move your mouse pointer over the movie clip instance on the Stage and the movie clip automatically goes to the movie clip's _over state. Click the movie clip instance and the playhead automatically goes to the movie clip's _down state.

Flash CS3