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


Animated Palm Trees from Raster Graphics

In the next two tutorials, we will animate palm trees in FlashR CS5. This was part of a Flash ecard animation that I created for Pamela Gladding Ecards. The artwork was by Louise Max, one of the artists at P G Ecards. Pamela came up with the animation storyboard for this ecard and one of the first tasks was to animate two palm trees on the beach. This animation will continue throughout the ecard animation and also after the card ends.

I haven't seen a palm tree, so I went to Google and searched for videos of palm trees moving in the wind. What you will notice first is that, unless it's a hurricane, the trunk of the palm tree moves very little. All the action is in the palms, which sway gracefully in the wind.

When the artwork for the ecard was emailed to me in a layered Photoshop file, the palm tree's palms were copied (all in one piece) from the background and placed on a transparent layer. So, we had the background layer that contained everything (sky, sand and trees) and a layer with the group of palms.

At this point, the only way to animated the palms would be to rotate the group of palms in a tween layer above the background. However, that wouldn't look too realistic. First, the original group of palms, which is still in the background layer, will show as the palm layer rotates. Secondly, in real life, each palm moves individually and not together as a group.

Because the ecard animations for P G Ecards are created from raster graphics, the animation possibilities are limited compared to vaster animation. So any way we can make one part of the animation look more realistic will help the overall impression created by the ecard.

We can create a more realistic animation by moving each palm independently. So the first task was to select each of the palms and place them on their own transparent layer. One trick I have used over the years, is to zoom in to enlarge the area you wish to select and use the Polygonal Lasso tool. Because the colors in the palms are so similar, this works better than the Quick Selection tool.

As you can see, the original group of palms is cut off at the top. This straight edge would be a problem when the palms are animated, showing the missing section of the palms as they rotate. So our next step was to use the individual palm pieces that we do have available to fill in the missing second of these top palms.

Finally, for the background image, we will want to remove the palms and fill in the empty holes in the sky created when we removed the palms from the background. Because the sky is almost a solid color, we can use the Content Aware Fill to easily replace the missing sky.

Now we are ready to animate the palms.

Next →

View Finished Ecard at Pamela Gladding Ecards

Join us in the Flash forum.

Join us in the Digital Art and Design forum.

Add Animated+Palm+Trees+from+Raster+Graphics to Twitter Add Animated+Palm+Trees+from+Raster+Graphics to Facebook Add Animated+Palm+Trees+from+Raster+Graphics to MySpace Add Animated+Palm+Trees+from+Raster+Graphics to Digg Animated+Palm+Trees+from+Raster+Graphics Add Animated+Palm+Trees+from+Raster+Graphics to Yahoo My Web Add Animated+Palm+Trees+from+Raster+Graphics to Google Bookmarks Add Animated+Palm+Trees+from+Raster+Graphics to Stumbleupon Add Animated+Palm+Trees+from+Raster+Graphics 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