Printer Friendly Version

BellaOnline's Flash and Animation Editor

Invisible Button for the Envelope Animation

Now we are to the point in our project where we will add the button which we will program to trigger the second half of the envelope animation. We will make an invisible button and put it right over the top of the stamp.

  1. Our first step is to add two new layers to the top of the Timeline. Let's name them "InvButton" and "Actions". Make the Actions layer the top layer.

    We will draw the invisible button on the InvButton layer and put the ActionScript on the Actions layer.

  2. Click on the InvButton layer and insert a Keyframe on Frame 80. From the Menubar, click Insert, New Symbol to make a new symbol. In the Create New Symbol dialog box, name the new symbol "InvButton" and set the Type of symbol to Button. Click OK to enter the edit mode for the button.

    Notice that we have a new Timeline and four stages for our button. The only one that we will be using is the Hit stage. Because our button is invisible, we do not need to create any effects for the other three stages. But the Hit stage determines the hot spot for our button. So we need to draw a rectangle on the stage to designate the hot spot for the Hit stage. Center the rectangle over the small plus sign on the stage.

  3. Rename the layer in the Timeline to "AniButton". Right click on the Hit frame in the Timeline and add a Keyframe. Use the Rectangle tool to draw a rectangle and center it over the plus sign. Let's make it about 40 x 40 pixels and set the Stroke to null in the Properties panel. The Fill color can be set to any color. It will not be visible when the movie plays.

    Click on Scene 1 in the Edit Bar to return to the main movie. Notice that our new button is in the Library.

  4. Click on Frame 80 of the InvButtons layer and drag an instance of our new button from the Library to the Stage and place it over the stamp. It will appear to be a bright blue color to indicate that there is an invisible button in that location on the Stage but this will not be visible when the movie plays.

  5. In the Properties Inspector, give the button an Instance Name of "InvButton1".

  6. To test our button, move the Timeline scrubber back to Frame 79 and you should not see the button. When you click on Frame 80, it will appear.

Save your fla file.

Join us in the Flash forum.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor