num0.gif
num1.gif
num2.gif
num3.gif
num4.gif
num5.gif
When it comes to making dynamic web pages and animations, using animated GIF's would seem to help things. Unfortunately, animated GIF's have no built in controls - you can't start, stop, or pause the animation on command. Although it is possible to mix animated GIF's and non-animated GIF's to mimic the effect, it really doesn't work that well. This makes them unsuitable when trying to do anything complex with them. That is why I made my own Gif Animation Object (GifAnim). It is a piece of code which gives you the kind of control that is necessary for any type of gif animation sequence you can think of.
Although the Gif Animation object is structured similarly to the Dynamic Layer Object, it is an independent object with it's own set of methods. Most likely however, you'll want to mix the 2 objects when creating an animation sequence. The 2 are totally compatible so don't worry about that.
The GifAnim Object requires that you have a series of preloaded image objects already created that are named something like image0, image1, image2 etc. where 0 is the first frame of the animation, 1 is the second and so on.
I'm going to use the following images for my example:
|
num0.gif |
num1.gif |
num2.gif |
num3.gif |
num4.gif |
num5.gif |
To preload this Image Series I can use the preload function from the previous lesson.
function preload(imgObj,imgSrc) {
eval(imgObj+' = new Image()')
eval(imgObj+'.src = "'+imgSrc+'"')
}
preload('num0','num0.gif')
preload('num1','num1.gif')
preload('num2','num2.gif')
preload('num3','num3.gif')
preload('num4','num4.gif')
preload('num5','num5.gif')
But notice my preload() call is repetitive - I can do the same thing a loop:
for (var i=0;i<=5;i++) preload('num'+i,'num'+i+'.gif')
That way it can be used for any number of images by changing the for loop arguments.
Whatever is the consistant name in the series is the Image Series name - in my case it would be "num" because each image object name starts with num.
Remember you initially have to show one of the images and define the image name, this is what I'll be using:
<DIV ID="numDiv"> <IMG NAME="numImg" SRC="num0.gif" WIDTH=50 HEIGHT=50 BORDER=0> </DIV>
To initialize a GifAnim object, you need to define 5 things:
The general format for initialization is:
objectName = new GifAnim(layer,imgName,imgSeries,end,speed,startFrame)
To define my GifAnim object I'll using the object name numImgAnim, so to initialize that animation I'd use:
numImgAnim = new GifAnim('numDiv','numImg','num',5,200)
If for some reason I wanted the animation to begin on the 3rd frame (image num2.gif) I'd instead use:
numImgAnim = new GifAnim('numDiv','numImg','num',5,2)
And remember the first image displayed would have to be num2.gif.
play() Method:
The play() method begins the animation. It has the following arguments (in bold is the default):
These arguments are optional, if you don't specify any of them:
objectName.play()
it doesn't loop, doesn't reset, and does nothing when complete. But you can assign the ones you want:
objectName.play(true) objectName.play(true,false) objectName.play(false,true,'alert(\'done\')') // alert(\'done\') can be replaced with anything
stop() Method:
The stop() method simply stops, or more accurately pauses, the animation:
objectName.stop()
Depending on the arguments in the play() method it will do different things when it is stopped. Like if the reset argument in the play() method is true, it will return to the first frame. If reset was false, the next time you start the animation it will continue where it left off. And if fn was defined it'll evaluate it. If it was a looping animation, the fn will only evaluate after it is stopped.
goToFrame() Method:
The goToFrame() method brings the animation to whichever frame you want.
objectName.goToFrame(index)
Where index is the index number of the image Series - 0 is the first image in the series, 1 is the second and so on.
There is another method, run(), which is the logic behind the GifAnim object, but you should never have to call that method because it doesn't do any error checking to make sure that multiple instances of an animation get executed.
The GifAnim Object requires the changeImage() function, so be sure to include it.
// GifAnim Object
// Copyright 1998 Dan Steinman
// Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/)
// April 9, 1998.
// In order to use this code you must keep this disclaimer
function GifAnim(layer,imgName,imgSeries,end,speed,startFrame) {
this.layer = layer
this.imgName = imgName
this.frame = new Array()
for (var i=0; i<=end; i++) this.frame[i] = imgSeries+i
this.end = end
this.speed = speed
this.active = false
this.count = (startFrame)? startFrame : 0
this.obj = imgName + "GifAnim"
eval(this.obj + "=this")
this.play = GifAnimPlay
this.run = GifAnimRun
this.stop = GifAnimStop
this.goToFrame = GifAnimGoToFrame
}
function GifAnimPlay(loop,reset,fn) {
if (!this.active) {
this.active = true
if (!loop) loop = false
if (!reset) reset = false
if (!fn) fn = null
this.run(loop,reset,fn)
}
}
function GifAnimRun(loop,reset,fn) {
if (this.active && this.count <= this.end) {
changeImage(this.layer,this.imgName,this.frame[this.count])
this.count += 1
setTimeout(this.obj+".run("+loop+","+reset+",\""+fn+"\")",this.speed)
}
else {
if (loop && this.active) {
this.count = 0
this.run(loop,reset,fn)
}
else {
this.active = false
if (reset) this.goToFrame(0)
eval(fn)
}
}
}
function GifAnimStop() {
this.active = false
}
function GifAnimGoToFrame(index) {
this.count = index
changeImage(this.layer,this.imgName,this.frame[this.count])
}
// changeImage() function is required
function changeImage(layer,imgName,imgObj) {
if (ns4 && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
else document.images[imgName].src = eval(imgObj+".src");
}
View gifanim1.html for an example using all the methods.
| Home | Next Lesson: Audio Controls |