FFC : Button - Limitations

After making good progress developing my own LinkButton Fireworks Flex Component (FFC) I was keen to take this a bit further by extending one of the existing FFC's. The natural progression from the LinkButton was to take a look at the Button component. If you installed the Flex Style Explorer you can quickly have a play with the available style options for the Button. There are a number of styles that the LinkButton and Button share. But you'll quickly notice one big difference. The Button has a background (all states) with a gradient and you can change the gradients colors and alpha. The fill colors are controlled using the fillColors array. It looks something like this:

fillColors: ['#FFFFFF','#CCCCCC','#FFFFFF','#EEEEEE'];

The first two values represent the colors for the up states top and bottom colors respectively. The second two values represent the colors for the over states top and bottom colors respectively. The down state is controlled by the themeColor. It turns out to be pretty easy to display changes to the fillColors values by setting the fills gradient.nodes color. The nodes is an array with the Button background having two nodes. You would set the color of one node like this :

var vals   = Widget.elem.customData["currentValues"];
bg_obj  = Widget.GetObjectByName("up_fill");
bg_obj.pathAttributes.fill.gradient.nodes[0].color = vals[8].value; 

Setting the fillAlphas is a similar process except that you use the gradient.opacityNodes color. There is one crucial difference and that is the addition of an alpha component to the color value. For example, '#FFFFFFFF' is a white opacityNode set to 1.0 (no transperancy); '#FFFFFF00' is a white opacityNode set to 0.0 (full transperancy). The tricky bit here is working out the hex values for the alpha component. Perhaps there is a neat line of javascript that someone could suggest to sort this out. But in the end I wrote a function with a series of conditionals to set values at 0.05 increments. A bit awkward but effective enough for my needs.

This was all good. But as I was working through these issues I finally came to an impasse. As you can see the fillColors property is an array. That's alright we can have an array. But to my knowledge we can't have an array with a color picker for each index. That means hand typing the colors and I was really aiming for better. The other option is to use four values and to combine them for MXML output. This may be an option and I'll probably explore this option. But this got me thinking. What would be great is if you could develop a Flash panel for individual components that shows inside the Symbol Properties and allows you to set properties using a GUI (ie. like the Flex Style Explorer). Ideally this swf just needs to exist alongside the graphic and jsf files for it to be used. So if Button.swf existed in your custom component folder it would become the components editor.