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
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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


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
Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Add Static Text To Craft Product Trailer Template

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