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
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Create a Backwards Tween in Flash CS4


In the last tutorial, we created the new EnvBack1 movie clip and removed the stamp button from the stage on Frame 81. Now we are ready to flip the envelope. This looks like a difficult animation but in reality it is very simple. We will use two movie clips. One will be a new instance of the EnvFront1 movie clip and the second will be our new EnvBack1 movie clip.

Open your fla file into FlashR CS4 and let's get started.

  1. Lock all the layers in the Timeline.

    If you move the pointer to Frame 81, you will see that we have a blank stage. Our first step is to create a new layer in the Timeline for a new (second ) instance of the EnvFront1 movie clip and drag a new instance from the Library. We want this movie clip to be in the same position as EnvFront1_1. Click on EnvFront1 on Frame 80 and get the X and Y values from the Properties panel.

  2. Add a new layer above the EnvFront1_1 layer in the Timeline and name this new layer "EnvFront1_2".

    We don't want this new movie clip to be visible until Frame 81.

  3. Add a Keyframe to Frame 81 on the new EnvFront1_2 layer to set Frames 1 80 to blank. On Frame 81, drag a new instance of the EnvFront1 movie clip from the Library onto the stage. In the Properties panel, give this new movie clip and Instance Name of "EnvFront1_2".

  4. Go back to EnvFront1_2 on Frame 81 and set the X and Y values for EnvFront1_2 to the same values for EnvFront1_1.

    We can now create the tween animation that will begin to flip over the envelope.

  5. Right-click on EnvFront1_2 and choose Create Motion Tween from the menu. Drag the Tween Span to end the tween on Frame 85. On Frame 85, select the EnvFront1_2 movie clip and using the Free Transform tool, push the right and left edges together until the envelope almost is to thin to see. Take a note of the Width.

    Now, we need to use an instance of the EnvBack1 movie clip to finish the flip-over animation. But, first we need to create a new layer for this new tween.

  6. Add a new layer to the Timeline above the EnvFront1_2 layer and name this layer "EnvBack1_1".

    We will add our first instance of the EnvBack1 movie clip to the stage on Frame 85.

  7. Right-click on Frame 85 on the EnvBack1_1 layer and add a Keyframe.

  8. Drag an instance of EnvBack1 from the Library. In the Properties panel, name this instance "EnvBack1_1. Set the X and Y to match that of EnvFront1_2.

  9. Right-click on the EnvBack1_1 movie clip and create a tween. Drag the Tween Span to Frame 90. Right-click on Frame 90 and choose Insert Keyframe, All from the menu.

  10. On Frame 85, set the Width of EnvBack1 to match that of EnvFront1_2 on Frame 85.

  11. Move the Playhead between frames 80 and 90 to see the flip animation.

  12. Lock all layers. Save your fla file.

Join us in the Flash forum.




Add Create+a+Backwards+Tween+in+Flash+CS4 to Twitter Add Create+a+Backwards+Tween+in+Flash+CS4 to Facebook Add Create+a+Backwards+Tween+in+Flash+CS4 to MySpace Add Create+a+Backwards+Tween+in+Flash+CS4 to Del.icio.us Digg Create+a+Backwards+Tween+in+Flash+CS4 Add Create+a+Backwards+Tween+in+Flash+CS4 to Yahoo My Web Add Create+a+Backwards+Tween+in+Flash+CS4 to Google Bookmarks Add Create+a+Backwards+Tween+in+Flash+CS4 to Stumbleupon Add Create+a+Backwards+Tween+in+Flash+CS4 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