Create Animation with Fireworks

Multimedia-rich sites were once shunned on the Web. "No!" cried the nay-sayers. "You can't have rich and engaging media -- it deters users and won't increase traffic."

The bottom line, however, is that well-planned and judiciously-implemented animations and other rich media technologies, such as Macromedia's Flash, can increase site traffic and enhance the user experience.

Macromedia's Fireworks is a unique tool for the designer. Not only does it present a stellar selection of drawing and design tools, but it's also the only graphics tool that allows you to create animated GIF images and Flash SWF movies all within the one program.

Animation Formats

There are two popular formats of animation on the Web:

1. CompuServe's GIF format is the most widely used


2. Flash, the second most common, is the rapidly growing successor to GIF

GIF animation achieved mainstream adoption when Netscape included it in the Navigator 3.0 browser (quickly followed by Microsoft with Internet Explorer 3.0). Unlike JPEG images, which support a photo-realistic color spectrum, GIF images only support 256 colors, the most basic color spectrum for Web browsers. However, GIF images support two key features that make this format very amenable to use on the Web: transparency and animation.

A color from the GIF color palette can be elected to be transparent in the Web browser. This provides the illusion of irregularly-shaped images such as buttons. The second big win for GIF image formats is that they provide the ability to layer two or more images on top of each other to create simple animations.

Flash offers the user many of the same features as GIF, and while it can support animation, it doesn't allow for color transparency in the Web browser. However, a key advantage Flash boasts is the ability to support JPEG quality images in a more compact animation. Fortunately, Fireworks gives you the best of both worlds - it lets you easily create animations and then export them in the format of your choice.

Fireworks: an Animation Tool

Fireworks provides a series of tools that enable an animated movie to be quickly created. The most important tool for creating animation is the Frames Inspector, shown below.

Any animation in Fireworks must contain 2 or more frames. Frames can be added by selecting "Add Frames..." from the Frames Properties (the small arrow in the top right hand corner of the inspector). Selecting "Add Frames..." will open a dialog box that will ask you how many frames you would like to add, and where in the movie you would like to have them appear. The default is 1 new frame, which appears directly after the current frame.

Creating an Animation

To create a new animation in Fireworks, open a new movie and set the canvas settings to 500 pixels wide by 500 pixels high. Open the Frames Inspector. The default is just 1 frame -- but we can't do a lot animation with just one frame, we must have a least two. But before we create a second frame, let's plan the kind of animation we'll create.