InformIT: Sams Teach Yourself JavaScript in 24 Hours > Workshop: Creating a Simple Animation

Workshop: Creating a Simple Animation

Although rollovers are undoubtedly the most practical use for JavaScript's dynamic images, you can also use the feature for simple animations. JavaScript isn't always the best way to do animations, but it's very useful in cases where you want to control the animation from a script.

As a simple example of JavaScript animation, you will now create a script that moves an animated character across the browser display.

Creating the Images

The first step in creating a JavaScript animation is to create the images themselves. For this example, you will make an animated mouse move across the page. (You could use anything, of course, but this mouse is the only thing I can draw.)

The mouse animation uses a series of eight images, shown in Figure 13.3. To create these images, draw the mouse in a 100x100 square and then shift it to the left and right to create the various steps in the animation.

Figure 13.3 The eight images for the mouse animation.

Call these images mouse1.gif through mouse8.gif. You will also need a blank image for those times when the mouse isn't there; call that mouse0.gif. All of these files are available on this book's Web site (www.jsworkshop.com), so you can try the example yourself.

Creating the HTML Document

Next, you'll need to create the HTML document for the animation. You will animate the mouse through five adjacent images on the page so it appears to move from one end to the other. Here is the basic HTML to lay out the graphics:

<h1>Animation in JavaScript</h1>
<hr>
<center>
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
</center>

At this point, all five of the images on the page are displaying the mouse0.gif image and are therefore invisible. Because these are the first five images on the page, the script will be able to access them as images[0] through images[4].

Defining the Variables

To begin the actual script, define some global variables. Here is the beginning of the script:

var cbox=0;
var nbox=1;
var cimage=0;
var nimage=0;

The cbox variable will store a value from 0 to 4, indicating which of the five images the mouse is currently running through. Part of the mouse may protrude into the next image, so use the nbox variable to store the position of the right half of the mouse, if required.

The cimage variable will store the value of the image (from 1 to 8) to be stored in the current box. Similarly, nimage will store the value of the image for the part of the mouse that protrudes into the next box, if needed.

Stepping through the Animation

Next, create the actual animation. You'll use a function called next to move the mouse to its next position, and use the setTimeout method to call this function regularly.

The first step in the next function is to increment the image in the current box. Here is the function definition and the increment statement:

function next() {
cimage += 1;

After incrementing the value of cimage, the script needs to make sure it hasn't gone past 8 because there are eight images. The next part of the script checks for values greater than 8:

if (cimage > 8) {
        cimage = 4;
        document.images[cbox].src = "mouse0.gif";
        cbox = (cbox + 1) % 5;
        nbox = (cbox + 1) % 5;
}

If the current image has a value greater than 8, this code increments the value of cbox and assigns nbox to the next value. Both of these statements use the modulo (%) operator, which prevents the position from reaching a value greater than 4. Instead, the mouse will start over at the left side of the page.

The preceding script also resets cimage to 4. (Because the current box was previously the next box, it's already moved through images 1, 2, and 3.)

Next, the script needs to calculate the image for the next box, if any:

nimage = cimage - 5;
if (nimage <= 0) nimage = 0;

The first statement here assigns nimage to five less than cimage. If you look at the images in Figure 13.3, you'll notice that images 6, 7, and 8 match up with images 1, 2, and 3, respectively, to form a complete mouse. If the subtraction results in a negative value, there shouldn't be a next image, so assign 0 to nimage.

Finally, the end of the next function assigns the images indicated by cimage and nimage to the locations indicated by cbox and nbox:

document.images[cbox].src = "mouse" + cimage + ".gif";
document.images[nbox].src = "mouse" + nimage + ".gif";
window.setTimeout("next()",100);
}

The final statement here sets a timeout so that the next function will be called again in a tenth of a second. (You can increase or decrease this value to change the mouse's speed.)

Putting It All Together

You now have all of the components of a working animation script. Listing 13.3 shows the complete HTML document and script. The <BODY> tag includes an onLoad event handler that calls the preload function to preload the mouse images. This function then calls the next function after a timeout to get the animation started.

Example 13.3. The complete animation example

<html>
<head>
<title>Primitive Animation in JavaScript</title>
<script LANGUAGE="JavaScript" type="text/javascript">
var cbox=0;
var nbox=1;
var cimage=0;
var nimage=0;
function preload() {
   a1 = new Image();
   a1.src = "mouse1.gif";
   a2 = new Image();
   a2.src = "mouse2.gif";
   a3 = new Image();
   a3.src = "mouse3.gif";
   a4 = new Image();
   a4.src = "mouse4.gif";
   a5 = new Image();
   a5.src = "mouse5.gif";
   a6 = new Image();
   a6.src = "mouse6.gif";
   a7 = new Image();
   a7.src = "mouse7.gif";
   a8 = new Image();
   a8.src = "mouse8.gif";
   window.setTimeout("next()",500) ;
}
function next() {
   cimage += 1;
   if (cimage > 8) {
       cimage = 4;
       document.images[cbox].src = "mouse0.gif";
       cbox = (cbox + 1) % 5;
       nbox = (cbox + 1) % 5;
   }
   nimage = cimage - 5;
   if (nimage <= 0) nimage = 0;
   document.images[cbox].src = "mouse" + cimage + ".gif";
   document.images[nbox].src = "mouse" + nimage + ".gif";
   window.setTimeout("next()",100);
}
</script>
</head>
<body onLoad="preload()">
<H1>Animation in JavaScript</H1>
<HR>
<center>
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
<img src="mouse0.gif" width=100 height=100 alt="" border="0">
</center>
<HR>
</body>
</html>

To test the script, load it into a browser. Be sure the HTML document is in the same directory as the mouse0 through mouse8 image files. If everything works, you should see a little mouse scurrying across the screen, as shown in Figure 13.4.

Figure 13.4 The animation example in action.

Summary | Next Section

Previous Section