Macromedia Flash MX 2004 Tips: Using Buttons

Using Buttons

One major application of Macromedia Flash is to create interactive buttons that have such effects as roll-over and mouse-click animations. The button can change color, change shape, or move when the mouse rolls over it. Pop-up text or a menu can also be displayed.

Note that these effects can also be done with Java and JavaScript. For example, Microsoft FrontPage includes Java buttons that have roll-over and click effects. Most button effects seen on the Web are created in JavaScript, but Flash seems a more effective way of performing the task.

Questions you may have include:

  • What are the basic steps for creating interactive buttons?

  • What are the details of those steps?

  • What does a sample button look like?

This lesson will answer those questions. There is a mini-quiz at the end of the lesson.

Basic Steps

The procedure for creating an interactive button in Flash consists of:

  1. Create button states

  2. Define size of graphic

  3. Publish the button

  4. Repeat for more buttons

1. Create button states

Start with a blank stage. To facilitate drawing, you can make the button larger now and then scale the stage and button later.

  1. Choose Insert > New Symbol.

    • Name the symbol and choose the Button behavior.

    • The Timeline displays four frames for the following state of the button: Up, Over, Down, and Hit.

  2. Create or import a button for the Up state.

    • The button often includes text

  3. Insert a Keyframe in the Over frame and create a button for that state.

    • You can change the text, the color, and/or move the button.

    • Use the Paint Bucket to change the color.

  4. Insert a Keyframe in the Down frame and create a button for that state.

  5. Insert a Keyframe in the Hit frame. No button is necessary.

2. Define size of graphic 

You want to define the size of the stage or graphic area to be just larger than the button area you will be using. You can adjust the stage size again later to scale the buttons to a new size.

  1. Choose Edit > Edit Movie. A blank stage appears.

  2. Choose Modify > Movie.

  3. Adjust dimensions to be just larger than your button.

    • 80 x 50 pixels is a good size for one button.

    • You will have to use trial and error to adjust the stage size.

  4. Choose Window > Library and drag the button name into the stage.

  5. Press Ctrl-Enter to test the button.

  6. If the button animation does not fit properly, close the window to exit movie and choose Modify > Movie to try a different stage size.

  7. When the size is correct, save and name the button.

3. Publish the button

  1. Choose File > Publish Settings to check the format settings Flash and HTML.

  2. Choose the Publish button.

  3. A SWF and HTML files are created.

  4. You can use the HTML file or cut and past the code into your Web page.

 

4. Repeat for more buttons

You will usually want to have several, similar buttons on a page.

  1. Open a master button. Save it to a new name.

  2. Choose Edit > Edit Symbols.

  3. Edit each frame.

  4. You probably won't need to change the stage size, but if you must, choose Modify > Movie.

    • Press Crtl+Enter to test the button and stage size.

  5. Save and publish the button.

Uses for buttons

A button can be used to create some action. You can also display text.

In conclusion

You can easily create interactive buttons in Flash by creating the button state, defining the size of the graphic, and publishing the .