Fireworks

Example 2: The Mirror Panel
The Mirror Panel (see Figure 9) allows you to duplicate a selection in Fireworks by creating a mirrored copy of it. It consists of four buttons which lets the user mirror a selected object above, to the right, below, or to the left of its original location.

Before opening the Mirror panel source file in Flash, you should first develop some working Fireworks JavaScript that will perform the mirror action, thereby avoiding any additional complications introduced by Flash. For this example, I presume that you have installed the Command Prompt extension and are using it to test the script. If you do not, you can write your script in Dreamweaver and run it by choosing Commands > Run Script from within Fireworks.

Creating the Code for the Panel
Instead of attempting to figure out how to code a mirror from scratch, let Fireworks do much of the hard work for you by manually mirroring an object yourself and then copying the code found in the History panel:

• Open a new Fireworks document.
• Create or import a small test object to mirror. If you create your own, try not to make it symmetrical or you might not be able to tell if you correctly mirrored it.
• Hold down the Alt key in Windows (Option key on the Mac) and then drag your test object to create a copy to the right of the original.
• With the copy selected, choose Modify > Transform > Flip horizontal to flip it.
• A mirror of the original object has now been created. To see how it happened in terms of Fireworks JavaScript, take the relevant code from the History panel.
• Open the History panel (see Figure 10).
• Select the steps that involve mirroring your test object.
• Copy the steps using the Copy icon.
• Open the Command Prompt panel by selecting Window > Command Prompt (see Figure 11).
• Paste the History steps from the Clipboard to the Command Prompt editor.

You now have the steps required to mirror your test object. To see if they work, delete your test object, reselect the original, and run the steps in the Command Prompt using the Execute button. If you copied the steps correctly, your mirrored object should return just as it was before you deleted it.

Adding Variability to the Code
There still remains a small problem with the script as it exists in this form. The problem is that the position of the copy is currently hard-coded - based on where you dragged the copy when using your test object. Ideally the mirror script should work for any object of any size, and place the mirrored copy flush against the edge of the original. To make this happen, the script needs to be edited a little to take in account a dynamic offset based on the selection's width.

Assuming that one object is selected, you can get the selection's width using fw.selection[0].width where fw.selection[0] represents the first object in the current document's selection. Moving the copy by a distance of the selection's width will place it right next to the original (see Figure 12).

With that in mind, edit the script so it looks like the following:

fw.getDocumentDOM().moveSelectionBy(
{x:fw.selection[0].width, y:0}, true, false);
fw.getDocumentDOM().reflectSelection
(true, false, "autoTrimImages transformAttributes");

That takes care of mirroring an object to the right, but this panel should also mirror it to the left, top, and bottom as well. Referencing the script above, you can make versions for each direction.

Left:
fw.getDocumentDOM().moveSelectionBy(
{x:-fw.selection[0].width, y:0}, true, false);
fw.getDocumentDOM().reflectSelection
(true, false, "autoTrimImages transformAttributes");
Top:
fw.getDocumentDOM().moveSelectionBy(
{x:0, y:-fw.selection[0].height}, true, false);
fw.getDocumentDOM().reflectSelection
(false, true, "autoTrimImages transformAttributes");
Bottom:
fw.getDocumentDOM().moveSelectionBy(
{x:0, y:fw.selection[0].height}, true, false);
fw.getDocumentDOM().reflectSelection
(false, true, "autoTrimImages transformAttributes");

After making sure the scripts work, save them and move on to Flash:

• Open Mirror Template in Flash. It should consist of the interface used for the Mirror panel. You can find it at Source Files/Templates/Mirror.fla.
• Invoke the publish settings by choosing File > Publish Settings.
• In the Formats tab, select Flash as the only format and set the publish destination to be your Configuration/Command Panels folder in your Fireworks installation folder.
• Publish your SWF.
• Restart Fireworks.

You have now established the Mirror panel in the Fireworks interface. You should be able to open it in Fireworks using Window > Mirror. It won't do anything at this point, but you at least have your foot in the door. To test your updates to the panel, simply close and reopen the panel window. The SWF will be updated with the last SWF you published.

Adding ActionScript to the Code
With all the groundwork set and the panel interface complete, you can start adding ActionScript. Like the Create Ellipse example earlier, the ActionScript for the Mirror panel is pretty basic. You're only dealing with button actions and using MMExecute to send Fireworks JavaScript commands to Fireworks within them.

Given that there are four buttons, it would be best if the ActionScript was added to the Timeline (as opposed to directly on the buttons - something I did for the Create Ellipse panel for the sake of simplicity and convenience). In each button's onRelease event handler, you can use MMExecute to relay the Fireworks JavaScript commands to Fireworks. With the current scripts, however, you're now dealing with two lines of code instead of the one seen in Create Ellipse. That's no problem. Each line can go in its own MMExecute function.

• In Flash, select the ActionScript frame on the main Timeline.
• Add the following script defining onRelease event handlers to each button: Notice that a single quote ( ' ) was used to define the Fireworks JavaScript string sent into MMExecute. This is to prevent conflicts with the double quotes ( " ) used in reflectSelection for "autoTrimImages transformAttributes". You could have also escaped the double quotes within the script using \". Using single quotes is often easier, however.

right_btn.onRelease = function(){
MMExecute('fw.getDocumentDOM().moveSelectionBy(
{x:fw.selection[0].width, y:0}, true, false);');
MMExecute('fw.getDocumentDOM().reflectSelection(true, false, "autoTrimImages
transformAttributes");'); } left_btn.onRelease = function(){
MMExecute('fw.getDocumentDOM().moveSelectionBy({x:-fw.selection[0].width,
y:0}, true, false);');
MMExecute('fw.getDocumentDOM().reflectSelection
(true, false, "autoTrimImages transformAttributes");'); }

top_btn.onRelease = function(){
MMExecute('fw.getDocumentDOM().moveSelectionBy(
{x:0, y:-fw.selection[0].height}, true, false);');
MMExecute('fw.getDocumentDOM().reflectSelection
(false, true, "autoTrimImages transformAttributes");'); }

bottom_btn.onRelease = function(){
MMExecute('fw.getDocumentDOM().moveSelectionBy(
{x:0, y:fw.selection[0].height}, true, false);');
MMExecute('fw.getDocumentDOM().reflectSelection
(false, true, "autoTrimImages transformAttributes");'); }

• Publish the SWF.
• Close and reopen the Mirror panel in Fireworks.
• Test it.

With any luck, you should have a fully functional Mirror panel in Fireworks.

Debugging the Mirror Panel
Though functionally the panel works fine, you may notice a small flaw if you pay close attention to it. Watch the History panel as you use the Mirror panel; you will see that each time an object is mirrored, two history steps are created instead of one. This is because MMExecute is used twice each time a button in the Mirror panel is clicked. To keep History steps as condensed as possible, it would be best to reduce this to one.