Macromedia products are ever more extensible in the 2004 releases. They make it easier for developers to create custom tools and extension scripts and then package those scripts and interfaces to distribute to their fellow designers and developers. Distribution comes in a few ways; in this article I discuss the use of JavaScript and Flash panels for use in Fireworks and Flash, and briefly cover the use of MXPs, the file format used in the Macromedia Extension Manager tool to allow developers to install extensions.

Although Dreamweaver is arguably more powerful in making use of such panels for coding purposes, Fireworks and Flash are a good pair to compare because one is currently a developer-oriented tool while the other one is designer focused...depending on who you ask, obviously. After reading this article, you'll have two distinct paths through which you can utilize the information.

The reasoning behind creating such tools deserves investigation. First, there are a lot of things developers and designers do that are unique to each company, each process or project, and almost always each developer. Realizing this, Macromedia has opened up the functionality of their products, allowing them to be scripted to be used in different ways, to be extended with custom menus and/or functionality blended with current functionality, and to automate repetitive tasks. Real-world examples include adding a custom tool to be used in the tools palette, adding an auto-color panel that automatically gives you a color scheme with swatches based on your color choice, and batch processing of images with custom settings. These not only allow you to get your job done faster, but also empower you to take matters into your own hands when there is certain functionality you need, or just plain want, that the application doesn't currently provide.

Now that you have your reasons, what tools are available? Most of Macromedia's products support extension through scripting in some way. Fireworks and Flash have a very similar JavaScript API that they expose to allow you to call application features through code. The code is a form of JavaScript and is procedural in nature. You can write functions and variables like you would in ActionScript, but there is really no point to OOP in terms of writing scripts. Because Fireworks has had its scripting engine longer, it comes with more example scripts upon first installation. There are more on Macromedia's site and on the Net; they're called commands and are saved as text files. For Fireworks the file format is .jsf, and for Flash the file format is .jsfl. You can use any text editor for either, but Flash has two advantages: Flash will provide code hints for the Flash JSAPI, and if you install the FWCommandComponents, an MXP found in the Extending Fireworks folder on the Studio MX CD, it'll install the code hints for Fireworks as well. These scripts can be run in a few ways. In Fireworks, you go to the Commands menu and select Run Command. This will open a dialogue and allow you to choose the JSF file to run. In Flash, you select Commands and choose Run Command, and through the same process pick your JSFL file.

If you have commands that you use often you can save them in the Commands folder, and when you reboot your programs they will be available as menu choices in your Commands menu. The Command folder for each respective program is where your Macromedia products are installed. In Fireworks on Windows XP, it's:

C:\Program Files\Macromedia\Fireworks MX 2004\Configuration\Commands

In Flash:

C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Commands

If scripts call each other via the runScript command and you don't provide a file path, as long as they are both in the Commands folder you're good to go. Additionally, placing scripts in here in Fireworks allows you to use them in batch commands (File>Batch), which you can then save as a script. You can see how this gets powerful quickly. Say you're exporting your image with very specific format, color, and matte color information, and you decide to place in a script because you're doing this often for your project. You can then make a batch command in Fireworks once you place said script in the Commands folder, and you can utilize the command you just made to batch a bunch of images using the same command, all in one fell swoop.

Now, that's uber-powerful...but uber-procedural, too. Flash panels provide a GUI to that functionality. By making a Flash movie with some new code, you can have that Flash movie control the IDE as well as call other commands and/or scripts. They appear in a normal Fireworks or Flash window and are accessible in Fireworks via Window> [Name of panel], and in Flash by Windows>Other Panels>[Name of panel]. A great example of this in Fireworks is the Align panel, which comes preinstalled. It is a Flash panel, written in Flash, that utilizes the Fireworks JSAPI to align whatever element on your document you've selected. For those coders who are intimate with auto-shapes and some of the bitmap effects you can do in Fireworks, creating an effects window is another way a Flash panel will allow you to deploy such an extension. Flash examples include the NetConnection Debugger, used for debugging Flash Remoting and Flash Communication Server, and a panel I created, the Key Tool, which shows you the keycode and ascii of the last key clicked. In Fireworks, they can also be used as modal dialogues.

Flash panels are made available by the Window SWF folder. On Windows XP, in Fireworks, it is:

C:\Program Files\Macromedia\Fireworks MX\Configuration\Command Panels

In Flash it is:

C:\Program Files\Macromedia\Flash MX 2004\en\First Run\WindowSWF

Communicating from a Flash SWF to Fireworks or Flash is done via the MMExecute command. This command takes a JSAPI function as a string and runs it:

MMExecute("fl.runScript(\"my command.jsfl\");");

Same for Fireworks:

MMExecute("fw.runScript(\"my command.jsfl\");");

Notice two things. The Flash one utilizes "fl" in front of the command. This is how you write the JSAPI for Flash, while you use "fw" in Fireworks. You can also use "flash" for Flash, but who wants to type all that? The second thing to notice is the escape characters used to put quotes (") in the parameter of the JSAPI function. This can get tedious, but I'll show you how to get around it (no, not single quotes, that doesn't work).

For multiline statements that you deem unnecessary for an external script, you can do:

var str = "";
str += "var doc = fl.getDocumentDOM();";
str += "for(var p in doc){";
str += " fl.trace(p + \": \" + doc[p]);";
str += "}";
MMExecute(str);

However, there is a much better way to write the code. You can do one of two things. When writing Fireworks Flash panels, you can install the FWCommandComponents, which have wrapper methods for just about every Fireworks function, so instead of writing this:

var path = MMExecute("fw.appPatternsDir;");

you can do this:

var path =fwapi.getAppPatternsDir();

I've also written my own wrapper that does the same thing, but has two benefits:

1. It uses one function to deal with the function calls, therefore reducing overhead with all of those predefined functions.
2. You can register for events because Fireworks, not Flash (currently), has the added benefit of generating events if you have a function registered for it in your SWF. The events are detailed in the Extending Fireworks PDF. This helps your Window SWF, in Fireworks anyway, to react to changes in the IDE. For example:

Additionally, you can use the same API for Flash. So instead of:

MMExecute("fl.runScript(\"my command.jsfl\");");

you can do:

flapi.runScript("my command.jsfl");

While developing a Window SWF, it is easiest if you set your Publishing Settings to have the SWF publish straight to the directory from which Fireworks and Flash actually pull the SWF. On Windows XP, in Fireworks, this is:

C:\Documents and Settings\[user]\Application Data\Macromedia\Fireworks MX 2004\Command Panels

In Flash:

C:\Documents and Settings\[user]\Local Settings\Application Data\Macromedia\Flash MX 2004\en\Configuration\WindowSWF

That way, you publish once, reboot Fireworks and/or Flash, and from then on can just close the Flash panel, publish, and then re-open it to test your updates.

Finally, to publish your work for ease of installation, updates, and uninstalling, using an MXP file is the best way to distribute it. MXPs are installer programs that run in Macromedia's Extension Manager. This program should already be installed if you're running any of the MX or MX 2004 products, Studio, or some of the version 4 products, although it never hurts to update your copy. This program allows installation and management of extensions to Macromedia products. Most Macromedia users have no idea they even have the program, but double-clicking the file will open the product if they do have it installed. A user can then uninstall your extension, toggle it on or off, and gleen information about how to use it. The files you want to install as well as where are defined in an MXI file; this file is an XML document that determines that information, and you can learn how to use the tags either by reading the MXI specifications PDF or looking at your currently installed extensions. For example, in Fireworks on Windows XP:

C:\Program Files\Macromedia\Fireworks MX\Configuration\Extensions

The MXI Specifications PDF is available at http://download.macromedia.com/pub/exchange/mxi_file_format.pdf.

You use the Macromedia Extension Manager to package your MXP file, and then you can just distribute your MXP as your installation file.

Conclusion
As you can see, extending Macromedia products with your own functionality and GUI is made easy by the exposed JSAPI of both Fireworks and Flash, as well as the ability to create a GUI utilizing a SWF generated by Flash and have it utilize the JSAPI.