logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
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


g features
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor