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
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.
- 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.
Download the two GIF files from above onto your computer and name them:
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.
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.
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.
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.
- Firstly, you can drag the selected frame anywhere in the list of frames.
- 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.
2. Gif Builder Options
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.
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.
- 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.
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.
- 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.
You can preview your animation by choosing Start in the Animation menu.
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.
- Choose Loop in the
Options menu, and click Forever.
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.
- Stop the animation by
choosing Stop in the Animation menu.
- 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.
- 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.)
There are two ways to change the animation dimensions.
One other option is to make the animation background transparent.
- You could choose Image Size in the Options menu; but let us do it more interactively.
- 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.
Let us save the animation now. Select Save in the File menu.
- Select all the frames (Select All in the Edit menu).
- 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.
Open the GIF file in Netscape Navigator to make sure that the browser displays correctly the animation.
- 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.
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.
- 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.
Once the frames are selected, choose Peel in the Effects/Transitions
- 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.
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:
- 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.
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.
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.
Finally, save the result by choosing Save in the File menu.
- 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.
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.
- 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
Open it in your browser to check the result.
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.
Yves Piguet firstname.lastname@example.org
Av. de la Chabli╦re 35
Last revised: August 5, 1998