[ Go to August 1997 Table of Contents ]|
Windows on the Web
-- by Paul Silverman
It's alive! Your Web site, that is, once you incorporate animated GIF files. You'll be amazed how easy it is to breathe life into your site's static graphics-without a drop of Java or a hint of ActiveX.
Think of an animated GIF file as a computerized cartoon flipbook. The file consists of a series of images, each varying slightly from the one before. The images are played back in sequence, to simulate motion. All your visitor needs is a standard browser.
The first step in setting up your own GIF shop is collecting the right tools. You'll need only two: an image editor and a GIF animation program. If you don't want to spring for a high-end image editor like Photoshop 4.0, the more affordable shareware classic Paint Shop Pro will do nicely (http://www.jasc.com/pspdl.html). The two top GIF animation programs are Ulead Systems' GIF Animator 1.5 and Alchemy Mindworks' GIF Construction Set 1.0P. Both offer a comfortable interface and a powerful collection of easy-to-use tools that automate the animation process. Microsoft also offers a freeware GIF animator that's not as feature-rich as other programs but will get the job done.
Before you begin the time-consuming task of creating a frame-by-frame storyboard in your image editor, check out the advanced features your animation program offers. For instance, if you're looking to create some nifty transitions between two images, you don't have to create new frames and then alter the images pixel by pixel. GIF Animator includes a number of transition options, such as Blind (think of a window blind being drawn) and Wipe (which scrolls the new image in from the left, right, top or bottom). Color Animation makes user-specified colors in an image appear to blink, and Cube Effect produces a 3D-like, revolving-cube image. You can customize such elements as timing and quality (number of frames), and GIF Animator automatically churns out the new frames and images required for the effect. Save the sequence, and your animation is done. GIF Animator also automates the process of creating scrolling text and translates the frames of AVI files into an animated GIF.
The right tool can do all the automation for you; your job is to provide a well-thought-out storyboard. The storyboard is your core set of frames, or images. Start by laying out some key images in your image editor, keeping in mind the order in which you want them to appear. You may want to start with a background or general backdrop (if needed) for your animation. Then in separate files, create the components that will make up the basis for your animation. Your animation tool will tie the pieces together. Also, try to keep the first frame of your sequence as complete an image as possible, because browsers that don't support animated GIFs will display only the first frame. (If you have the latest version of Netscape Navigator or Microsoft Internet Explorer, you shouldn't have a problem viewing the frame.)
Tips and techniques
When you're selecting your images, you may be tempted to create rich animations with lots of colors and frames. Don't do it; your visitors will hate you for it, especially the ones still using 14.4Kb-per-second modems. Keep these other points in mind while you're preparing your images:
- Try to adhere to the 216-color Web-safe palette when creating, converting and compressing images. On a 256-color monitor, the standard browsers support only 216 colors across Windows and Macintosh platforms without dithering an image. Photoshop users can download the nondithering palette for free from http://www.adobe.com/newsfeatures/palette/main.html and follow the installation instructions at the site. If you're using Paint Shop Pro or some other editor, you can create a PAL Web-safe color palette file using the Netscape Color Cube (http://www.killersites.com/1-design/index.html). Save the image to your hard drive, open it in your graphics editor and then save the color palette (in Paint Shop Pro, it's Colors/Save Palette)
- Because there's no file compression within a GIF animation, the size of all the individual frames combined determines the file size. If you create an animation using a 20KB file and a 10KB file, your animated file will be 30KB, so keep your individual images as compact and small as possible. Index your images to the smallest possible number of colors you can without sacrificing resolution.
- Decide how much quality you're willing to compromise to keep the file size reasonable. Increasing the number of frames for a particular action will result in a smoother animation, but it will also boost the file size. Decide how many frames you need to pull off an animation.
- Avoid duplicating in each frame the parts of an image that aren't animated, such as a background or a component of the sequence that doesn't change. The GIF89a animation standard lets you overlay images onto an existing frame without replacing it in the sequence. You can specify in any of the animation tools mentioned not to remove or replace a frame with subsequent frames of the animation-only to add to it. You can also place subsequent images anywhere you want relative to the existing frame. For instance, if you wanted to create an animation of a clock with moving hands, your first frame should be the full clock image with the hands at their starting times. Your subsequent frames should be cropped, transparent images containing only the hands in new positions. This will help keep the file size of each frame smaller. Because you've told your animator to retain the first image, the result will look like a clock with moving hands.
Once your storyboard is complete and you've saved all your files with the lowest possible color palette, open each file in one of the animation applications, select the order in which you want your files to appear and save the sequence; the tools will churn out a linked GIF animation suitable for browsing.
To help customize your work, the animation tools also support some more advanced techniques. You can specify the time it takes to display the next frame in a sequence by setting the delay of any frame. Because the GIF89a standard allows different delays for each frame, you can create more interesting animations by increasing or decreasing the amount of time a component is displayed.
The loop function is another handy feature. It allows you to create an animation that loops back to the beginning of the sequence once the last frame displays. You can also set the loop feature to cycle indefinitely or a specific number of times before stopping at the final frame. One caution about looping: Netscape Navigator sometimes has trouble supporting looped animated GIFs. When you're creating a looped sequence, try to make sure the last frame makes sense as a standalone image; Navigator will definitely run through the animation once, but it may leave the final frame as the permanent image.
In addition, the animation tools let you interlace graphics, add transparencies to them, and select and apply color palettes. You can also include other graphics formats, such as JPEG or TIFF, in a sequence. GIF Animator even includes Ulead's GIF Optimization tool to help crunch down file sizes in an animation.
GIF animation or just Java?
However, if you're looking for a quick and easy way to add some life, character and color to an otherwise static Web page, animated GIFs are still a safe bet. Probably the best way to start is by studying what other designers have done. Surf the Web for an animation you find interesting and save it to your system by right-clicking on it within your browser. Then open the file in one of the animation tools. You'll find all the time delays, frame sizes, placement and special options spelled out for you.
In addition, you can visit our Windows on the Web page at http://www.winmag.com/wow for an expanded version of this article-including more tips and step-by-step demonstrations of animated GIF creation. And remember-even Walt Disney had to start somewhere.
SIDEBAR: Animation in Action
Creating animated GIFs isn't nearly as difficult as it looks-as long as you start with the right tools. For this one, we used Adobe Illustrator and Photoshop to create the images and Ulead GIF Animator 1.5 to animate them. We used a Web-safe color palette (216 colors) to avoid image dithering, indexed each color down to its minimum color palette, added a transparent background, and with our animation tool, set the sequence to loop indefinitely. We also set each frame to restore to the background color so you wouldn't see the previous image in each frame. The six-frame GIF is a very reasonable 11KB file.
We started with an image that would show what we wanted the user to see by default, because browsers that don't support animated GIFs display only the first frame. We set the delay to 25 milliseconds.
-- In the second frame we show the sealed envelope. We set the delay to 15ms.
-- The envelope is starting to open to reveal its contents. We set the delay to 10ms, so that the envelope would appear to open smoothly.
-- Here the envelope is completely open. Again, we set the delay to 10ms.
-- In this frame, the letter is starting to come out of the envelope. We set the delay to 5ms.
-- We've duplicated the image in frame 1, in case a user's browser doesn't loop the animation. We set the delay to 90ms, so the animation will appear to pause before it restarts.
SIDEBAR: Tools of the Trade
Ulead GIF Animator 1.5
A bevy of automation tools, combined with a superior interface, make GIF Animator the best app around for creating instant animations.
Price: $29.95; trial version available for download
Platforms: Windows 95, NT
GIF Construction Set 1.0P
One of the most popular shareware programs on the Net, the GIF Construction Set makes adding life to your pages easy with its Animation Wizard.
Price: $20 (shareware)
Platforms: Windows 95, NT
Microsoft GIF Animator
It doesn't include all the bells and whistles of some other animators, but its price and tight integration with Microsoft Image Composer make it worth a look.
Platforms: Windows 95