In the next two tutorials, we will animate palm trees in Flash^R 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

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.