Flash animation tutorial how to animate a butterfly

This tutorial was requested by Brian today and teaches you how to animate a butterfly in Flash mx and above to flash cs3. I also searched the web and could not find any tutorial of this kind luckily im a Flash pro so i managed to do it for you my self.
I have tried to use the easiest method possible and after pondering about for a while I found the following was the most simple method to animate a butterfly enjoy.

This tutorial requires that you have knowledge of using the time line and drawing using the flash vector tools

start off by opening a new flash file with a 70 by 70 canvas

Then draw a circle and adjust it to a shape that looks something like this

Add a new layer name the first layer front wing and the second back wing

on the back wing layer take a copy of the wing shape and place it behind the front wing like so

you dont have to draw any patterns on I have just doen this for a decorative feel

Now convert both wings to movie clips naming them accordingly

Next add a new keyframe in each layer and start adjusting the wings shapes downwards do this for about 5 more frames each a little lower than the last

Make sure the pivet point is set to your right side bottom corner as displayed this is to keep the wing set in moving in the direction we need it to

Carry on adding keyframes and adjustments to both wings until they are as low as you need them to be by the end of 1 wing flap

Then copy all the frames by highlighting all of them in the time line right clicking then copy frames

select the next blank frame and right click again to select paste frames

highlight again the frames YOU HAVE JUST PASTED ONLY and click on the top menu into modify > time line > reverse key frame.

This will reverse the animation thus making it much smoother and realistic looking and also adjust the frame rate to as fast or slow as you want it this animations frame rate is set to 30 fps.

And there you have it simple as that

If you liked this tute Bookmark it

Add 'Flash animation tutorial how to animate a butterfly' To Del.icio.us

Add 'Flash animation tutorial how to animate a butterfly' To digg

Add 'Flash animation tutorial how to animate a butterfly' To Stumble Upon

If you enjoyed this post, make sure you subscribe to my RSS feed

!

Comments

17 Responses to “Flash animation tutorial how to animate a butterfly”

mohannad on August 26th, 2007 11:58 am

i liked it plz send or post more of them if possible soon.
your sincely
mohannad
shaz on August 26th, 2007 4:03 pm

mohannad you can request tutorials in the request a tute page please feel free to do so. This tutorial was also a request. Its an excellent service as it allows you to get exactly what you want when you want instead of having to scour a round for days or weeks.
0wned on September 21st, 2007 5:56 pm

really good tutorial thanks
Lovely on September 22nd, 2007 2:56 pm

this is a awesome animation…
talika on September 24th, 2007 8:12 pm

that was prety cool,i will appreciate it if you can send me more of these tutorial,thanks
Rose on October 3rd, 2007 4:37 pm

I loved this tutorial… So easy… Please, send more of this kind of tutorial.
Thanks
Ganapati B on October 8th, 2007 2:53 pm

I like these tutorials very much. I want a hardcopy of all tutorials by post. I will pay if you give the payment details,

Thanks
zitavo on October 18th, 2007 7:17 pm

this is very cute and useful, thanx a lot
vivek on October 19th, 2007 5:56 am

i really like it
can u send it to my id plzzzzzz
thanks u so much
ingot on October 26th, 2007 12:40 am

Wouldn’t have been easier to create one 5-frame wing (front) flap, copy it, paste it on another layer under the front wing another, offset it slightly and there you are?
Kristine on November 28th, 2007 1:41 pm

Hi, thise tutorial is so great! You r great explainer )

Can you please, please, please write how to do a Grouping objects togeather?????
I have to make a fly-so 1 layer would be wings, 2) body of fly. I dont know how to group them layer so they do everuthing at the same time (change shape, speed, fallow the track etc).

Would be very thankfull to you!
poonam on November 29th, 2007 7:31 pm

i liked it plz send or post more of them if possible soon. sooooooo nice
NEERAJ on December 11th, 2007 1:50 pm

very thankful to post this, very useful
Atanu Roy on January 7th, 2008 4:35 am

Thank u for this lovely animation trick….will u give some training to how creat a moving charecter on Flash5 bcause i love flash baesd animation & want to creat animation on flash so pls send such example on my atanusantu@yahoo.com email address…Thank u Sir
Gabriel Pan on March 18th, 2008 3:59 pm

Hi, useful info here. I’m a student and i need help to understand how i can make it move from point A to B after doing the follwing steps. Thanks.
Nidhi on May 5th, 2008 9:02 am

nicely described tutorial.
poonam on July 26th, 2008 7:03 pm

pls tell me the trick of fillter in flash also