Animation

	JavaScript can be used for animating images on a web page

The Plan

	An animation is the rapid display of a series of still images … like cartoons
	There are three steps to animation
			1) Place first still image(s) on web page
			2) Prefech the series of images and store them
			3) Setup a timer to cycle through the images
			new0.gif, new1.gif, new2.gif, new3.gif

Creating GIFs

	GIF files for animation are progressively different … make them w/Photoshop
			The series should all have the same size
			Begin with an initial GIF and build all others from it
			Getting the motion to be smooth may take a bit of fiddling

1. Place Still Image(s)

	Placing the image uses a standard <img src=…> tag

The document.images

	When HTML draws a page, the images go in an array: document.images
			Recall, arrays are names w/ indexes, like A[1]
			Each element of document.images array holds one image
			Pictures are put into document.images in the order encountered on page build … so for Test Page, document.images[0]Ûnew0.gif
			Changing the .src property of the array changes the picture

2. Prefetch Images I

	“Prefetch” means to get the images and save them in (our own) array so they are handy to assign to doc.im
			We must declare an array (and probably an index variable, too):
			var i, pref = new Array(4);
			Then we set it up to hold images:
			for (i=0; i<4; i++) {
			pref[i] = new Image;
			}

Prefetch Images II

	Once the array is declared and setup, get the images and assign them to the .src field of the array:
			for (i=0; i<4; i++) {
			pref[i].src = "new" + i + ".gif";
			}
			Notice that the names of the images, new0.gif, new1.gif, new2.gif, new3.gif are constructed using the index variable

Test It

3. Change Image

	Once Web page is drawn, nothing happens unless you cause an event
			To animate a series of stills you must cause the computer to “wake-up” and change to the next image 30 times a second
			Set a timer to cause the wake-up
			timerID=setTimeout("animate()",30);

Animate Function

	animate() must advance the frame counter, update the image and schedule the next timer …
			var frame=0, timeID;
			function animate(){
			frame=(frame+1)%4; //advance
			document.images[0].src
			= prefetch[frame].src; //update
			timerID=setTimeout("animate()",30);
			}

Watch It Go

Changes …

	Suppose we want “new” to revolve once ever 2 seconds …
			animate() sets timer for two different times
			When animating, 30 ms
			When waiting, 2000ms
			Use an if-statement
			if (frame == 0)
			setTimeout("animate()",2000);
			else
			setTimeout("animate()",30);

Watch It Go

Another Example

	Ten “confetti” images

Chapter 22

	Chapter 22 illustrates solving a large problem -- an animated page
			The main topic is how to decompose a large problem into pieces and reassemble
			Project 2 is a large project (that was divided for you to be an assignment)
			When you have time -- end of term? -- try creating your own animations

Summary

	Animation requires a 3 step process
			1) Place the initial image(s)
			2) Prefetch the series of images that will be the animation
			3) Setup the animation function to draw the next item in the series