Want to add a little pizazz to your web page? You can create
orginal animations on your Mac with your favorite art application
and an easy to learn freeware program called GifBuilder. Save
yourself a lot of time and fuss by dividing the process into
three simple steps: planning your animation; creating the
frames; and building the animation. This simple organization
makes creating Animated GIFs an enjoyable activity.
Planning
Not everyone has a computer that can handle big, heavy graphics
while browsing the web, so file size is very important. Unless
you know that the majority of your viewing audience has fairly
new computers, keep the file size as small as you can while
maintaining the effect you want. Perhaps you want a blinking
NEW sign to point your viewers to your web pages latest additions.
This could be accomplished in as few as two frames. The frames
themselves could be as small as 10K each. Whatever you decide,
try to use no more than eight frames and keep the file size
of the animation under 100K. As an example, I've created a
six frame animation out of a Pizazz text graphic that utilizes
two of the frames twice for a total sequence of eight frames.
This animation weighs in at 63K. If you have a 14.4 modem
it will take about 11 seconds to load it into your browser.
With a 56.0 modem it will only take about 3 seconds.
Creating the Frames
You can create the frames on your favorite art program. A
frame is one small GIF file. If your art program does not
give the option of saving as GIF, GifBuilder will automatically
convert PICT, TIFF and Photoshop files. You can also use an
image conversion program like GifConverter(shareware) to change
your graphic files into GIFs.
What you should give the most consideration to in frames
creation is your color palette. I suggest you use a web safe
palette that contains the 216 colors recognized by most browsers
running on both Macintosh and Windows operating systems. If
your art program does not offer you a web safe palette, go
ahead and create your frames. Just use as few colors as possible
and then you can change to the 6X6X6 216-color palette in
GifBuilder when you build your animation.
You can create a blinking sign by simply copying your first frame, pasting
it into a new document(second frame) and changing the
colors. If your art program has special effects and/or
filters, you can apply them to the new frame. On the
Pizazz example I created a text that lights up by copying
the orginal, changing it to a bright color and then
blurring it. Next, I placed another copy of the text
on top of the blurred one. I made yet another copy and
changed the text color to something a little lighter
so that the blurred glow seems to brighten the text
in the sequence.
Unless you want your animation to jump around the page,
it's important that you use the exact same placement
in every frame. Programs that allow you to create transparent
layers, like Adobe Photoshop, are very handy for this.
You can save each layer as an individual GIF file by
deactivating the other layers when you export. When
using art programs that do not give me a layer option,
I simply use the rulers to make sure that everything
is lined up.
Sometimes you may want movement in your
animation. Making characters wave and jump is a little
advanced to start, but there are some easy things you
can do with text to create motion. I made the text appear
to lean in the pizazz example by creating a frame with
italicized text of the same size and font, placed in the
exact location of the orginal text. You can also make
your text seem to breath by changing it from plain to
bold.
After you've created your frames, save them in GIF,
PICT, TIFF or Photoshop format onto your desk top. Put
numbers in the frame names in sequence to the way you
envision your animation moving.
Building the Animation
Open
up GifBuilder. The main menu resembles most Mac programs.
The file and edit drop downs contain everything you would
expect. The edit menu permits you to choose to duplicate,
reverse or sort a selection. It also allows you to create
the animations HTML tag.
Go to the Windows menu and choose Frames Window. A window
will open up that has nothing in it at the moment. Drag your
frame files from the desk top (in numbered sequence) into
the Frames Window. Go to Options-Color and choose the 6X6X6
palette.
Now go back to the Windows menu and choose PreviewWindow.Click
on each frame in the Frames Window and watch the animation
sequence in the Preview Window. Next, go to the Animation
menu and choose Start. Watch your animation in action. Chances
are it moves from frame to frame a bit too fast. A graphic
changing colors or lighting up too quickly can be distracting
to your viewers. Maybe even give them a headache or bother
their eyes. Slow it a little by using the Default Interframe
Delay in the Options menu. You can change the speed at which
each frame is changed individually by selecting the desired
frame and choosing Default Interframe Delay, or you can use
Edit-SelectAll to change all of them at once. If you want
two or three frames to be the same speed and the rest of the
frames to be another speed select multiple frames by holding
down the Shift key. In my Pizazz example I made the first
and last frames last for 70/100 seconds and the rest of the
frames for about 40/100 seconds.
Looping determines how many times your animation will run
once it is loaded into a browser. To loop your animation choose
Option-Loop. A dialog box will pop up giving you control over
how many times the animation runs. If you only want the animation
to run once, choose the No option. To have the animation run
endlessly, choose Forever. I wanted my Pizazz animation to
run 10 times, so I typed the number 10 into the text field.
If you want to see the Pizazz animation run again, hold your
mouse button down on top of it and choose Load this Image
from the pop-up menu.
The Effects Menu has a number of filters you can experiment
with. The Dynamic and Transition filters allow you to control
the number of steps between the selected frame and the final
effect. This will put additional frames in transitory states
into your animation.
Once you've got your animation together you can use the Frame
Optimazation in the Options menu. This will give you a smaller
file by removing colors that are duplicated in subsequent
frames, which means a faster download time.
Save your animation. Now you're ready to put it on the web.
Place animations into HTML documents the same way you do any
other image - with the image source tag. Here is the tag using
my pizazz example: <IMG SRC="pizazz.gif" WIDTH=157
HEIGHT=91 ALIGN=middle>. But you don't have to write it
yourself. GifBuilder can write the HTML tag for you. Just
choose Edit-Copy HTML Image Tag and GifBuilder will copy the
tag into the Clipboard. All you have to do is paste it into
your HTML document.
Be creative. Have some fun. With GifBuilder and your favorite
Art Program, adding a little pizazz to your web page is both
easy and enjoyable.
Tracy is a web designer in the S.F.
Bay Area. She owns Webflyte,
an on-line design company specializing in web graphics and
animated GIFs.
HandHelditems.com - Personalize your iPod with us. Shop hundreds of unique iPod accessories and
save up to 80%.
Apple Store
- The size of a pack of gum, iPod shuffle weighs less than a car key. Which means there's nowhere your skip-free iPod shuffle can"t go. Click Here
Copyright 1996-2007 by Cider Press Publishing LLC all rights reserved. MacReviewZone is not authorized, sponsored, or otherwise approved by Apple Computer. Apple, the Apple logo, Macintosh, iPod, iBook, iMac, eMac, and PowerBook are registered trademarks of Apple Computer, Inc. Additional company and product names may be trademarks or registered trademarks and are hereby acknowledged.
by
Tracy Smith 
Open
up GifBuilder. The main menu resembles most Mac programs.
The file and edit drop downs contain everything you would
expect. The edit menu permits you to choose to duplicate,
reverse or sort a selection. It also allows you to create
the animations HTML tag. 
