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

We have many butterflies at Pamela Gladding Ecards and animating these little creatures in FlashR as part of an ecard can be fun. You will probably start with a raster image of a butterfly with open wings.

Your first task is to separate the wings from the butterfly's body which can be done in Photoshop. Open the butterfly into Photoshop and select out the top wing and paste it onto a new layer. Repeat for the second. You should now have three layers containing one wing and/or the body of the butterfly. Name these layers accordingly and save your file.

Now we can open the file into Flash and create our animation. Assuming that you are already working within the main ecard animation, we will create a new movie clip (Insert - New Symbol) and name it "butterfly". This will take us into the editing mode for the butterfly movie clip. Now we can import the image file (File - Import - Import to Stage) and the three layers with the butterfly parts will be place in order on the Timeline. You can delete Layer 1 which is empty.

Our first step will be to rotate the contents on all three layers together until the butterfly is perpendicular on the stage. We do this because it is much easier to reshape the wings when they are not on an angle. Let's close the butterfly's wings together. Lock all layers but one of the wings.

Let's work on the right wing first. Select the wing and Convert to Symbol. This first tween will close the wing over a span of 25 frames and then the wing will open over another 25 frames. Insert a frame on Frame 50 to create a span of 50 frames. Repeat this for the body layer. Right-click on Frame 50 of the wing layer and Create Motion Tween. Right-click on Frame 50 again and Insert Keyframe - All. Now we have the beginning and ending open positions for our wing movement. We need to reshape the wing on Frame 25 to appear in a closed position. Right-click on Frame 25 and Insert Keyframe - All.

We will use the Free Transform tool to move the wing. You will want to move the orientation point to the pivot point of the wing at the edge of the wing next to the body. Scale the wing until it looks like it's almost closed.

Lock this layer and unlock the layer containing the second wing. Repeat the steps above for this wing.

To add a little realism we can repeat this but use a span of 20 frames. This will open and close the wings a little faster. The total animation will be the wings opening and closing twice. The first time they will move slowly and the second time faster.

Our final step is to copy the tween on a layer. Then paste the tween onto Frame 71 of the same layer. Right-click on this tween and choose Reverse Keyframes. This will make the tween play in reverse making our animation more realistic. Repeat this for the other wing's tween. When done, our entire animation will be 140 frames.

Join us in the Flash forum.

Add Flash+CS5+Animated+Butterfly to Twitter Add Flash+CS5+Animated+Butterfly to Facebook Add Flash+CS5+Animated+Butterfly to MySpace Add Flash+CS5+Animated+Butterfly to Digg Flash+CS5+Animated+Butterfly Add Flash+CS5+Animated+Butterfly to Yahoo My Web Add Flash+CS5+Animated+Butterfly to Google Bookmarks Add Flash+CS5+Animated+Butterfly to Stumbleupon Add Flash+CS5+Animated+Butterfly 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