The Digital Dish: From Fireworks to Flash and Back

I’m always surprised by how many dedicated Flashers (those working with Macromedia Flash, not the ones hanging around dark alleys) use bitmap-editing tools rather than Macromedia Fireworks. Not since Martin and Lewis has there been a better combination than MacromediaFireworks and Flash.

The division of labor is nicely handled — Fireworks takes care of the bitmap images while Flash handles the vector graphics and animation controls. You can easily import native Fireworks files. However, there are some special round-trip editing techniques that make the duo a perfect match. Note that I used Flash MX in these demos, but as Fireworks MX isn’t yet available, this is Fireworks 4. But these techniques should apply to the new software as well.

Starting in Fireworks
One of the reasons I particularly like working in Fireworks is the ability to edit filter effects after they have been applied. This means that once you apply a blur, sharpen, or third-party filter you can go back later and change the settings for the effect. For instance, start by applying Motion Trail (my favorite!) from the three Eye Candy filters that are included with Fireworks 4. You simply select the bitmap image, and choose Motion Trail from the Effects palette (see figure 1). The Motion Trail effect is applied to the image as a live effect (we’ll go back and edit it later, just be patient).

Figure 1: When you apply the Motion Trail effect to a bitmap image in Fireworks, the effect appears in the Effects panel. Click the checkmark to display or hide the effect: click the blue information icon to change the effect’s settings.

Notice that the bitmap image is over a transparent background. The transparency in the Motion Trail filter is visible in the background of the Fireworks file. The Fireworks file should now be saved as the native Fireworks PNG file. This is a special type of PNG file that provides full transparency as well as holding all the information about the Fireworks elements such as text blocks, vector shapes, styles, and effects.

Moving Over to Flash
Over on the Flash side of things, you use the Import command to bring the native Fireworks PNG file into Flash. When you click Import, you will be confronted with a dialog box asking you how you want to handle the PNG file (see figure 2).

Figure 2: The Fireworks PNG Import Settings dialog box lets you control how files are imported into Flash. Check the Flatten Image option.

The correct choice, Flatten Image, is the least obvious. Flatten image in most other contexts means you lose any transparency applied to the file — exactly what we don’t want to happen. However, Flatten Image in Flash doesn’t apply to the transparency of the file. What it does is merge all the various Fireworks elements into a single bitmap image while maintaining all its transparency and effects. In our example here, the clock appears in Flash as a bitmap object with the effect in place and the transparency active. It also appears in the Flash Library as a bitmap object (see figure 3).

Figure 3: A Fireworks PNG image appears in the Flash Library panel as a bitmap object indicated by the green icon. Notice the name of the file is the same as the original Fireworks PNG.

In case you were wondering, the other import option, Import Editable Objects, brings each one of the Fireworks objects in as an individual Flash elements. Fireworks shapes are converted into Flash vector objects. Text can be imported as text. Bitmap images are imported. The problem is that all effects and live filters are discarded and the bitmap images lose any transparency.

Working with Bitmap Objects in Flash
While you can break apart and manipulate bitmap objects in Flash, we are more interested in keeping the imported Fireworks image intact. We want to create a motion tween so that the image moves across the screen like any other Flash element. However, the bitmap object, itself, cannot be animated. Only Flash symbols can be made part of a motion tween. To use the bitmap as a a symbol, choose Insert > New Symbol. The Symbol Properties dialog box appears. Name the symbol and choose either Movie Clip or Graphic. (The differences between using a graphic or movie clip symbol are not important to this exercise.) The symbol window appears as a tab in the document window. Drag the bitmap object from the Library panel into the symbol window (see figure 4). Click back on the scene tab to continue working on the document.

Figure 4: Drag a bitmap object from the Library panel to use it as the image in a graphic symbol or movie clip.

Round-trip Editing from Flash to Fireworks and Back
With the bitmap object defined as a symbol, you can easily use it in any sort of motion tween. However, the real benefit of using Fireworks comes if you need to edit the bitmap object. Let’s say we want to change the appearance of the Motion Trail effect so that instead of the trail covering the face of the clock, the trail appears behind the clock. (Remember, this is possible because effects in Fireworks remain editable even after they are applied.) Go to the Library panel and Right-click (Windows) or Control-click (Macintosh) the name of the bitmap object. A context sensitive menu appears which contains the command to Edit in Fireworks (see figure 5).

Figure 5: Use the context sensitive menu in the Library panel to edit the imported Fireworks PNG.

When you choose the command to edit the bitmap object, Fireworks is automatically launched and the original PNG file is opened. Notice, though, that you are in a special session of Fireworks. Instead of the ordinary Fireworks window, the Editing from Flash icons appear at the top of the window. Make whatever changes you want to the image. Then click the Done button. This returns you back to Flash where the bitmap object as well as the graphic symbol are automatically updated.

Figure 6: The Editing from Flash icons and label indicate you are editing a bitmap object that has been inserted in a Flash document.

The round-trip editing makes it easy to use Fireworks as a back-door bitmap editor for Flash. And as you can see below, all the transparency and effects are maintained in the finished SWF animation.