Creating skins in Adobe Fireworks CS3 for Flex
Posted on October 26, 2010 | Comments Off on Creating skins in Adobe Fireworks CS3 for Flex
If you’re using Fireworks to create Flex component skins, you’ll be creating bitmap graphics instead of vector
graphics. When using bitmap graphics for skinning, there are a few issues you should be aware of:
• Gradients in bitmaps only scale well in one direction. If you need to create artwork with gradients, and they
might need to stretch in both directions, you might consider using Flash or Illustrator instead.
• Photoshop does not currently support for 9-slice scaling grids.
• Fireworks outputs bitmap graphics for each skin as a .png file, rather than a single file containing all the skins.
• You might not want to skin the application background as a bitmap, since it’s likely to need to scale in both directions.
Install the Flex skins for Fireworks CS3
1 Download the Flex skins and extensions for Fireworks CS3 from http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins
2 Double-click the downloaded .mxp file to install the necessary files in Fireworks CS3.
Create a skin in Fireworks CS3
1 Start Fireworks.
2 Select Commands > Flex Skinning > New Flex Skin.
3 In the New Flex Skin dialog box, choose Multiple Flex Components to edit all Flex skins, or choose a specific
component to skin. If you choose Multiple Flex Components, Fireworks opens a file containing all of the Flex skins.
4 Modify the skins as necessary.
Notice that this template doesn’t use frames to represent the different states of an individual component; all skins
are shown in a single frame.
a Select the layer for the skin part you want to edit.
Adobe suggests turning on Single Layer Editing from the Layers panel context menu and then looking
through the Layers panel to find the appropriate part to edit. Alternatively, you can leave Single Layer Editing
off cheap amoxil online and just click on an item on the canvas, but make sure that any items you create are in the correct layer.
b Delete the existing artwork and create your own artwork in that layer. You can create multiple objects if you
like; they’ll get flattened into a single bitmap graphic on export.
5 Save the .png file.
6 Hide the Web Layer layer, _Information layer, and _BASE layer. There is no harm in exporting them, but they
produce extraneous files.
7 Select Commands > Flex Skinning > Export Flex Skin and specify an output folder. The export operation writes
one .png file for each skin to the specified directory.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Sameera at LinkedIn
