Creating Interactive Buttons with Flash

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.

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.

In conclusion

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

Good health enhances your Web development capabilities

Mini-quiz to check your understanding

(Note: Your browser must be able to use JavaScript for this quiz to function properly.)

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

Self-check: review the lesson above to confirm your answers.

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

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

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?

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

Students and researchers

The URL of this page is www.school-for-champions.com/flash/buttons.htm. Please include it as a reference in your report, document, or thesis.

Also, tell a friend about this material.

Where can you go from here?

• School for Champions
  • Curriculum Outline
    • Succeed in Flash Development
      • Creating Interactive Buttons with Flash

Other good stuff:

Web Development

Tricks to Get Good Grades

List Your School or Company

Search

Enter one or more keywords to search the School for Champions site and find related lessons: