GIFBuilder Tutorial

In this tutorial, we will use GifBuilder to create an animation based on two GIF images. This animation may then be inserted into a Web page using the same HTML code one uses for "regular" images.

Here are two simple GIF images to work with.

1. Making the animation

1. Use a graphics program such as Photoshop to draw/create the frames. Save them as PICT (or picture), GIF, TIFF or Photoshop format. In this tutorial, we will use the two images from above.
2. Launch GifBuilder.
3. Make sure that the Frames window and the Untitled.gif (Preview window) are open. If some of them are hidden, go to the Window Menu and choose Frames Window and Preview Window. Choose New in the File menu.
• In GifBuilder, only one animation can be handled at a time. The three windows can be visible or hidden; contrary to many applications, closing a window only hides it and never discards changes or prompts you to save the animation.
4. Download the two GIF files from above onto your computer and name them:
• 1stframe.gif
• 2ndframe.gif
5. Move the GifBuilder windows so that both the Frames window and the names of the two downloaded files are visible in the Finder. Select the files "1stframe.gif" and "2ndframe.gif" in the Finder and drag them to the Frames window of GifBuilder.
   These file names will appear in the Frames window, and the first image will be displayed in the Preview window. (The names are slightly different in the illustration below.)
   
   Note: You may also copy-and-paste frames into Gif Builder from graphics programs such as Photoshop.
6. The frames may be in order or out of order, depending on the way the Finder sorts their files. You have several ways to set the order you want.
1. Firstly, you can drag the selected frame anywhere in the list of frames.
2. Secondly, you can sort the frames based on their name or reverse the selected frames, by choosing Sort Selection or Reverse Selection in the Edit menu, respectively.
7. At this stage, you could choose Save in the File menu and have a ready-to-use animated GIF. We will check some options first, however.

2. Gif Builder Options

1. In the Frames window, the first column usually indicates the name of the frames. To display each frame there, choose Show Frames in the Window menu. To make some space, only the frame number is displayed.
• The other columns of the Frames window show the settings associated to them. They correspond to the second group of entries in the Options menu.
2. To change the frame options, first select the frames you want to change the settings of, and then choose a new setting in the Options menu.
• Let us change the frame delay first. Choose Select All in the Edit menu to select both frames; then choose Interframe Delay in the Options menu. The Interframe Delay dialog box is displayed.
  
  You should usually avoid the as fast as possible option, because it can go really too fast on modern computers. For our animation, let us choose 100/100 seconds, i.e. one second.
3. When the animation will be downloaded on the Web, its speed will be limited by the network speed. Furthermore, it will begin playing before the whole page is rendered. To let the netsurfer watch the animation nicely, you will probably want to repeat the animation several times or forever. Let us select this later option.
• Choose Loop in the Options menu, and click Forever.
  
4. You can preview your animation by choosing Start in the Animation menu.
5. Depending on how you have created the frames, the images may not be correctly aligned between frames, resulting in a jerky animation. This can be corrected in Gif Builder.
   1. Stop the animation by choosing Stop in the Animation menu.
   2. To align the second frame with respect to the first one, select the second frame in the Frames window. Then in the Preview window, drag the frame around.
   3. Holding down the Option key (labeled "alt" on extended keyboards) lets you see the previous frame through the current frame. You may then drag the frame to match the images. (Jeremy's Note: I've found that this works a bit oddly.)
      
6. When you create a new animation, its dimensions (height by width) are set automatically to match the largest frame. (This automatic sizing is indicated by the brackets around the animation size in the Frames window.) This can be very wasteful, however, and lead to large files.
   There are two ways to change the animation dimensions.
   1. You could choose Image Size in the Options menu; but let us do it more interactively.
   2. Hold down the Control key (marked "ctrl") and drag over the Preview window to delimit the area you want to keep. If you are not satisfied, click anywhere outside the rectangle, and try again. You can also move the bounds of the selected area by holding down the Control key and using the arrow keys. When everything is fine, click in the rectangle.
      • Note that the size of the frames, displayed in the second column of the Frames window, has not changed; only the dimension of the animation itself and the position of each frame have been modified. The portion of frames outside the animation bounding rectangle are left out when the animation is saved.
      • As with all the commands that change the frames or their settings, you can undo animation cropping by choosing Undo in the Edit menu.
7. One other option is to make the animation background transparent.
   1. Select all the frames (Select All in the Edit menu).
   2. Choose Transparency/Based on First Pixel in the Options menu.
      • This means that the color of the pixel in the top left corner of the first frame of your animation (white in this case) will be made transparent.
8. Let us save the animation now. Select Save in the File menu.
• Since this is a new animation, you will be prompted for a new file name. Most Web servers prefer file names without spaces and other strange characters, and ending with the prefix ".gif". You can save a file by dragging the small file icon in the preview window to any location in the Finder.
  
9. Open the GIF file in Netscape Navigator to make sure that the browser displays correctly the animation.

3. Adding transitions

1. There is a set of transitions in the Transitions sub-menu of the Effects menu. We will choose Peel to give the effect of someone peeling sheets of paper to reveal progressively each frame.
• Transitions are additional frames inserted between and based on two frames--a start frame and an end frame. For our animation, we will select two frames; the first transition will occur between the last frame and the first one, and will be inserted at the beginning; the second transition will occur between the first frame and the second one, and will be inserted between them.
2. Once the frames are selected, choose Peel in the Effects/Transitions sub-menu.
   
   • The number of steps is one more than the frames inserted between the start and end frames. The more steps, the more progressive the transition. Let us choose 8.
   • You can choose the direction. Peeling from the top left corner to the bottom right corner is fine, so let us keep it this way.
   • Sheets can be translucent, so that the drawing can be seen on the back (Old Frame), or the ink can be printed on the back of the next frame (New Frame). This is really a matter of personal taste.
   • You can change the color of the back. For our animation, we will choose green. By clicking the Color button, you can change it.
   • The Alpha value specifies the amount of color with respect to the amount of drawing on the back. The maximum value is 255 for a totally saturated tint, with no drawing; with a value of 0, the back is a copy of the frame. 100 is a good value.
3. Click OK, and the new frames will be calculated and inserted. (Their interframe delay is set to the default value.) The result looks something like this:
   
4. Note that the frames created for the transition are in italics. Frames whose names are displayed in Roman (not italicized) correspond to image files, while frames whose names are in italics correspond to images temporarily stored in memory.
• This is important, because you can open image files in their own applications (e.g., Photoshop) by double-clicking their names, and you must keep them until the animated GIF is saved (you can discard them afterwards). Frames in memory can only be edited with cut & paste.
5. After the transition is calculated, the newly inserted frames are highlighted/selected. This makes changing the delay very easy--if you so desire. Select Interframe Delay in the Options menu, and set the value to 20/100 second.
6. Finally, save the result by choosing Save in the File menu.

4. Writing the HTML Code

1. Using Copy HTML Image Tag, in the Edit menu of GifBuilder, you can get the code fragment with the correct file name and image size ready to be pasted in your HTML document. Or if your editor supports Drag and Drop, you can drag the </> icon from the preview window of GifBuilder to your HTML code.
   
2. Open it in your browser to check the result.

Small Print

This document is copyright 1995-1996, Yves Piguet. All rights reserved. This HTML version was prepared by Jeremy Butler for use in TCF389 Concepts in New Media.
The author makes no warranty with respect to this document, its quality, accuracy, or fitness for a particular purpose. As a result, this document is provided "as is", and the user is assuming the entire risk as to its quality and accuracy.
Marks mentioned here are for information only; most of them are trademarks or registered trademarks.

Author
Yves Piguet piguet@ia.epfl.ch
Av. de la ChabliËre 35
1004 Lausanne
Switzerland

Last revised: August 5, 1998