Skinning
Hey guys, I have attached some links to creating flex skins later in this email. These links have a solid walkthrough on how to create a skin. I will just touch on the key points.
One thing to note is that this skinning for Flex 3. For Flex 4, other options will be available. When the official Flex 4 (Flash Builder 4) release is complete, we can revaluate the other skinning options.
1) When creating a skin for a component in fireworks, always apply the skin to an instance with a style name. To create a skin in Fireworks CS4, go to: Command -> Flex skinning -> New Flex Skin.
2) When exporting a skin, we would like to have the skins broken down into two areas:
1) Skins that apply to the whole application
2) Skins that apply to a task, such as flurry or names approval.
Therefore, I would recommend having the following folders.
1) Application
2) Flurry
3) Name Approval (Names)
4) Avatar
5) Transactions
6) Phone Support (Phone)
7) Reports
Within each folder, you can have subfolders for each skins if it’s easier to manage. For Flurry, you could you have a folder for the junk button, folder for respond, etc. When you export, you will just be exporting images. When we import into Flex, it will automatically create the CSS . Our CSS files on the client support tools will be broken down by having a CSS file for each widgets and one CSS file for overall application.
3) If you have a style that applies to a group of buttons, you only need to export that skin once. For example, if you had a group of buttons that have the same icon on the left as part of the background, but with different text in each button, we would just enter the text into each button instance and all the buttons would use the same styles. To keep this flexible for other languages, I would not store any text as graphics.
4) If you want to scale a skin a certain way, such as not scale the rounded corners, not scale the icon on the left or on only scale a certain area of a panel, we can control that in CSS
5) This only applies to Creative Suite 4. Creative Suite 3 does it differently
Here are a couple very handy links for skinning. http://www.layersmagazine.com/fireworks-cs4-flex-skinning.html http://www.magnoliamultimedia.com/InsideRIA/easy%20skinning.htm http://tv.adobe.com/watch/adc-presents/skinning-flex-applications-with-fireworks/
Text
Regarding text, our support tools is developed for Flash Player 10. The Flash Player 10 text engine has native anti aliasing options build into the player, therefore we do not require the font to be embedded in most cases. We can do many things with this text engine, such as bi directional and vertical text, apply color modes (such as soft light, multiple), alpha effects and live filters such as drop shadows and glows. This applies to all device fonts, the fonts the user has installed
One of the cases we would need to embed the font or load the font glyphs dynamically is to use advanced anti aliasing options. This includes settings such as the thickness and sharpness of the text. Since this application will have localizing our client side tools, this is probably not the best option as it would increase the overall file size.
Another option for fonts is to use bitmap fonts. Bitmap fonts are aliased, appear very sharp and geared towards the font size being smaller than 10 points. They need to be embedded or loaded in dynamically into the client side tools.
There may be some limitation with text in certain components, but overall, the text engine is pretty versatile and gives us a fair bit of flexibility.
If you have any questions or comments regarding the text engine or skinning, please feel free to state them.