JavaScript Example A-1
Image Animation w/Speed Control

Click Here for Previous JavaScript Tutorial Home Click Here for Next

This example is the "Sliding Tower" from the Netscape developer tutorials. It may be found at http://developer.netscape.com/docs/examples/javascript/towrslid/towrslid.htm along with a complete discussion of its theory of operation. For convenience I've copied that discussion here.

The example illustrates a number of JavaScript concepts, but I also like it just because it is a nice coding example. The main concepts illustrated are:

milliseconds


Press "Start" to start. Go ahead, press it.

Besides the obvious (i.e. you should see an animated Eiffel Tower moving across the screen), note also how the "Start" button became the "Stop" button.

Theory of Operation

The following discussion is reproduced directly from the Netscape article at http://developer.netscape.com/docs/examples/javascript/towrslid/towrslid.htm

This JavaScript was used as Example #3 in the Introduction to JavaScript presentation at European DevCon '97. If you were to look at the source code of the page you are presently reading, you would see the following code. Explanations of each function are included:

<SCRIPT LANGUAGE="JavaScript1.2">
anims = new Array(5);
var frame = 0;
var timeout_state = null;

function imageLoad() {
    for(var i = 0; i<5; i++) {
        anims[i] = new Image();
    anims[i].src = "anim" + i + ".gif";
    }
}

This is the beginning of the Script located in the header of the HTML document. Here we create three global variables within the JavaScript space as well as define the first of the three functions that make up our short JavaScript program. The three variables are anims, which is a 5-part array of JavaScript Image objects used to cache the 5 frames of the animation; frame, which is our current framecount (an integer); and timeout_state, which stores the set_timeout() return value and is used to start and stop the animation. This final variable is initialized to null which is our stopped state and so the page loads with the animation off by default.

The function named imageLoad() takes no parameters and is called by the page's onLoad event. Once the body of the page has loaded, this function is called once. The purpose of this function is to load each of the animation sequence's images in the background so that when the user hits the Start button, whatever previous caching that was possible has happened. If this function has completed by the time Start is engaged, than the first sequence will run smoothly and not wait for each successive load of each frame.

This function creates an array of JavaScript Image objects. The only relevant part of the object for our purposes is the src property. This sets the source URL for the object. By assigning that to each of the images (named anim0.gif through anim4.gif), we load the images into the cache. In fact, the loading of the page already loads anim0.gif, but since this is loaded by the page already, it is in the cache, and the src property retrieves it from there and allows us to use the same loops in all the relevant functions without harming efficiency.

function animator() {
    document.animImage.src = anims[frame].src;
    frame = (frame + 1);
    if(frame >= 5) {
        frame = 0;
    }
    timeout_state = setTimeout("animator()", document.animForm.animPace.value);
}

The animator() function (our second function) is the main loop that runs the animation. This function retrieves the src property from the current framecount out of the array and assigns this src to the image on the page (named animImage). We cannot assign the Image directly because the page does not allow such a swap, but by using the src property in this way the browser will automatically retrieve from the cache if the image was previously loaded (which highlights the value of the first function). The frame is then incremented and tested for whether it has reached the end of the line, in which case, it is reset back to the first frame (frame zero).

Finally, the set_timeout() function is used to call this function again after the number of milliseconds currently in the page's text box, identified as the animPace.value object on the form. This means that the timing can be changed in the text box and, once focus moves away from the box, the new value will be retrieved by this function, so speed can be changed dynamically. The timeout_state variable is set so that we can control the animation in the next function.

function buttonCheck() {
    if(document.animForm.animButton.value == "Start") {
        document.animForm.animButton.value = "Stop";
        animator();
    } else {
        document.animForm.animButton.value = "Start";
        clearTimeout(timeout_state);
        timeout_state = null;
    }
}

</SCRIPT>
</HEAD>

The buttonCheck() function is that which is called upon an onClick event occuring on the button in the page. This function checks the current state of the button; if the button says "Start", the animation is started and the text on the button is changed to "Stop". If it says "Stop", than the animation is stopped, timeout_state is set to null, and the text on the button is changed to "Start". The clearTimeout() function resets the set_timeout() function called in animator(), so this stops the loop.

That encompasses the functionality of the page. Now let's see the body of the actual HTML page:

<BODY onLoad="imageLoad()">
<CENTER>
<H1>Sliding Tower<BR>
Sample Code</H1></CENTER>
<P><IMG SRC="anim0.gif" NAME="animImage" HEIGHT=337 WIDTH=256> 
<FORM NAME="animForm">
<INPUT TYPE=button VALUE=Start NAME="animButton" onClick=buttonCheck()>
<INPUT TYPE=text VALUE=250 NAME="animPace">milliseconds</FORM>

<SCRIPT>
document.animForm.animButton.value = "Start";
document.animForm.animPace.value = 250;
</SCRIPT>

</BODY>

Here we see the creation of the page. First, the image that we are manipulating, named animImage. Second, the form, named animForm, that holds the button and text box. Note that the button uses the onClick event to call the buttonCheck() function above, which, in turn, starts or stops the animation created by the animator() function. The caching routine, imageLoad() is called by the BODY tag after loading the page.

The inline SCRIPT following the page creation is used to set all the appropriate default value. The button is set at "Start" and the frametime is set for 250 milliseconds. While these are not absolutely necessary in this case (since they match the default tags) it is useful in having a clear initialization step.

 
Click Here for Previous JavaScript Tutorial Home Click Here for Next