Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Build an Animation Generator-3 : Page 3


advertisement
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 element—it 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:

  1. Display an initial set of directions to the user about how to use the tool
  2. Make it as easy as possible to use—users should be able to click and drag a path on the screen using only the mouse
  3. Users must be able to preview the path
  4. 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:

<html> <head> <title>Path Animation Generator</title> <style> body{ color: white; background-color: black; font: 12pt sans-serif; } a{ color: #ffffdd; } </style> </head> <body> <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 over. 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 code. Click Directions to read these directions again. This page has been tested with IE 4+ and Netscape 4.x. </div> <div id="controls" style="z-index: 2; position: absolute; top: 150; left: 10; width: 100;"> <p> <a href="javascript:clear()">Clear</a><br> <a href="javascript:animate()">Preview</a><br> <a href="javascript:save()">Save</a><br> <a href="javascript:showDirections()">Directions</a> </p> </div> <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" height="64"> </div> <div id="savePath" style="position:absolute; top: 0; left: 0; width: 750; visibility: hidden; z-index: 3;"> <form name="form1"> <p> X-Values<textarea rows="4" name="S1" cols="20"></textarea> Y-Values<textarea rows="4" name="S2" cols="20"></textarea><br> </p> </form> </div> </body> </html>

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.


Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap