Browse DevX
Sign up for e-mail newsletters from DevX


Build an Animation Generator-4 : Page 4




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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 <script> tag inside the <head> element and add the following DOM masking code and global variables:

var xValues = ''; var yValues = ''; var currentX = 0; var currentY = 0; // IE 4+ code if(document.all) { pre = 'document.all.'; post = '.style'; } // NN4 code if(document.layers) { pre = 'document.layers.'; post = ''; document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = NNgenPath; document.captureEvents(Event.MOUSEDOWN); document.onMouseDown = downFlag; document.captureEvents(Event.MOUSEUP); document.onMouseUp = upFlag; var flag = 0; }

As you can see, the IE4+ code is nothing new—just mask the DOM and move on. The NN4 code is far more interesting. Calling the captureEvents() method on the document object causes NN4 to trap the event. You can then associate the event with the name of the function that will handle the event. For example, whenever a mouseDown event occurs on the document, NN4 will call the downFlag() function (which you'll write shortly).

Here are the NN4 event handlers:

function downFlag() { flag = 1; document.directions.visibility = 'hidden'; document.savePath.visibility = 'hidden'; } function upFlag() { flag = 0; } function NNgenPath(e) { if(!flag) return; if(e.target.name== document.savePath.document.form1.S1 || e.target.name== document.savePath.document.form1.S2) return; if(e.which==1) { if(xValues=='') { xValues+= e.x; yValues+= e.y; } else { xValues+= ',' + e.x; yValues+= ',' + e.y; } document.savePath.document.form1.S1.value = xValues; document.savePath.document.form1.S2.value = yValues; } }

The downFlag() function does two things: It sets the flag variable to one to indicate that the user has pressed the left mouse button, and hides the directions and savePath elements. The upFlag() function sets the flag variable back to zero, indicating that the left mouse button has been released. This is important, because you want to capture the path coordinates only when the left mouse button is down.

The NNgenPath() function keeps track of all of the points that make up the path. The document calls this function whenever the user moves the mouse on the document. So, the first thing NNgenPath() does is to check the flag variable's value. If the value is not 1 (the mouse button is not down), the function exits immediately.

Next, the NNgenPath() checks to see if the mouse movement occurs on either form element. The form elements hold the data for the xValues and yValues variables. I've assumed that mouse movement on the form fields is associated with selecting the data, so, the function again exits.

Finally, if the function progresses beyond the two checks, you can assume that the user is generating a path. The code appends the string value of the X and Y mouse coordinates in the xValues and yValues variables and updates the form fields (which, at the moment, are hidden).

Now, add the following code to handle the process in IE4+:

function IEgenPath() { if(event.srcElement==document.form1.S1 || event.srcElement==document.form1.S2) return; if(event.button==1) { document.all.savePath.style.visibility = 'hidden'; document.all.directions.style.visibility = 'hidden'; if(xValues=='') { xValues+= event.x; yValues+= event.y; } else { xValues+= ',' + event.x; yValues+= ',' + event.y; } } document.form1.S1.value = xValues; document.form1.S2.value = yValues; }

Except for the syntax and the omission of the flag variable detection, the code for IEgenPath() is conceptually identical to that of NNgenPath().

Add the following code to handle the Clear, Save, and Directions controls:

function clear() { xValues = ''; yValues = ''; // for IE4+ if(document.all) { document.form1.S1.value = xValues; document.form1.S2.value = yValues; } // for NN4+ if(document.layers) { document.savePath.document.form1.S1.value = xValues; document.savePath.document.form1.S2.value = yValues; } eval(pre + 'savePath' + post).visibility = 'hidden'; eval(pre + 'directions' + post).visibility = 'hidden'; } function save() { eval(pre + 'savePath' + post).visibility = 'visible'; eval(pre + 'directions' + post).visibility = 'hidden'; } function showDirections() { eval(pre + 'savePath' + post).visibility = 'hidden'; eval(pre + 'directions' + post).visibility = 'visible'; }

The clear() function first clears any data from the xValues and yValues variables and then stores the empty strings in the form fields. Note that IE4+ and NN4 refer to the form fields differently. The clear() function then hides the savePath and directions elements.

The save() function merely displays the form fields that hold the data, allowing you to copy and paste the data into your code. The showDirections() function does the opposite: it hides the form fields and displays the directions.

Comment and Contribute






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



Thanks for your registration, follow us on our social networks to keep up-to-date