The School for Champions is an educational website that shows you how to achieve your dreams.

School for Champions

SfC Home > Flash >

Explanation of using Adobe Flash to create button animations. Also refer to graphics, images, GIF animation, uses, features, dynamic pages, Ron Kurtus, School for Champions. Copyright © Restrictions

Creating Interactive Buttons with Flash

by Ron Kurtus (revised 3 February 2001)

One major application of Adobe 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 near 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.

Demonstration of a simple Flash button.
Use your mouse to click on it.

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.

Summary

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

Answers to Readers' Questions

Good health enhances your Web development capabilities

Resources

The following are resources on this subject.

Websites

Flash Resources

Books

Top-rated books on Flash

Miscellaneous

Mini-quiz to check your understanding

1. Why would you make a button larger than you need it?

You can only make it actual size

To amuse other people

To facilitate initial drawing

2. What behavior do you use when you insert a new symbol?

Animation

Button

Flash

3. How do you drag a button to the stage?

Choose Drag Button 

Choose Window > Library  

Choose Library  

If you got all three correct, you are on your way to becoming a Champion in Flash development. If you had problems, you had better look over the material again.

What do you think?

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.

Share link

Feel free to establish a link from your website to pages in this site.

Or use our form to send this link to yourself or a friend.

Students and researchers

The Web address of this page is
www.school-for-champions.com/flash/createbuttons.htm.

Please include it as a reference in your report, document, or thesis.

Where can you go from here?

School for Champions

Flash topics

Creating Interactive Buttons with Flash

The School for Champions helps you become the type of person that can be can be called a Champion.