Creating a Flight Path for Butterfly Animations

This flash tutorial has 3 parts:

Part 1: How to draw a butterfly for flash animation

Part 2: How to animate butterflies wings

Part 3: How to create the flight pattern for butterfly animations, as well as trouble shooting and animating tips

Part 3: Create the Flight Path

In this third and last part of the butterfly animations tutorial, we will create a motion guide layer for the butterfly symbol we animated in the first two parts.

Additionally, see the troubleshooting and general tips at the end of this page.

How to animate the flight pattern:

Go to the main Scene (the main timeline).
Place your butterfly animation symbol just off the right side of the stage. You might wish to make it smaller.
Place the pivot at the center of its body.

If you plan to export this animation later as an image sequence, such as jpeg, be sure it's a GRAPHIC symbol, set on "loop" at the properties window.

A Movie Clip Symbol will only export the first frame,

and I have seen brave men weep when they discovered this :-)

Select the butterfly layer in the layer window left of the time line.
At the bottom of the layer window hit the "add guide layer" button. The butterfly layer should appear "nested" beneath the new guide layer.If not - drag the butterfly layer on to the guide, until it sticks.

We need to plan the flight path. A butterfly on the breeze is very jittery and erratic. Make it go up and down, and rather giggly all the way through.
Draw this flight path in the guide layer: Start off screen and End off screen on the other side.

Use the Pencil tool, select its "smooth" mode at the bottom of the tool box. Draw the flight path in the first frame of the motion guide layer.
Extend both layers to about a 100 frames (1 second).
Right click the butterfly layer and select add "motion tween" from the drop down menu.
Go to the last frame and add a keyframe for the butterfly animation symbol (NOT to the guide layer).
Make sure that "snap" is checked in the properties window.
Select the butterfly animation symbol on the stage in this last frame and move it to the other side of the screen.
The symbol should stick to the guide at its pivot. If it doesn't, check both key frames to have the motion tween on and "snap" checked.
"Snap" and "tween" are frame properties, to see them in the properties window you need to select the frame on the timeline.
Hit CTRL+Enter, and see how the butterfly animation plays!

Trouble shooting:

If the butterfly still doesn't stick to the guide, and all tweens and snaps are on, try adding another keyframe some where in the middle. This usually sorts it out. Drag the symbol onto the guide until it snaps to it.

If the wing animation doesn't play in a loop, go to the first frame, and make sure that:

"loop" is selected
first- enter the number " 1" in the window
"sync" is checked
"snap" is checked (just checking :)
do the same for the last frame
OR , make it a Movie Clip, just don't try to export an image sequence of it later.

Some adjustments to make the animation look better still:

Add keyframes along the flight path, at "peaks" and "lows" of the trail. Add Ease-in and Ease-out where they make sense. (Ease-in=accelerate, Ease-out=slow down.)
Play with the guide to make it better – more dramatic, less jittery if you over did it, more erratic if it's not enough, and so on.
You can get inside the butterfly wing animation and play with it too. Make more variations, make the wings beat faster or slower, add pauses or shorten them.
Every time you make a change – try it out by exporting a SWF – CTRL+ENTER.

If you want to take the whole thing further, try this video as a butterfly animation reference try this video as a butterfly animation reference.

Suggestions for different butterfly animations and designs:

For stylish big wings – make the wing motion slower, much slower if they are very big wings, and the flight pattern smoother.
For 4 wings instead of 2- add the 2 extra wings where the first two are, but if they’re small I wouldn’t give them any separate animation. Just have them move together with the others.

Fly safely!

Back to Part 1: How to draw a butterfly for flash animation

Back to Part 2: How to animate butterflies wings

Home > Learn Flash > Butterfly Animation tut Part 3