Using Fireworks

If you're using Fireworks to create Flex component skins, you'll be creating bitmap assets instead of vector assets. When using bitmaps for skinning, there are a few issues you should be aware of:

• As I mentioned in the "Scalability" section, 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, consider using Flash to create vector artwork instead.
• Currently, Fireworks doesn't have built-in support for scale-9 grids so, if you need to edit the grid for a skin part, you'll need to tweak the CSS file, as described in "Editing scale-9 grids for bitmaps" later.
• Fireworks outputs individual bitmaps for each skin part, rather than a single file containing all the skin parts.

Before you get started, here are a few tips for working with the Fireworks skin template file:

• In general, you'll have an easier time if you create your skin parts to be the same size as the parts we've provided in the templates. If you make them larger or smaller, you might need to edit the scale-9 grids as well (for parts that require them).
• The CSS file we provide assumes that the exported symbols/files will have specific names, so you should avoid changing the names of the layers in the Fireworks file. (Renaming individual objects in a layer is fine.)
• For controls that have text, like Button, you can't control the attributes of the text (position, color, size, font, and so on) from the skin file, which is why we don't show text on the skin parts in the template. The "Tweaking styles" section later describes how to set text attributes using CSS.
• The default Halo Aeon skins are semi-transparent, so they pick up a little of the background color of the container they're in. This is why they look grayish in the skin template files we provide. You can follow a similar strategy for your skins, or just make them opaque.
• You might not want to skin the application background as a bitmap, since it's likely to need to scale in both directions. The "Tweaking styles" section describes how to set the application's background to a solid or gradient color using CSS.
• Because of the way Flex handles scrollbars, you'll want to make sure that each of the bitmaps for the different states of the scrollbar thumb includes the portions of the track on either side of the thumb, with one pixel sticking out to the left of the thumb. You can see how this looks in the skin template file.

• Certain skin parts, such as the panel control bar background skin, are either fully transparent or have transparent pixels around them in the sample file. (In the case of the panel control bar, this is in order to avoid overlapping the shadows at the edges of the panel.) In order for Fireworks to export these pixels properly, we've actually made them have 1% opacity (if they're fully transparent, Fireworks trims them off the edges during the export process). If you also need transparent areas around the edges of a skin part, you can do one of the following:

  • Use the same 1%-opacity trick in the master Fireworks file.
  • Manually edit the exported skin part bitmap files to add the transparent areas. If you do this, you may want to rename the layer for that skin part in the master Fireworks file to an unused name so that it does not overwrite your manually edited file the next time you do an export.

1. Download the sample skin files

Download the flex_skins_fireworks.zip file and unzip it to a folder on your machine. This should create a single folder called flex_skins_fireworks. If you like, you can work in a copy of this folder, leaving the originals untouched, in case you want to make different skins later on.

2. Edit the skin parts

Launch Fireworks and open the flex_skins.png file from your working folder. You'll see all the Flex skin parts laid out on the canvas. Each of the skin parts is a separate layer, named after the component skin and the part name (so, for example, the up skin for buttons is in the Button_upSkin layer).

To edit a skin part:

1. Select the layer for the skin part you want. We suggest 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 and just click on an item on the canvas, but make sure that any items you create are in the correct layer.
2. 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 on export.

Notice that this template doesn't use frames to represent the different states of an individual component—all skin parts are shown in a single frame.

3. Export the skin files

After you've created all the skin parts, follow these steps to export them as individual files:

1. In the Optimize panel, ensure that the file is set to export as PNG32.
2. Choose File > Export.
3. Navigate to the folder into which you extracted the skin files.
4. Navigate to the images subfolder.
5. From the Export pop-up menu, choose Layers to Files.
6. Ensure that Trim Images is checked.
7. Click Export.

The result should be an images folder that contains individual images for each skin part (e.g., Button_upSkin.png). Together with the flex_skins.css file, this is all you need to skin a Flex application.

Don't close Fireworks yet, though! If the shapes of your skin parts are substantially different from the original skin parts—for example, your corners are larger and more rounded, or you changed the size of some skin parts—you'll need to tweak the scale-9 grid coordinates in the CSS file, and you'll need to refer to your Fireworks file while doing this. This is described in the next section. If you don't think you need to edit the scale-9 grids, you can skip to "Tweaking styles."

Page 6 of 10

Previous Page

Next Page