Fader


Link 1	Link 2	Link 3

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 :-

<SCRIPT LANGUAGE="javascript" SRC="javascript/animate2.js" TYPE="text/javascript"></SCRIPT>

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:-

	AnimationFrames("pic1", 5, ".jpg");
	AnimationFrames("pic2", 5, ".jpg");
	AnimationFrames("pic3", 5, ".jpg");

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

"images/pic1/0.jpg"
"images/pic1/1.jpg"
"images/pic1/2.jpg"
"images/pic1/3.jpg"
"images/pic1/4.jpg"

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

<img src="images/pic1/0.jpg"  NAME="tvScreen" width="200" height="135" border="0">

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

		onMouseOver="turn_on('tvScreen','pic2')"
		onMouseOut="turn_off('tvScreen')"

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 :-

		onMouseOver="turn_on('tvScreen','pic1')"
		onMouseOut="turn_off('tvScreen')"

will
"on mouse over, animate 'tvScreen' using the 'on' animation of 'pic1'
"on mouse out, animate 'tvScreen' using the 'off' animation of 'pic1'

The second parameter can refer to any object created using the function AnimationFrames. So if you had a 10 frame animation of a frog that was a gif file you could define the animation as

	 AnimatedImage("frog", 10, ".gif");

and as long as the images were located as follows

	 "images/frog/0.gif"
	 "images/frog/1.gif"
	 "images/frog/2.gif"
	 "images/frog/3.gif"
	 "images/frog/4.gif"
	 "images/frog/5.gif"
	 "images/frog/6.gif"
	 "images/frog/7.gif"
	 "images/frog/8.gif"
	 "images/frog/9.gif"

then you could show this animation by :-

		onMouseOver="turn_on('tvScreen','frog')"
		onMouseOut="turn_off('tvScreen')"

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