Creating a scrolling animated GIF in classic ASP with csASPGif
In this example the csASPGif component is used to create an animation by merging a foreground and background image. The position of the foreground image is changed in each frame and when it goes out of picture to the right, this part of the foreground is drawn to the left. The end result is a scrolling image that wraps around.
The background is a red rectangle, 200 x 100 pixels.
The foreground image is a piece of text on a yellow background, 150 x 50 pixels.
Putting it all together...
The example script requires the trial version of csASPGif to run. It contains comments to explain how it works. It uses variables and takes measurements from the source images so it can easily be modified to run with different images. The variables can be modified to animate at different speeds and in different sized steps.
The script and source images can be downloaded here - animation2.zip. (2 KB)
The csASPGif component can be downloaded here - csgift.zip. (2.5 MB)
The Script Listing
Three instances of csASPGif are used, one for the foreground image, one for the background, and one for the animation that is being created. This reduces the number of times that each image is loaded to increase efficiency.
<%
Response.Expires = 0
Response.Buffer = true
Response.Clear
Set BGGif = Server.CreateObject("csASPGifTrial.GIF")
Set FGGif = Server.CreateObject("csASPGifTrial.GIF")
Set AGif = Server.CreateObject("csASPGifTrial.GIF")
BGGif.ReadFile Server.MapPath("background.gif")
FGGif.ReadFile Server.MapPath("foreground.gif")
AGif.MergePalette = 0
AGif.ColorDepth = BGGif.ColorDepth
Delay = 5
StepSize = 5
StepTotal = CInt(BGGif.FrameWidth(0) / StepSize)
X = (BGGif.FrameWidth(0) - FGGif.FrameWidth(0)) / 2
Y = (BGGif.FrameWidth(0) - FGGif.FrameWidth(0)) / 2
X1 = BGGif.FrameWidth(0) - X
For I = 0 to StepTotal - 1
AGif.AddFrame
AGif.FrameHandle(I) = BGGif.FrameHandle(0)
AGif.MergeHandle X, Y, I, FGGif.FrameHandle(0)
If X1 < FGGif.FrameWidth(0) Then
AGif.MergeHandle 0 - X1, Y, I, FGGif.FrameHandle(0)
End If
X = X + StepSize
If X > BGGif.FrameWidth(0) Then
X = X - BGGif.FrameWidth(0)
End If
X1 = BGGif.FrameWidth(0) - X
AGif.Delay(I) = Delay
Next
AGif.OptimizeFrames
Response.ContentType = "image/gif"
Response.BinaryWrite AGif.GIFData
%>
BGGif is the background, FGGif is the foreground and AGif is the resulting animation.
The first call to MergeHandle adds the foreground image, but for higher values of X part of this image may overrun past the right hand side of the background. When this happens MergeHandle is used again with the foreground positioned further to the left. This gives the wrap around effect.
When MergePalette is set to 0 the resulting image contains a colour palette that is made from both images. This gives the best result and reduces the chances of colours getting changed during the process but it causes the frame to use a local colour table. This will increase the file size of the final animation so the colour tables are optimised before exporting the image. The OptimizeColorTables command would do this, but OptimizeFrames has been used instead to further reduce the file size by cropping the frames to show only the changing part of the animation. This optimisation is not guaranteed to reduce file size but for this image it reduces it from 27 KB to 22 KB.
The downloadable script contains some additional annotation.
There are other animation examples available:
Animation 1, where an animation is created by drawing shapes.
Animation 3, where an animation is created by combining existing images.