The first step is to define the object to animate. In this example we are animated
an image. We place the image inside of an absolutely positioned DIV element. This is necessary
to ensure the animation works cross-browser as Netscape Navigator does not support positioning images
Next, we need to choreograph the set of paths we want the globe to follow. Notice in the last
path we set the horizontal destination based on the width of the window. To determine the width
we use a simple browser test. If you are going to be manipulating the properties and methods
of positioned elements, we recommend using our DHTMLLib cross-browser
library. Using DHTMLLib, the browser detection to determine the width would no longer be necessary and
the browser's width (and other properties) would be directly accessible.
Now we are ready to direct the animation with the Animator object.
We use the Animator's
Including the Scripts
The last step is to include the necessary scripts on your page:
Each included script represent an object in the animation toolkit. The path.js script represents the base class for all path objects. The circlePath.js and straightPath.js script extends the path base class with the circle and straight path animation functions. The animator.js file contains the animator object.
You have now seen the basics for using the animation toolkit. Next we take you through the inner details of the Animation toolkit and show you how to create your own path objects.
Page 1:Animation Toolkit
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.