Making a MovieClip into a Button


Roll over and press the graphic at left to see how a movieclip can be given the functionality of a button in Flash MX. Notice also that the button acts as a toggle, an added functionality not possible with standard buttons. Finally, hit the spacebar on your keyboard to disable/enable the button. The following tutorial walks you through the steps needed to create such an effect.

Download the sourcefile here.

In this tutorial, we will be looking at turning a movieclip into a button in Flash MX. Although this was possible to achieve in Flash 5, some new features in Flash MX make it even easier to not only simulate a button with a movieclip, but also extend the standard button capabilites, and it's all very easy to do.

  1. Open a new movie and create two layers, "button" and "code". With the "button" layer selected, draw a small sphere on the stage. Convert this sphere into a movieclip (F8) named "sphereButton".
  2. In symbol editing mode for the movieclip, name the layer with the graphic "graphics" and create two new layers with the names "code" and "labels".
  3. Create keyframes on frames 11, 21, 31 and 41. In the "labels" layer, label the keyframes as follows:

    These frames indicate individual states of the button. Once we assign button event handlers to the movieclip, it will automatically send the movieclip playhead to the proper frame (for the standard button states of UP, DOWN, and ROLLOVER).

  4. Place a stop(); action in the code layer of frames 1, 11, 21, 31 and 41 so that the playhead will stop when it is sent to a state.
  5. Change the sphere graphic's color on each of the states so that it will be easier to see the results of the button actions. I made the rollover state a different, lighter color, the down state an inverted version of the same gradient, the activated state the same as the down state, and the disabled state a flat gray.
    screenshot of timeline
  6. Now exit symbol editing mode and return to the main timeline. Name the instance of our sphereButton "sphereButton" so that we may refer to it in our code.
  7. Select frame 1 of the "code" layer and open your Actionscript editor (F9). Type the following:


    sphereButton.onRelease = function() {};

    This is actually all we need to enable our movieclip. If you've yet to use the new method of dynamically assigning functions to event handlers, it's a great way for you to keep your code all in one place as opposed to the Flash 5 method of placing onClipEvent's and on's all over your stage and timelines.

    After you have tested your movie to see how sphereButton automatically knows which frame to go to based on the frame labels we've given it, we're going to give our buttonMC the additional state of "activated". What this means is that after the buttonMC has been pressed, it will stay pressed (or "on") until the button has been pressed again--an active toggle.

  8. Type the following code into the Actionscript editor in the first frame of your "code" layer (overwriting what we placed originally):


    sphereButton.onRelease = function() {
      this.activated = !this.activated;
      this.onRollOver();
    }
    sphereButton.onRollOver = function() {
      if (this.activated) {
      this.gotoAndStop("_Activated");
      }
    }
    sphereButton.onRollOut = function() {
      if (this.activated) {
      this.gotoAndStop("_Activated");
      }
    }

    Now when the buttonMC is released, its custom property "activated" will toggle between states (the not (!) operator takes care of that), then its onRollOver handler is called. We can call it in this way since we are assigning a function to sphereButton.onRollOver. It would be the same thing as assigning a function to a variable:

    myFunction = function();

    And then calling it:

    myFunction();

    Next in our code, we define the sphereButton's onRollOver function. All we do is check to see if the button is activated, and if so send its playhead to the "_Activated" frame. If it's not activated, it will go to the "_Over" by default. The onRollOut function does the exact same check. Go ahead and test your movie now to see the result.

  9. The last bit of functionality we will add is a keyboard toggle that will disable our button. Add the following to the same block of code in your Actionscript editor:


    sphereButton.onKeyDown = function() {
      if (Key.isDown(Key.SPACE)) {
      if (this.enabled) {
      this.gotoAndStop("_Disabled");
      this.enabled = 0;
      } else {
      if (this.activated) {
      this.gotoAndStop("_Activated");
      } else {
      if (this.hitTest(_root._xmouse, _root._ymouse, 1)) {
      this.gotoAndStop("_Over");
      } else {
      this.gotoAndStop("_Up");
      }
      }
      this.enabled = 1;
      }
      }
    }

    Here we give our sphereButton a handler for a keyDown event. If the key down is the space bar, we check to see if we are currently enabled (a property of the movieclip). If so, we go to the disabled state and disable the buttonMC. If we are currently disabled, we instead reenable our button and go to the appropriate state (activated, up or over).

  10. Now of course for the sphereButton to receive the key event, we need to add it as a listener to the Key Object. Do that with the following line:


    Key.addListener(sphereButton);

Test your movie. You can see in just a few easy steps we have far surpassed what was previously allowed with buttons. The new functionality enables to us to create more responsive interfaces with relatively little additonal work. Explore and enjoy!