The Studio MX 2004 Workflow

One of the key issues you confront when working with the Studio is choosing which tool is best suited for the job. For example, in the above exercise, you created a button in Fireworks and attached a link to it. You can then export the button and its HTML into Dreamweaver. The question, therefore, is, "Is Fireworks the tool for the job?"

When asked this question, we have a standard reply: "No one cares how you did it. They just care that you did it." The average client is more concerned with the functionality of the button than the application used to create the button.

When you start looking at the Studio not as individual applications but as being the "sum of its parts," the workflow process takes on a whole new dimension. For example, button artwork can be created in Freehand MX and imported into Fireworks MX 2004, and the button behaviors can be assigned in Dreamweaver MX 2004. In this model, the strengths of each application are brought to bear on the task at hand.


The integration between the applications doesn't always mean work must flow into or between open applications. New to the Dreamweaver MX 2004 Property Inspector is a series of Fireworks MX 2004 tools in the Edit area of the Property Inspector. For example, select an image on the Dreamweaver page and click the Crop tool. After you read the dialog box and click OK, the bounding box around the selected image is actually placed there by Fireworks. You then crop the image in Dreamweaver using the Crop tool from Fireworks.

If Flash MX 2004 is the ultimate destination, the flow would be Freehand MX to Flash MX 2004 to Dreamweaver MX 2004. One aspect of the Flash workflow that is traditionally overlooked by Flash developers is the use of Fireworks MX 2004 as the Flash MX 2004 imaging application. Here's how that works:

  1. Open a new Fireworks MX 2004 document that is 300 pixels wide by 300 pixels high. Set the Canvas Color to Transparent.

  2. Select the Text tool, click once on the canvas, and enter your name. If it is longer than the canvas, use the word "Cat" or any other three-letter word. Set the point size to 60 points.

  3. Select the image, and with the Alt/Option key pressed, drag a copy of your name to another location on the canvas.

  4. With the copy selected, select Effects, Blur, Motion Blur in the Property Inspector. The Motion Blur is a new Live Effect added to this release of Fireworks. When the Motion Blur dialog box opens, set the Angle to 340 and the Distance to 22. Click OK, and your name looks like it is in motion. Move the blurred copy behind the original, deselect both images, and click the Fit Canvas button on the Property Inspector. Your name should resemble the one shown in Figure 6.10.

    Figure 6.10. A Fireworks MX 2004 image is prepared for use in Flash MX 2004. Note the transparent background.


  5. Save the image as a .png image and quit Fireworks.


The Fit Canvas button is a godsend for Flash developers. Flash was never developed to efficiently process bitmaps. Thus, the ability to trim out all the extra "weight" added by the unused portions of the canvas makes the images even more efficient.

Fireworks MX 2004 to Flash MX 2004

By saving the Fireworks MX 2004 file in its native PNG format, you are able to preserve the transparency as well as maintain all the information necessary to subsequently edit the image in Fireworks. This includes such elements as the font used for your name and the Motion Blur Effect.

  1. Open Flash MX 2004 and select File, Import. Import to Stage, Control-R (PC) or Command-R (Mac). When the Import dialog box opens, navigate to the folder containing the Fireworks file you have just created, select the file, and click Open. This will open the Fireworks PNG Import Settings dialog box shown in Figure 6.11. Ignore all the settings and select Import as a single flattened bitmap. Click OK. Your image will appear on the Flash stage and in the Flash Symbol Library.

    Figure 6.11. To import a Fireworks .png image, simply click the flatten option at the bottom of the dialogue box.



    Clicking Import as a single flattened bitmap in the PNG Import dialog box doesn't make sense. One would think that selecting it would flatten the image and discard all transparency. Not quite. It actually merges your name and the Motion Blur Live Effect into a single bitmap while maintaining the transparency.

  2. Another little-known feature is the capability to actually edit the image in Fireworks from Flash. Let's assume the Motion Blur travels in the wrong direction. Open the Library and either right-click (PC) or Control-click (Mac) the Library item. This opens the Context menu shown in Figure 6.12. Select Edit with Fireworks. Another way of doing this is to simply select the item on the Flash stage and click the Edit button in the Property Inspector. Both techniques will launch Fireworks.

    Figure 6.12. Selecting the item in the Flash Library and opening its Context Menu enables round-trip editing between Flash and Fireworks. Selecting the item on the Flash stage and clicking Edit in the Flash Property Inspector has the same effect.


  3. When Fireworks MX 2004 launches, you will see "Editing from Flash" at the top of the document window. Open the Motion Blur properties and change the angle to 137 as shown in Figure 6.13. Click OK.

    Figure 6.13. When the changes are made to the .png file in Fireworks, click the Done button in the Document window, and the change will automatically be reflected in the Flash document.


  4. If the blur goes off the canvas, click the Fit Canvas button on the Fireworks Property Inspector. If you are satisfied, click the Done button at the top of the document window. This will automatically save the change to the .png document, quit Fireworks, and open the Flash document. When the Flash document opens, you will see the change reflected in the object on the Flash stage and in the symbol in the Library.