The Path Animation Generator
As you can see, path animations are relatively straightforward. They are also very much a lightweight operation as the browser needn't calculate the next position of the elementit has already been calculated and stored in the positioning arrays. The obvious caveat is the creation of the arrays. The preceding example is just about at the limit of most people's hand coding ability. More complex paths require far more coordinates, that call for a path generation tool. Furthermore, because this is a DHTML exercise, it makes sense to create that tool with DHTML.Note: the code to create the Path Animation Generator will work in IE4+ and NN4. I have yet to modify it to work with NN6's event model.
Here are the requirements for the Path Animation Generator:
- Display an initial set of directions to the user about how to use the tool
- Make it as easy as possible to useusers should be able to click and drag a path on the screen using only the mouse
- Users must be able to preview the path
- Must provide some way to save the generated animation path values
Open a new file in your text editor and build the user-interface portion of the page by entering the following HTML:
<title>Path Animation Generator</title>
font: 12pt sans-serif;
<div id="directions" style="position: absolute; top:
10; left: 10; z-index: 2;">
Drag your mouse around the screen to create a path.
Click Preview to see the path you created.
Click Clear to erase your existing path and start
If you do not click on Clear, the path you create will
be appended to the current path.
Click Save to reveal the coordinates of the path you
generated. You can then copy and paste them into your
Click Directions to read these directions again.
This page has been tested with IE 4+ and Netscape 4.x.
<div id="controls" style="z-index: 2; position:
absolute; top: 150; left: 10; width: 100;">
<div id="bulb" width="32" height="64" style="position:
absolute; top: 300; left: 0; z-index: 2;">
<img border="0" src="lightbulb.gif" width="32"
<div id="savePath" style="position:absolute; top: 0;
left: 0; width: 750; visibility: hidden; z-index:
X-Values<textarea rows="4" name="S1"
The preceding code contains <div> elements for the directions, the controls, the textarea fields to display the coordinates, and the preview image. It also establishes some basic style rules for the document. Initially, the directions and controls are visible.