Animating Gifs on the Macintosh.
This little handout will overview two different software titles widely used in animating gifs on the Macintosh. We will be looking at the free GifBuilder 1.0 and Adobe Image Ready 2.0 which is included in Photoshop 5.5 and higher.
What I am going to assume aka, the prerequisite stuff.
I am going to assume you already know how to make a gif in Photoshop, Appleworks, etc. For Adobe Image Ready, I am going to assume you know how Photoshop layers work. You can refresh your Photoshop knowledge by visiting my handouts section (http://www.lesliefisher.com/go/handouts/conferenceresc.html) and download my Photoshop handout.
GifBuilder
GifBuilder is a free application. At the time this handout was created, the newest version of GifBuilder is 1.0. You can find GifBuilder at http://homepage.mac.com/piguet/gif.html. The software includes a manual and tutorial. Because it is free, there is no technical support. The website above does have a link to an online support newsgroup.
How GifBuilder works:
GifBuilder works on the concept of frames. Remember flip books where you flipped from one page to the next and the motion of the changing pages created animation? Well, that is the same process to make an animated gif in GifBuilder. You make the graphics, place them in GifBuilder and GifBuilder animates them.
What we will do in GifBuilder:
I am going to show you how to animate text and graphics in GifBuilder. I will then discuss additional features that you can use to enhance your animation's.
The GifBuilder desktop:
Probably the most confusing thing in GifBuilder is the way it opens. You might not see any windows open. If this is the case, go to your window menu and select the Frames Window and the Preview Window.
Animating Text with GifBuilder:
Lets animate text. Before we get started, think about what you want your final product to look like.
If you say.....
Then you will need to create..
" I would like to create a text animation where a word appears,
disappears then another word appears in the exact same location
as the original. Maybe I would like to do this for more words
than just 2."
Two or more files of the exact same width and height with the
different words in the same relative location in each file (example
1)
" I would like to create a text animation with words showing up
in all different locations"
Two or more files with text. You can use GifBuilder to move the
text around. (example 2)
Example 1 animation
| Example 1 animation. I have 3 .gif files 
To animate these files, drag them into an empty frames window. You can also use the Add Frame feature in the File Menu to accomplish this. Once completed, you screen should look like something to the right. |
 |
Would you like to see your animation, no problem. Simply go to the Animation Menu and select Start. It will only play once. Here are some common enhancements.
Enhancing your Animation
Item
Location
What it Does
Looping
Options Menu > Loop
Loop your animation a specified time or forever.
Transparency
Options Menu > Default Transparency
Can make the background color clear, white, based on a specific
color.
Frame Delay
Options Menu > Default Interframe Delay
Must select specific frame(s) or all. Adds delay between frames.
Recommended. 100/100 would equal one second.
Frame Replacement
Options Menu > Default Disposal Method
What you want to appear when the animation stops playing. Not
Specified leaves the last frame. Restore to background will leave
only the background color. Restore to previous frame will leave
the next to last frame as the final image.
Some other basic features:
Frames can be moved individually by clicking on them and dragging.
Hold down the control key and click on any frames to select them.
Frames can be cut and copied by using Cut and Copy in the Edit menu.
Each frame can be adjusted by clicking on it in the preview window and dragging.
| To Save your Gif:
Simply go into the File menu and select save. Make sure you use proper .html naming (no spaces, no crazy characters, end the file in .gif) and click save. You now have an animated gif that can be previewed in a browser or placed on a web page. |
|
Animating an object
Now lets animate an object. I will be using the 3 gif files which are shown below. When the animation is played, it will make the happy face a sad face. This is a good time to tell you I am not an artist, just a geek.
Making this happy face a sad face is the exact same process as the text, drag the frames in, change the order if needed and play your animation. All of the enhancements discussed above will work.
| Making this happy face a sad face is the exact same process as the text, drag the frames in, change the order if needed and play your animation. All of the enhancements discussed above will work. |
|
Getting Fancy, GifBuilder Effects
GifBuilder has some built effects which you can use either on frames (static filters) or between frames (dynamic filters and transitions).
Static Filters: Static filters include blur, tile, monochromatic and more. These effects affect the frame, so, you must have one or more frames selected to use this feature. To use a static filter, select a frame, go to the Effects menu and choose a Static Filter.
Dynamic Filters: A dynamic filter is a filter that adds frames with a more dramatic effect. You can put them either before an existing frames to reveal them, or after to hide them. The number of new frames which are inserted before the first selected frame is one less than the number of steps. To use a dynamic filter, select a frame(s), go to the Effects menu and choose a Dynamic Filter.
Transitions: To create a transition between two frames, select the second frame and choose one of the transitions in the Effects menu. The number of new frames which are inserted before the first selected frame is one less than the number of steps.
Learning Adobe Image Ready 2.0
My favorite program for animating gifs is Adobe Image Ready 2.0 which is included with Adobe Photoshop 5.5 (full version, not limited edition).
How Image Ready Works:
ImageReady uses the layers concept from Photoshop to animate gifs. Adobe Image Ready has an animation window which displays whatever is currently being viewed in the graphics file layers. Let me use the example below:
Yeah, I am using the happy face again. This is Adobe Image Ready. I have the happyface file open (created in Photoshop or Image Ready) the layers window open and the Animation window open.
Here is how it works: Take a look at the layers window. Do you notice how I have turned off the view of the flat smile and sad face layers? (clicking on the eye hides the layer, note how these two layers do not have eyes showing. Now take a look at the animation, it shows a representation of what is currently visible in the layers menu. To make the face a sad face, I would add another frame to the animation by clicking the add frame command (you can find this command within the triangle on the animation palette which is located in the upper right hand corner of the animation palette), turn off the smile layer and turn the flat smile layer back on. I would then add another frame, turn off the flat smile layer and turn on the sad face layer. This is shown below.
I added 2 new frames of animation using the add new frame command which is found where the triangle is. Each time I added a frame, I changed the appearance of the file by showing and hiding layers.
To play, stop and other playback modifications
1. The right triangle plays your animation
2. The square stops your animation
3. The pop up which says forever determines the amount of time your animation will play. Click on it to either say once or to specify a number of times it will play. You should try your best not to have an animation play forever.
4. You can click on the upside down triangle right next to the O sec. to change the speed of your animation, meaning it would play faster or slower. Be careful, older machines will play it slower than average and super fast Internet connections will play the animation fast. Never choose something very fast or very slow.
Saving your animation for the web:
To save your animated gif, go into your file menu and select Save Optimized As... You will then be prompted to save the .gif file. Once saved it is ready to be placed on a web page, etc.
The way cool Tween command
Lets say you wanted to move the happy face right to left on the page. Well, you could make numerous frames, move the happy face a tad on each frame and create your animation, but, that would be tough. Well, let me introduce you to tween. You establish two points for your animation, where you want the happy face at the start and where you want the happy face at the end. You then select the tween command and Let Image Ready figure out the rest for you.
| This is the dialog box that shows up when you select Tween. You will want to keep the defaults as they are to create your basic tween. An example of what Tween adds to the animation window is shown below. |  |
A "Tweened" happy face from the example show above.
Another cool tween would be to play with the opacity levels of your layers. Imaging you had a text layer. The first frame of your animation would have the text at 100% opacity. You would add another frame to your animation and make the same layer 1% opacity in the new frame of your animation. You would tween the frames and viola! Fading text !
Making only part of an image move
Let's say you want to to make only part of an image move. For example, a panther running, or in the example I am going to use, a dog wagging its tail. This is the toughest animation to do, so put on your beanie propeller caps.
| Here is out cute lovable dog. The first step in animating is figuring out what part do you want to animate and then stick the part you want to animate on a separate layer |  |
| In this example, I used the lasso tool to cut his tail and place it on another layer. I then used the move tool to move his tail right where it used to be. Look at the layers. You will see Layer 1 no longer has a tail and the tail has been pasted onto a new layer. |  |
| Now, here is the tricky part. I need separate layers for each tail movement I want. So in this example, I duplicated the tail layer, selected the new layer and selected Transform in the edit menu and them moved his tail slightly to the left. |  |
| I hit the return key to get rid of the Transform squares. I then used my move tool to move the tail to the correct location. |  |
| Now, lets talk about the animation. This example is for frame 1. Note how I have tail 2 hidden and tail 1 visible. |  |
| Here is frame 2 of the animation. Note how tail 2 is visible and tail one is hidden. Basic movement animation at its best!! |  |
| The final product! Ahhh, how cute! |  |
|
Home | Appointment Calendar | Web Development | Conference Presenting Copyright 2004 lesliefisher.com part of Fisher Technologies, Inc. |
|||