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 CS5 Palm Tree Animation


In the last tutorial, we prepared the raster graphics for the palm tree animation. We selected each palm from the background image and placed each palm on its own layer in preparation for our FlashR animation.

Our next step will be to align the palms in place over the background layer in the Photoshop image file. We will have the background layer which we will call "base" and seven palms. Three palms on the right are labeled rt1, rt2 and rt3. On the left, we have palms lt1, lt2, lt3 and lt4. Because the palms are already aligned in their positions over the background layer, when we import this Photoshop file into Flash, their positions will be maintained.

In our Flash project, we will start a new movie clip (Insert - New Symbol). This will take us to the edit mode and a blank Timeline for the movie clip. We will import the Photoshop image directly into this empty Timeline (File - Import - Import to Stage). As you can see, Flash automatically placed each palm and the background (base) graphic on their own layer and labeled these layers with the same names that we gave them in Photoshop.

All this preparation has led us to this point where we will animate each palm with a Motion Tween. If you studied any videos of palm trees, you will notice that the wind pushes each palm progressively in one direction. Therefore if we were to assume that the wind was coming from the right of the stage, we will need to animate the palms on the right of the tree before we animate the left palms. In the same way, we would animated the outside palms before the inside palms because they would be pushed by the wind first.

As you can see, the Motion Tweens on the Timeline will move each palm in succession, 1 through 3 (on the right) and 4 through 7 (on the left). Palms 1 through 3, the right palms will move slightly downward and to the left. But for the palms on the right, the wind will push them upward and to the right.

We will begin the Motion tween for palm no. 1 and then pause a few frames before we start the tween for palm no. 2, and so on. Each Motion tween will have a duration of about 60 frames. But in nature, the palms on the left will not remain stationary while the palms on the right are moving. So let's start the sequence for moving palms 4 through 7 only slightly after the first palm begins to move. So we will have palms on both sides of the three moving at the same time but with a little delay on the left.

Once the last palm (no. 7) has moved in the wind, we can begin to bring the palms back to their original positions, just as they would do in nature. If you study the way tree branches move in the wind, you will notice that sometimes they have a slight rebound motion when their branches move back into place, after the wind has stopped. One last touch will be to add this slight rebound action to the palms. As we move them back to their original positions, we will move them slightly beyond that point and then finally back to the original position.

← Back

View Finished Ecard at Pamela Gladding Ecards

Join us in the Flash forum.

Join us in the Digital Art and Design forum.





Add Flash+CS5+Palm+Tree+Animation to Twitter Add Flash+CS5+Palm+Tree+Animation to Facebook Add Flash+CS5+Palm+Tree+Animation to MySpace Add Flash+CS5+Palm+Tree+Animation to Del.icio.us Digg Flash+CS5+Palm+Tree+Animation Add Flash+CS5+Palm+Tree+Animation to Yahoo My Web Add Flash+CS5+Palm+Tree+Animation to Google Bookmarks Add Flash+CS5+Palm+Tree+Animation to Stumbleupon Add Flash+CS5+Palm+Tree+Animation 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