Easy Java Script Butterfly Animation
By Stephen Bucaro
In my previous article, Easy Java Script Animation, I showed you how to create a
simple bouncing ball animation using Java Script. You were probably surprised at
how little code it required and how easy it was. In this article I'm going to
use the same basic code to make a simple butterfly animation. Again, I think
you'll be surprised at how little code it requires and how easy it is.
As a review, to animate you need an animation timer which is used to change
the image and the position of the image. And we need an animation path, which
is an array where each element of the array is a set of instructions for the
animation. You'll see the code for both in this article, but if you want a
detailed explanation, read the
What is unique about this animation is how we slice and dice the image of a
butterfly so that we can animate its wing action. The initial image of the
butterfly is shown above. Here is brief is what you need to do:
1. separate the body and the wings.
2. generate a sequence of wing action by resizing the height of the wing image,
and then creating inverted versions of the sequence.
3. resize everything to the size you want for your animation.
To perform this graphic processing, I recommend using the free
For this example, I provide all the pieces for the animation below, which you
can get by right-clicking on each image and, in the menu that appears, selecting
"Save Image As..."
Shown below is the complete code for the first example which demonstrates the body and a wing image,
both with a transparent backgrounds, positioned in a div element that has a background image.
<img id="body" src="body.gif" />
<img id="w1" src="w1.gif" />
If you want to follow along with this example, create a basic web page and type
in, or cut and paste, the code provided. You can create a basic web page using Windows
Notepad. The code for a basic web page is shown below. Save your file with any
name and the file extension .htm.