Build an Animation Generator

ave you ever seen those Web pages where elements animate along a path, moving across a background like sprites? It’s fairly easy to imagine how that’s done?using the window.setTimeout function to move one or more elements along a path defined with X and Y pixel values stored in an array. But it’s difficult and time-consuming to create the path. The problem is: How can you create a path animation using a Web interface?



You could use Flash, but DHTML gives you pixel-level control over the placement of each element on the page?and you aren’t bound by the rectangle of a Flash movie. You can even build a simple tool that lets you draw an animation path using the mouse. The animations themselves will work in all three major browsers?Internet Explorer 4+ (IE4+), Netscape Navigator 4.x (NN4), and Netscape 6 (NN6)?without any plug-in support, although currently, the tool runs only in IE4+ and NN4+.Path Animation
A path animation is exactly what you’d expect: an element on the page follows a path that you design. In DHTML terms, you rapidly change the top and left properties of a visible object to achieve the appearance of motion. To do that, you can store a series of values for the top and left properties in arrays, and then use the window.setTimeout function to cycle through the values in the arrays.

Here’s a simple example of a path animation. Open your favorite text editor and enter the following code:

element in the document whose id attribute value is “bulb.” The

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.

Clear
Preview
Save
Directions

X-Values Y-Values

The preceding code contains

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.Scripting the Animation Tool
Before adding script, it is essential that you understand and account for the differing event models of IE4+ and NN4. In short, IE4+ allows you to attach events to any element on the page?just add the handler to the element inside the HTML tag. Netscape, on the other hand, requires you to register handlers for specific events with the document object and then provide handlers for those events. The goal of creating a single script for both browsers requires a combination of both approaches.

Open a element so that IE4+ will recognize the event:

This exercise shows off many of the capabilities of DHTML. On the one hand, it's clear that path animations aren't very difficult to incorporate into your pages using technology you already know. On the other hand, it's also clear that DHTML can be used to build viable client-side applications that solve real world problems. Next month, I'll address more complex animations that use some interesting mathematical formulas.

Charlie Frank

Charlie has over a decade of experience in website administration and technology management. As the site admin, he oversees all technical aspects of running a high-traffic online platform, ensuring optimal performance, security, and user experience.

See also  Managing Internal Communications When Backend Systems Go Down

Related Posts

• R Comes to the Enterprise with Microsoft R Server
• Identify Whether an IP Address Is a Multicast Address
• 8 Ways to Create a Culture of Recognition in Your Company
• CORS Support in Spring
• Quick Way to Reduce Outlook File (pst) Size