WhyWaitForever

London England

Home 
Product 
Licence 
Download 
Purchase 
Site Map 
About Us 
Contact Us 

 

Example 8: a simple animated icon a simple animation

This page demonstrates how VisibleGif can be used to create a simple animation. An animation is a series of images each displayed for a period of time. In this example all the images use colours from a global colour table or from local colour tables.

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

  1. The first step is to decide on the image widths and heights to be used in the animation. In this case the width is 22 pixels and the height is 17 pixels for all images.

  2. The next step is to decide on shape and colours. Here each image is a simple shape on a tranparent background displayed for 2 seconds. A red image is followed by a green image followed by a blue image. The sequence of images is set to loop forever. The colour black is selected as the transparent colour. Only four colours black, red, green and blue are needed.

    3. The "<data-rows>" part of the image takes the most time to create. The character ! represents the first colour in the global colour table and in all the local colour tables. This is "transparent" black (000000). The character " represents the second character in the global colour table and in all the local colour tables. This is red (FF0000) in the first image (using the global colour table). This is green (00FF00) in the second image. This is blue (0000FF) in the third image. 17 rows of 22 characters needs to be created for each image.

  3. Finally all the other tags need to be included.

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 six tag blocks <header>, <global-color-table>, <application>, <graphic> and <image> with a <local-color-table> tag block. The <application> tag block is the tag block that controls the animation. Each image except the first requires a <graphic>, a <local-color-table> and a <image> block. 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>2</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>

  <application>
    <blocksize>11</blocksize>
    <identifier>NETSCAPE</identifier>
    <authentication-code>2.0</authentication-code>
    <data>
      <blocksize>3</blocksize>
      <bytes>010000</bytes>
      <blocksize>0</blocksize>
      <bytes></bytes>
    </data>
  </application>

  <graphic>
    <blocksize>4</blocksize>
    <disposal-method>2 Restore to background color</disposal-method>
    <user-input>false</user-input>
    <transparent-color-present>true</transparent-color-present>
    <delay-time>200</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>false</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>

  <graphic>
    <blocksize>4</blocksize>
    <disposal-method>2 Restore to background color</disposal-method>
    <user-input>false</user-input>
    <transparent-color-present>true</transparent-color-present>
    <delay-time>200</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>true</local-color-present>
    <interlaced>false</interlaced>
    <colors-sorted-by-importance>false</colors-sorted-by-importance>
    <local-color-size>2</local-color-size>

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

    <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>

  <graphic>
    <blocksize>4</blocksize>
    <disposal-method>2 Restore to background color</disposal-method>
    <user-input>false</user-input>
    <transparent-color-present>true</transparent-color-present>
    <delay-time>200</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>true</local-color-present>
    <interlaced>false</interlaced>
    <colors-sorted-by-importance>false</colors-sorted-by-importance>
    <local-color-size>2</local-color-size>

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

    <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>

</gif>

This tag file is assumed to be saved as "exam08.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 "exam08.xml" and creates the GIF file called "exam08.gif". The command file which is best run in a command window (MS DOS window) is as follows:


rem   exam08.cmd   VG - Example 08 - 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\exam08
set license=########

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

rem   Execute vg and send run report to exam08.txt
%exelib% exam08.xml  exam08.gif  %license%  >exam08.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 Sun Mar 05 09:04:26 GMT 2000

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

     I010 File exists and will be read :
          ( exam08.xml )
     I011 File exists and will be overwritten :
          ( exam08.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>
          <application>
               <blocksize>
               <identifier>
               <authentication-code>
               <data>
                    <blocksize>
                    <bytes>
                    <blocksize>
                    <bytes>
               </data>
          </application>
          <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>
          <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>
          <local-color-table>
               <red>     <green>     <blue>
               <red>     <green>     <blue>
          </local-color-table>
               <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>
          <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>
          <local-color-table>
               <red>     <green>     <blue>
               <red>     <green>     <blue>
          </local-color-table>
               <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>

     I000 Processing completed normally 

     I003 End time is Sun Mar 05 09:04:30 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. Parameters were set to suppress the production of the <data-packed> and <data-codes> tag blocks. The resultant tagged file is listed below. It contains additional information.


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

 <start-time>Sun Mar 05 09:04:34 GMT 2000</start-time>

 <file>exam08.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>2</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>

 <application>
  <blocksize>11</blocksize>
  <identifier>NETSCAPE</identifier>
  <authentication-code>2.0</authentication-code>
  <data>
   <blocksize>3</blocksize>
   <bytes>010000</bytes>
   <blocksize>0</blocksize>
   <bytes></bytes>
  </data>
 </application>

 <graphic>
  <blocksize>4</blocksize>
  <disposal-method>2 Restore to background color</disposal-method>
  <user-input>FALSE</user-input>
  <transparent-color-present>TRUE</transparent-color-present>
  <delay-time>200</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>FALSE</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="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>

 <graphic>
  <blocksize>4</blocksize>
  <disposal-method>2 Restore to background color</disposal-method>
  <user-input>FALSE</user-input>
  <transparent-color-present>TRUE</transparent-color-present>
  <delay-time>200</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>TRUE</local-color-present>
  <interlaced>FALSE</interlaced>
  <colors-sorted-by-importance>FALSE</colors-sorted-by-importance>
  <local-color-size>2</local-color-size>

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

  <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>00FF00</rgb>
  <nin>1</nin> <ned>"</ned> <count>84</count>
  </used-colors>

<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>

 <graphic>
  <blocksize>4</blocksize>
  <disposal-method>2 Restore to background color</disposal-method>
  <user-input>FALSE</user-input>
  <transparent-color-present>TRUE</transparent-color-present>
  <delay-time>200</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>TRUE</local-color-present>
  <interlaced>FALSE</interlaced>
  <colors-sorted-by-importance>FALSE</colors-sorted-by-importance>
  <local-color-size>2</local-color-size>

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

  <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>0000FF</rgb>
  <nin>1</nin> <ned>"</ned> <count>84</count>
  </used-colors>

<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>

 <end-time>Sun Mar 05 09:04:36 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.

Life's too short why wait forever
Privacy Declaration
Copyright © 2000 - 2005. WhyWaitForever. All rights reserved.
Legal Disclaimer