利用 Flex Builder 3制作Flex 3应用的皮肤（五）

Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3

Importing skins into Flex Builder

不管你用什么工具制作的皮肤，下一步都是用 Flex Builder 将 skins 导入到 Flex application.

1. In Flex Builder, open an existing project, or create a new project using File > New Project.
2. Choose File > Import > Skin Artwork…
3. Browse to the skin artwork you created.
   1. If you used Photoshop or Fireworks to create your skins, then choose “Folder of images:” and browse to the folder that was created by Export Flex Skin…
   2. If you used Illustrator or Flash to create your skins, then choose “SWC or SWF file:” and browse to the Illustrator SWF or Flash SWC that was created. (If you used Flash, be sure to choose the SWC file that it published, not the SWF file that also gets created during the publish step.)
4. Make sure your project from step 1 is selected in the project tree.
5. Click Next. The dialog will show a list of all the symbols or bitmaps in the file or folder you chose. Based on the name of each symbol or bitmap, the dialog will guess which component and state or part it represents. For example, it will assume an image named “Button_upSkin.png” represents the up state of the Button component. If you used the Flex Skin Design Extensions as described here, everything on this page will be automatically set up correctly.
6. Verify that all the symbols or bitmaps are correctly mapped and click Finish. Flex Builder creates a new CSS file referring to all the skins you imported, and displays the file in CSS Design mode. It also automatically attaches the new CSS file to your main application.

Editing skin properties in Flex Builder

到此为止，你的 Flex project 已经开始用你导入的 skins, 这样，如果你向你的主程序文件加入元件，你就会看到你创建的皮肤。当然，在你做这之前还有一些东西需要调整。

9-slice scaling grids. If you created your artwork in Photoshop or Fireworks, you’ll need to adjust the 9-slice scaling grids on your bitmaps. (For a discussion of 9-slice scaling, see the Scalability section of the Flex 2 skinning article.) Here’s how:

1. Make sure you’re in the CSS Design mode for the skin CSS file created during import. If you’re not, open the skin CSS file and click the Design button in the toolbar.
2. From the Style dropdown in the toolbar, choose a component for which you want to edit the scale grid.
3. In the upper-right corner of the CSS Design mode, click the Edit Scale Grid button. The design area switches to show the scale grid overlaid on each skin part you imported for that component.
4. Drag the dashed lines to adjust the scale grid. Note that the same scale grid is used for all the skin parts for a given component.
5. When you’re done, click the Edit Scale Grid button again to switch back to the normal view.
6. Save the file.

Text styles. 在编辑像 Button 这样的元件的皮肤时，你可能会注意到皮肤里没有文字。像 font, color, and size 这样的文字样式是通过 Flex 里面的 CSS 设置的，不是通过 skin 设置。

1. Make sure you’re in CSS Design mode for the skin CSS file as above.
2. Decide whether you want to set text styles for all components, or for a specific component.
   • If you want to use one font for your whole application, click the New Style button, choose “All components (global)”, and click OK. Another dialog will appear asking which component you want to preview the global style as (since the global style applies to all components, Flex Builder needs to know which one you want to look at while you’re tweaking its style properties). Choose Label and click OK.
   • If you want to set a font for a specific component, just choose the component from the dropdown.
3. In the Flex Properties panel on the right, use the controls in the Text section to change the text. You can also tweak some other styles, such as the padding of the label within the control.
4. Save the file.

注意，你可以将全局样式与元件个别样式混合使用。比方说，如果你想让所有的控件都用 Myriad Pro, 并且大部分控件用 10pt size, 另外一小部分用 12pt size, 你可以建一个全局的样式指定字体为 Myriad Pro 10pt, 然后选个别的元件将它们设置为 12pt.

Other style properties. 如果你看完这篇文章的样式定义部分，你可能注意到在你编辑一个应用了皮肤的元件时，有大量的可用的样式属性没有被显示出来。这是由于这些样式属性只在你使用默认的皮肤的时候才可以调整。在你用自己的 artwork 替换皮肤之后，Flex 不知道怎么处理类似改变顶角的弧度、改变 artwork 背景色之类的操作，所以这些属性不再有效。

Testing your skins

一旦你完成调整，你就会想在实现的程序中测试你的 skins, 这样你可以看到它们在不同大小的元件上的表现。请向后跳到 Testing your styles in an application 去看看怎么做这样的测试。（注意，你不需要输入 <mx:Style> 标签，在你导入皮肤的时候，系统已经为你加好了。）

Where to go from here

如果你准备开始样式和皮肤的设计，可以看看其它在线文档 CSS Design mode and Importing Skins into Flex Builder. 如果你是一个对用 Flex 开发完整功能的自定制元件有兴趣的 Flash designer/developer, 请阅读 Flex Component Kit for Flash CS3.