List of Topics

SfC Home > Web Design > Adobe Flash >

Creating Interactive Buttons with Flash

by Ron Kurtus (revised 7 March 2012)

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:

This lesson will answer those questions.



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 button.


Good health enhances your Web development capabilities


Resources and references

Ron Kurtus' Credentials

Websites

Flash Resources

Books

(Notice: The School for Champions may earn commissions from book purchases)

Top-rated books on Adobe Flash


Students and researchers

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

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

Copyright © Restrictions


Where are you now?

School for Champions

Flash topics

Creating Interactive Buttons with Flash




Flash topics

Basics

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



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