Example 4: an interlaced image

This page demonstrates how VisibleGif can be used to produce a simple interlaced image of a red icon on a transparent background with a copyright notice. For more information on interlaced images click here for Design Paper 4 - GIF format.

Interlacing can change the image file size. The image without interlacing is 106 bytes with interlacing it is 108 bytes.

Interlacing should only be used on images larger than 10 KB. The only difference between this example and the previous is that interlacing is set to "true".

Step 1 - Decide on the image design, shape and characteristics

The first step is to decide on the image width and height. In this case the width is 22 pixels and the height is 17 pixels.
The next step is to decide on shape and colours. Here the image is a simple red shape on a transparent background. The colour black is selected as the transparent colour. Only two colours black and red are needed.

The "<data-rows>" part of the image takes the most time to create. The character ! represents the first colour in the table which is "transparent" black (000000). The character " represents the second character in the table which is red (FF0000). VisibleGif has defined a mapping between particular characters and the index (offset) in the colour table. 17 rows of 22 characters needs to be created.

Finally all the other tags need to be included. This includes setting the <interlaced> tag to "TRUE".

Step 2 - Create the XML tagged file

A text editor program such as MS Notepad can be used to create the XML tagged file. It is usually easier to cut, paste and modify an existing file.

The file contains four tag blocks <header>, <global-color-table>, <graphic> <image> and <comment>. The "<index>" tags are not strictly necessary within the <global-color-table> but are helpful in associating indices with colours. The XML tagged file is as follows:


<?xml version="1.0"?>
<gif>

  <header>
    <signature>GIF</signature>
    <version>89a</version>
    <screen-width>22</screen-width>
    <screen-height>17</screen-height>
    <global-color-present>true</global-color-present>
    <color-resolution>1</color-resolution>
    <colors-sorted-by-importance>false</colors-sorted-by-importance>
    <global-color-size>2</global-color-size>
    <background-color-index>0</background-color-index>
    <pixel-aspect-ratio>0</pixel-aspect-ratio>
  </header>

  <global-color-table>
    <index>0</index>  <red>00</red>  <green>00</green>  <blue>00</blue>
    <index>1</index>  <red>FF</red>  <green>00</green>  <blue>00</blue>
   </global-color-table>

  <graphic>
    <blocksize>4</blocksize>
    <disposal-method>0 No disposal specified</disposal-method>
    <user-input>false</user-input>
    <transparent-color-present>true</transparent-color-present>
    <delay-time>0</delay-time>
    <transparent-color-index>0</transparent-color-index>
  </graphic>

  <image>
    <left>0</left>
    <top>0</top>
    <width>22</width>
    <height>17</height>
    <local-color-present>false</local-color-present>
    <interlaced>true</interlaced>
    <colors-sorted-by-importance>false</colors-sorted-by-importance>
    <local-color-size>0</local-color-size>

    <lzw-minimum-code-size>2</lzw-minimum-code-size>

    <data-rows>
      <row count="0"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="1"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="2"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="3"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="4"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="5"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="6"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="7"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="8"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="9"   >!!!!!!!!""""""""""""!!</row>
      <row count="10"  >!!!!!!!""""""""""""!!!</row>
      <row count="11"  >!!!!!!""""""""""""!!!!</row>
      <row count="12"  >!!!!!""""""""""""!!!!!</row>
      <row count="13"  >!!!!""""""""""""!!!!!!</row>
      <row count="14"  >!!!""""""""""""!!!!!!!</row>
      <row count="15"  >!!""""""""""""!!!!!!!!</row>
      <row count="16"  >!!!!!!!!!!!!!!!!!!!!!!</row>
    </data-rows>

  </image>
 
 <comment>
  <blocksize>32</blocksize>
  <message>© 2000 Copyright WhyWaitForever </message>
 </comment>

</gif>

This tag file is assumed to be saved as "exam04.xml".

Step 3 - Run VisibleGif to create the GIF image file

A command file needs to be run. This command file reads the XML file called "exam04.xml" and creates the GIF file called "exam04.gif". The command file which is best run in a command window (MS DOS window) is as follows:


rem   exam04.cmd   VG - Example 04 - Create GIF from XML

rem   Set the variables for the program and the run folder
set exelib=h:\vg\bin\vg
set runlib=h:\vg\exam\exam04
set license=########

rem   Change directory to the correct disk drive and run folder
h:
cd %runlib%

rem   Execute vg and send run report to exam04.txt
%exelib% exam04.xml  exam04.gif  %license%  >exam04.txt

After the command file is run successfully the GIF image is created. It can be viewed using web browser software. This provides assurance that the image appears as expected. The run report a copy of which follows should be checked.


I001 Run report for VisibleGif 

     I002 Start time is Wed Mar 01 20:51:52 GMT 2000

     I004 Parameters
          1: exam04.xml
          2: exam04.gif
          3: license: ##################

     I010 File exists and will be read :
          ( exam04.xml )
     I012 File will be created :
          ( exam04.gif )
     I015 Report file is being used :
          ( system )

     I006 Conversion of a XML file to a GIF file 

     I007 List of processed blocks (tags) 
          <header>
               <signature>
               <version>
               <screen-width>
               <screen-height>
               <global-color-present>
               <color-resolution>
               <colors-sorted-by-importance>
               <global-color-size>
               <background-color-index>
               <pixel-aspect-ratio>
          </header>
          <global-color-table>
               <red>     <green>     <blue>
               <red>     <green>     <blue>
          </global-color-table>
          <graphic>
               <blocksize>
               <disposal-method>
               <user-input>
               <transparent-color-present>
               <delay-time>
               <transparent-color-index>
          </graphic>
          <image>
               <left>
               <top>
               <width>
               <height>
               <local-color-present>
               <interlaced>
               <colors-sorted-by-importance>
               <local-color-size>
               <lzw-minimum-code-size>
               <data-rows>
                    <row count="0"   >
                    <row count="1"   >
                    <row count="2"   >
                    <row count="3"   >
                    <row count="4"   >
                    <row count="5"   >
                    <row count="6"   >
                    <row count="7"   >
                    <row count="8"   >
                    <row count="9"   >
                    <row count="10"  >
                    <row count="11"  >
                    <row count="12"  >
                    <row count="13"  >
                    <row count="14"  >
                    <row count="15"  >
                    <row count="16"  >
               </data-rows>
          </image>
          <comment>
               <blocksize>
               <message>
          </comment>

     I000 Processing completed normally 

     I003 End time is Wed Mar 01 20:51:55 GMT 2000

I001 Run report for VisibleGif

Step 4 - Run VisibleGif to double check the created GIF image

It is always a good idea to use the created GIF image as input to VisibleGif to produce a new XML tagged file. In this run parameters were supplied " -c -p " to VisibleGif so that the <data-packed> and <data-codes> views were not produced. Notice the row counts reflect interlacing.

The resultant tagged file is listed below.


<?xml version="1.0"?>
<gif>

 <start-time>Wed Mar 01 19:51:52 GMT 2000</start-time>

 <file>exam02.gif</file>

 <header>
  <signature>GIF</signature>
  <version>89a</version>
  <screen-width>22</screen-width>
  <screen-height>17</screen-height>
   <global-color-present>TRUE</global-color-present>
   <color-resolution>1</color-resolution>
   <colors-sorted-by-importance>FALSE</colors-sorted-by-importance>
   <global-color-size>2</global-color-size>
  <background-color-index>0</background-color-index>
  <pixel-aspect-ratio>0</pixel-aspect-ratio>
 </header>

 <global-color-table>
  <index>0</index> <red>00</red> <green>00</green> <blue>00</blue>
    <edit>!</edit>
  <index>1</index> <red>FF</red> <green>00</green> <blue>00</blue>
    <edit>"</edit>
 </global-color-table>

 <graphic>
  <blocksize>4</blocksize>
  <disposal-method>0 No disposal specified</disposal-method>
  <user-input>FALSE</user-input>
  <transparent-color-present>TRUE</transparent-color-present>
  <delay-time>0</delay-time>
  <transparent-color-index>0</transparent-color-index>
 </graphic>

 <image>
  <left>0</left>
  <top>0</top>
  <width>22</width>
  <height>17</height>
  <local-color-present>FALSE</local-color-present>
  <interlaced>TRUE</interlaced>
  <colors-sorted-by-importance>FALSE</colors-sorted-by-importance>
  <local-color-size>0</local-color-size>

  <lzw-minimum-code-size>2</lzw-minimum-code-size>

<used-colors>
<cin>0</cin> <ced>!</ced> <rgb>000000</rgb> <nin>0</nin> <ned>!</ned>
  <count>290</count>
<cin>1</cin> <ced>"</ced> <rgb>FF0000</rgb> <nin>1</nin> <ned>"</ned>
  <count>84</count>
</used-colors>


<data-rows>
<row count="0"   >!!!!!!!!!!!!!!!!!!!!!!</row>
<row count="9"   >!!!!!!!!!!!!!!!!!!!!!!</row>
<row count="5"   >!!!!!!!!!!!!!!!!!!!!!!</row>
<row count="10"  >!!!!!!!!!!!!!!!!!!!!!!</row>
<row count="3"   >!!!!!!!!!!!!!!!!!!!!!!</row>
<row count="11"  >!!!!!!!!!!!!!!!!!!!!!!</row>
<row count="6"   >!!!!!!!!!!!!!!!!!!!!!!</row>
<row count="12"  >!!!!!!!!!!!!!!!!!!!!!!</row>
<row count="1"   >!!!!!!!!!!!!!!!!!!!!!!</row>
<row count="13"  >!!!!!!!!""""""""""""!!</row>
<row count="7"   >!!!!!!!""""""""""""!!!</row>
<row count="14"  >!!!!!!""""""""""""!!!!</row>
<row count="4"   >!!!!!""""""""""""!!!!!</row>
<row count="15"  >!!!!""""""""""""!!!!!!</row>
<row count="8"   >!!!""""""""""""!!!!!!!</row>
<row count="16"  >!!""""""""""""!!!!!!!!</row>
<row count="2"   >!!!!!!!!!!!!!!!!!!!!!!</row>

</data-rows>

 </image>

 <comment>
  <blocksize>32</blocksize>
  <message>© 2000 Copyright WhyWaitForever </message>
 </comment>


 <end-time>Wed Mar 01 19:51:55 GMT 2000</end-time>

</gif>

The new XML file can be used to produce a new GIF image. This is left as an exercise to the reader.