Opening an Envelope Flash ActionScript 3

A few of my readers wanted to know how to create the popular Flash^R 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.

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.
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
Now, go to the Properties Inspector and give this button an Instance Name of stampButton.
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.
Add a new layer to the Timeline and drag that layer under the Env layer. Rename this layer "Flap".
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 →

Join us in the Flash forum.