Create a Simple Butterfly Animation using Flash

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 troubleshooting and animating tips

A couple of pointers before we begin animating:

The trickiest part of making butterfly animations is getting the erratic and stylish flight pattern right. Your butterfly can be a stylish fantasy or a cute animation for a toddler show - either way, they fly like crazy!

As an animator, think about 3 things:

  • Butterflies are very light weight, and every little air current sets them off.
  • They have huge wings compared to their body size.
  • They flutter those wings very quickly.

Got butterflies in your stomach? :-)
OK, let's get on the runway:


PART 1 - How to Draw a Butterfly

For this tutorial we'll design a simple butterfly, just to show the principles of animating it in Flash.

Step 1: Make one wing

Most flash animations start the same way:

  • Draw a rectangle :)
  • Using the black arrow tool, push and pull at the edges to create a roundish trapeze.
  • Add a circle of different color.
creating the wing - drawing in Flash
  • Turn your creation into a Graphic Symbol. To do this- press F8, select graphic, name it "wing".
Convert to Symbol
  • Select the wing on the Stage with the Free Transform Tool(Q on your key board (KB for short)). Place the pivot at the narrow end.
setting the Transformation point

Step 2: Make the second wing

  • Select the object on Stage.
  • Hold down ALT on KB (Key Board).
  • Drag, and drop.
  • Select the bottom wing and in the properties window select – Brightness -15%, to make it slightly darker.
change symbol brightness

Step 3: Draw the body

Now, this used to be a caterpillar:

  • Draw an ellipse using the ellipse tool. A shade darker than the wings would look nice.
  • Nudge its edges with the black arrow to make a sausage shape.
  • Add circle for head.
  • Add feelers – two circles and two lines.
  • Select the whole body drawing and convert it to a Graphic Symbol (F8).
  • Leave the pivot in the middle.
  • Place the body between the wings, using CTRL + the KB arrows.
draw butterfly body

Now wrap it all together -  Make a butterfly symbol:

  • Select all 3 symbols.
  • Press F8 -convert to Graphic Symbol.
  • Name it- "butterfly-animation".
convert drawing to Flash Symbol
  • Double click this new symbol to arrange the butterfly animation's insides:
  • Select all 3 objects on stage,
  • Distribute to layers (CTRL+Shift+D)

See how the layers got the name of the symbol that's in them? Isn't that cool?

Great!! 

You now have a butterfly ready to come out of the pupal stage and take off! 

Go To PART 2 – Animate The Wings

or jump to Part 3: Flight path

back to top
Home > Learn Flash > Butterfly Animation tut Part 1

More Flash Tutorials:

try this Hopping Rabbit Animations Tutorial 
and here you can learn How to Draw a Cat using Flash's own drawing tools


What do you say? Leave me a comment in the box below