Fireworks Flex Components : Extended

In a recent post I was looking at the steps required to create a simple HRule FFC (Fireworks Flex Component). You may remember that I included a property for defining the strokeWidth style but I didn't go so far as to actually get the FFC to update it's appearance because I wanted to keep the post simple. Over the last couple of days I've been working towards implementing this last element. But it turned out to be a little more difficult than I expected and required a few changes to my original FFC to make it work. The aim of this post is to look at these changes and what was required to make this work.

Firstly, let me talk about the reason I had trouble finding what in the end was quite a simple solution. With Fireworks javascript the best way to find out whats going on is to select the step you are interested in from the history panel and then select "copy steps" from the panels menu. This copies the relevant javascript to the clipboard. But that doesn't help us with our FFC's because the 'Symbol Properties' panel talks to the FFC using the Widget object. This interface works somewhat differently from the main API. The second reason this proved difficult is that none of the existing FFC's have an example of changing an object size within the FFC. In the end I found myself hunting through "Adobe Fireworks CS3 - Extending Fireworks" to find the answers I need (search for Widget and pathAttributes).

So firstly lets take a look at what changes we need to make to the HRule.graphic file. It's quite simple; we just need to replace our two paths with lines and then rename them as 'line' and 'shadow'. You'll then need to confirm they are correctly positioned. For some odd reason I found I needed to place the shadow 2 pixels below the line. These were the only changes I needed to make to the graphic.

Next open up the HRule.jsf file. The first change I made was within 'setDefaultValues' where we change the strokeWidth properties type from being a number to "Text". I'm not sure why this was necessary but a couple of issues disappeared when I did. Most of the real changes occured in 'applyCurrentValues' so let's have a look at the whole function :

function applyCurrentValues()
{
 var values = Widget.elem.customData["currentValues"];
 var w = Number(values[1].value);

 var line_obj = Widget.GetObjectByName("line");
 
 line_obj.pathAttributes.brushColor = values[0].value;
 line_obj.pathAttributes.brush.diameter = w;
 
 var shadow_obj = Widget.GetObjectByName("shadow");
 
 shadow_obj.pathAttributes.brushColor = values[2].value;
 shadow_obj.pathAttributes.brush.diameter = w;
}

The first line remains the same, but note the second line where we pick up the value for strokeWidth and convert it to a number. Now there are two blocks of three lines one for 'line' and one for 'shadow'. Both blocks do exactly the same thing but to a different path. The first line of each stores a reference to the object within a variable. This saves us from writing Widget.GetObjectByName("objectName") on the next two lines of eaach block. Those two lines are probably self explanatory but let's take a quick look. Both use 'pathAttributes' to change properties of the path. The first refernces brushColor to change the color of the paths stroke. For 'line' it gets changed to strokeColor. For 'shadow' it gets changed to the shadowColor. On the second line of each we set the brush.diameter to the strokeWidth.

That's it! You'll need to reload the "Common Symbols" panel and then drag the HRule component onto the stage. But now any changes we make in 'Symbol Properties' will be reflected within Fireworks as well as being exported into the MXML. From here we can very easily make a VRule FFC simply by saving HRule.graphic.png as VRule.graphic.png and rotating the lines. Then saving HRule.jsf as VRule.jsf and changing HRule to VRule on the first line of 'setDefaultValues'. Too easy. There's still quite a few things to work out before we could improve the existing FFC's or to make a full set. But with what we know now we could make a fairly complete set.