Creating an Animated GIF in ASP using csImageFile
This page explains how csImageFile can be used to produce a very simple animated GIF. The following classic ASP code shows how three frames can be created to show some text and then combined into an animation.
Set Image = Server.CreateObject("csImageFile64.Manage")
' Frame 1
Image.NewImage 150, 100, "FFFFFF"
Image.GIFDelay = 100
Image.TextColor = "FF0000"
Image.TextSize = 32
Image.Text 10, 10, "Animated"
Image.Transparent = true
Image.TransparentColor = "FFFFFF"
Image.AddToGIF(0)
' Frame 2
Image.NewImage 150, 100, "FFFFFF"
Image.GIFDelay = 100
Image.TextColor = "00FF00"
Image.Text 40, 60, "GIFs"
Image.GIFDisposeMethod = 2
Image.AddToGIF(0)
' Frame 3
Image.GIFDelay = 100
Image.AddToGIF(0)
Response.ContentType = "image/gif"
Response.BinaryWrite Image.GIFData
The first frame is 150 x 100 pixels and shows some red text on a white background. The frame delay is set to 1 second ( 100 x 1/100 of a second) and white is specified as the transparent colour. AddToGIF(0) adds the image to a multi frame GIF image in memory and it will form part of any exported GIF. Note that once AddToGIF is called, that frame can no longer be edited.
The second frame is the same size but the text is a different colour. The same delay is used, and the call to GIFDelay could have been left out because it is not reset by the call to NewImage. GIFDisposeMethod is set to 2 (Restore Background) to indicate that the following frame will be drawn onto the (empty) background.
The third frame is identical to the second and so only the call to AddToGIF is needed.
In summary, there are three frames, so AddToGIF is called three times. For each call, the current values of GIFDelay, Transparent, Transparentcolor and GIFDisposeMethod are applied to that frame and the image currently held by csImageFile is added to the GIF. The delay specifies for how long the current frame is displayed. The disposal method specifies how the current frame is disposed of before the next is displayed. The first frame is not disposed of (the default behaviour), and so it is still visible when the second frame is displayed. It is removed when the second frame is disposed of. It is the use of the disposal method that allows three frames to be produced from only two different images.
The GIFOptimize Method
When the file size must be kept as small as possible the GIFOptimize method can be called before exporting the GIF. This will attempt to crop frames to the smallest size possible, without changing the appearance of the image. Optimising will also attempt to move all the colours into a global colour table, instead of using a local colour table for each frame.
Image.GIFOptimize
The file size could be reduced further in this image by setting the ColorDepth property to 4 after each call to NewImage. New images default to 24 bit and will be converted to 8 bit when added to a multi frame GIF. As there are only 3 colours in the entire animation, a 4 bit colour depth would be sufficient.
Limitations to Multi Frame Support
The multi frame support in csImageFile is not complete. A GIF has a "logical screen" and each frame is positioned within this. csImageFile gives no control over the position of each frame and each is assumed to be at the top left of the logical screen. csImageFile only allows one image to be loaded at any time and the multi frame GIF that has been built in memory using AddToGIF cannot be edited or loaded again.
We have a more comprehensive GIF component called csASPGIF.