step3

Here's how to activate the animation using javascript. To
do this you will need the file animate.js. You can download
this for free from here. animate.zip. You can put the file
animate.js anywhere but I prefer to put all javascript files
in a directory called javascript. So I have "javascript/animate.js"

To use the javascript you need to save each individual frame of
the animation as a seperate file. The name of each file is the frame index
starting from 0 (zero). Frames need to be saved in a directory that
will be the name of the animation. For this example I will call it "anitext".

Therefore each frame must be saved as...
"images/anitext/0.jpg"
"images/anitext/1.jpg"
"images/anitext/2.jpg"
etc....
(NOTE you can save as GIF but using JPEG's can save on download times)

Here's how to save each individual frame in one go.
Open the animation in Animation Shop
Click on the first frame and delete it (Ctrl X) (*Explanation below)
Click on the new first frame (to select it), scroll
to the last frame, HOLD THE SHIFT KEY and click
on the last frame. This should select all frames.

Right click on any frame and choose "Save Frame As..."

On the "Save Frames As" window, use the following settings.

Ensure the "Save in:" directory is "images/anitext/"
Ensure the filename is just ".jpg" (ie no text in front of the "." )
Ensure you have selected "DOS 8.3" (This gets rid of a leading space in the filename)

Click on the "Options..." button and use the following settings.

OK the "Save Options Window"
Click on "Save" on the "Save Frames As" window.
(You will receive a set of prompt windows for EVERY frame you
are saving. Click on OK for every prompt)

Click on the first frame of the animation and hit Ctrl-L to re-paste the frame
you deleted earlier.
Right click on this new frame and save it as
"images/anitext/0.jpg"

(* This is why we deleted frame 1 earlier. A.S.2 saves frames from frame index 1 to n
whereas the script uses frame index 0 to (n-1) where n is the number
of frames in the animation. The reason the script starts at frame 0 (zero) is
A.S.1 used to start at frame 0 (zero). Also, most programming languages
(including javascript) start arrays at index 0 (zero) ).

Once you have saved the frames you need to create the HTML to animate it.
In the HEAD section of your document you need to link to the code in animate.js.
<HEAD>
<SCRIPT LANGUAGE="javascript" SRC="javascript/animate.js" TYPE="text/javascript"></SCRIPT>
</HEAD>

Next you need to add some script to create an animation object and to preload the animation frames.
You do this by calling a function that is defined in the animate.js file as follows (This can
go in the HEAD section also)

The first parameter is the name of the animation. It must match the directory in which
you saved the animation frames and it must match the name of the image that
you will be animating. The second parameter is the number of frames in the animation.

We need to define an image in the page that will hold the animation.

Note how the NAME= matches the name of our animation.

Next we need to define a link that will activate the animation
<A HREF="Some Url"
onMouseOver="turn_on('anitext')"
onMouseOut="turn_off('anitext')">Animate Link</A>

The functions turn_on() and turn_off() are defined in animate.js.
Note the parameter we pass 'anitext' the name of our animation.

Putting it all togther you should have a html document similar to this.
<html>
<head>
<SCRIPT LANGUAGE="javascript" SRC="javascript/animate.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</head>

<body bgcolor="white" text="black">
<IMG SRC="images/anitext/0.jpg" NAME="anitext">
<a href="xxx"
onMouseOver="turn_on('anitext')"
onMouseout="turn_off('anitext')">Animate Link</A>
</body>
</html>

Which should produce the following effect.

Animate Link

Step 1 | Step 2 | Step 3
Index