• Choose a category
• All
• Classic-Fiction

Preloading images doesn’t make the animation faster. It just delays the animation until all the images are loaded into the cache, making it appear smoother. Some browsers will still play the animation before the cache has finished loading, but the technique still has benefits.

Movement and swapping

Finally, you can combine motion effects with image swapping to have an image move around on the screen with animated motion. Figure 7-8 tries to show this effect (I added the arrow just so you can see how the movement works, but you need to use a browser to really see it).

Figure 7-8: Now Freya’s running around the screen. Run, Freya, Run!

Making this program requires nothing at all new. It’s just a combination of the techniques used throughout this chapter. Figure 7-9 shows the list of images used to make Freya run.

Figure 7-9: These are the running images from Reiner’s Tilesets.

The HTML is (as usual) pretty minimal here:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

When you want to create a moving image-swap animation:

1. Import the script.

You can build the script locally (as I did in the last example), but any time the script gets complex, it may be better in an external file.

2. Call an init() method.

Most animation requires an init() method called from body.onload(), and this one is no exception.

3. Name the sprite.

The sprite is a div that moves, so it needs absolute position, top, and left all defined as local styles.

4. Name the image.

You also animate the image inside the sprite. The only property you change here is the src, so no local styles are necessary.

Building the code

The JavaScript code is familiar because all the elements can be borrowed from previous programs. Here’s the code in its entirety:

//run.js

var frame = 0;

var images = new Array(8);

var sprite;

var spriteImage;

var MAX_X = 500;

function init(){

sprite = document.getElementById(“sprite”);

spriteImage = document.getElementById(“image”);

loadImages()

setInterval(“animate()”, 100);

} // end init

function loadImages(){

//pre-loads images into an array

//make temporary array of image file names

var imgList = new Array(

“freya/run0.gif”,

“freya/run1.gif”,

“freya/run2.gif”,

“freya/run3.gif”,

“freya/run4.gif”,

“freya/run5.gif”,

“freya/run6.gif”,

“freya/run7.gif”

);

//create the array of image objects used in the

//rest of the program

for(i = 0; i < images.length; i++){

images[i] = new Image();

images[i].src = imgList[i];

} // end for loop

} // end loadImages

function animate(){

updateImage();

updatePosition();

} // end animate

function updateImage(){

frame++;

if (frame >= images.length){

frame = 0;

} // end if

spriteImage.src = images[frame].src;

} // end updateImage

function updatePosition(){

sprite = document.getElementById(“sprite”);

var x = parseInt(sprite.style.left);

x += 10;

if (x > MAX_X){

x = 0;

} // end if

sprite.style.left = x + “px”;

} // end function

Defining global variables

You have a few global variables in this code:

♦ frame is the frame number. It is an integer from 0 to 11, which serves as the index for the imgList array.

♦ imgList is an array of filenames with the animation images.

♦ sprite is the div that moves around the screen.

♦ spriteImage is the img element of sprite and the image that is