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

Prerequisites

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

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 affect 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. See 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.

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 clips in the button states) to be animated.
  4. Place the button on the stage.

See 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 to test.

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

To create this effect, move the Hit state elements 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. See 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 (17 K)

Download Macintosh source file advanced_buttons.sit (18 K)

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

Additional information

For more information on basic buttons, see the Using Flash manual.

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

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

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

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

Keywords: tn_12632

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy