Web Design: The flip-side of the Web

REMEMBER WHEN you got your first paperback dictionary as a kid? The first thing that I did with mine was to create "flip" movies of X- wing and Tie fighters battling each other in the margins. I would draw one picture in the right margin of the first page, then draw another picture just like it but moved up or down slightly on the next, and so on.

Now it's 1999. There is a new Star Wars movie and a new way of creating simple animations. The Graphic Interchange Format or Gif (http://www.independent.co.uk/net/980629ne/story4.html) allows you to set up your own flip book animation. They can be used to make Web pages more informative, attractive and energetic.

There are several different programs that can help you put together Gif animations, some more sophisticated than others. Fireworks from Macromedia (www.macromedia.com) has some excellent Gif animation-building capabilities, highly recommended if you are doing a lot of animation. However, if you already have Adobe's PhotoShop (www.dobe.com), there are several Freeware or Shareware alternatives that you can use to get the job done. My personal favourite is GIFBuilder (iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.html) for the Mac or Gif Construction Set (www.mindworkshop.com/alchemy/gifconcl.html) on the PC. With GIFBuilder you can create your animation frames on different Photoshop layers, and then drag and drop the PhotoShop file to GIFBuilder and convert the layers into an animation.

I have placed examples of these different uses on line for you to check out (www.webbedenvironments.com/examples/70.html). I used Photoshop and GIFBuilder to create them.

JavaScript Rollovers: Most Web sites use JavaScripted rollovers to change a button's graphic when the visitor places their mouse over it (www.independent.co.uk/net/981116ne/story5.html). Since these graphics are Gifs, you can use an animated Gif for the rollover. I created two graphics, one for the "off" state of the button and one for the "ready" state (when the mouse rolls over it). The off state is just a static arrow. The ready state flashes the arrow on and off. I created the animated arrow by placing the arrow and background on one layer and then placed just the background on another layer. I then animated this making the arrow flash on and off. I recommend just using one rollover graphic (such as the arrow) and then reusing that graphic around the page.

Backgrounds: I created a background Gif that looks like television static by setting up 10 different layers in Photoshop, applying noise to each layer, and then animating this in GIFBuilder. Of course, animation in a background can be highly distracting, so use this one with caution.

Illustrations: One of the most obvious uses for animated Gifs is to improve illustrations. Important data on how to guide your new Ram into its slot has to be shown with something like arrows. Using Gif animation the movement required to insert your Ram module and then snap it into place can be shown far more clearly.

Slide Shows: If you have several images that you want to show but a limited amount of space, you can use Gif to set up a slide show. Rather than trying to show fluid motion you simply place each image into its own frame, and then set how much time you want to pause before showing next image. By looping this, the slide show will continue infinitely.

Visit Jason Cranford Teague's website, Webbed Environments (www.webbedenvironments.com) or email him at jason@webbedenvironments.com