This new script combines each set of MMExecute commands into one. Replace it in Flash, republish, and retest:

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

Now using the Mirror panel should result in only one History step.

With everything complete and working properly, there is one more concern that you may want to address: code reuse. Mirroring an object in Fireworks is a potentially useful action. If you should ever want to perform this action again, it would be helpful to have an easily reusable snippet of code that would let you do so. At this point, the code is pretty divided, having different implementations between four different buttons. Using a single function to represent a mirror in any direction would be useful and reusable. Such a function may look like the following:

function mirror(horiz, vert){
    var dom = fw.getDocumentDOM();
    dom.moveSelectionBy({x:horiz*fw.selection[0].width,
    y:vert*fw.selection[0].height}, true, false);
    dom.reflectSelection(Boolean(horiz), Boolean(vert), "autoTrimImages
    transformAttributes"); }

Where horiz and vert represent directions of mirroring. Passing the value (­1, 0) to the mirror function mirrors to the left. Using (0, 1) mirrors to the bottom. Implemented in the Mirror panel, it looks like this:

var mirror = 'function mirror(horiz, vert){'
    + ' var dom = fw.getDocumentDOM();'
    + ' dom.moveSelectionBy({x:horiz*fw.selection[0].width,
    y:vert*fw.selection[0].height}, true, false);'
    + ' dom.reflectSelection(Boolean(horiz), Boolean(vert), "autoTrimImages
    transformAttributes");'
    + '}';
right_btn.onRelease = function(){
    MMExecute(mirror);
    MMExecute('mirror(1, 0);');
}
left_btn.onRelease = function(){
    MMExecute(mirror);
    MMExecute('mirror(-1, 0);');
}
top_btn.onRelease = function(){
    MMExecute(mirror);
    MMExecute('mirror(0, -1);');
}
bottom_btn.onRelease = function(){
    MMExecute(mirror);
    MMExecute('mirror(0, 1);');
}

You may notice that this script is back to using MMExecute twice again. It won't, however, create two steps in the History panel as the original version using two MMExecute commands for each mirror did. This is because Fireworks registers History steps from JavaScript commands only if there was some reaction made as a result of the executed command. Defining a function causes no such reaction so no History step is recorded. Actually, calling the function does cause the history to be recorded, so only the second call to MMExecute will result in a history step.

Where to Go from Here
The two panels I discussed in this tutorial provided very basic examples of custom panels in Fireworks. A lot of focus was directed towards workflow and debugging, helping you prepare for when you decide to develop more complicated panels.

In Creating Fireworks Panels ­ Part 2: Advanced Custom Panel Development, I cover a more complex example dealing with the advanced capabilities of custom panels in Fireworks. You will see how you can use the return result of MMExecute to dictate actions in Flash as well as learn how to create some more advanced interfaces for panels using some new features available in Studio 8.

Part 2 to this article can be found at www.macromedia.com/devnet.