Invisible Button for the Envelope Animation

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.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2021 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.