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:
- 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.
Basic Steps
The procedure for creating an interactive button in Flash consists of:
- Create button states
- Define size of graphic
- Publish the button
- 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.
- 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.
- Create or import a button for the Up state.
- The button often includes text
- 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.
- Insert a Keyframe in the Down frame and create a button for that state.
- 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.
- Choose Edit > Edit Movie. A blank stage appears.
- Choose Modify > Movie.
- 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.
- Choose Window > Library and drag the button name into the stage.
- Press Ctrl-Enter to test the button.
- If the button animation does not fit properly, close the window to exit movie and choose Modify > Movie to try a different stage size.
- When the size is correct, save and name the button.
3. Publish the button
- Choose File > Publish Settings to check the format settings Flash and HTML.
- Choose the Publish button.
- A SWF and HTML files are created.
- 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.
- Open a master button. Save it to a new name.
- Choose Edit > Edit Symbols.
- Edit each frame.
- 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.
- 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
Websites
Books
(Notice: The School for Champions may earn commissions from book purchases)
Top-rated books on Adobe Flash
Share this page
Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:
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.
Where are you now?
Creating Interactive Buttons with Flash