Chapter 11 EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH Adobe Fireworks includes a rich extensibility. model that allows advanced users to create sophisticated custom panels (Flash panels) using a combination of JavaScript and Flash. In fact, many of the panels that ship with Fireworks, including the Align panel and the Path panel, are Flash panels.
Chapter 11 JavaScript: Intermediate to advanced ActionScript 2 or 3: Intermediate to advanced Adobe Flash: Intermediate to advanced Adobe Flex: Optional Foundation terminology The following terms will be used throughout the chapter and should be considered as foundational to the conversation. We’ll go into more detail on these as the chapter progresses, but take a few minutes to absorb these before moving on. Fireworks command: A Fireworks command is similar to a macro in other programs.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH All of these actions that you have performed are core actions (or combinations of actions) that Fireworks supports. And, as we mentioned in the introduction, all of these core actions are exposed by the Fireworks API and are accessible via JavaScript.
Chapter 11 Using the History panel to create a command Not only does the History panel show the recent actions you’ve performed, it lets you save a sequence of those actions as a Fireworks command file. Perform the following actions to create your first Fireworks command: 1. Create a new document. 2. Draw a rectangle on the canvas and change its fill color. 3. Select the steps you just performed in the History panel, and then click the Save icon. 4.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH Where is the command stored? Fireworks commands that are saved from the History panel are stored in your user profile folder. These commands will be available only to you when logged in and not to other users. Commands can be copied to a common location so that they are available to all accounts if you are using a shared machine or if you log in with different accounts.
Chapter 11 Command Panels folder: all users Windows XP: C:\Program Files\Adobe\Fireworks CS4\Configuration\Command Panels Windows Vista: C:\Program Files\Adobe\Fireworks CS4\Configuration\Command Panels Mac OS X: HD:Applications:Adobe Fireworks CS4:Configuration:Command Panels Editing and understanding the JSF Now that you know where commands are stored, browse to the file that you just created, Draw Rect.jsf, and open it using your text editor of choice.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH var cornerRadius = 0; fw.getDocumentDOM().addNewRectanglePrimitive(myRect, cornerRadius); That pretty much covers the details of line 1. A rectangle will be created with the specified bounding box and corner radius. The second line sets the color of the newly created rectangle by calling the setFillColor method.
Chapter 11 Steps 3 and 4: Importing and executing the JSF Flash panels pass JSF to Fireworks via the MMExecute() method in ActionScript. When an exported SWF is run inside Fireworks as a Flash panel, MMExecute() passes the JavaScript directly to Fireworks.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH Figure 11‑3.
Chapter 11 Adding the Mouse.onRelease event handler With all of the pieces in place on the Flash stage, it’s now time to add an event handler to the button’s onRelease event and execute the JSF: 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.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH 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. Building a functional UI in Flash The Draw Rect sample covered just the basics.
Chapter 11 Figure 11‑4. Flash TextBlock housing JSF code It’s now time to update the UI to support the added flexibility provided by the new JSF. Start by creating four instances of the NumericStepper component (available from the Components panel as shown in Figure 11‑5) and name them nsX, nsY, nsWidth, nsHeight, and nsCornerRadius. Figure 11‑5.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH F igure 11‑6 shows the new layout with all of the NumericSteppers in place. We’ve also added labels to make it clear what each control represents and some moderate styling to give this panel a little personality. Figure 11‑6. Updated panel layout in Flash Using a NumericStepper instead of a TextInput component will let us enforce certain value ranges—you don’t want someone entering “thirty” for the width, for example.
Chapter 11 With all of the controls in place, with the exception of the ColorPicker, it’s now time to update the ActionScript event handler for the Add Rectangle button. The ColorPicker will be a little more involved, so we’ll add it in a minute. Return to the executeJSF_btn.onRelease event handler on the actions timeline and update the ActionScript with the following: executeJSF_btn.onRelease = function() { // Execute the JSF, creating the CreateRectangle function MMExecute(jsfCode_txt.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH igure 11‑8. ColorPicker MovieClip added F to the stage With the MovieClip in place on the stage, add an event handler for its onRelease event and call fw.popupColorPickerOverMouse() via MMExecute(). MMExecute() will return a color value in the #RRGGBBAA format that can then be passed to the SetColor method defined on ColorPicker_mc. Following is the ActionScript event handler for ColorPicker_mc.
Chapter 11 In this method, the Flash Drawing API is used to draw a rectangle directly into an empty MovieClip named rectTarget_mc. rectTarget_mc is prepositioned on the stage and serves as the selected color swatch. The third line of ActionScript (rectTarget_mc.beginFill(parseInt("0x" + color.substr(1, 6)), 100);) demonstrates how to convert the color string returned from Fireworks into a hexadecimal value that Flash can use in its beginFill method. This solid color conversion example is an easy one.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH complex projects that include large amounts of JSF. Instead of copying the JSF to a TextBlock, you can export the JSF as a single ActionScript variable defined in an AS file, and then use ActionScript’s #include to import the variable into your project. You then use MMExecute() just as you did with the TextBlock, only this time passing it the variable name defined in the external AS file.
Chapter 11 option on this tab. When enabled, the FDT will watch for file changes and automatically perform the conversion in the background. When you step back to Flash, you don’t have to remember to click convert in the FDT. Figure 11‑9. FDT ActionScript conversion Following is the original CreateRectangle function introduced earlier in the chapter, housed in Draw Rect.jsf: function CreateRectangle(left, top, width, height, cornerRadius, color) { var rect = new Object(); rect.left = left; rect.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH + " rect.left = left;\n" + " rect.top = top;\n" + " rect.right = left + width;\n" + " rect.bottom = top + height;\n" + " \n" + " fw.getDocumentDOM().addNewRectanglePrimitive(rect, ➥ cornerRadius);\n" + " fw.getDocumentDOM().
Chapter 11 By default, Flash SWFs scale when resized—not the behavior expected by users. Go ahead and try resizing the Draw Rect panel you just created. All of the elements should scale in size, as if you had zoomed in on the stage in Flash. Scaling can easily be prevented by adding the following ActionScript to Frame 1 of the Actions layer in the movie’s main timeline: Stage.scaleMode = "noScale"; Stage.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH // TODO: Manually update positions of all other elements on stage } Updating the position of the single button was not that bad—it just took a couple of lines of ActionScript. However, that’s just for the single button on the stage. We really want the header and background artwork to stretch as the panel is resized. For panels with more UI elements, our resize desires will grow in complexity.
Chapter 11 The AlignmentManager can manage only objects that are MovieClips, so the header artwork has been converted to a MovieClip and given an instance name of headerBackground_mc. With the headerBackground_mc item selected in the MovieClip tree, you can specify values for HorizontalAlignment, VerticalAlignment, and Margins. After making changes, you have to click the save changes button (an admitted quirk of the panel).
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH function onFwActiveSelectionChange() { MMExecute("alert('Selection Changed!');"); // Do something with the selected object, like retrieve its color // var currentColor:String; // currentColor = MMExecute("fw.selection[0].pathAttributes➥ .fillColor"); } This function needs to be defined at the _global level, meaning you should define these event handlers either on the Actions layer or in an #include ActionScript file.
Chapter 11 In this section, we’ll first show you how to use ActionScript 3 in Flash to author custom panels, and then introduce you to Flex panel authoring. Creating ActionScript 3 panels in Flash The concepts we’ve covered so far are all still valid when creating ActionScript 3–based panels. There are just a few things that we have to do differently to ensure communication between the SWF and Fireworks. When authoring ActionScript 3 panels, start by specifying a document class for the FLA.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH ActionScript 3 still supports the concept of “including” external files, only you don’t need to include the # symbol. So, the first thing we do is update the include statement: // Import External JSF include "jsf/jsfCode.as" The rest of the code will be moved to the new Draw Rect.as file and will need to be modified slightly. Start by defining the package and DrawRect class: package { import import import import import flash.
Chapter 11 The changes here are minor and no different than any ActionScript 2 to ActionScript 3 migration. With the event handlers in place and assigned, this FLA can be published and executed in Fireworks. The functionality should be equivalent between the two. Note that MMExecute(jsfCode) has remained the same. Since ActionScript 3 supports the include statement, our workflow has remained relatively unchanged.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH // onFwActiveSelectionChange Event Handler // Get the color of the currently selected object // (only works for solid fills) function onFwActiveSelectionChange() { currentColor = MMExecute("fw.selection[0].pathAttributes.fillColor"); colorPicker_mc.SetColor(currentColor); } The first event that we are handling is IsFwCallbackInstalled.
Chapter 11 Notice that we are handling both the initialize event and the creationComplete event. The init() method specified as the event handler for initialize registers all of the Fireworks event handlers that were previously handled in the DrawRect constructor of the Flash ActionScript 3 project. We can still use the include statement to read in JSF code. We’ve done this on the first line in the section: include "jsf/jsfCode.as".
Figure 11‑14.
Chapter 11 And, just like setting the publish path in Flash, we always set the Flex build path of the active project to the Fireworks Command Panels folder for fast testing. You can change the Flex build path by right-clicking the project in the Flex Navigator panel in Flex Builder and selecting Properties. From the resulting dialog, shown in Figure 11‑15, select the Flex Build Path category on the left, and then change the Output folder field on the right to match the path of your Command Panels folder.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH Packaging and deploying your panel Throughout this chapter, we’ve been working with exported SWF files. To add a custom panel to Fireworks, we just copied the SWF to the correct folder, restarted Fireworks, and then accessed the panel from the Window menu.
Chapter 11 Figure 11‑16. Saving an extension in the Adobe Extension Manager Now that you have an MXP file, you can either double-click the file to launch the Extension Manager or select File ➤ Install Extension from the Extension Manager main menu. Once installed, your panel will appear in the list of installed extensions as shown in F igure 11‑17. Figure 11‑17.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH Learning the Fireworks object model This chapter has primarily concerned itself with defining an effective workflow for developing Fireworks panels. We’ve shown you how to do this in both ActionScript 2 and 3, using both Flash and Flex. Along the way, we’ve used certain Fireworks methods and handled Fireworks events that you probably didn’t even know existed. You may have wondered how we knew that calling fw.
Chapter 11 igure 11‑18. Using the FWAPI_Inspector panel to browse F the Fireworks DOM You can download the panel and its source file at Aaron’s Fireworks web site: http://fireworks. abeall.com/extensions/panels. Aaron has a number of great Fireworks commands and command panels available for download and just happens to be the author of the Path panel that ships with Fireworks.
EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH Summary We’ve covered a lot in just one chapter! You should now have a solid understanding of what it takes to create and deploy Fireworks panels. We’ve tried to give you a big-picture understanding of all the moving pieces in this exciting world of extension development. It’s now up to you to dig into the documentation and really learn the Fireworks API.
