• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Web Design Techniques > GIF Animation

GIF Animation

GIF animations are still popular because they are small, they don’t require any special plug-ins, and they are easy to create. With ImageReady, you have an excellent Web design tool that provides great support for GIF animation.

GIF animation works exactly like cel animation: Several frames are displayed in rapid succession, which creates the illusion of movement. For each frame in the GIF animation you can define attributes such as position, transparency color, disposal method (whether or not the current frame should be discarded before the next frame is displayed), and how long it will be displayed.

To see the Animation palette in ImageReady, choose Window > Show Animation. By default, the Animation palette is grouped with the Image Map and Slice tabs. If one of those is already open, just select the Animation tab.

Click on the Create New Frame button to create a new frame in the animation. Every change in the Layers palette will now be recorded.

Let’s create a tiny animation to get a feel for the process. To do this, create a new image in ImageReady and type a word into it, such as “Animation.” In our example, we’ve used the Type tool for this. Your image is now the first frame in your animation, as you can see in theq Animation palette. Click the Duplicate frame button at the bottom of the palette, and then use the Move tool to reposition the text in the image window. Now when you click on the Play button, you can watch your two-frame animation.

This hardly qualifies as state-of-the-art animation. You could, of course, add additional frames and move your text layer around some more, but your animation probably won’t be very smooth because it’s very difficult to manually position your text with the accuracy required for professional-looking animation. Fortunately, ImageReady offers a great command called Tween that makes it easy to create and control a sequence of frames based on layers. To see how this works, select the first frame in your animation and add some layer effects, such as an outer glow or a bevel and emboss. Then choose Tween from the Animation palette pop-up menu. The Tween dialog box lets you decide how to apply your effects to subsequent frames, and it also lets you specify how many frames you want in the final animation. You can choose to apply effects you have created to all layers or just to the selected layer, and whether to vary position, opacity, and/or effects.Then you can add intermediate frames and specify whether to add them in between the next, previous, or a selected frame.

The Tween command is the easiest way to create great animations. Tweening will insert frames after one, or between two, frames that you’ve selected.

After clicking OK, you will see your text slowly fade away, move across the screen, or even gain or lose an effect, depending on what you’ve specified in the Tween dialog box. If you want to preview the animation, click the Optimized tab, although viewing it in the browser will give you a far more accurate idea of the animation speed. Use File > Preview in > Internet Explorer (or Netscape Navigator) to have ImageReady place your GIF animation in a temporary HTML file. In ImageReady, even though frames’ delay value might be set to the default of No delay (0.0 seconds), the animation will still play rather slowly, because ImageReady has to process all the layers. Only after all the layers have been flattened and the GIF has been optimized will you get a true sense of the speed of your animation—after which you might want to change the timing on certain frames.

Changing the speed, or delay, of the animation is very simple. The display time (in seconds) is shown beneath each frame; click on it to reveal some preset options. If you don’t see a time value that suits your needs, choose Other. You can set the delay time within 1/100th of a second.

Looping An Animation

Do you want your animation to play more than once? No problem. The Loop options are set in the lower-left corner of the Animation palette. Choose Once to play the animation one time from beginning to end, Forever to play it endlessly, and Other to specify a particular number of repetitions.

The standard settings for looping an animation are Once and Forever. To set a specific number of loops, use Other.

Unfortunately, there is no option for backward and forward—if you need that kind of animation, you must create it manually. However, that’s very simple: After you have created your animation with the Tween command, just Shift-click to select the intermediate frames (not the first and last frame), and then press Option (Mac) or Alt (Windows) while dragging the frames to the right side of the last frame, then choose Reverse Frames from the Animation palette pop-up menu.

Saving On Bandwidth By Scaling Animations

Since an animation consists of a series of images, its file size is necessarily larger than that of a single image—and as you know, file size is always an issue on the Web. If color reduction and other compression tricks don’t shrink the file enough, consider using a little HTML trick that can save as much as 75 percent on file size. In HTML, you set the dimension of an image with the IMG tag’s two attributes, WIDTH and HEIGHT. The browser usually uses these attributes to determine the size of the image before it has downloaded, but you can also use them to scale an image. So to gain savings in file size, consider shrinking the animation to 50 percent via Image > Image Size and then doubling its dimensions in the HTML code. Because it’s an animation, the decrease in image quality is in most cases not as obvious as with a regular image. (For those of you wondering how we end up with a 75-percent saving when we reduced the image size by only 50 percent, remember that the 50-percent reduction applies to both the width and height of the image, and therefore the final image is only a quarter the size of the original.)

Disposal Methods

Since GIFs support transparency, you can create animated GIFs that use transparency. When that’s the case, you can select what’s called a disposal method to specify what, if anything, is visible through the transparent areas of your frames. Think for a minute about cel animation, where the background of a scene and all the characters are painted on separate sheets of transparent celluloid. This lets the animator reuse the background and animate the characters independently. The same idea lies behind disposal methods. They let you hold a previous frame as a background image, while subsequent frames add the animated character.

You can see the disposal method of a frame by right-clicking (PC) or Control-clicking (Mac) on it. A pop-up menu will appear, offering the options Automatic, Do not dispose, and Restore to background. Automatic discards the current frame if the next frame contains layer transparency. According to Adobe, this is the best option for most animations, so it is the default setting.

This animation of two rotating balls was scaled to 200 percent in GoLive, which kept the file size under 10 K.

Alternatively, you can choose Do not dispose, which keeps the current frame onscreen while the next frame is displayed. If the second frame contains transparent areas, the first frame will show through. If you start with a full frame (an image that uses the entire frame), define it as Do not dispose, and follow it with several partially transparent frames. All the frames with partial transparency will be combined with the frame that was specified as Do not dispose.

You can have ImageReady import the animation into a browser to check if everything works. This is particularly important if you work with transparency and disposal methods, since those aren’t displayed in ImageReady. In this example, you see an animation of a bouncing ball, but the bottom one has the disposal method set to “Do not dispose.”

Finally, Restore to background is like Automatic in that it discards the current frame when the next one comes up, but it’s different in that you can set a background color or pattern that shows through transparent areas. Use this method if you want to use transparency to have a moving object blend in with the background in the browser.

Important: ImageReady does not simulate the disposal method when watched in the Optimized view, so you always have to check your result in the browser by using File > Preview in > Internet Explorer/Netscape Navigator.

The Zero-Second Trick

Another great way to optimize animations is to use the zero-second trick. Theoretically, you can set a delay time of zero seconds (No delay) for each frame in your animation, but in reality, browsers need some time to display each frame. However, this minimal display time is brief enough to make a frame appear almost simultaneously with the previous frame. You can use this to optimize GIF animations by splitting up a frame into two frames and putting them together by setting the first frame to a zero-second delay.

For example, I created the effect of a string of blinking lights composed of a background image with all lights off (red) and one single image with a light on (yellow). I placed the image of the yellow light on the background image in several positions and set all the frames to a zero-second delay. Then I selected Do not dispose as my disposal method to keep the background with the darkened lights visible when the yellow lights displayed in sequence, making them appear to blink. (The delay will be more visible on slower computers.) Obviously, it takes a lot of work to create an animation this way, but you can substantially reduce the amount of data because you eliminate redundant pixels.

To create an animation of a string of blinking lights, I set the delay to zero and the disposal method to “Do Not Dispose,” as indicated by the circled icon. This way the background string of “darkened” lights will remain visible while individual lights flash.

This technique is also ideal if you have two animations that you want to run asynchronously. For instance, if you want to animate a clock, you need an hour hand and a minute hand that move at different speeds. You’ll need 12 positions for the hour hand, and let’s assume that you’ll use 8 positions for the minute hand (to make life easier). With the zero-second trick, your animation requires only 21 individual images (20 images for all the hand positions, plus the background image) instead of 96. So you can see that certain animations benefit tremendously from this technique, but there are limitations on how far you can push it; after all, even a frame that contains a preloaded image requires some memory—and all the information on position, disposal method, and transparency color can add up.

In this particular animation, the glow of the lights needed to fade into the background, so the Matte option was used.

As you can see in the Layers palette, the entire animation is based on the background layer with all the lights off and one layer with one light on. This layer is moved and the effects settings are changed. It’s important that for all the frames with the light on, the background must be hidden.

Optimizing Animations

As you may have realized by now, you don’t have to use full frames in your animation, which means you can reduce your final file size by cropping frames to only the parts that are important. ImageReady has a special feature that does exactly this for you. It actually goes through your animation frame by frame and figures out if there are identical parts in two sequential frames. If there are, it crops the frame to only the part that changes. Static areas are eliminated, so they don’t use up precious memory. To activate this feature, select Optimize Animation from the Animation palette pop-up menu, and then check Optimize By: Bounding Box. Because this technique is so effective, you should try as often as possible to create animations in which subsequent frames build on the previous one.

On the top you can see some screen shots of the animation on the Little Rock Web site. On the bottom, the individual frames are displayed. You can see clearly how the Frame Optimization cropped each frame to just the parts that change.

This feature can be particularly helpful if you are converting QuickTime movies to GIF animations, something that ImageReady can do easily. Just choose File > Open and select the QuickTime file. An Import dialog box appears and prompts you to specify the number of frames and other parameters. Optimizing the converted file with the Bounding Box option will reduce the file size tremendously. Just make sure that you select Automatic as your disposal method.

Another great feature is the Redundant Pixel Removal option in the Optimize Animation dialog box. It improves the animation by replacing every static pixel with transparency. Since this allows for a better compression (remember, GIF uses a patternrecognition algorithm that makes same-color areas compress well), the file-size savings can be amazing—particularly in cases where the Bounding Box option doesn’t work so well. Such a case might be an animation that has changing elements in the upperright and lower-left corners. Since the Bounding Box can’t crop very much, you still end up with large frames even though all the pixels in between might be static. Redundant Pixel Removal fixes the problem.

Rotating A Logo

Probably one of the most common animations is the rotating logo. To prepare such an animation in ImageReady, you first need to create the 3D logo in an animation application and export the animation as either an image sequence or a QuickTime movie.

Importing frames: To import a QuickTime movie, use the File > Open command; to import an image sequence, choose File > Import > Folder as Frames, which will import all images in a selected folder. To avoid having to rearrange the order of the frames manually later on, make sure the files are named sequentially.

Select File > Import > Folder as Frames and navigate to select the folder that contains the frames of your animation. For this tutorial you can use your own images or download this example from www.mitomediabooks.com.

Make sure these two options are selected—they help to keep the file size small.

Setting the delay: Since this animation requires that each frame have the same delay, first select the frames with the Select All Frames command on the Animation palette pop-up menu. Alternatively, you can select the first frame, hold down Shift, and then select the last frame. Click at the bottom of the frame to change the delay time.

Always preview the animation in a browser after you specify the delay time. The preview in ImageReady is not accurate.

Optimizing and testing: From the Animation palette pop-up menu, choose Optimize Animation and check the Bounding Box and Redundant Pixel Removal options as desired. Also note another trick: the animation only shows a 180-degree rotation, which saves 50 percent of the file size. Click on the Preview in Default Browser button in the toolbox to open the animation in a browser, where you will get a true sense of the animation speed. (The animation preview in ImageReady is much slower.)

Scaling the animation: When you import the animation-into your HTML authoring tool, try scaling it to twice the size.This makes for an eye-catching splash screen (you can see an example of this at www.plenkjosef.de).

Swiping Effects

One way to make text in a banner ad interesting is to have the text appear in steps. You can do this by using a layer mask and animating it. The technique described in these steps is basically a swiping effect and can be used in different ways.

First place the text on a text layer. Then, with the text layer active, click the Add a mask button in the Layers palette. An icon for the layer mask appears next to the layer icon. (The layer mask should automatically be activated; if not, be sure to click the layer mask icon before the next step.)

With the Rectangular Selection tool, make a selection over the areas of the text that you want to cover, then, using the Paint Bucket tool, fill this selection with a black foreground color. Deselect the selection, open the Animation window, and click on the Duplicate Frame button.

Before you can move the layer mask,you have to unlink it from the layer; otherwise, you will move both at the same time. With the Move tool, move the layer mask to the right until it does not cover the text anymore.

You now have the beginning and end states of your animation. To create the intermediate steps, use the Tween command. Select both frames, and from the menu in the Animation palette, choose Tween and pick the number of frames that you want to insert.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint