Dhtml

Animation

Shortcuts

Overview
Part 1
Part 2
Part 3

Overview

This tutorial teaches you the basics of creating an animated object that moves through a defined path on your HTML page. This technique may seem complicated at first, but once understood, can be used to create magnificant animations. The technique is actually quite simple -- the difficult part is determining the coordinates for the path of the animation. If you wish to see a more detailed, informative tutorial on animation, look at the animation tutorial in the tutorials area of the DHTML Zone web site.

Part 1

Firstly, you must create the layer(s) that you wish to animate. Use the same techiques for creating layers as have been used throughout these tutorials.

<STYLE type="text/css">
<!--

#smileyLayer {
   position: absolute;
   z-index: 1;
}

// -->
</STYLE>

<DIV id="smileyLayer">
<IMG src="../www/images/smiley.gif" border="0">
</DIV>

Part 2

Now you must define objects for the individual animations (the individual layers that will move along an individual path). To do this you must include the functions below.

function moveLayer(layerName, left, top)
   /*
   ** moveLayer(layerName, left, top) moves layerName to position
   ** (left, top).
   */
   {
      eval(layerRef + '["' + layerName + '"]' + styleRef + '.top=top');
      eval(layerRef + '["' + layerName + '"]' + styleRef + '.left=left');
   }

function animatedObject(objectName, layerName, loop, speed, 
                        selectedIndex, endRoutines, route)
   /*
   ** animatedObject() creates a new animated object. objectName
   ** is the name of the object. layerName is it's layer. If loop
   ** is "yes", the animation will loop. speed is the time in
   ** milliseconds between movements. selectedIndex is the position
   ** in the route. endRountines is a string containing a sequence 
   ** of statements that should run when the animation is finished --
   ** this may be 0 for none. route is an array of (x, y) pairs that
   ** represent the position of the object at each movement in the
   ** animation.
   */
   {
      this.objectName = objectName;
      this.layerName = layerName;
      this.loop = loop;
      this.speed = speed;
      this.selectedIndex = selectedIndex;
      this.endRoutines = endRoutines;
      this.route = route;
   }

function doAnimation(objName)
   /*
   ** doAnimation(objName) animates the animation object,
   ** objName.
   */
   { 
      if (eval(objName + '.selectedIndex <' + objName + '.route.length')) {
         eval('moveLayer(' + objName + '.layerName,' + objName + 
               '.route[' + objName + '.selectedIndex],' + objName + 
               '.route[' + objName + '.selectedIndex + 1])');
         eval(objName + '.selectedIndex += 2');
         setTimeout('doAnimation("' + objName + '")', 
                     eval(objName + '.speed'));
      } else {
         var commandString;

         commandString = eval(objName + '.endRoutines');
         eval(commandString);
         eval(objName + '.selectedIndex = 0');

         if (eval(objName + '.loop == "yes"')) {
            eval('doAnimation("' + objName + '")', 
                  eval(objName + '.speed'));
         }
      }
   }

Now you must create the objects for each animation. In the example below, the animation object "smiley" is defined. The list of coordinates has been shortened for display purposes. Normally, the coordinate list can be very long for a relatively short animation.

var smileyArray = new Array (7);
   /*
   ** smileyArray an array that will contain the pairs
   ** that the smiley object will follow in its animation.
   ** Its capacity is the amount of pairs (movements) that
   ** the smiley object will make in its animation.
   */

var coords = "20,87, 21,87, 27,87, 29,87, 37,87, 47,87, 57,86";
   /*
   ** coords is a String representing the array of coordinates
   ** of the animation.
   */

smileyArray = coords.split(",");
   /*
   ** smileyArray is now filled with the coordinates in coords.
   */

smiley = new animatedObject('smiley', 'smileyLayer', 'no', 
                            10, 0, 0, smileyArray);
   /*
   ** smiley is the animation object for the smiley animation.
   */

The last stage of setting up the objects is to declare a global array containing all of the objects to be animated on the page.

animObjectArray = new Array ('smiley');
   /*
   ** animObjectArray is an Array containing all of the animation
   ** objects in all of the animations for the page.
   */

Part 3

You can now create some mechanism for starting the animation by assigning the doAnimation(objName) function to some event handler. For example, you may wish to have the animation start when the user clicks a button or a link, or you may wish to have the animation start automatically when the page loads, as shown in the "BODY" tag below.

<BODY onLoad="init(); doAnimation('smiley');">

Click here for an example animation.

Previous Tutorial
Go back
Next Tutorial