Some gif89a tests for ISWorld Net
from Parks

Click here to download this Cool Cougar

---

Click here to download and start a rolling window example
It is 99K
20 or so gifs with a 5 second frame separation

---

Click here to download and start the ISWorldNet Top window example
It is 820K
30 frames with 0 second interframe separation

---

See: for a nice gif89a web site
The tutorial and tool set by Royal Frazier is nice. I used their Windows GIF Construction Tools to create ISW stuff. There are Mac and Unix tools there too.

Here is the basic stuff:

1. gif89a

   This whole idea is a temporary animation technique to avoid some of the problems with cgi push (See the Animation episode of the Engine Room for a discussion of how to do it the hard way).

   The gif format was developed by Compuserve for image distribution. The format provides for compression of the 256 color image. The compression algorithm is called LZW (after inventors Lempel-Ziv-Welch). This patent is owned by Unisys and has created some licensing problems for gif formats. They (Unisys) require developers to pay a one time licensing fee for use. This has not been received well by most hacks and many graphics programs don't support gif. But since gif is the standard graphic format for the WEB things are still up in the air. (note the discussion on the GIF Construction set pages referenced above).

   The LZW compression for is used for parts of gif89a. There are other parts to the format. Most important is the multiple image structure that is allowed in gif89a. This means that more than one image may be stored in a gif file AND timing between successive images can be controlled.

   The multimage gif89a format is a single file with:

   1. A Header

      Contains GIF89a signature, screen heigth and width, pixel aspect ratio, etc. (6 bytes total)

   2. Logical Screen Descriptor

      Size of the color table (like 256 colors or 16 colors, etc.), One byte long

   3. Global Color Table

      Contains the optional global palette. This palette is the RGB values for each color. Normally this is 256 3 byte color triples. Thus, color pixel values 0 thru 255 map to a specfic three byte RGB color specification.

   4. Then for each image in the sequence:

      First, the Extension Information

      1. Comment Extension (optional comments to imbed in the file for documentation)
      2. Application Extension (optional user data to be supplied to the application which is processing the gif file). This feature allows the magic looping to occur. It is accomplished by using this block to notify Netscape 2.0 of the need to loop the animation a specified number of times.
      3. Graphic Control Extension (optional setting for delay time, transparency color, etc.)

         then the Image,

      4. A local image descriptor (height and width of the image; x and y position to place the image on the screen; and some color data)
      5. A optional local color table (palette). Note this is used only if the global palette in NOT invoked.
      6. The image data in LZW compression

         the more extensions:

      7. Another optional Comment Extension
      8. A Plain Text Extension (option to apply text on top of the graphic images. Specifies text location, character size, color and actual text data to be created)

      Actually a lot more things are involved -- but let us look only at the basics for now.

   5. The Animation Frames

      First we need frames (i.e., a buncha gif's to be shown in sequence). This is the hard part. We'll use my University of Houston Cool Cougar gifs

      1. 
         Click here to get image number 1 (coug3a.gif)

      2. 
         Click here to get image number 2 (coug3b.gif)

      3. 
         Click here to get image number 3 (coug3c.gif)

      4. 
         Click here to get image number 4 (coug3d.gif)

      5. 
         Click here to get image number 5 (coug3e.gif)

      6. 
         Click here to get image number 6 (coug3f.gif)

      7. 
         Click here to get image number 7 (coug3g.gif)

      8. 
         Click here to get image number 8 (coug3h.gif)

      9. 
         Click here to get image number 9 (coug3i.gif)

      10. 
          Click here to get image number 10 (coug3j.gif)

   6. Next

      Having obtained the GIF Construction set from the site above, now we can proceed to build the animation.

      The Windows GIF Construction Set will allow you to assemble the ten images into one gif file with a loop and timing control. The GIF Construction set looks like this:

      

      Setup a receiving file (the name of the final gif file -- must end with .gif) by:

      Clicking on FILE. Now, Click on NEW

      You now see:

      

      Now, You have a header records for the animation. Only one header exists in the construction -- at the top. Click double on the blue header line and you get:

      

      Set the horizontal and vertical pixel sizes of the image sequence. In our case it is 100 by 75. We get:

      

      Say OK. Now Click INSERT and choose LOOP. Now double-click the blue highlighted LOOP and you get this:

      

      Click OK (Note this is darn near an infinite looping choice. You could choose 2 times, three times, etc.). This is the magic Application Extension where Netscape 2.0 recognizes the loop counter

      Now click INSERT, then IMAGE. Now pick the first image (i.e., coug3a.gif -- our first image) and we get:

      

      Note, choose this image's palette apply to all images in the sequence. Then say OK.
      Looks like this now:

      

      Now repeat the image step for the next nine images
      Click INSERT, then choose the next image (coug3b.gif)
      Click INSERT, then choose the next image (coug3c.gif)
      Click INSERT, then choose the next image (coug3d.gif)
      Click INSERT, then choose the next image (coug3e.gif)
      etc.
      until we have all ten images. Like this:

      

      We are done. Click FILE, then SAVE AS...
      Pick a file name (we will use coug3,gif)
      

   7. Build an html page

      the minimum HTML page to view it with Netscape 2.0 is:

      <HTML>
      <BODY>
      <img src = "coug3.gif">
      </BODY>
      </HTML>
      

      Note this HTML has only one reference to the multiple image gif file we saved in the previous steps.

   DONE. At least a simple animation anyway.

   ---

   The interframe timimg here was assumed to be zero (i.e., show them as fast as possible). If you want delays between frames (like the ISWorld Net Window -- iswgif89.gif above), then you insert CONTROL blocks before each image (i.e., Click INSERT, then click CONTROL. The result is like this:

   

   This is the iswgif89.gif example. Note the CONTROL blocks BEFORE each image.
   Click on the CONTROL block and you get:

   

   Pick the interframe delay and click OK
   Note I chose 500 milleseconds (i.e., a 5 second hold between frames).
   This must be done before EACH frame in the LOOP.

   Save it and you are DONE.

   ---

   Try building a rolling window with a few gifs. You can make them in Photoshop etc.
   It is only a matter of constant size and interframe timing.

   The minimum construction for an animation using the Windows GIF Construction Set is:

   1. A Header (sets horizontal and vertical size)
   2. A loop (sets number of iterations
   3. A sequence of gifs

   If you wish to control the timing between frames, then insert a CONTROL block before each frame (this sets the interframe timing)

   Click HERE to Return to the Engine Room.