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

Flash Intro - Flip the Envelope Flap


Up to this point in the series, we have been working on the first part of the intro animation and we are up to the point where the envelope flap is ready to open. Now that we have cropped our screenshot of the first frame of the ecard animation in PhotoshopR and imported the image into the Flash Library, we can place the thumbnail onto the stage behind the envelope.

Open your project into FlashR CS4.

  1. Click on the Thumbnail1_1 layer in the Timeline. We want to add the thumbnail image to Frame 91, which is the last frame in our animation so far. We have already added our Thumbnail1_1 layer just under the EnvBack2_1 layer so that it will appear that our thumbnail is inside the envelope. Drag the thumbnail image onto the stage on Frame 91.

  2. As you can see, the screenshot of the ecard is full sized. We will need to shrink the thumbnail to the size of our envelope. With the Free Transform tool and holding down the Shift key on your keyboard, drag one of the corners inward to shrink the image to thumbnail size so that it cannot be seen behind the envelope. You may need to turn off the visibility for the EnvFlap1_1 layer in order to see the thumbnail. You can also use the outline of the Free Transform tool as your guide.

    The next design element we will manipulate for this part of the animation is the triangular movie clip (EnvFlap1_1). This will be another motion tween that will flip the triangle's pointed end from bottom to top.

  3. On the EnvFlap1_1 layer in the Layers panel, we already have a Keyframe on Frame 91, which is still the last frame in our animation so far. We will use 10 frames for this motion tween. So we will want to extend the other layers to Frame 101. Right-click on Frame 101 of the EnvBack2_1 layer and Insert a Frame. Repeat this for the Thumbnail1_1 layer.

  4. Now, turn on the visibility for the Thumbnail1_1 and EnvBack2_1 layers. Still on Frame 91, right-click on the EnvFlap1_1 movie clip and choose Create Motion Tween. This will convert the plain frame into the first frame of our motion tween. It should turn from gray to blue. Drag the end of the blue frame to extend the tween span to Frame 101.

  5. With your mouse on Frame 101, use the Free Transform tool to drag the tip of the flap upward while trying to keep the long edge of the triangle in the same position. Test your tween. This may take a couple tries to get the tween to look realistic. Once you have the tween looking good, lock the layer and save your file.

    Join us in the Flash forum.




Add Flash+Intro+%2D+Flip+the+Envelope+Flap to Twitter Add Flash+Intro+%2D+Flip+the+Envelope+Flap to Facebook Add Flash+Intro+%2D+Flip+the+Envelope+Flap to MySpace Add Flash+Intro+%2D+Flip+the+Envelope+Flap to Del.icio.us Digg Flash+Intro+%2D+Flip+the+Envelope+Flap Add Flash+Intro+%2D+Flip+the+Envelope+Flap to Yahoo My Web Add Flash+Intro+%2D+Flip+the+Envelope+Flap to Google Bookmarks Add Flash+Intro+%2D+Flip+the+Envelope+Flap to Stumbleupon Add Flash+Intro+%2D+Flip+the+Envelope+Flap 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
Animation Behaviors in Motion Project

Importing Photoshop Images into Motion

Motion 3D Animation - The Graphics

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