How can I create New Rich Symbol Flex Components for Fireworks?
Problem
Fireworks CS3 currently includes a set of "Flex Component" Rich Symbols that are great for wireframing Flex Apps, but do not include all of the Flex Components.
Solution
Draw or take a screen shot of the component, convert to a symbol, and add Rich Properties through Javascript.
Detailed explanation
In order to create a new Rich Symbol, you'll first need to draw the symbol in fireworks. You can also take a screenshot of the symbol in a flex app to act as a guide, but if you want to enable the symbol properties, you'll need to draw the object in fireworks.
Select the drawn component and select "Modify" --> "Symbol" --> "Convert to Symbol...". Make sure "Enable 9-slice scaling guides" is enabled, so that the component is reusable.
To enable symbol properties, you'll need to write some JavaScript. The Devnet has an article describing this process.
http://www.adobe.com/designcenter/fireworks/articles/frw9at_richsymbol.html
Some components are more complex than others. Particularly, an item such as a DataGrid is if you want it to be a reusable, you'd need the symbol to support an indiscriminant number of columns, rows, and associated labels.
For datagrids, a simpler solution is I have a simple symbol that has just the header and the outer-rectangle, and then I manually add the text and grid-lines on an instance basis as is appropriate for the application being designed. The attached gif image shows in magenta the content that was manually added. A sample with the dataGrid symbol is attached.
