GIF (Graphic Interchange Format) was the first graphic file type to be displayed by early web browsers and remains the most popular and versatile format for distributing images on the Web. GIF89a, the newer type of GIF image format, supports indexed color images, LZW [lossless] compression, interlacing AND includes transparency and animation capabilities. With the advent of GIF89a format, it has become just about impossible to surf the Web without seeing the flashing, bouncing, rolling, disolving and wiggling of GIF animations [as you no doubt noticed above!]. The animated GIF has become a popular [dare we say, "ubiquitous"?] tool for attracting attention and adding a little "pazzaz" to one's website. In this exercise students will build an animated GIF using GIFBuilder and optionally upload the animated GIF file to their respective websites. Specifically, this week students will: Log-on to the Social Science Mac Lab Computers Learn a little about animated GIFs Use GIFBuilder to make an animated image Optionally, add an animated GIF to an existing Webpage Finally, don't forget to Log-out! About GIF Animation Animated GIFs work a lot like traditional cell animation. The file contains a number of frames layered on top of each other -- each frame being a complete scene. The animated GIF consists of a number of frames [each with a complete image] and a set of instructions that specify the length of delay between frames, as well as other attributes like transparency and color palettes. The great thing about animated GIFs is that; GIF is the standard file format for the Web so they require no special software or browser plug-ins to view; animated GIFS are easy to create; they require no server configurations and they use streaming technology [each frame displays as soon as it downloads]. Their only drawbacks are that they lack audio, are not interactive [can't make different parts respond to mouse activity] and they may cause some user's hard disks to work a bit harder to keep refreshing the images. But hey, nothing's perfect! As "cool" as animated GIFs are, there are some very compeling reasons to carefully consider whether or not their use is appropriate. Therefore, use animated GIFs wisely. Here are a few recommendations: Avoid using more than two or three animations on a page Use the animation to communicate something in a clever way -- not just as gratuitous "eye candy" Avoid animated graphics on text-intensive pages where concentration on the written text might be required Consider whether the extra bandwidth to make a graphic animated is actually adding value to your website Experiment with timing -- sometimes long pauses between loops can make an animated graphic less distracting GIF Animation Tools, Utilities, Tutorials & FAQs There is little need to look far to find a GIF animation tool. Although the tools tend to differ somewhat depending on operating system and often vary in the degree to which they are able to optimize the resulting graphic, their respective interfaces are basically the same. A few useful tools dedicated to the creation of animated GIF files are: GIFBuilder 0.5 [Mac only] Developed by Yves Piguet, GIFBuilder is the old standby for creating animated GIFs on the Macintosh. It's freeware that's easy and intuitive to use. GIF Construction Set 2.0a [Windows & Win NT only] A commercial, "state of the art" GIF animation software, GIF Construction Set Professional [also comes in a less feature rich "Classic" version] features Animation Wizard to create sophisticated animations; Supercompressor to squeeze your GIF files down to size; extensive documentation and tutorials. GIFmation 2.1 [Mac & Windows] This is commercial software from BoxTop Software that comes highly recommended by web developers. It features a more visual interface than GIFBuilder and costs about US$49.00. Gif-gIf-giF [Mac & Windows] This program is from Pedagoguery Software, and although not full-featured like other GIF animation utilities, this tool offers the unique ability to automatically capture screen activity for use as an animated GIF. Other useful resources for learning how to optimize animated GIFs or how to use different graphics packages to create images that can be easily animated are: Andrew Leonard (1998). Anatomy of an Animation Explosion from, Web Review. King, Andrew (1997). Optimizing Animated GIFs from, WebReference.com. Royal Frazier (1995, December). GIF-89a Animation on the Web. Kevin J. Edwards (1995). Choosy Developers Choose GIF89a! from, c|net. John Warnock Gets Animated with GIF! A great tutorial using Adobe Illustrator, PhotoShop and GIFBuilder. Developer's Corner How to make an animated GIF, (1996) by Athenia Associates. Using GIFBuilder 0.5 Regardless of the tool you choose, the process of creating an animated GIF is about the same; first you build the component images, then you use a GIF animation utility to generate your animated GIF files, then you put it on your Website for the world to see and admire! In this lab session, we will skip the part where you create several graphic images to compose the "base frames" of a GIF animation -- however, feel free to do so once you have completed this exercise! Normally, one would first use a program like PhotoShop to build the "base" graphic images, saving them as PICT, GIF, TIFF or PhotoShop format files in one folder. It is a good idea to number your images in the order of their placement in the animated sequence for easy identification when you begin building your animated GIF. To begin our GIF Animation lesson, first download the "gif-anim.sit.hqx" compressed file from the "lab_10" sub-directory in the "summer_2000" directory on the "www.soc.hawaii.edu" server. If Stuffit Expander does not automatically uncompress the downloaded file, you will need to launch in manually. Once you have uncompressed the file, you should see a folder named "GIF Animation" containing three files [face-1.gif, face-2.gif, & final-anim.gif] -- you may need to check through the "Guest" disk to find the folder. Now, you are ready to begin: Launch GIFBuilder. The program should be in the "COM 337" folder accessable from the "Apple" menu under "Programs." Once GIFBuilder is open, restore the default settings by choosing "Reset to Factory Settings" in the "Options" menu. If you do not see two frames open [Frames & Preview], they may be hidden. Choose "Frames Window" &/or "Preview Window" in the "Window" menu to "unhide" these two windows. Arange the windows so that both are visible and the folder containing your image files is also visible. Select the files "face-1.gif" and "face-2.gif" and drag them into the "Frames" window of GIFBuilder. These files will appear in the "Frames" window, and the first frame will be displayed in the "Preview" window. At this stage, you could choose "Save" in the "File" menu and have a "quick-&-dirty" animated GIF. But we will check some options first and make a few adjustments before we save the file. In the "Frames" window, the first column usually indicates the name of the frames. the other columns show the settings associated with each frame. These columns correspond to entries in the "Options" menu. Select the frame(s) you want to change the default setting for and then choose a new setting in the "Options" menu. First, lets change the frame delay. Choose the first frame and then select "Interframe Delay" in the "Options" menu. The "Interframe Delay" dialog box will then be shown. Change the delay for the first frame to 200/100ths of a second [2 seconds] and click "OK." Select the second frame [face-2.gif] in the "Frames" window and set the interframe delay to 50/100ths of a second [half a second]. CAUTION! You should usually avoid the option "as fast as possible," because it can make the speed of transitions too fast on today's more "speedy" computers. As your animated GIF is downloaded, its speed will be limited by the speed of the network. However, it will begin to play before the whole image is rendered. To allow the user to watch the animation as you intended it to be displayed, you will probably want to repeat the animation several times or even forever. You set this option by choosing "Loop" in the "Options" menu and clicking "Forever" as your selection. Click "OK" when you are finished. If you wish to preview your animation, you can do so by choosing "Start" in the "Animation" menu -- the image in the "Preview" window will begin to animate based upon your settings. If you like what you see, you can save the animation by choosing the "Save" option in the "File" menu. Since this is a new animation, you will be prompted to provide your file with a name; type "first initial_lastname.gif" and save the file. At this point you could quit and be satisfied with a simple animated GIF that works just fine -- thank you very much! However, if you wish, you could add a few transitions. Whereas our two-frame animation is fine "as is," we could jazz it up a bit. Transitions are a convenient way to add that "little touch" that will draw your user's attention. In the "Transitions" option of the "Effects" menu we can find a nice selection of different transition devices any one of which could suit our need. Select both frames in the "Frames" window then open the "Transitions" option in the "Effects" menu, choose the transition that "catches your fancy." Transitions are additional frames inserted into your animation based upon the two selected frames. the number of steps is one more than the frames inserted between each couple of frames, the more steps, the more progressive the transition but also the larger your final file size. Some transition options also allow you to chose the direction the action will follow. Choose one by clicking on the button corresponding to the direction you want the transition to follow and click "OK" when all the settings are to your satisfaction. The new frames will be calculated and inserted into the "Frames" window between our two previous images. After the transitions are calculated, the new frames are off-set in italics and selected. This makes it easy to identify transitions from original image files; also, this makes it very easy to change the delay settings. Select "Interframe Delay" in the "Options" menu and set the value to 20/100 seconds. Preview your new animated GIF. If you like what you see, save the results. Now that you have created your animated GIF, you should upload the file to the "all_pau" sub-directory in the "summer_2000" directory on the "www.soc.hawaii.edu" server as a RAW DATA file. Adding GIF Animations to a Website To display the animated GIF, you use the exact same HTML <IMG> tag as for a static image. If the image is not in the same sub-directory as the HTML document, you must adjust the URL to reflect its correct location. As we discussed earlier, you should also add an "ALT" description so that web-surfers who choose not to download inline images know what they're missing! Example of HTML code: <IMG SRC="final-anim.gif" ALT="[Eye Popping Face]"> Insert the appropriate tag into your webpage, save the changes, and then view the document in your web browser to see the results... enjoy!   [ Syllabus ][ Lab Assignments ][ Downloadable Resources ][ Back to Home ]   Copyright © 1999-2000   By: M. R. Ogden -- ogden@hawaii.edu   (Rev. 20 June 2000)