Notes

Outline

Announcements Friday is Valentines Day

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 animate Place first still image(s) on web page Prefech the series of images and store them 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

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 the encountered on the page … so for Test Page, document.images[0]Ûnew0.gif Changing the .src property of the array changes the picture

Prefetch Images I “Prefetch” means to get the images and save them in (our own) array so they are handy to assign to doc.i 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

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 5 seconds … animate() sets timer for two different times When animating, 30 ms When waiting, 5000 Use an if-statement if (frame == 0)    setTimeout("animate()",5000); else    setTimeout("animate(),30);

Watch It Go

Chapter 21 Chapter 21 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 your creating your own animations

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