TechNote (Archived)

Creating advanced buttons

This document will introduce you to more design possibilities in the construction of Flash Buttons. For more resources on performing specific actions with buttons, refer to Additional Information at the bottom of this document.

Prerequisites:

In order to get the most out of this TechNote, an understanding of creating basic buttons is required. We recommend doing the "Buttons" Lesson within Flash (Available from the Help menu). More button resources are available in Additional Information at the bottom of this document.

Contents

Button Hit states
Invisible buttons
Buttons with "animated"states
Rollover in one area of the movie effects another area of the movie
Example
Additional Information

Button Hit states

Hit states are important to understand when designing a complex button. Its shape and area represent the active area of the button. Become familiar and comfortable with the Hit state.

Experimenting with the Hit state:

1. Introduce a button from the Common Libraries onto the Stage. Edit the button.
2. Highlight the frame in the button's Hit state, and insert a Key frame. Test this behavior in a movie.
3. Resize the object in the Hit state dramatically, and test.
4. Delete the Keyframe in the Hit State. Test this.
5. Notice how these changes effect your button cursor, and the Up, Over and Down states that you see when the button is enabled.

Invisible buttons

The Up, Over and Down states of a button may be left empty. If these states are empty, the Hit state must then be defined (contain content).

When the Up state of the button is empty or 'invisible', the button is represented on the Stage by a blue shape equivalent to the content in the next Keyframe within the button. This blue shape will not be visible in your final movie. Refer to the Example to see how this works.

Buttons with "animated" states

To make animated buttons in Flash, place a Movie Clip in the button state that is to be animated.

To create an animated button:

1. Create a movie clip for each state of the button that you want animated.
2. Create the button.
3. Place the movie clip(s) in the button state(s) to be animated.
4. Place the button on the stage.

Refer to the Example to see how this works.

Note: Movie clips cannot be tested in the Flash editor. You will need to do a Control > Test Movie or export it as a .swf file in order to test.

Rollover in one area of the movie affects another area of the movie

To create this effect, move the Hit state element(s) to a different area of the Stage than elements in the Over state of the button. This will work for simple rollover effects. The active area of the button, will then be located in a different area onstage than the rollover effect. Refer to the Example to see how this works

Example

Note: The Macromedia Flash Player is required to see this example.

Download Windows source file advanced_buttons.zip (17K)

Download Macintosh source file advanced_buttons.sit (18K)

Note: Flash 4 or later is required to open the source file.

Additional information

For more information on basic buttons, refer to the Using Flash manual, and How do I create a button? (TechNote 4101).

To learn how to assign an action to a Button, do the Buttons lesson inside Flash. Refer to the Using Flash manual for more information on Mouse Events and assigning actions to Buttons. Refer to the ActionScript Reference for more advanced information on what actions can be performed.

To create a simple animated menu, refer to How to create a pop-up menu in Flash (TechNote 14363).

To create a link to an email address, refer to How to create a button that will send e-mail messages (TechNote 14072).

To make a button for clearing fields in a Flash form, refer toHow to create a reset button (TechNote 15541).

Search Support

---