Developing an effective Fireworks workflow

Creating a Flash UI

Now that you know the JavaScript works within Fireworks, you can create a command panel in the Flash authoring environment that executes the same JSF code you just created in Fireworks.

It's a good practice to determine that the JSF works in Fireworks before trying to execute it from within Flash; otherwise, when a problem occurs, you won't know whether the source of the error is the JSF itself or an error with your Flash panel. If you had hand-coded instead of saving directly from the History panel, for instance, you would have been able to identify problems with the code immediately.

Creating a document and adding a button

Start by creating a new Flash document. Set the document width to 250px and the height to 300px. Add a Button component to the Stage and give it an instance name of executeJSF_btn. Set its Label property to Execute JSF.

Importing and executing JSF

Flash panels execute JavaScript via the MMExecute() command in ActionScript. When an exported SWF is run inside Fireworks as a Flash panel, MMExecute() passes the JavaScript directly to Fireworks. Fireworks executes the JavaScript and returns the resulting value to Flash (if any):

var result = MMExecute(jsfCode);

The JavaScript passed to MMExecute() is passed as a string, which means you must escape quotation marks and potentially double-escape text that has already been escaped in JavaScript strings. That sounds more confusing than it actually is. The example below executes the setFillColor() line of code in Flash using MMExecute():

MMExecute("fw.getDocumentDOM().setFillColor(\"#99cc33\");");

Notice that the entire string is wrapped with quotation marks and the inner quotes surrounding #99cc33 have been escaped: \"#99cc33\". For single lines of JavaScript, this method of execution works well. As your JavaScript grows in complexity, however, escaping large sequences of code becomes laborious and introduces the potential for error.

Save yourself a headache by creating a new TextField on the Stage. Change its text type to Dynamic Text and give it an instance name of jsfCode_txt (see Figure 2).

Figure 2. Copying JavaScript to a TextField in Flash

Move this TextField off the Stage so that it is not visible at runtime, and then copy and paste the contents of the Draw Rect command directly into this TextField. The Fireworks JavaScript is now available to you directly within the Flash document; you don't have to worry about escaping quotes or other characters.

Adding the onRelease event handler

Now add the necessary ActionScript to execute the Fireworks JavaScript when executeJSF_btn is clicked:

1. Create a new layer in the Timeline.
2. Change the layer name to actions.
3. Lock the layer.

4. Open the Actions panel and add the following code to frame 1 of the Actions layer:

   executeJSF_btn.onRelease = function() {
       MMExecute(jsfCode_txt.text);
   }
   

Publishing and testing the SWF

In order to test your new Command panel, export the Flash file as a SWF to your Fireworks "Command Panels" folder (location mentioned in the earlier section, "Creating a Simple Command"). Export your current file as Draw Rect.swf. Because this is the first time you are exporting the file, you will have to restart Fireworks in order to see the new Command panel in the Window menu of Fireworks. For subsequent exports, you can just close the panel in Fireworks and reopen it to see your latest version.

Once you've restarted Fireworks, open the new panel from the main menu: Window > Draw Rect. You should now see your Execute JSF button in a new panel. With a new or existing document open, click the button. A new rectangle should appear on the Stage, just as it does when you select Draw Rect from the Commands menu.

Congratulations! You've now created your first custom Flash panel for Fireworks!

Tip: Change the output path for your SWF file in File > Publish Settings to the Command Panels folder. Use Alt+F+B to quickly publish, all from the comfort of your keyboard.

This simple example illustrates an effective workflow for developing Flash panels. You started by creating a JSF command and testing that command within Fireworks. When you knew it was performing as expected, you copied the JSF into a Flash TextField. You then added code to execute the JSF when a button was clicked within Flash.

Now that we've covered the basics, let's dig a little deeper into the process and look at ways you can refine and enhance your workflow.

Page 3 of 5

Previous Page

Next Page