Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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 previous article.

Butterfly image

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 Paint.Net application. 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.

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#viewport
{
position:relative;
left:0px;
top:0px;
width:460px;
height:280px;
border-style:solid;
background-image:url('clouds.jpg');
}
#body
{
position:absolute;
left: 204px;
top: 150px;
visibility:visible;

}
#w1
{
position:absolute;
left: 140px;
top: 50px;
visibility:visible;
}
</style>

</head>
<body onload="animate()">

<div id="viewport">
<img id="body" src="body.gif" />
<img id="w1" src="w1.gif" />
</div>

</body>
</html>

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.