g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Romance Movies
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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 →

    Join us in the Flash forum.

Add Opening+an+Envelope+Flash+ActionScript+3 to Twitter Add Opening+an+Envelope+Flash+ActionScript+3 to Facebook Add Opening+an+Envelope+Flash+ActionScript+3 to MySpace Add Opening+an+Envelope+Flash+ActionScript+3 to Del.icio.us Digg Opening+an+Envelope+Flash+ActionScript+3 Add Opening+an+Envelope+Flash+ActionScript+3 to Yahoo My Web Add Opening+an+Envelope+Flash+ActionScript+3 to Google Bookmarks Add Opening+an+Envelope+Flash+ActionScript+3 to Stumbleupon Add Opening+an+Envelope+Flash+ActionScript+3 to Reddit


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

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

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


g features
Drop Zones and Transitions in Motion 5

Craft Product Template - Background Layer

Craft Product Template Layers

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor