Creating MovieClips with Button States in AS 2.0

Here is a quick tutorial on how to create MovieClips that act like buttons using ActionScript 2.0.  Attached is a sample .fla file with a complete, working example.

  1. Create a new Flash document for AS 2.0
  2. Create whatever graphic/shape that you would like and convert it to a symbol.  Double click on on it with the selection tool, and then press F8 to open the create symbol dialog box, or right click on it and select "Create Symbol".  Make sure that you create it as a MovieClip.
  3. Double-click on the new MovieClip to enter the symbol edit mode.
  4. Rename the existing "Layer 1" layer that contains the base graphic "bg".
  5. Create three new layers above that one in this order:
    1. labels
    2. actions
    3. text
  6. On the labels layer:
    1. Create a keyframe at frame 10, 20, and 30
    2. In frame 1, enter the following label: _up
    3. In frame 10, enter the following label: _over
    4. In frame 20, enter the following lable: _down
  7. On the actions layer create a keyframe at frame 10, 20, and 30 and put a stop(); action in frame 1, 10, and 20.
  8. On the text layer, create a keyframe at frame 10 and 20.
    1. Add the following text to each keyframe:
      1. Frame 1: Steady State
      2. Frame 10: Over
      3. Frame 20: Down
  9. Go back to your main timeline, by clicking on the "Scene 1" button.
  10. Select your MovieClip and give it an instance name of button_mc.
  11. Create a new layer in the main timeline and name it actions
  12. Add the following actions to it:
    1. button_mc.onRelease = function(){
          trace( "Click" );
      }
  13. Test your movie and when you rollover and click on the clip you will see the different states displayed.

Leave a Reply