Fireworks CS3 : Creating Flex Symbols

Fireworks CS3 added the ability to export an MXML layout from your design for use with Flex. To assist this it includes a selection of common Flex components. These components are stored in Windows > Common Libraries > Flex Components. By adding the Button to your design and exporting to MXML you will find yourself with the appropriate MXML for a basic application with a Button. This is great as far asit goes. The Flex Components within Fireworks represent a small subset of the available Flex components. You have very limited options for styling these components and everything will be positioned absolutely. The good news is that it's not too hard to create your own Fireworks Flex Components (FFC's)and that you can add more styling options quite simply. That's what I will talk about in this post. We will go through the process of creating a simple FFC : a HRule.

There are two files required to make an FFC ; a Firework's png containing a symbol and a jsf file. So to get started create a new file in Fireworks CS3 (I made mine 50 x 5px). Next use the Line tool to create a horizontal line that stretches from the left to the right edge. Select your new line and give it an instance name (top left of the property inspector ; I called mine "line"). Copy and paste the first line, move it down one pixel and change it's opacity to 30 and call it shadow (for reasons I hope are obvious or will be soon). Finally select both lines and select F8 (or Modify > Symbol > Convert To Symbol) to convert your line to a symbol. Name your symbol HRule and select "Save to Common Library" and select "OK". A "Save" dialog appears open to <user settings>\Application Data\Adobe\Fireworks 9\Common Library\Custom Symbols (Windows), or <user name>/Application Support/Adobe/Fireworks9/Common Library/Custom Symbols (Macintosh) directory. If you save your symbol there it will appear in the Common Library panel under Custom Symbols. It must be saved within Common Library to appear within the Common Library. But you can create your own folder within Common Library with a more useful name. The symbol will be saved as ComponentName.graphic.png (in this case HRule.graphic.png). The distrubing thing is that your symbol will disappear from the stage and you'll need to find it within the Common Library and drag it onto the stage to continue.

So far so good! Now we want to create the javascript file that will power the symbol properties and control what MXML is created. To simplify this a kind someone has created a command panel to help with this process. So select the newly created HRule instance and then select Commands > Create Symbol Script. This will open an editor dialog. Select the symbol you want to edit using the button provided. If a symbol script exists for this symbol you will be prompted to import and continue editing that file. Otherwise you can start adding attributes.

The HRule has three style attributes that we'll want to change ; shadowColor, strokeColor, strokeWidth. Select the "+" at the top of the properties area. You'll notice under element name that our two lines are listed. Let's start by selecting "line". Now under attribute select fillColor; this is the Fireworks property that will be changed. Set property name to strokeColor this is what will be displayed in the Symbol Properties panel and written into the MXML. Finally you can select a default color if you wish. Repeat this for shadowColor (the strokeWidth takes a bit more work to get Fireworks to reflect the changes so I'm leaving this out to keep the example clear and simple). You can adjust the order using the arrow buttons at the top right. When you are happy select "Save".

We're nearly there. Just one more step. The script creator does most of the work for us. But I found there was one change needed so locate the jsf file (in the same folder as you saved the symbol) and open it in your preferred editor (Dreamweaver will do fine). Locate a function called "setDefaultValues" near the top of the file and add the following line after the opening curly brace:

Widget.elem.customData["flexClassName"] = "HRule";

In any new FFC's you create exchange HRule for the Flex components name. That should be all we need to do. Now to test it create a new file in Fireworks (say 60x10 px if you used my suggested dimensions). Open the "Common Library" panel if it's closed and select reload from the panel menu. Look for a folder with the same name you saved your HRule into. Open the folder and you will hopefully see your HRule component; drag it onto the stage. You should be able to change the colour of the stroke and it's shadow using the "Symbol Properties" panel.

Finally, go to File > Export and under the export options select "MXML and images" and then "Save". If you open that MXML file you should see an HRule element with the colors you selected. That's it.

HRule is a simple example and we haven't implemented all the available styles. We could easily add the strokeWidth directly to the jsf file (it is defined in the source files). It won't display the changes within Fireworks which limits the usefulness from a design perspective. But it will be included in the MXML file which helps in Flex. A good place to learn more about the possibilities is to take a look at the png and jsf files for the actual Flex Components. To find these look in application_folder/Adobe Fireworks CS3\Configuration\Common Library\Flex Components\. You can get a copy of my source files to help if you get stuck.