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

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 Del.icio.us 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


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
Particle System - Line Emitter

Animating Color of Text in Motion 5

Animating Color of Shapes 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