When it comes to designing and optimizing web graphics, it doesn't get much better than Macromedia Fireworks - given its available tools and workflow. However, Fireworks is not necessarily limited to the tools that come with it in the default installation. You can modify the interface to include new, custom panels that unlock hidden functionality, introduce new functionality, or simply improve your workflow.

As a developer and designer, I find such extensions to the Fireworks interface invaluable in helping me quickly and easily obtain my graphics goal. In Part 1 of this tutorial, I will show you how you too can make your own custom panels for Fireworks using Macromedia Flash. Not only will I show you how they are made but I will also cover workflow tips for making panels and techniques to help you successfully debug them.

Understanding SWF Panel Interactions
Custom panels in Fireworks are made with Flash. They consist simply of a Flash SWF file, which Fireworks plays using an internal Flash player embedded within a panel window that looks and operates like any other panel that's native to the application. The SWF provides the panel with its own interface and a means for interacting with Fireworks using ActionScript. If you've ever used the Align panel in Fireworks (see Figure 1), you've seen a custom SWF panel at work.

A custom panel window is capable of receiving commands from the SWF it's playing through ActionScript. One ActionScript command in particular instructs the window to relay information - or, more specifically, a JavaScript command - from the SWF to the main Fireworks application. This command is the MMExecute() command:

MMExecute( JavaScriptCommand:String ) : String;

MMExecute has one parameter, a string representing a Fireworks JavaScript command that is to be sent to Fireworks. When Fireworks receives this command (see Figure 2), it runs it just as though it were on the Commands menu. When the command has completed, MMExecute also returns any result of that command back to Flash in the form of a string. This allows the SWF to react to any command sent by MMExecute if needed.

In its simplest form, MMExecute is about all you need to create a simple panel and use it to interact with Fireworks. You can see how simple it is with the first example, the Create Ellipse panel.

Example 1: The Create Ellipse Panel
This example represents your basic first panel example, similar to "Hello World" examples you might encounter when learning programming languages. Because Fireworks is a graphics editing program and not a new programming language, I will use an ellipse in place of "Hello World."

The Create Ellipse panel creates an ellipse in the current Fireworks document. The panel interface consists of a single button that, when clicked, creates the ellipse. As you might have guessed, MMExecute is used to instruct Fireworks to draw the ellipse when the button is clicked. The code for actually creating the ellipse can be written by hand if you are familiar enough with Fireworks JavaScript programming. But it's easier to extract it from the History panel after you first draw one yourself in Fireworks.

The History panel in Fireworks is much like the history panels in other applications that record your every action, step by step, within the program. In Fireworks, however - as well as other Studio applications such as Flash and Dreamweaver - the History panel records not only your steps but also the JavaScript command(s) used to generate those steps. You can therefore copy the JavaScript associated with any step(s) in your history to the Clipboard and reuse it elsewhere, such as in your custom commands or, as you will see in this example, custom panels.

Creating the Code for the Panel
Here is the procedure to get the code you need to create this panel:

• Open a new Fireworks 8 document. Within it, draw an ellipse that you would like Create Ellipse to generate for you.
• In the History panel, find the Ellipse command (see Figure 3), select it, and use the Copy icon to copy the script to the Clipboard.
• Launch Flash 8 and open the Create Ellipse template.
• Source Files/Templates/Create Ellipse.fla
• It should consist of a Button component with the label "Create Ellipse."
• In Flash, select the Create Ellipse button and open the Actions panel, adding the following script:

on(click){
MMExecute("");
}

In the quote string in the MMExecute call, paste the Fireworks JavaScript command you copied from the History panel in Fireworks (see Figure 4). You should have something that looks like the following:

on(click){
MMExecute("fw.getDocumentDOM().addNewOval
({left:6, top:5, right:98, bottom:61});"); }

Publish your movie to create the SWF. You now have a SWF containing a button that, when clicked, uses MMExecute to send a command to the Macromedia application running the SWF. Ideally this should be Fireworks but simply publishing the SWF does not make Fireworks recognize it as a panel.

Making Fireworks Recognize the SWF
Fireworks recognizes custom panels by scanning for SWF files located in the Configuration/Command Panels folder within the Fireworks installation folder whenever the application launches. Each SWF located there is interpreted as a panel and is listed along with those available in the Windows menu. The name given to the panel in Fireworks is simply the SWF's filename, not including the extension. For your Create Ellipse SWF to be recognized as a panel, you must put it in the Command Panels folder:

• Locate your Create Ellipse panel's SWF. If you are using the default publish settings for your Create Ellipse Flash document, it should reside in the same folder as the FLA itself.
• Find the Configuration/Command Panels folder in your Fireworks 8 installation folder.
• Place a copy of your published Create Ellipse.swf file in the folder:
• (Windows) C:\Program Files\Macromedia\Fireworks 8\Configuration\Command Panels (Mac OS) Macintosh Hard Drive:Applications:Macromedia:Fireworks 8:Configuration:Command Panels
• Restart Fireworks.
• Open the Windows menu and select Create Ellipse.
• You should now see Create Ellipse.swf within the Fireworks interface as a panel.
• Create a new Fireworks document.
• Click the Create Ellipse button (see Figure 5).

You should see a new ellipse created in your Fireworks document. Its size and shape should match exactly the one you created previously in Fireworks in order to get the command code from the History panel.

Workflow Tips for Fireworks JavaScript
The Create Ellipse panel was pretty straightforward. As you begin to make more complex panels, however, it will become important to develop a process that makes creating and testing your panels as painless as possible. This is important because you're not only dealing with two applications but also two programming languages that must interact to make your custom panels work. Developing a good workflow can help make the process run smoothly.

Test Fireworks Scripts in Fireworks First
Although custom Fireworks panels use Flash SWF files to operate, the real functionality of the panel lies within the Fireworks JavaScript code that MMExecute sends to Fireworks from the SWF. When you decide to make a panel, it is often a good idea to start by creating Fireworks JavaScript scripts separately and testing them directly within Fireworks without a panel interface. That way, when you start working in Flash, you can at least know that you are working with functional Fireworks commands.

Dreamweaver 8 happens to be a great editor for creating and testing Fireworks JavaScript files. Although Dreamweaver 8 supports Fireworks JavaScript files, it does not inherently treat them like other JavaScript (.js) files. Included with this tutorial's source files is an extension which allows Dreamweaver to recognize JSF files as normal JavaScript files, providing code coloring and code hints:

• Open DW_JSFSupport.mxp with the Macromedia Extension Manager.
• Restart Dreamweaver.

Also included with the source files is another extension, a Command Prompt panel (see Figure 6) for Fireworks. This custom panel provides a very simple text editor for writing and executing Fireworks JavaScript from directly within Fireworks.

Here's how you install the Command Prompt extension:

• Open FW_CommandPrompt.mxp with the Macromedia Extension Manager.
• Restart Fireworks.
• Access the Command Prompt panel from the Window menu in Fireworks.

Use the Fireworks History Panel to Help
As you saw when creating the Create Ellipse panel, having access to the commands created by Fireworks through its History panel is a great time-saver. Use it whenever you can to create commands quickly for your scripts rather than typing them by hand. You may even be able to learn something new by looking at the code generated by the History panel.