Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator
Using Illustrator
Adobe Illustrator SWF export and symbol editing tools have been completely revamped in the CS3 version, so you can create vector artwork for Flex skins just as easily as with Flash.
Before you get started, here are a few tips for working with the Illustrator skin template file:
- Some features of Illustrator are not supported when exporting to SWF; in particular, blend modes and effects (including drop shadows) may not display correctly in the exported version. If you want to use these or other advanced Illustrator features, test them out with a single component skin (see “Testing your skins and styles” ) before building everything else out.
- 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 symbols in the Illustrator file. (Renaming individual objects in a symbol 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.
- A few skin parts need special treatment in order to be positioned properly by the components that use them, because the bounding box that Flex expects isn’t exactly the same as that of the original shape you drew. For example, because of the way Flex 2 handles scrollbars, you'll want to make sure that there’s one pixel-width of transparent space at the left edge of each thumb symbol. You can do this by creating a rectangle with no fill or stroke that extends one pixel to the left of the thumb, as we’ve done in the thumb symbols in the skin template. The Slider control and its highlight use similar adjustments for alignment.
1. Download the sample skin files
Download the flex_skins_illustrator.zip file and unzip it to a folder on your machine. This should create a single folder called flex_skins_illustrator. 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 Illustrator CS3 and open the flex_skins.ai file from your working folder. You'll see all the Flex 2 skin parts laid out on the artboard. Each of these parts is actually an instance of a symbol in the Symbols palette.
The artwork you draw will look best in Flex if all items are “on-pixel”—that is, if their x, y, width and height values are exact integers, with no fractional portion. The easiest way to ensure this in Illustrator is to set it to snap to a one-pixel grid:
- Choose Edit > Preferences > Guides and Grid.
- Under Grid, change Gridline every: to 10 px and Subdivisions to 10, and click OK.
- Ensure that the View > Snap to Grid option has been selected.
All symbol instances in the skin template are already placed on-pixel on the artboard. Keeping the instances on-pixel will ensure that the one-pixel grid snapping behaves predictably when editing the symbols.
To edit one of the skin parts:
- Double-click the skin part to edit it in place. (You can also find and open the symbol from the Symbols palette.)
- Modify the existing artwork, or delete the existing artwork and draw your own.
- Some symbols have a scale-9 grid, as described in the Scalability section above, represented by dotted lines crisscrossing the symbol. If the shape of your artwork is substantially different from the original artwork—for example, your corners are more rounded, or you made the skin part larger—then drag the dotted lines to specify which parts should be scaled in which directions.
- When you're done editing a skin part, double-click outside the symbol area, or click the left-arrow (back) button in the upper-left corner of the document window.
Flex expects each skin symbol to have its registration point (origin) set at its upper left corner. All of the symbols in the skin template are preset with the correct registration point; if you create new symbols that you want to use as Flex skins, make sure to set “Flash Registration” to the upper left corner in the New Symbol or Symbol Properties dialog.
3. Export the skin file
When you're done editing all the symbols and scale-9 grids, do the following to publish your artwork as a SWF file:
- Select File > Export…
- From the Save as type: menu (on Windows) or Format: menu (on Mac), select Flash (swf).
- Click Save.
- In the SWF Options dialog, set Version: to Flash Player 8.
- Ensure that you have deslected all options in the dialog box, and leave any other options at their default values.
- Click OK.
By exporting the skin, you have created a flex_skins.swf file in the same folder as the original skin template. This file and the flex_skins.css file we provided are all you need to skin a Flex application.
Once you've published the skin file, skip to "Tweaking styles."
