How To Build an Interactive Button in Macromedia Flash MX.

By Dan Frieber

Menu

What is Macromedia Flash?
How to - Interactive Button in Flash
Links to Flash Resources
Advanced Flash Websites

What is Macromedia Flash?

Macromedia Flash, one of the most widely used programs among web designers, allows for the development of very interactive user interfaces and dynamic animation. For example, In the area of buttons and links, the combination of HTML and CSS allows for only certain rollover effects, where as in Flash the possibilities are endless.

In this tutorial, you will learn how to create your own very special button in Macromedia Flash MX.



How To Make This Button

In order to correctly follow this tutorial you must have Macromedia Flash MX for either Windows or Macintosh. To assure success, please follow directions precisely.

  1. Open up Macromedia Flash MX, and start a new file. Usually a welcome window will ask you what you would like to do. If this happens, select "Flash Document" under the "Create New" Heading. If the window does not appear, click "File" at the top of the window, and select "New".
  2. Open up the "File" drop down menu once again and select "Save As".
  3. Once the "Save As" pop-up window appears, choose an appropriate name to save your file (such as "button") and select the desired save location on your hard drive and select "Save".
  4. Now that we're ready to begin, lets start by making our workspace smaller, or more button friendly.
  5. Select "Modify" at the top of the window, and select "Document" from the drop down menu.
  6. Change the width from 550 to 300, and change the height from 400 to 100.
  7. Next, select the text tool from the toolbar as shown below.
  8. Once the text tool is selected, click somewhere (preferably towards the bottom left hand part of your buttonspace), and type "button" using the font of your choice, . Also, adjust the size and location of the text so that it fills up most of the work area, as shown below.
  9. Next, using the default (black arrow) tool, select the text you've just typed by clicking it once. (a blue outline should appear around the text)
  10. Next, select "Modify" at the top of the window and then select "Convert to Symbol" from the drop down menu.
  11. When the pop-up window appears, name the Symbol "button", with the button option selected (as shown below) and click OK.
  12. Once step 11 is completed, double click your "button" to access the button editing interface.
  13. If there are not 4 keyframes above the workspace as shown below, then please carefully retrace your steps.
  14. Now, as shown in the picture above, only 1 out of the 4 keyframes ("Up") were filled up as shown by the black dot. We're going to have to fill all of these up. To do this, highlight the 2nd keyframe (the one directly to the right of the one that is filled up, labeled "Over"), select "Modify" from the top of the window and then highlight "Timeline" from the drop down menu, then select "Convert to Keyframes" from the Timeline dropout menu. Repeat this step for keyframes 3 ("Down") and 4 ("Hit") until all 4 keyframes contain black dots.
  15. Once this has been completed, select the second keyframe ("Over") and then double click your "button" to edit the text. With the text highlighted, change the color on the menu below the workspace (As shown below).
  16. Repeat this step for the 3rd keyframe ("Down"), but this time select a different color, and make the text bold.
  17. Now the 4th keyframe, the "Hit" keyframe, requires a little something special. First start by selecting the rectangle tool in the toolbox, and setting both colors at the bottom of the toolbox to black.
  18. Next, draw a rectangle around the word "button" by clicking and holding the mouse button down at the top left part of the text and dragging it to the bottom right hand part of the text.
  19. Now that we are pretty much finished, click back to scene 1 by clicking the small link towards the top left hand corner of the program, as shown below.
  20. To look at your finished product, select "Control" at the top of the window, and select "Test Movie" from the drop down menu.
  21. Congratulations! you've now made your first button in flash!

    Later on, you can use Flash to make buttons for interactive navigations for websites by assigning special commands to the buttons. But that is a much more advanced stage of Flash, too technical to get into here. If you would like to pursue this, please click one of the website in the Flash References section below. Thanks!



Resources

This section contains links to websites on which Flash help and other tutorials may be found.



Professional Examples

This section contains links to websites on which very interactive animation sequences can be found.