This script is nothing more than an animated onMouseOver. When you move
the mouse over a link the image is animated. The animation could be
anything from an explosion to a picture sliding in (see the animated
menus link on my homepage) to an animation of a picture fading in
(which is what we are seeing here). The image fade was done
in this way so it would work in both Netscape and Explorer.

OK so how does this script work.

First you need to link in the file animate2.js. This is a file
that is all javascript and does the animating of the frames.
Normally it is in its own directory that I call "javascript" (funnily enough).
The first thing you see is where we link in the animation code :-

The next set of lines call functions that are defined in the ".js" file.
The functions AnimationFrames and AnimatedImage are explained in the
online manual on my homepage. Ok so what do these lines do:-

What they do is create 3 "Animation Objects". The objects are named
"pic1", "pic2" ,"pic3". They each have 5 frames of animation and
the ".jpg" says they are jpegs. The function AnimationFrames("pic1", 5, ".jpg")
will create an object called "pic1" and will look for the following files

Ok. So how do these images get created? I use Animation Shop 2.0 which is
included with PaintShop Pro 6.02 from Jasc Software.
With this I take my original image
and then use the animation program to create the fade animation. I then
save each frame of the animation so I get.
"images/pic1/0.jpg"
"images/pic1/1.jpg"
"images/pic1/2.jpg"
"images/pic1/3.jpg"
"images/pic1/4.jpg"
So now we have our images in an object. We now have to create another object
that will display the animation. Imagine the "AnimationFrames" object
to be the video. We now need a screen on which to display the video. This
is the "AnimatedImage". The following line

AnimatedImage("tvScreen","pic1");

Defines such a screen. What it does is create an animation object called
"tvScreen" that will display the images in an image defined in the document
named "tvScreen". In other words the screen is

The second parameter is "pic1". If you read the manual
you will see that this is the default "turn_on" and "turn_off" animations.
In other words. If all you wanted to display on the "tvScreen" was pic1 then
all you need to use would be the functions "turn_on('tvScreen')" and "turn_off('tvScreen')". However
we are going to display different animations on the same screen. For this
we use "turn_on('tvScreen','pic')". The functions are called as follows

What this is doing is
"on mouse over, animate 'tvScreen' using the 'on' animation of 'pic2'
"on mouse out, animate 'tvScreen' using the 'off' animation of 'pic2'
By changing the second parameter we can change the animation that
is run in the image 'tvScreen'. so that :-

Well, this is the best I can explain how this image fader
works. Try reading the online manual and tutorial on my
homepage and try looking at the source code of the various
example pages.www.Roy.Whittle.com