Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator

Using Flash

Before you get started, here are a few tips for working with the Flash 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 symbols in the Flash 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.
• Because of the way Flex 2 handles scrollbars, you'll want to make sure that each of the symbols for the different states of the scrollbar thumb is offset to the right by one pixel from the registration point, as in the sample file.

1. Download the sample skin files

Download the flex_skins_flash.zip file and unzip it to a folder on your machine. This should create a single folder called flex_skins_flash. 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 Flash and open the flex_skins.fla file from your working folder. You'll see all the Flex 2 skin parts laid out on the Stage. Each of these parts is actually an instance of a symbol in the Library.

To edit one of the skin parts:

1. Double-click the skin part to edit it in place. (You can also find and open the symbol from the Library panel.)
2. Modify the existing artwork, or delete the existing artwork and draw your own.
3. When you're done editing a skin part, double-click outside the symbol area, or click the back button in the upper-left corner of the document window (above the Timeline).

When editing a symbol, be sure to pay attention to the registration point (the + sign in the upper-left corner of the symbol). Flex will always align the registration point with the upper-left corner of the component, so you'll want to make sure your artwork's upper-left point is at the + sign (except for scrollbar thumbs, which need to be offset one pixel to the right, as mentioned earlier).

If the shape of a skin part you create is substantially different from the original artwork—for example, your corners are more rounded, or you made the skin part larger—you'll want to edit the scale-9 grid.

To do this, follow these steps:

1. Right-click on the skin part on the Stage and choose Edit. This brings up a view that shows just the symbol you selected.

   • If you don't see dashed lines, then the symbol doesn't require a scale-9 grid—it's a part that Flex never resizes.
   • If you do see dashed lines, they represent the scale-9 grid. Using the pointer tool, drag the lines to specify which parts should be scaled in which directions, as described in the Scalability section above. For example, if you have rounded corners, make sure that they are fully contained in the corner quadrants of the scale-9 grid.
2. When you're done adjusting the grid, click on the back button in the upper-left corner of the document window to return to the main Stage.

3. Export the skin file

When you're done editing all the symbols and scale-9 grids, exporting is easy—just choose File > Publish. This will automatically create a flex_skins.swf file in the same folder. 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."

Page 4 of 10

Previous Page

Next Page