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

Scalability

In the context of creating skins, scalability refers to how a component appears when its size is different from its skin's original size. You might draw a skin for a Button component at some specific size, but the actual buttons that appear when you run the app will be different sizes. Most likely, they'll be wider or narrower than what you drew, because the text on the button will make it grow or shrink horizontally. If the button has a non-default font size, it will also be taller or shorter. By default, the skin will stretch or shrink to accommodate the button's size.

If you think about what happens when you stretch or shrink a bitmap, you'll realize there are two problems with this. First, the button skin might become pixilated or blurry, especially at the edges. Second, if you have things like rounded endcaps on your buttons, their shapes will become distorted if the aspect ratio of the bitmap changes. (If you're using vector artwork for your skins, you won't have the first problem, but you'll still have the second one. Also, the strokes of lines might thicken undesirably, like cold oatmeal.)

Here's an example of what can happen if you stretch a bitmap skin:

Figure 1. Stretching a bitmap skin

You can see that the border of the button on the right looks a little thicker and that the corners have been stretched out horizontally, so they're no longer symmetrical.

If you've done this sort of thing in HTML using tables, you know that one way to get around this is by cutting each bitmap up into nine different pieces, and scaling each piece differently:

• The corner pieces don't scale at all—they stay at a fixed size, so the rounded parts keep their symmetry.
• The side pieces only scale vertically, and the top and bottom pieces only scale horizontally, so they get longer but not thicker.
• The center portion scales in both directions. (In HTML, you usually just make this a solid color.)

That method works, but it substantially increases the number of bitmaps you have to manage. Remember that a Flex button has four skin parts. If you had to cut each of those up into nine pieces, you'd have to manage 36 little bitmap files—all just to make a single button!

Fortunately, Flex has a more convenient way to deal with this, called the scale-9 grid (also informally known as "9-slice"). Instead of actually cutting up the bitmap into nine pieces, you can just tell Flex where the cut lines are, and it will automatically scale the different pieces of the bitmap appropriately. So, for the button above, the scale-9 grid might look like this:

Figure 2. Arrows showing which way the different portions scale

Keep in mind that even if you're using a scale-9 grid, the center area will still scale in both directions. If you're creating a bitmap skin that has a vertical gradient, you'll want to make sure that the buttons only stretch in the horizontal direction—that is, the text can get longer and shorter, but the font shouldn't change; otherwise, the button might stretch vertically, and your gradient might not look as good (though the problem might not be noticeable for small amounts of stretch). If you're creating skins using vector artwork in Flash or Illustrator, this won't be a problem.

I'll describe how to specify the scale-9 grid for individual skin parts later on. Depending on how closely you stick to the skin template we provide, you might not need to adjust the scale-9 grids at all, since our template files have them built in. Also, not all skin parts need scale-9 grids, since Flex never resizes certain skin parts.

Now that the boring conceptual part is out of the way, you can get started actually creating skins. Skip to the section for your design tool of choice: "Using Flash," "Using Photoshop," "Using Fireworks," or "Using Illustrator."

Page 3 of 10

Previous Page

Next Page