It's from http://www.adobe.com/devnet/flex/articles/flex_skins.html
Note: This article has been updated for Adobe Flex 2.0.1 and Adobe Illustrator CS3. Flex 2.0.1 resolved some issues described in this article originally. Additionally, Flex Builder 2.0.1 now also works on Macintosh.

This article has been updated to explain how you can use Adobe Illustrator CS3 (as well as Flash, Photoshop, and Fireworks) to create Flex skins. Please note that we have tested the ZIP archives below for Flash, Photoshop, and Fireworks, and they work with Adobe Flex Buidler 2.0.1 and the CS3 versions of those products.

With Flex 2, it's easy to build applications that look good right out of the box, using the built-in Halo Aeon theme. However, Flex also gives you several ways to customize the look of your application's components. If you want to keep the basic look of the Aeon theme, but modify it (by changing colors, the rounding of corners, and so on), you can style the Flex components using CSS. However, if you want to redesign the appearance of the Flex components more radically, you can do so by creating a new set of skins for the Flex components that completely replace the built-in theme.

If you're not sure whether you want to use styling or skinning, try playing with the Flex Style Explorer (requires Flash Player 9) or use Flex Builder's Design mode to get a sense of how far you can go with styling. If you can get the look you want using styles, that's great—you can copy the CSS code out of the Style Explorer and hand it off to your developer. But if you need a more unique look, then this article is for you.

This article describes how to use Flash, Photoshop, Fireworks, or Illustrator to create a set of skins for the Flex component set. Using the skin template files provided with this article, you can draw your new skins, then go through a simple export process to create the skin asset files that Flex needs. You won't have to learn MXML or ActionScript—the languages that Flex applications use—but, depending on how your skins are designed, you might need to do a little tweaking in the CSS file that we've provided. If you don't know CSS, don't worry; I'll walk you through the steps involved.

Requirements

One of the following:

Flash 8 (or above)

• Try
• Buy

Fireworks 8 (or above)

• Try
• Buy

• Photoshop CS2 (or above)

• Illustrator CS3

Optional: Flex Builder 2.0.1 (includes SDK) – For testing the skin you create

• Try
• Buy

One of the following (depending on which application you use)

• flex_skins_flash.zip (ZIP, 108K)
• flex_skins_photoshop.zip (ZIP, 1.57 MB)
• flex_skins_fireworks.zip (ZIP, 288K)
• flex_skins_illustrator.zip (ZIP, 178K)

Prerequisite knowledge

Some familiarity with CSS is helpful.

Page 1 of 10

Next Page

About the author

标签：flex  skin  
分类目录: 资料 | 作者: dzq @ 2007-5-6 23:5:44