Importing and Exporting Animated GIF Images

---

Getting the image ready to export is pretty easy. The main thing you'll want to concentrate on is optimizing the images so you get the smallest file size possible. Chapter 23 discusses the many optimization options. And importing an animated GIF image is the same as importing any other image.

Importing

You can import GIF animations from other programs or users into Fireworks, where they can be edited or deconstructed for learning purposes. If you import an existing GIF animation into a current document, it looses its Frame Delay settlings, and it becomes a symbol of the current document. If you want to retain the delay settings of the original GIF animation, open it instead of importing it.

To import a GIF animation follow these steps:

1. Choose File ® Import.

2. Locate the file and click Open. You can navigate to the chapter22_exercise folder and import the  chesire.gif if you'd like.

3. The cursor turns into a corner shape. Click in the document to place it. Any additional necessary frames needed are added.

Exporting

To export your animation with motion, you need to be sure that you have set it as an Animation GIF. Open the Optimize panel and choose Animated GIF. The Optimize panel is also the place to reduce your colors as much as possible to reduce the file size. Chapter 23 discusses how to optimize in more detail. To export as a GIF Animation follow these steps:

1. Choose Animated GIF in the Optimize panel.

2. Choose File ® Export.

3. In the Export dialog box, name the animation, choose where you want to export, and click Save.

Your animation can be used in Flash and further edited there. To export as a Flash SWF file, follow these steps:

1. Choose File ® Export.

2. Choose where you want to save the file.

3. Type in the name of your animation.

4. Click the down arrow under Save as type, and select Macromedia Flash SWF.

5. Click the Options button, choose the options you want, and click OK.

6. Click Save.

Animating Images for the Web, by David C. Nicholls

We're all familiar with the myriad of animated GIF banners that populate many Web sites. Most of them look the same because it's difficult to think up a novel animated GIF. Designers simply blink text on and off or move image objects about, often because they're working to a limited file size for the average animated page banner specification. But it's not necessary to follow the usual routine. In fact, it's a good idea not to do so, because most Web site visitors ignore the usual animated banners in the same way they ignore many TV commercials. Thinking up a way to attract the viewer's attention is important but not easy.

By completing this tutorial, you learn skills associated with the following tasks:

• Creating a series of layers with graduated fades

• Distributing these layers to frames and building the animation

• Optimizing and saving the animated GIF

I'll also show you how to do these same things in earlier versions of Fireworks, which lack the transparent gradient fill capability.

Some designers resort to Flash to produce complex moving images. However, not all visitors have Flash players installed in their browser, and it's hard to resist the temptation to create really intricate animations, resulting in large files and slow downloads. This section demonstrates that you can create an interesting animation by using the simple animated GIF, which works in all browsers and doesn't have too large a file size.

In this tutorial, I show you how to draw a cat and give you plenty of practice with the Pen tool and manipulating curves. You also learn how to use masks and utilize the new gradient transparency to enhance your animation. You then add the frames and settings to make the cat fade in and out and still maintain a reasonable file size for a fast-loading animation.

Designing the animation

The designing of the animation usually consumes more time than the actual animating does. Thought and preparation are required to produce a good quality and effective animation.

The concept

This is the hard part - thinking up an animation that's interesting and at the same time avoiding a large file size. The trick is to think outside the nine dots. In this example, I have no particular client in mind, just the intent to do something different. I've chosen the Cheshire Cat which appears (and disappears) in the story Alice in Wonderland by Lewis Carroll.

A bit of background. In her adventures in Wonderland, Alice meets a host of strange characters. One of these is a talking cat - the Cheshire Cat. As it talks to Alice, it disconcertingly starts to disappear, leaving only its grin. You're going to animate this disappearing act.

Preparing the vector drawing for animation

We have supplied you with a vector copy of a cat but you'll first need to convert it to a bitmap. This may seem odd, but there's a reason. One of the possible animation options is to have the cat disappear to a background pattern. For this, the components of the cat need to be filled with a solid color, so that it initially covers the background pattern. However, as some of the cat body parts aren't completely closed vector shapes, the fill process doesn't fill the whole animal, and bits of background show through. It would be possible to join all the vector shapes into a single closed vector object and fill the result. But this would involve more fiddling than just turning the cat back into a bitmap requires.

1. Open the  vector_cat.png image (chapter22_exercise folder).

2. In the Optimize panel, change the export file format, to TIFF24.

3. Choose Modify ® Canvas ® Canvas Color, and make the canvas white if it isn't already.

4. Choose Export, name your file, and save it. A copy is in the Chapter 22 image folder named  cat.tif. You have not made changes to the original vector file since you saved it with a new name.

5. Now open your saved image (or use  cat.tif). Then open the saved vector file again ( vector_cat.png) if you've closed it.

6. In the  vector_cat.png file, select the grin group, and convert it to a bitmap by choosing Modify ® Flatten Selection.

7. Copy the flattened selection and paste the grin over the cat bitmap (the  cat.tif you opened). Position the copied grin over the bitmapped one.

8. The cat has two grins now, because you need one to remain as the rest of the cat fades away. For the moment, hide the second grin. (Click the appropriate eye icon in the Layers panel.)

9. Select the Magic Wand tool, and in the Property inspector, apply the following settings:

   • Tolerance: 32

   • Edge: Anti-alias

10. In the Layers panel, select the bitmap layer. Using the Magic Wand tool, select the area outside the cat's body.

11. Delete the selection using the Delete key, and change the Canvas color (Modify ® Canvas ® Canvas Color) to transparent. Now you have a solid cat on a transparent background.

12. To set the cat on a textured background, deselect the current selection (Ctrl/Command+D), use the (vector) Rectangle tool, and draw a rectangle that covers the entire canvas.

13. In the Property inspector, set these values:

    • Stroke: None

    • Fill: Solid, mid-gray (#666666)

    • Texture: Hatch 5 and the percentage to 40%.

14. In the Layers panel, drag the new filled vector rectangle below the cat image. The cat should now appear against a patterned background, as in the following image.

You can use any other sort of background - for example a bitmap image - but this texture is a simple way to demonstrate a cat fading to a background. This choice of background pattern also turned out, by trial and error, to be quite efficient when converted to a GIF.

Bitmap cat with background

Fading the cat

You want to make the cat slowly fade, starting at its hind end, with the fade gradually covering the whole animal, moving toward the head, and finally leaving only the grin.

There are three main ways to do this. One, which works in both Fireworks 4 and Fireworks MX, is to use a Mask group. The second, which works in MX only, is to overlay the cat with a white-to-white radial transparent gradient. You can apply the latter to an outline of the cat and overlay only the cat, or to a rectangle covering the whole canvas.

The third way, and by far the most interesting is possible only in Fireworks MX. First you select parts of a bitmap according to transparency information in a gradient fill vector object. Put another way, you create a vector object, fill it with a suitable gradient with variable transparency, and use that transparency information to selectively etch away a specific bitmap (the cat) while leaving everything else (the background) unchanged. Using this method, you can make the fading bitmap images very quickly and easily and is the method this tutorial explores in detail.

Because the third method actually uses the same techniques as the first two, I'll show you those options as well and then build upon each one. This way, you learn to do all three at once.

Fireworks MX with instructions for Fireworks 4, Mask Group Method

Fireworks enables you to create a vector object with a black-to-white gradient fill (linear, radial, ellipse, and so on) and apply it as a mask to the image you want to fade. A simple approach is to draw a rectangular vector object that covers the entire window, set the fill to radial, the colors of the gradient to black and white. Then you select the rectangle and the cat beneath it and apply as mask (Modify ® Mask ® Group as Mask). The cat pixels remain where the mask gradient was white and fades completely where the mask was black. You have to adjust only the location of the black and white parts of the mask rectangle to suit the intended fade. (In Fireworks 4, black areas are visible and white are transparent. It's the opposite in Fireworks MX.) You start with a background, but you won't be using it in the end.

1. Open the TIFF image of the cat with a background (bitmap_cat.tif).

2. Using the Rectangle (vector) tool, draw a rectangle that exactly covers the cat image frame. If the fill was already set to solid, the cat disappears beneath a rectangle, which appears in the color you set the fill to (most likely white, but it will be whatever you left it at last).

3. Next you set the Fill to Radial, and edit the fill (click the Fill color box) so that the right end of the fill spectrum is black and the other is white. You want the rectangle to be white in the center and black at the edges. (Note: The reverse is true for Fireworks 4). Accept the settings shown in the following image.

   
   Setting the gradient colors

4. Select with the Pointer tool. The fill handles appear on the black bullseye. Drag the circular handle about half-way up toward the top-left corner, and the square handle down to the bottom-right corner as seen here.

   
   The gradient mask with the circular handle moved

5. Now for the masking. In the Layers panel, select both the rectangle object and the cat (shift+click in the Layers panel). Group them as a mask by choosing Modify ® Mask ® Group as Mask.

   Part of the cat reappears where the white parts of the rectangle were. But it's not centered where you want it.

6. Using the Pointer tool, in the Layers panel, select the vector mask with a pen icon on the right in the grouped objects. A yellow line appears around it when selected. When you do this, the fill handles reappear over the cat.

7. Drag the circular handle over the cat's grin and the square handle in from the bottom-right corner. As you move the square handle, you see the effect of the mask change. Play with the location of the square handle to make different parts of the cat fade out. You'll immediately see how you can create a gradual fade by progressively moving the square handle from the bottom-right corner in an anticlockwise spiral inwards toward the cat's grin.

That's all that is necessary to build the various animation frames using the Group as Mask process. Next you look briefly at the transparent gradient overlay process.

Transparent gradient overlay method

The previous method of masking works, but if you have Fireworks MX the method demonstrated in this section utilizes gradient transparency. It is the method you would use if you were using a background image.

1. Instead of creating a black-to-white radial gradient, fill in the rectangle as you did previously, and then set both color chips in the Gradient pop-up menu to white.

2. Click the opacity chip on the left and set the opacity to 0% (transparent), leaving the opacity on the right end at its default 100%. This action fills the vector rectangle with a radial white fill with varying transparency. Sitting over the top of the cat bitmap, it partly fades it to white. The only problem is, it also hides part of the background pattern as you see here.

   
   Transparent gradient overlay

If you were building an animation of a cat fading to a plain white background, the background being partially faded wouldn't be a worry, and the technique would be fully effective. Which leads you to the third way to fade the bitmap: You use the transparency information in the white rectangle as a means of etching away the bitmap.

Etch-away-the-bitmap method

Now you use the transparency information to selectively etch away a specific bitmap (the cat) while leaving everything else (the background) unchanged. This is actually very easy to do.

1. In the Layers panel, select the cat bitmap.

2. Press and hold the Control (Command) key. Click the white rectangle in the Layers panel (on the actual thumbnail). As you do this, a small rectangular cursor appears. This action selects part of the bitmap, which shows as a selection border on the bitmap image. In fact, the pixels are not all selected equally, but according to how transparent the same location is in the white rectangle as seen here.

   
   Selection marquee

3. Hide the white rectangle layer (eye icon in the Layers panel). Repeat Step 2 and Press the Delete key; then press Ctrl (Command) +D to deselect. As if by magic, the bitmap fades into the background exactly as you need as seen here.

   
   The cat faded to background

The location and extent of the fade effect in the bitmap is controlled by the transparency gradient in the white rectangle. This is an effective way to fade images, and you should work through it carefully to master it.

Creating the animation

So let's get down to the task of creating the animation. The first thing you need to do is to work out the number of frames you want. Some animations use a lot of common content between frames, which means a small file size for a given number of frames. Animations where most of the details change from one frame to the next will have a large file size for the same number of frames. This animation is a fade, so it's an intermediate case.

The compromise that's necessary is to strike a balance between a smooth fade and a small file size. You can experiment with this, but set the first target at 12 frames and see how large the animation is.

You also start with a white background to minimize detail in the GIF and, thus, file size. (The textured background adds significantly to file size, even though it looks good.)

1. You start with the bitmap cat PNG file, which should have the following layers, from the top: the second grin (hidden, but now make it visible again); the white rectangle with the transparent gradient fill; the bitmap cat image; and the background texture rectangle (hidden, and keep it hidden). The Layers panel should appear as shown in the following image.

   
   The Layers panel

2. Turn off the visibility of the background pattern rectangle, and make sure the Canvas color is set to white (Modify ® Canvas ® Canvas Color).

The process from here on in is purely mechanical - to create a series of bitmap cat images that fade progressively in toward the cat's nose. The first frame is the model for the subsequent frames. Here's the sequence:

1. Select and duplicate the cat bitmap image (Control (Command) +Shift+D or Edit ® Duplicate). Hide the duplicate image in the Layers panel: This is your reference cat image, which you use as the source for all the fading frames.

2. Enlarge the window to about twice its default size; select the white rectangle, and using the Pointer tool, drag the square fill handle down and to the right, off the canvas, for a distance of about twice the length of the cat.

3. Select the visible cat bitmap image. Hold down the Ctrl (Command) key (see image) and click the white rectangle thumbnail in the Layers panel, as before.

   
   The bitmap cat selected

4. Press the Delete key and deselect the image. Rename the modified bitmap frame 2, and temporarily hide it.

5. Repeat the process, duplicating the original bitmap again. Select the white rectangle and drag in the square fill handle inwards toward the cat's nose, and a little upwards. Then repeat the "etching" process, naming the modified bitmap frame 3, and so on.

   You might have noticed that this process uses only one layer (the white rectangle) to create all the frames and that you adjust it step by step as you go. You use copies of the original cat bitmap as source material for the frame.

   Keep this process going until you have moved the white rectangle fill handle through a succession of shorter lengths, in a slow counterclockwise arc, fading each successive duplicate of the original cat bitmap, until the fill handle is close to the cat's eyes. Adjust the change in the fill handle length and position so that you finish up with 10 progressively faded bitmaps.

6. When you have frames 2 through 11 done, save a safe copy of the file; then delete the white rectangle, which has served it purpose. (Select it and press the Delete key.)

   The original, unfaded bitmap, the 10 progressively faded bitmaps, named frames 2 through 11, and the grin, are the raw material of the animation. One is the basis of each frame. Every frame also needs a copy of the spare grin, because you don't want that to fade with the rest of the cat. The final frame will be the grin by itself.

What you must do next is distribute the bitmaps to different frames. Fireworks animates an image by swapping from one frame to the next in a specified time. You can view the different frames using the Frames panel. Initially, there is only 1 frame, the one you have been working in, and you need 12 for the complete animation. These are created automatically when the layers are distributed to frames.

1. You start with the Layers panel open, showing the grin at the top layer, followed by layers named frame 10, frame 9, and so on, with the original unfaded bitmap cat on the bottom layer. These should all be visible (the eye icon showing). If not, make them so. If the background texture rectangle is present as the bottom layer, hide it. Next, select all the layers (except the background rectangle) by clicking on each in sequence while holding down the Shift key.

2. The next step is to distribute these 12 layers each to a separate frame. Open the Frames panel, and, with the 12 objects still selected, click the Distribute to Frames button (arrow and film-strip icon, lower right). Each layer has been moved to its own frame.

3. In the Frames panel, select Frame 12. The grin layer is the only image visible in the frame. Click the grin image to select it. Then, in the Frames panel, click the panel Options pop-up menu (top right), and select Copy to Frames. In the pop-up box that opens, accept the default to copy to all frames. This action sends a copy of the grin to every other frame.

4. The main part of the animation is done. Under the main image window, you will see the animation controls. Click the forward arrow and watch the animation preview. The frame duration defaults to 7/100 second, but it performs better if you set the delays on the first and last frames longer. In the Frames panel, select Frame 1, double-click the 7 in the second column, and set it to 50. Set the delay for Frame 12 to 100 in the same manner. Now preview the animation again. This gives quite a nice animated vanishing cat. If you had created more frames - to make the fade more gradual - the effect would be smoother, but at the cost of a larger file size. Which brings us to exporting.

Exporting the animation

You now export the animation.

1. First you must decide whether the animation is going to cycle through once, more than once, or indefinitely. For trial purposes, it is probably best to select Forever. To change this, in the Frames panel, click the loop icon at the bottom left of the panel. This opens a pop-up menu to set the animation repetition.

2. With this chosen, you export the animation as an animated GIF. In the Optimize panel, select Animated GIF in the Export File Format drop-down list. Use the following settings:

   • Web Snap Adaptive

   • No dither

   • No Loss

   • No Transparency

   • 128 colors

3. Export the file as normal (File ® Export) and save with an appropriate name. The resulting file size is about 55K for Web Snap Adaptive and 128 colors, and 27K if you want to export as Web216.

4. These are both too large for practical use as a Web animation, but there is a way to reduce the file size. You have a very large cat! The image you've been working on is around 300 × 250 pixels, which is much larger than needed on a Web page. If you reduce the size to 150 × 125 pixels (Modify ® Canvas ® Image Size), the file sizes reduce to 10K for the two options. This is much more acceptable.

5. As a final step, it's worthwhile to preview the animation in a browser to see exactly what it looks like and to check the timing and looping. Choose File ® Preview in Browser and select the browser you prefer.

And there you have it - a vanishing Cheshire Cat. There's only one more problem. Where do you use a vanishing Cheshire Cat, except on an Alice in Wonderland Web site?

Note for the Alice in Wonderland purists: The Cheshire Cat that Alice meets actually disappears completely after a while. If you want to follow the cat's behavior to the letter, add a final completely blank animation frame after the grin-only frame.

Modification

If you want to use the background texture, select Frame 1 in the Frames panel, make it visible, and select the Background Texture Rectangle. Then in the Frames panel, using the Panel Options button, copy to frames as before. This copies the background rectangle to each frame, but as it is copied to the top layer in each frame, it is necessary to select each frame in turn in the Frames panel, and in the Layers panel, to drag the background rectangle layer to the bottom.

If you were to export now, the file size would be about 68K. If you change the Optimization parameters to Web 216, with a dither of 100%, the file would be around 61K. If you reduce the cat, as in Step 4 in the previous section, the file will be about 22k.

On the CD-ROM 

There is another animation Expert tutorial - "Animated Banner," by Japi Honoo - in the Bonus Tutorial folder on the CD-ROM. In that tutorial you create a banner for the Habitat Alert Web site.

---