
199
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH
This simple example illustrates an effective workflow for developing Flash panels. You started by creat-
ing 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.
Building a functional UI in Flash
The Draw Rect sample covered just the basics. You saw how to execute JSF from a command panel,
but the panel didn’t provide any enhanced functionality at all. It performed the exact same action as
the Draw Rect.jsf run from the
Commands menu. Let’s build on the Draw Rect sample and create a
functional UI.
The scenario: Update the Draw Rect UI to include left, top, height, width, and cornerRadius
TextBlocks and a ColorPicker component. To support this behavior, we need to update the JSF, con-
verting the inline code into a function that can be called.
In the following JSF code, we’ve created a function named CreateRectangle that accepts all of these
values as parameters:
// Test the CreateRectangle Function
CreateRectangle(10,10,100,50, 10, "#FFCC00");
function CreateRectangle(left, top, width, height, cornerRadius, color)
{
var rect = new Object();
rect.left = left;
rect.top = top;
rect.right = left + width;
rect.bottom = top + height;
fw.getDocumentDOM().addNewRectanglePrimitive(rect, cornerRadius);
fw.getDocumentDOM().setFillColor(color);
}
Draw Rect.jsf updated with the CreateRectangle function
The CreateRectangle function accepts width and height instead of right and bottom parameters.
Thinking in terms of a bounding box is unnatural for most people, so we do the translation from width
and height to right and bottom in the CreateRectangle function. Notice that we have a sample func-
tion call in the preceding listing. Remember, we do as much testing in the JSF via the
Commands menu
as possible to ensure that the JSF is working correctly.
After a couple of run- throughs and corrections (the first time we tested we forgot the
.getDocumentDOM() before setFillColor), we are confident in the function. We will now copy the
function to the TextBlock inside Flash. Figure 11-4 shows the updated TextBlock.
Komentarze do niniejszej Instrukcji