GIFBuilder Tutorial

This document explains how to create a basic animation with GifBuilder.

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.
  4. Download the two GIF files from above onto your computer and name them:
  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.
  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.
  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.
  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.
  9. Open the GIF file in Netscape Navigator to make sure that the browser displays correctly the animation.

3. Adding transitions

Transitions are a convenient way to add the little touch that will draw the attention of your users. Of course, you can also draw each frame manually to have exactly the frames you want; but often, you will find the built-in transitions very useful.
  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.
  2. Once the frames are selected, choose Peel in the Effects/Transitions sub-menu.
  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.
  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

To display the animation in a Web page, you use exactly the same HTML <img> tag as for plain non-animated images. Gif Builder will automate this for you.
  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