JavaScript Animations, Part I: Defining the Animated Element and the Animation

Defining the Animated Element and the Animation

Adobe's Flash 10.1 Goes Mobile (Minus iPhone)

As you'll recall, an animated element must be positioned. The HTML code is straigtforward:

<DIV ID="ball1" STYLE="position: absolute; left: 200; -->
top: 200; width: 50;"><IMG SRC="ball1.gif" WIDTH="50" -->
HEIGHT="50"></DIV>
<DIV ID="ball2" STYLE="position: absolute; left: 350; -->
top: 480; width: 25;"><IMG SRC="ball2.gif" WIDTH="25" -->
HEIGHT="25"></DIV>

As usual, we insert the external script (animate.js) at the bottom of the document, just before the </BODY> tag. Note that you can embed it anywhere else in the document, but since animations are a luxury, you might as well let the rest of the page load first. Let's take a look at the entire script (an example) that you should put in the HTML document of the desired page:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--

document.write("<SCRIPT SRC='animate.js'></SCRIPT>");
onload = start;

function start() {
  anim1 = new animation("ball1");
  if (!anim1.element) return;
  anim2 = new animation("ball2");

  anim2.slideBy(200, -300, 256, 60, "anim1.circle(100, -->
0, -360, 150, 50)");
}

// -->
</SCRIPT>

The first statement embeds the external script by printing a <SCRIPT> tag. The external script is only executed by fourth-generation browsers (and above) because the preceding script, which embeds it, is also restricted to such browsers (we set the LANGUAGE attribute to "JavaScript1.2"). Why do we need to print the external script's <SCRIPT> tag with JavaScript? The answer is very simple. Navigator 3.0x ignores the LANGUAGE attribute of the <SCRIPT> tag if it also has a SRC attribute (specifying the URL of the external script). The easiest way to overcome this bug is to conditionally embed the script via JavaScript.

The second global statement in the preceding script sets the onload event handler so that the start() function is executed when the page has finished loading.

The start() function creates two instances of the animation object, one for each positioned element that we want to animate. Notice that the var keyword is omitted, so the variables are global. This is important, because we refer to these variables in deferred scripts. As you can see, the last argument of anim2.slideBy() is a string ("..."), which serves as the statement to be executed when the first animation ends. The string basically consists of one statement -- a call to anim1.circle(). So when the second element (whose animation object is referenced anim2) comes to a stop, the first element starts moving.

Notice that the function is terminated if the first animation object's element doesn't exist:

if (!anim1.element) return;

Navigator 4.0x lets the user disable stylesheets. If they are disabled, elements cannot be referenced with JavaScript. Therefore, it is important to make sure stylesheets are enabled before trying to access positioned elements on the page.