Fireworks' New Moves

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.

Automatic Animation

With Fireworks 3, you can speed up the animation process by automating steps with JavaScript commands. There are two ways to create these commands. The first is to use Fireworks' History panel to record your actions and then save them as a command. This method has a limitation: if you want to repeat a command several times, you must manually record each repetition in the original history.

Fortunately, if you're not afraid of a little JavaScript programming, you can whip up a command without having to add every frame and go through each action manually. Several commands ship with Fireworks (just look in the program's Commands folder), and you can modify these in a word processor. Say you open the command that adds 12 frames and rotates an object 30 degrees. The phrase // Add frames for the animation var kNumFrames = 12; in the command tells the application to add 12 frames to the animation. To add a different number of frames, simply change the number. The phrase var angle = 30; controls the size of the rotation. Change the 30 to, say, 10, and you set the rotation to 10-degree increments.

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.

You may not have to dip into JavaScript at all. Many people create commands and post them for others to use. Check out Massimo Foti's and Kleanthis E's for a bevy of prewritten commands.

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

You don't need to know JavaScript to create your own animation commands in Fireworks 3. Its History palette lets you record and play back actions.

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.

Join the newsletter!


Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

Error: Please check your email address.

More about Adobe SystemsFireworksINSMacromediaSeybold

Show Comments