<html><head><title>The Net Net</title></head>
 
<body background = "/images/back_mixed.jpg">
 

 
<table width = 100%><tr align = right>
 
<td>
 
<img alt = "webschmeb" src = "/images/webschmeb.jpg">
 
</td>
 
<td>
 
<img alt = "animation" src = "/anim/anim-sw.gif">
 
</td>
 
</tr></table>
 
<p align = right>Making gif89a animations.
 
<hr size = 5>
 

 
<table cellpadding = 20><tr><td>
 
<blockquote>
 

 
<b><i>For lots of gif89a animation examples, and some how-to tips, see the 
 
<a class="body" href="/gallery/anim/index.html">Animation Gallery</a>.</i></b> 
 

 
<dl>
 

 
<dt>
 
<h3>What the heck is a gif89a animation?</h3>
 
<dd>Gif89a is an image-file format that has been around for a while, 
 
and is used extensively on the web: whenever you see a transparent 
 
gif, you are seeing an aspect of the gif89a spec. However, there are other 
 
aspects of the gif89a format that are only now being supported, namely, 
 
the multiple-block option, which allows users to build an animation 
 
by stacking many image 'blocks' together in one image file. It LOOKS like 
 
a plain-old binary image, but when you view it with Netscape 2.0 or other 
 
compatible browser, it 'plays' as an animation. 
 
<p>
 
Gif89a animations are great for a lot of reasons: they 
 
are server-independent and portable; they do not add big burden to the server's processing 
 
power in the way that CGI does; the software to create them is cheap to free; 
 
they are easy to make; they are usually small; there are no plugins or special 
 
settings required to view them, since they will be recognized by 
 
graphical browsers as a gif, if not an animated gif.  
 

 

 
<dt>
 
<h3>But will the final product be as cool as, say, a shockwave animation? 
 
More to the point, are there <i>bugs?</i></h3>
 
<dd>Fortunately, many of the implementation issues that you might notice 
 
when you look at a gif89a animation -- that annoying 'disk whir' noise, 
 
the 'downloading image' message that Netscape 2 displays, the suspicion 
 
that Macintosh users may crash -- are browser-related and not the fault of 
 
the gif89a format. For example, that disk-whirring sound and the constant 
 
'downloading image' message are fixed in Netscape 3 beta/Atlas. 
 
Moreover, you can use currently-supported (or partly-supported) 
 
features of gif89a to 'work around' current annoyances; I add significant 
 
time lags both to insure against Macintosh 'crashes' and to minimize 
 
the 'noise'. (See <a class="body" href=../gallery/anim/index.html>some examples</a> of how 
 
to use time to improve the animation/reduce the need for high bandwidth.)
 
Browsers that recognize animated gifs may incorrectly interpret the 
 
frame-rate assigned to the frames of an animated gif, slowing it down too 
 
much; this is why you could insert a time lag of a tenth of a second per 
 
frame and the browser plays it back at a half second or so per frame. 
 
Although these drawbacks are annoying as hell to people like me, who 
 
see gif89a animations as a superb, open-platform, bandwidth-friendly 
 
way to spice up a website, most of the drawbacks are temporary.
 
<p>
 
There are other features of gif89a that will allow interactivity once 
 
the browsers work out the bugs in implementation. 
 
Many browsers recognize some but not all aspects of 
 
the gif89a spec; Netscape 
 
and Microsoft Internet Explorer recognize most of the gif89a 
 
features, including animation. Most browsers will show transparent gifs, 
 
but old browsers will not recognize the additional 'blocks' of an animated 
 
gif and will just display the first image. Similarly, other aspects of 
 
gif89a are not recognized by any but the newest browser: Netscape 3 (Atlas) 
 
beta will recognize the 'loop iteration' feature of gif89a animations, but 
 
most browsers will not. When browsers recognize the 'wait for user input' 
 
gif89a feature, then true interactivity will be accessible to 
 
non-programmers and those who can't afford expensive multimedia software.
 

 
<dt>
 
<h3>How do I make the images that will become the frames of my animation?</h3>
 
<dd>
 
Gif89a employs the use of multiple 'blocks'. 
 
A block is an individual component of the gif89a image, and may be 
 
of several types: a control block, an image block, a loop block, 
 
a comment block, and a plain text block. The part of the animation 
 
that everyone sees is the image block, and you need to use whatever 
 
graphics application you normally use to create these images.
 
Since most graphics applications do not support the 
 
'block' property of gif89a yet, you should make the 
 
'frames' of your animation as separate images
 
 and save them individually as gifs. 
 

 
<dt><h3>Now that I have these gifs sitting around, how do I put them together?</h3>
 
<dd>A growing number of 
 
utilities for both Mac and Windows
 
will do the trick in a 
 
fairly user-friendly manner. I used 
 
<a class="body" target="_blank_" href="http://www.mindworkshop.com/alchemy/gifcon.html">
 
Gif Construction Set for Windows</a> to make the above 
 
swirling swirl.
 
A list of utilities 
 
that you can download is available at 
 
<a class="body"  target="_blank_" href="http://www.reiworld.com/royalef/toolbox.htm">
 
REI world.</a> Most of the utilities for making 
 
gif89a animations allow 
 
you to place multiple gifs in the one file (using 
 
menus or drag and drop). Using the utility, you stack these blocks 
 
in 'chronological' order. Most utilities have a graphical interface which makes this fairly easy, 
 
and if you misplace a block you can also remove it. For example, if 
 
you want a looping animation of transparent gifs, you would do the following: 
 
<br><b>1)</b> Open a gif image using the animation utility. 
 
<br><b>2)</b> Insert a 'control' block before this image, and use the menu options 
 
provided by the control block to set the transparency.
 
<br><b>3)</b> Insert the second image. You will be presented with a menu option 
 
which takes you to a standard file-finding menu for selecting the image. 
 
<br><b>4)</b> Insert a control block before this image. 
 
<br><b>5)</b> Insert a 'loop' block. You can only insert one of these.
 
The 'blocks' will be displayed in the order in which you placed them. 
 

 

 
<dt><h3>Now can I save the file and impress my friends?</h3>
 
<dd>Using the utility, save the file as a new gif (in 89a format) under a new 
 
name. Voila! 
 
A portable, programming-free gif file that won't break 
 
most browsers and will actually animate on many of them. 
 
Be careful not to edit the file in your usual graphics 
 
application, which probably won't recognize the gif89a 
 
properties and will drop the extra blocks.
 
</dl>
 
</blockquote>
 
</td></tr></table>
 

 
<p><a class="body" href="index.html">
 
<img alt  = "back" hspace = 20 border = 0 align = left src = "/images/back.gif"></a>
 

 
<br><br>
 
<br clear = left><hr size = 5>
 
<p align = center>
 
<a class="body" href="/index.html">t h e &nbsp; n e t &nbsp; n e t </a>
 
&nbsp; | &nbsp; 
 
<a class="body" href="/gallery/index.html">t h e &nbsp; g a l l e r y</a>
 
&nbsp; | &nbsp; 
 
<a class="body" href="/reviews/index.html">f o o d &nbsp; & &nbsp; m u s i c </a>
 
<br>
 
<a class="body" href="/schmeb/index.html">w e b &nbsp; &nbsp; s c h m e b </a>
 
&nbsp; | &nbsp; 
 
<a class="body" href="/readme/index.html">r e a d m e </a>
 
&nbsp; | &nbsp; 
 
<a class="body" href="/feedback.html">f e e d b a c k </a>
 
&nbsp; | &nbsp; 
 
<a class="body" href="/submit.html">s u b m i t</a>
 

 
</body></html>
 

 

 
