g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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 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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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 features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


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

BellaOnline Editor