The Dynamic Duo - Gif Animation

Gif Animation

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.

Preloading an Image Series

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>

Initializing GifAnim Objects

To initialize a GifAnim object, you need to define 5 things:

layer - the layer the image is inside
imgName - the name of the image (in the IMG tag)
imgSeries - the name of Image Series
end - the number of the last frame in the animation
speed - the speed of repetition in milliseconds
startFrame - (optional) the number of which frame to start on (only needed if it starts on a frame other than 0)

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.

Using the GifAnim Methods

play() Method:

The play() method begins the animation. It has the following arguments (in bold is the default):

loop - true/false - whether the animation is to loop or only play once
reset - true/false - whether the animation is to reset to the first frame when complete
fn - function or statement to execute when complete

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.

Example: gifanim1.html [source] - for an example using all the methods.

Source Code

gifanim.js