Flash CS5 Animated Butterfly

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.

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.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2022 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.