NavWorks: Javascript Animations Tutorial

CLICK TO DOWNLOAD
chrome1.zip -- 81 Kb

Tutorial
Javascript animations have some advantages over GIF animations beyond the fact that Javascript animations can be interactive. Among the key advantages is the fact that Javascript can be used to animate JPEG images. Also, you can reuse frames in Javascript animations and get valuable bandwidth savings. For example, in this tutorial you will learn how to use Javascript to use eight images to generate two differint animations. We will create one animation will be generated with the first 5 images. These five images form a seamless loop. Then we will create a separate effect using all eight of the images. When the cursor rolls over the animation, the animation will change going from image to image 8 and stopping (actually it's a little more sophisticated than that, as we'll explain later). When the mouse rolls off the image, the images will display from from frame 8 to 7, to 6 and then back to 1. So in effect, we will have 3 animations: a 5 frame loop, a non-looping animation that goes from image on to 8 and then a nonlooping animation that goes from image 8 to image 6. If we were to try to generate this effect using GIF animations we would have to do it with 16 frames of animation (5+8+3). But with Javascript, we can accomplish all of this using only eight frames or images. Furthermore, in this particular example, when the 3 animations are saved as optmized GIF animations, the 3 animations total over 88K, but the eight 8 images used for this example total just under 27Kb.

We will discuss several other advantages of Javascript animations in the following tutorial. To follow along, download the chrome1.zip file and open the chrome.psd file.

1. The chrome.psd Photoshop file has been designed so that you can easily customize the layers to create your own chrome animation. To customize the "Top Texture" layer to your specifications or needs fill the "Top Texture" layer with the desired color or texture. Be sure to have the Preserve Transparency option on to preserve the unique shape of the layer. To customize the "Bubble" and "Bubble Texture" layers (there are three "Bubble Texture" layers--"Bubble Texture 6," "Bubble Texture 7," and "Bubble Texture 8"), use the Hue/Saturation feature with the Colorize option on. Be sure to have the Preserve Transparency option on to preserve the unique shape of the layer. You can also Colorize all of the the "Chrome" layers. After you have customized the animation file to suit your design, save the Photoshop file with the new name "ChromeNew," so that you can come back to original file if things get out of hand.
2.Now we are ready to generate the images for the animation. In this tutorial we will assume that you will be making JPEG files for the animations. If you would like to use the chrome.psd file to generate GIF animations, please refer to the other tutorials for insight on how generate GIF animations with the layered photoshop files in AniPack 1.

To create the first frame of the animation, turn off or make invisible (click off the eyeball icons in the layers palette) all of the "Bubble," "Bubble Texture," "Bubble Back" and "Chrome" layers but leave the "Chrome 1" and "Bubble 1" layers visible. Ensure that the "Top Highlights," "Top Shadows," and "Top Texture" layers are visible. Click on the "Chrome 1" layer to select it. Choose Select All from the Select menu. Now choose Copy Merged from the Edit menu. Choose New from the File menu and create a new RGB document (the document's size will default to the size of frame 1's contents which is in the clipboard. Past the clipboard contents into the new document and merge to the background. Save and name this file as a JPEG image and name it "chrome1.jpg". Your new JPEG file should look something like the example below. Close the new document.

The process for creating the rest of the frames/images is pretty much the same. For example, go back to the "ChromeNew" document, make the "Chrome 2" and "Bubble 2" layers visible (there's no need to make the "Chrome 1" and "Bubble 1" layers invisible since the "Chrome 2" layer is fully opaque and thus covers or hides these layers from view). Click on the "Chrome 2" layer to select it. Choose Select All from the Select menu. Now choose Copy Merged from the Edit menu. Choose New from the File menu and create a new RGB document (the document's size will default to the size of frame 1's contents which is in the clipboard. Past the clipboard contents into the new document and merge to the background. Save and name this file as a JPEG image and name it "chrome2.jpg".

Continue doing this until you get to the layers named "Chrome 6-8" layers. These layers have "H&S," "Texture," and "Back" layers associated with them. You will need to turn these layers on when generating the images for these frames. For example, go back to the "ChromeNew" document, make the "Chrome 6," "Bubble 6 Back," "Bubble 6 Texture," and "Bubble 6 H&S" layers visible. Click on the "Chrome 6" layer to select it. Choose Select All from the Select menu. Now choose Copy Merged from the Edit menu. Choose New from the File menu and create a new RGB document (the document's size will default to the size of frame 1's contents which is in the clipboard. Past the clipboard contents into the new document and merge to the background. Save and name this file as a JPEG image and name it "chrome6.jpg". Your "chrome6.jpg" image should look something like this:

When you are finished you should have 8 JPEG images name chrome1-chrome8.
2. Now let's talk about how to create javascript animations. First let's look at a simple example. Click Here to view an example of a simple Javascript animation. This example is a simple javascript animation is a loop. Images 1 through 5 are displayed sequentially over and over again. There is no interactivity. Now let's look at the code. Here is the all of the HTML and Javascript code for the first example:
<html> <head> <script language="javascript">  </script> </head> <body onLoad="cycle();"> <center> <img width=100 height=100 src="chrome1.jpg" border=0 name=chrome> <script language="javascript">  </script> </body></html>
Let's quickly run through how this code works. First there is a variable that defines "frame" as 1. This essentially starts the animation off on frame 1. Next we have the "cycle()" function:
function cycle() { if (!document.images) return; document.chrome.src = "chrome"+frame+".jpg"; if (frame >= 5) frame = 1; else frame++; setTimeout ("cycle();", 100); }
The cycle function starts off with an if statement. This if statement is basically a browser check. It checks to see if the browser supports "document.images". In essence, this if-statment checks to see if the browser supports the javascript necessary to power the animation. The exclaimation point in front of the "document.images" stands for "not". so this if statement essentially says "if the browser does not support document.images, then ignore everything else in this function." If the browser does support document.images, the the code within the if-statement is executed.

Next we have the line of code that works with the image array (which shows up later in the code) to preload the images and declare the images are object so that the javascript can manipulate the images. The "chrome"+frame+"jpg" contains the frame variable. The frame variable starts off as 1 during the first pass through the cycle function "chrome"+frame+"jpg" is equal to "chrome1.jpg".

Next there is another if-statement. This if-statment says "if the frame variable is greater than or equal to 5 then frame equals 1. In other words, this if-statement redefines the frame variable to equal 1 when the after the frame variable becomes 5. How would get up to 5? That's what the else-statement does. If the frame variable is not equal to or greater than 5, then the else statment is invoked. The else-statement does two things. First it says increase the variable frame by 1 (frame++). Secondly there is recursive setTimeout line. Recursive means that the function calls itself. This is done in with the first parameter of the setTimeout line--"cycle()". The second parameter in the setTimeout line dictates the pace at which the function will run. Numbers are in 1000ths of a second, so the this function is set to run every 100/1000ths of a second (or 10 times a second).

So, starting from the beginning, the cycle function check to see if the browser supports javascript animations. If the browser does support javascript animations, then the first image for document.chrome.src is defined as chrome1.jpg, so Chrome1.jpg is displayed. Next the cycle function check to see if the value for the frame variable is equal to or greater than 5. If it is not it increases the frame variable by 1 (if the frame=1, than the frame variable is changed to 2 and so on). Then the the cycle function is called again (at the rate of ten times a second) and the whole process starts over again. So, since the frame variable is now 2, the image for document.chrome.src is defined as chrome2.jpg, etc. When the frame variable reaches 5 it is redifined to 1, so the function continues playing indefinately. Note that if you which to customize this code to use with other images you can increase or decrease the number of frames that the javascript will animate. For instance, if you which to use 6 images, then change the numeral 5 in the line "if (frame >= 5) frame = 1;" to 6 (and don't forget to add a sixth image to the image array).

However, this is not the only Javascript that powers this code. Note, for instance, that there is an "onLoad" command in the body tag. This onLoad command waits until the page is loaded before starting the cycle function for the first time. Note that this helps avoids display problems or javascript errors. Also notice that the <img> tag contains a "name" attribute. This name attribue is what is referenced with "document.chrome.src". So, the name attribute is what ties the contents of the <img> tag to the javascript. The next thing we need to talk about is the image array, shown below:
var imgslist = new Array( "chrome2.jpg", "chrome3.jpg", "chrome4.jpg", "chrome5.jpg" );

This where we define what images we will use in the Javascript animation. Note that one of the images in missing. There are only 4 images defined here. That is because chrome 1.jpg is defined within the <img> tag. If you would like to use differint images with this code, you would enter those image's names here as well as in the "src" parameter of the <img> tag.

The remaining code is simply used to actually define the images. We will forgo explaining how it works since there is nothing you need to do with it. Just remember that this code cannot be removed. Now let's move on to a slightly more complicated version of this script. Click here to view the second example. If you rollover the chrome animation with your mouse cursor you will see that this version of the code is interactive. Here the entire code for the second example:
<html> <head> <script language="javascript">  </script> </head> <body background=nw-back.gif onLoad="cycle();"> <MAP NAME="MAP"> <AREA SHAPE=CIRCLE COORDS="50,49,42" href="javascript:void(0);" onMouseOver="onbutton=true;" onMouseOut="onbutton=false;"> </MAP> <center> <img width=100 height=100 src="chrome1.jpg" border=0 name=chrome usemap=#MAP> <script language="javascript">  </script> </body></html>

First notice that this code is very similar to the first example. Many elements such as the image array are almost exactly the same (although note that the image array does contain more images). Another minor difference is that this HTML code employs an image map to help isolate the circular hole for the interactivity. Otherwise the main differences between this script and the first example is the interactivity and the animation effects associated with the interactivity.

Like the first example, the javascript starts off by defining the frame variable as 1. Next another variable called "onbutton" is defined as false. We will talk about the "onbutton" variable more in a moment. What follows these two variable is a somewhat familiar "cycle" function. The first two lines of the cycle function are exactly the same as in the first example. However, this version of the cycle function begins to deviate in the third line: "if !onbutton". This if-statement basically says, "if the onbutton variable is not true (false)." The onbutton variable is initially defined as false, so the next line is invoked.

The remaining lines within the cycle function are a bit hard to explain, so let's first describe what each line says and then we'll describe how it works. We'll skip the setTimeout line at the bottom since it is the same as in the previous example. Here are the lines under the "if !onbutton" if-statement within the cycle funtion:
{ if (frame == 5) frame = 1; else if (frame > 5) { frame--; } else frame++; } else { frame++; if (frame > 8) frame = 8; }

Let's just work through these lines one at a time:

"if (frame == 5) frame = 1;" -- This line says "if the frame variable is equal to 5 than redifine the frame variable as 1."

"else if (frame > 5)" -- This line says "if the frame variable is not equal to five than check to see if the frame variable is greater than 5."

"frame--;" -- This line says "if the frame variable is greater than 5, then decrease the frame variable by 1."

"else frame++;" -- This line says "if the frame variable is not equal to 5 and not greater than 5, then increase the frame variable by 1."

"if (frame > 8) frame = 8;" -- This line says "if the frame variable is greater than 8, then redefine the variable as 8."

So, let's run through the cycle function. When the onbutton variable is false (as it is by default) the cycle function checks to see if the frame variable is equal to 5 and if it is, it is reset to 1. Note that this is exactly like the animation loop in the first example. If the frame variable is not equal to 5 then the cycle function checks to see if the frame variable is greater than 5. If the frame is greater than 5, then the frame variable is subtracted by 1. If the frame variable is not greater than five than the frame variable is increased by 1. Going back up a few lines, if the onbutton variable is true, then the frame variable is increased by one and continues to be increased by 1 until it reaches 8 and then it stays at eight.

In real terms the cycle function works like this: initially the animation loops from the "chrome1.jpg" image through to the "chrome5.jpg" image. When the mouse rolls over the area defined by the image map, the images climb from whatever image is displayed at the time up to the "chrome8.jpg" image and then the "chrome8.jpg" image is repeatedly displayed as long as the mouse is over the area defined by the image map. So, if, for example, the cursor rolls over the animation will the "chrome3.jpg" image is being displayed, then the animation will proceed by displaying the chrome images from 4 to 8. When the cursor rolls off of the image, the image from 8 to 6 are displayed and then the animation begins to loop again.

Notice that the way this script works demonstrates another benefit of using javascript for animations rather than GIF Animations. The smooth transitions that this javascript generates would be possible using GIF animations, but it would be excessivly complex and the download requirements for the range of required GIF animations would be outrageously prohibitive.
©1998 NavWorks, All Rights Reserved.