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

Editing scale-9 grids for bitmaps

As I mentioned earlier, the current versions of Photoshop and Fireworks don't support direct editing of scale-9 grids, so you'll need to do this by hand.

Here's how to do it:

1. Open the flex_skins.css file in your favorite text editor. (If you follow the steps in "Testing your skins and styles" to create a Flex Builder project, you can open the CSS file directly in Flex Builder.)

2. For each skin part whose scale-9 grid needs adjustment:

   1. Search for the component that has that skin part (e.g., Button). You should find a chunk of CSS code that looks like this:

      Button
      {
      disabledSkin: Embed
         (source="images/Button_disabledSkin.png",
                  scaleGridLeft="4",
                  scaleGridTop="4",
                  scaleGridRight="78",
                  scaleGridBottom="18");
      downSkin: Embed
         (source="images/Button_downSkin.png",
                  scaleGridLeft="4",
                  scaleGridTop="4",
                  scaleGridRight="78",
                  scaleGridBottom="18");
      overSkin: Embed
         (source="images/Button_overSkin.png",
                  scaleGridLeft="4",
                  scaleGridTop="4",
                  scaleGridRight="78",
                  scaleGridBottom="18");
      upSkin: Embed
         (source="images/Button_upSkin.png",
                  scaleGridLeft="4",
                  scaleGridTop="4",
                  scaleGridRight="78",
                  scaleGridBottom="18");
      }

   2. If you don't see any scaleGrid parameters in the skin part you're concerned about, this isn't a resizable part, so you can skip that skin part. (Whew!)
   3. Back in your skin artwork file, figure out where the scale-9 grid lines should be laid out. It might be helpful to zoom in to the skin part and create guides to figure out where the different quadrants are. Remember that the corners will not be scaled, the sides and top and bottom will stretch only in one direction, and the middle will stretch in both directions.
   4. Turn on rulers, and figure out how many pixels the left and right grid lines are from the left edge of the skin part. Similarly, figure out how many pixels the top and bottom grid lines are from the top edge of the skin part.
   5. Replace the scale-9 grid values in the CSS file with the values you calculated in Step C.
   6. It's likely that you'll design all the skin parts for a given component to have the same scale-9 grid (since they'll usually all have the same shape). If so, you can just enter the values once, then copy and paste the scale-9 grid attributes to the other parts.
      
3. When you're done, save the CSS file.

Tweaking styles

After you're done creating skins for all the components, you might also want to add some styles to the CSS file:

• As I mentioned earlier, text attributes like color, font, and size aren't controlled by the skins. You might need to set the text color if your skins don't look good with the default dark gray text color.
• Some component colors, like the color of the selected item in a list, aren't controlled by skins, so you might want to change them to match the color scheme of the skin.
• If you used the Photoshop or Fireworks version of the templates, you might want to set your application's background color through styles instead of a skin.
• If you create a skin for the Panel component, you might need to tell Flex where the content area of the Panel is.
• You might want to create multiple skins for a single component.

If you know how CSS works in HTML, it's easy to set up these styles in the CSS file.

Setting text styles

First, figure out what you want your default font to be for most controls. For example, suppose you want your text to be a bluish 9-pixel Verdana. To set this as the default font, add a style declaration named global at the top of the CSS file:

global
{
   color: #333399;
   fontFamily: Verdana;
   fontSize: 9px;
}

Note: Eagle-eyed CSS users might notice that we used fontFamily instead of font-family here. Flex accepts either syntax.

If you want to customize the fonts of individual components, simply add them to the appropriate CSS rule. For example, if you want your buttons to use the same default font, but have their text be bold, just add fontWeight: bold between the braces below Button.

You might also want to set a couple of other text colors in the global rule: textRollOverColor and textSelectionColor. These determine what the text in a control looks like when you roll over or click on the control.

Setting component colors

Many components use a number of ancillary colors for indicating focus, selection, and rollover; you cannot set these colors through skinning.

These are the colors you might want to set:

• themeColor: This color is used for the focus ring around controls. Also, the selection and rollover colors for various controls (e.g., List) are automatically set to lighter versions of the theme color. You can set this in the global style declaration (the same way you set the text styles, above) to apply to all major components at once.
• borderColor: This color is used for the border around controls like List. You'll probably want to set this for each component individually, since you might not want this to apply to containers like HBox or VBox. I'll describe how to do this later.
• backgroundColor: This color is used for the background of containers like HBox and VBox, and for controls like List. Again, you'll probably want to apply this only to controls and not to containers, so you should create individual style rules for specific controls.

As with CSS in HTML, if you want to apply colors like borderColor or backgroundColor to a specific type of component rather than to all components, add a rule like this to the CSS file:

List
{
   borderColor: #333366;
   backgroundColor: #CCCCFF;
}

Setting the application background color

As mentioned earlier, if you used Photoshop or Fireworks to create your skins, it might make more sense to set your application's background color through CSS rather than by creating a bitmap skin. To do this, you can remove the backgroundImage property from the existing Application rule, and replace it with one of the following:

• If you want a solid color for the application, set backgroundColor:

  Application
  {
     backgroundColor: #CCCCFF;
  }

• If you want a vertical gradient, set backgroundGradientColors. The first color is the top of the gradient, and the second color is the bottom:

  Application
  {
     backgroundGradientColors: [#CCCCFF, #666699];
  }

Setting the Panel content area

Panels are different from the other kinds of skinnable components because they contain other controls. If you create a Panel skin and make its borders thicker than the ones in the template, you might find that the controls inside the Panel overlap the edges of the skin. You can fix this by setting the border thickness on all four sides of your panel in the CSS file; this tells the Panel how much to inset the content on each side from the edge of your skin symbol or bitmap. If the content overlaps the header area of your Panel skin, you can also adjust the header height using CSS.

Here's an example:

Panel
{
   borderThicknessTop: 5;
   borderThicknessLeft: 5;
   borderThicknessBottom: 5;
   borderThicknessRight: 5;
   headerHeight: 20;
}

The CSS files we provide already have the border and header values set properly for the Panel artwork in the skin templates.

Note: When using bitmap artwork or artwork from Illustrator, you may have to take into account extra effects like drop shadows around the edges of the skin part. For example, if you need the content area of the Panel to be inset by 5 pixels from the left edge of your Panel shape, but the shape has a drop shadow applied that extends an extra 3 pixels to the left of the shape’s edge, set the border thickness to 8 pixels. You don’t usually need to take the boundaries of these extra effects into account when exporting artwork from Flash.

Using the Flex Style Explorer

If you want to explore other styles available on the various Flex components, you can use the Flex Style Explorer. This Flex application lets you experiment with the available styles, and gives you code that you can copy and paste into your skin's CSS file.

Page 8 of 10

Previous Page

Next Page