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

Envelope Animation Motion Path


Now that we have our storyboard and design elements ready, we are going to start working on the first part of the ecard envelope animation. The first thing we will do is make a motion path.

To make it easier, we will be working on the envelope animation in sections. If you take a look at the first row of the storyboard, our first section is the animation that makes the envelope fly onto the stage. While it is moving onto the stage it will rotate clockwise and flip over a few times. It will end with the front of the envelope centered on the stage.

Open your fla file and let's get started. At this point, we have all our design elements in the Flash Library and our stage and Timeline are empty. Also, we already have set our Document settings to a Width of 700 px, Height of 500 px, Background color of your choice and Frame Rate of 24 fps.

  1. In our Timeline, we have one frame and one layer. Rename Layer 1 to "Background".

  2. We will eventually need to add a preloader to this ecard project. So let's add a second layer to the Timeline and name it "Preloader".

    All of the ActionScript and design elements for the preloader will be on one frame (Frame 1) of the Timeline and the primary ecard animation will begin on Frame 2. Leave Frame 1 blank for now and lock both the Background and Preloader layers.

  3. Add another layer and name it "EnvFront1_1". EnvFront1 is the name of the first design element (movie clip) that we will be animating and this is the first instance of this movie clip.

    Our first step is to create a smooth curved path starting in the upper left corner and ending with the envelope centered on the stage. Thanks to the new object-based tweens, this will be an easy task. We will be animating the EnvFront1 element.

  4. Click on Frame 2 of the Timeline and add a Keyframe. Let's drag an instance of EnvFront1 over to the upper left corner of the stage and just off the stage. With the movie clip still selected, go to the Properties Inspector and give this movie clip an Instance Name of "EnvFront1_1".

  5. Right-click on the movie clip and choose Create Motion Tween from the menu. Let's give this part of the animation about 80 frames. Place your mouse over Frame 2. When you see the double arrow, drag to the right until you have all the frames between 1 and 80. The Timeline scrubber should now be on Frame 80. Drag the movie clip to the center of the stage. When you release your mouse, you should see the motion path. We want the path to have a curve.

  6. With the Selection tool, click in the center of the motion path and drag upward until the path is a curve.

Now that we have our motion path, we are ready to refind the animation by adding the rotation and flip.

Join us in the Flash forum.

Join us in the Digital Art and Design forum.




Add Envelope+Animation+Motion+Path to Twitter Add Envelope+Animation+Motion+Path to Facebook Add Envelope+Animation+Motion+Path to MySpace Add Envelope+Animation+Motion+Path to Del.icio.us Digg Envelope+Animation+Motion+Path Add Envelope+Animation+Motion+Path to Yahoo My Web Add Envelope+Animation+Motion+Path to Google Bookmarks Add Envelope+Animation+Motion+Path to Stumbleupon Add Envelope+Animation+Motion+Path 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
The Motion Toolbar Tools

Apple Motion 5 - The Toolbar

Apple Motion - HUD

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