Creating an animated GIF in classic ASP with csASPGif
The csASPGif component can be used to create an animated GIF by drawing simple shapes onto empty frames. This example shows some of the important concepts used by the component such as defining a colour table, adding frames, specifying delay times and disposal methods and how to make use of different sized frames to reduce the amount of drawing.
The first frame is just a red square. This has the DisposeMethod property set to 1, indicating that it is to remain on the display when the next frame is loaded.
The other frames are smaller and are all identical. The animation is produced by moving these frames across the logical screen. A simple shape is drawn onto this frame to make the image. csASPGif could be also used for drawing text onto a frame, or it could load GIFs into the frames from another source.
Putting it all together...
The script can be downloaded here - animation1.zip. (1 KB)
The csASPGif component can be downloaded here - csgift.zip. (2.5 MB)
Setting the Colour Depth
When a new GIF is created the colour depth must be specified. This is an image with few colours so we will set the colour depth to 4 bits per pixel.
Gif.ColorDepth = 4
** There is a brief (1 page) introduction to the GIF format in the component instructions which contains important information about colour tables and frame properties. **
Using a Global Colour Table
If all the frames are going to use the same colours the GIF can use a Global Colour Table. The HasGCT property is set to true before any frames are created.
Gif.HasGCT = true
It would be possible to optimise the image later using the OptimizeColorTables method. This will merge all the colour tables to a single Global Colour Table.
Drawing the First Frame
The following code creates the first frame and sets its properties:
Gif.AddFrame
Gif.DisposeMethod(0) = 1
Gif.Delay(0) = 50
Gif.BrushColor = "FF0000"
Gif.ClearImage 240, 240, 0
AddFrame must be called to increase the number of frames in the GIF. The DisposeMethod property has been described earlier and Delay is the time this frame remains displayed in 1/100ths of a second.
ClearImage is used to specify the dimensions of the frame and it is always filled in using the colour defined by BrushColor.
Drawing the Remaining Frames
The last 4 frames are all the same size and they all contain a yellow filled circle so they are drawn using a For..Next loop. Before the loop the BrushStyle property is set to 0 to give a solid fill when the shape is drawn.
For I = 1 to 4
Gif.AddFrame
Gif.Delay(I) = 50
Gif.DisposeMethod(I) = 3
Gif.BrushColor = "FF0000"
Gif.ClearImage 60, 60, I
Gif.PenColor = "FFFF00"
Gif.BrushColor = "FFFF00"
Gif.DrawEllipse 0, 0, 60, 60, I
Gif.ImageLeft(I) = 60 * (I - 1)
Gif.ImageTop(I) = 60 * (I - 1)
Next
Setting DisposeMethod to 3 causes the previous background to be restored when each frame is replaced. This previous background is frame 0.
Creating a red background and drawing a yellow filled circle on it should be easy to follow. The last two lines set the ImageLeft and ImageTop properties, which position each frame on the logical screen. This technique of using smaller frames on a large background can be a useful way of saving on filesize. A plain background, as in this example, will compress efficiently but a more complex pattern would take up extra space if it appeared on every frame.
There are other animation examples available:
Animation 2, where images are merged to produce a scrolling animation.
Animation 3, where an animation is created by combining existing images.