Login | Register   
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-5 : Page 5


advertisement
Creating the Preview Code
The preview mechanism is an example of a path animation. I'll treat it much the same as the example at the very beginning of this article. You need arrays of X and Y values to move the bulb <div> along the path specified in the arrays. The tricky part is turning the data stored in the xValues and yValues string variables into arrays. After drawing a path, the data exists in a comma-delimited list. The tokenizer() function pulls off a piece of data at a time and stores it in an array.

function tokenizer(stringValue,delim) { //converts stringValue to array based on delim begin=0; end=stringValue.indexOf(delim); tokenCount = 0; while(stringValue.indexOf(delim,begin)>0) { this[tokenCount] = parseInt(stringValue.substring(begin,end)); tokenCount += 1; begin=end+1; end=stringValue.indexOf(delim,begin); this.length = tokenCount; } }

I'll create two tokenizer objects in the animate() function to create the coordinate arrays by passing the strings and the delimiter to the tokenizer() function like this:

xPos = new tokenizer(xValues,','); yPos = new tokenizer(yValues,',');

The animate() function is nearly identical to that of the first example. Aside from hiding the directions and savePath elements and creating the coordinate arrays, nothing special is going on:



function animate() { eval(pre + 'savePath' + post).visibility = 'hidden'; eval(pre + 'directions' + post).visibility = 'hidden'; xPos = new tokenizer(xValues,','); yPos = new tokenizer(yValues,','); if(!xPos.length) return; if(currentX>xPos.length-1) { currentX = 0; currentY=0; return; } eval(pre + 'bulb' + post).left = parseInt(xPos[currentX]); eval(pre + 'bulb' + post).top = parseInt(yPos[currentY]); currentX++; currentY++; setTimeout('animate()',10); }

The final step lies in attaching the mouseMove event in the <body> element so that IE4+ will recognize the event:

<body onMouseMove="IEgenPath()">

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.


Tom Duffy , DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the College's in-house Web design studio.
Comment and Contribute

 

 

 

 

 


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

 

 

Sitemap