SAN FRANCISCO (03/28/2000) - As a longtime print person-and a New Yorker-my motto used to be "If it moves, step on it." But that was before I discovered the joys of GIF animations. Seeing my artwork move, fade, and change appearance was thrilling. I even started watching the Cartoon Network to pick up animation tips.
But despite the pleasing results, creating those first animations was no picnic. I used Macromedia Inc.'s Fireworks 1, which required a cumbersome set of steps to set up an animation and couldn't play files without opening a special Export dialog box. Fortunately, Fireworks 3 is a powerful, sophisticated tool that makes it easy to turn artwork into animations.
Fireworks' Frames and Layers
Fireworks is a frame-based program; an animation is composed of any number of frames, each displaying a slightly different image. The concept is similar to a flip-book-an object changes from page to page (or from frame to frame) to create the illusion of movement. (Adobe After Effects and Macromedia Flash are timeline-based, which makes them much more powerful than frame-based animation programs, but harder to understand and use.)Fireworks also uses layers. As in Adobe Photoshop, layers control the vertical stacking of objects in a file. In Fireworks, you can have several layers in each frame, and you can change each layer's content and visibility. If, for example, you want to make the word help blink on and off, you can place it in layer 1 of all frames but make that layer invisible in alternating frames. By hiding the layer rather than deleting it, you have the option of changing it later if you-or a willful client-opt for a different look. You can share a layer across frames either manually or automatically.
The Power of Tweening
You can produce animations by manually placing an object on each frame and changing its position by hand, but it won't take long for your patience-and your mousing hand-to give out. It's much easier to take advantage of Fireworks' symbols and instances.
Any object can be a symbol-you simply select it and choose Insert: Symbol. This designates it the master or parent of all copies-called instances-of the object. Rather than copy and paste an object onto each frame, you can use the Tween Instances command to distribute instances automatically across frames.
That's useful enough, but Fireworks' tweening capabilities go even further.
Using the Tween Instances command, you can also fill in the steps between two instances. Say you place one instance of a floral bouquet in a frame's bottom left corner and another instance in the next frame's top right corner. Tween the two instances, and Fireworks adds frames between them that show the flowers gradually moving from corner to corner.
Animation Looks Lively
You can tween a wide range of symbol attributes in Fireworks 3. Just as you made the flower instances move from corner to corner, you can animate differences in the size, rotation, and skew of two instances. You can also alter their opacity so that, when you tween them, an object appears to fade in or out.
Fireworks 3 features Live Effects that offer new opportunities for animation.
Drop shadows can move, glows can fade in and out, instances can go in and out of focus, and objects' hues can change. You can even apply Photoshop filters to instances for unusual, artistic animations. For a different effect, import blends from Adobe Illustrator or Macromedia FreeHand to simulate one shape morphing into another.
Once you've modified an existing command, save it as a text-only file and place it in Fireworks' Commands folder. The modified action now appears under the Commands menu.
Although Fireworks has come a long way, there's still room for improvement. For example, unlike Flash 4's, its tweened animations aren't live: to change a first or last instance, you have to re-create the entire animation. But Fireworks 3 does provide Web animators with an impressive array of well-designed tools.
SANDEE COHEN is the author of Fireworks 3 Visual Quick-Start Guide (Peachpit Press, 2000) and a frequent speaker at Thunder Lizard conferences and Seybold seminars.
Animate with Symbols
Fireworks' symbols and instances make it easy to create animations. Here, I show you how to rotate an object.
Put the object that will appear on all frames on its own layer, and choose Share Layer from the Layers palette's pull-down menu.
Create a new layer to hold the objects you will be animating; then choose Insert: New Symbol. Name the symbol in the Symbol Properties dialog box, and then paste existing artwork into the Symbol window or create it directly in that window.
Close the Symbol window. An instance of the symbol automatically appears in the main window. Position this instance where you want the animation to start. Copy the instance and position the copy where you want the animation to end. Select the second instance and go to Modify: Transform: Rotate 180 Degrees.
Select the two instances and choose Modify: Symbol: Tween Instances, then set the number of steps. Select Distribute To Frames to put all the intermediate steps on their own frames. The tweened instances fill in the spaces and rotate the flower.
Animate a Live Effect
Fireworks effects such as Drop Shadows and Bevels aren't just for still images anymore. For example, you can animate an object to make it look like it's moving toward the viewer as its shadow moves away.
Create an instance of an object, open the Effect palette, and go to the Shadow And Glow drop-down menu to set the instance's Drop Shadow distance to 0.
(Although you can't see the shadow at this setting, you have to apply an effect to both instances for tweening to work.) Copy the instance onto a new frame and set its Drop Shadow to 73, the final distance.
Select both instances and go to Modify: Symbol: Tween Instances. Enter a number of frames appropriate for the effect you want. The new instances fill in the intermediate distance settings for a moving-shadow effect.
Animate Photoshop Filters
In Fireworks 3, you can apply Photoshop filters as Live Effects and animate them.
Start with a bitmap image. Make it a symbol, and copy an instance of that symbol to a frame. Use Fireworks' Preferences dialog box to point to the Photoshop Plug-ins folder, which adds the plug-ins to Fireworks' Effect panel.
(A few filters, including Lighting Effects and Twirl, don't work in Fireworks and won't appear in the Effect panel.)Choose a Photoshop filter and apply it at a very low setting to the instance of the image. In this example, I've applied the Ink Outlines filter to the image.
Duplicate this instance and change the filter to a higher setting.
Tween the two instances and distribute the intermediary instances to frames.
The resulting animation looks like a photograph changing into a sketch.
Morph Shapes from Vector Objects
In Fireworks 3, it's easy to import blends from Adobe Illustrator or Macromedia FreeHand to simulate shape-tweening animation.
Using a drawing program, create a blend of two different objects. Save the file as an Illustrator 7 or FreeHand 8 file.
Import the artwork into Fireworks and use the Distribute To Frames command in the Frames palette to send each blend step to its own frame.
You can edit objects on multiple frames more easily by selecting Onion Skinning and Multi-Frame Editing from the drop-down menu in the lower-left corner of the Frames palette. Now you can select objects in other frames to add effects such as bevels or shadows.
The end result of this process is an eye-catching animation.
Study Animation History
Start by bumping up the number of undo's in the Fireworks Preferences box.
Next, manually go through each step you want to record. Because you can't include mouse actions in the command, you must use keyboard commands only.
For this example, I duplicated a frame, selected the new frame, selected all, and used the numeric Transform command to scale the object. The History palette records each step.
I then repeated the same steps four times to make a total of six frames. I selected all the steps and clicked on the disk icon in the bottom-right corner of the History palette to name and save the steps as a command.
The command appears in the Commands menu, ready for use in all Fireworks files.