Creating an animated GIF by combining existing images

In this example the csASPGif component is used to create an animation by combining existing single frame GIFs. The images are the digits from 0 to 9 and end result is an animation that cycles through these digits. It is a simple example because the component images have names which are numbers so they can be read from inside a loop, but it demonstrates how to add frames to the GIF and how to specify the delay between frames.

Animation made using ASP and the csASPGif component

This is the final animation.

The script and source images can be downloaded here - animation3.zip. (13 KB)

The csASPGif component can be downloaded here - csgift.zip. (2.5 MB)

The example script requires the trial version of csASPGif to run. It contains comments to explain how it works and there is a ReadMe.txt file.

The Script Listing

The script listing is shown below.

<%
Response.Expires = 0
Response.Buffer = true
Response.Clear

Set Gif = Server.CreateObject("csASPGif.GIF")

For I = 0 to 9
  Index = Gif.AddFrame
  Gif.ReadFrameFromFile Server.MapPath(I & ".gif"), Index
  Gif.Delay(Index) = 100
Next

Gif.OptimizeColorTables

Response.ContentType = "image/gif"
Response.BinaryWrite Gif.GIFData
%>

On each pass through the loop a new frame is added to the GIF using the AddFrame command, then the next image is read into that frame using ReadFrameFromFile. Finally the delay time is set to 1 second (100 x 1/100ths of a second).

When frames are added individually in this way the GIF will use local colour tables. These can be reduced to a single global colour table by calling the OptimizeColorTables method. In this example the colours are the same in each image so there is no reduction in the colours used by each frame. If the frames contained a large number of colours between them some colours could be lost by optimising.

There are other animation examples available:

Animation 1, where an animation is created by drawing shapes.

Animation 2, where images are merged to produce a scrolling animation.