Opening an Envelope Flash ActionScript 3

Opening an Envelope Flash ActionScript 3
A few of my readers wanted to know how to create the popular FlashR animation which shows an envelope opening. In this tutorial, we will create that animation and program it to begin when the stamp on the envelope is clicked.

Our task has two parts. We need to turn the stamp on the envelope into a button and program that button to run an animation that opens the envelope. Actually, the only part of the envelope that is animated is the flap. The second step is to create the movie clip that will be the flap on the envelope and program the animation.

Let’s begin by drawing a rectangle on the stage that will be our envelope and a smaller rectangle in the upper right corner that will be our stamp.

  1. Rename Layer 1 to "Env" and draw a rectangle in the center of the stage that will be your envelope. The envelope can be any color that you wish as long as you can see it on the white stage. Draw a smaller rectangle that will be the stamp.

  2. To convert our stamp into a button, select the stamp and click Modify – Convert to Symbol. In the dialog box, set the following values.

    Name – stampButton
    Type – Button
    Registration – Upper left corner

  3. Now, go to the Properties Inspector and give this button an Instance Name of stampButton.

  4. Double-click on the button to enter edit mode. You will see the four button stages on the Timeline. Add a Keyframe to the Hit stage. Next, draw a rectangle over the area where the stamp is on the envelope. This will determine the clickable area for the stamp button. Click Scene1 to go back to the main Timeline.

    Now we will draw the flap for the envelope.

  5. Add a new layer to the Timeline and drag that layer under the Env layer. Rename this layer "Flap".

  6. We will use the PolyStar tool to draw the flap. You will find it hidden under the Rectangle tool. Click on the PolyStar icon and go to the Properties Inspector. Click on the Options button to open the Tool Settings dialog box. Set the Number of Sides to 3 and click OK.

    Now, draw a triangle on the stage and rotate it until the point of the triangle is pointing up. Drag the triangle until it sets along the top of the envelope. Click on the Free Transform tool and reshape the flap to the same width as the envelope.

    Next →

    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 © 2019 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.