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

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

Designing skins using Creative Suite 3

你已经试着调整了你所能看到的所有属性，但是你就是没办法得到你想要的 scrollbar 的样子。怎么做呢？只能画出来！用 Adobe Creative Suite 3 design tools, 你可以很容易地完全定制 Flex 内置元件的外观。

这一章不打算深入讲解每一个设计工具创建皮肤的过程，我只说一下过程的概要。有关更详细的说明，请参考文档 Importing Skins into Flex Builder.

你应该选哪个设计工具？下面这些经验可以帮你做决定：

• 如果你想建一个 bitmap skins, 请用 Photoshop or Fireworks.
• 如果你想为元件建一个有状态切换动画的矢量皮肤 (vector skins)——例如，当鼠标移上来的时候，你想要让按钮的背景亮50毫秒——use Flash.
• 如果你想建矢量皮肤，但你不需要动画，use Illustrator or Flash.

在你开始之前，你需要为你所选的设计工具下载并安装 CS3 Flex skinning extension. 你可以从 Adobe 站点下载。按上面的提示安装相应的扩展。

如果你正在用 Flash, 你应该装 Flex Component Kit for Flash CS3.

Creating skins in Photoshop, Illustrator, or Fireworks

对于 Photoshop, Illustrator, and Fireworks, the skinning extensions 提供了两个新的菜单项：New Flex Skin and Export Flex Skin. (在 Photoshop and Illustrator 里面，它们在 File > Scripts 子菜单里；对于 Fireworks, 它们在 Commands > Flex Skinning 菜单里。) 下面是在这些工具里创建皮肤的大致过程：

1. 选 New Flex Skin 菜单项。这会打开一个对话框，让你选择是为所有的 Flex 元件创建皮肤，还是为某个特定的元件做皮肤。
2. 会出现一个 skin template, 显示了所有的元件，也可能只显示你在前一步指定的元件。模板中显示了 Flex 的缺省皮肤做为你工作的参考，但你也可以把它删降，完全按你的想像来重绘。
3. 不同的工具对skin artwork的管理稍有不同：
   1. 在 Photoshop 里面，将 skin artwork 的部件统一命名后放在 layers 里面——例如，Button skin 有四个层，分别命名为 Button_upSkin, Button_overSkin, Button_downSkin, and Button_disabledSkin, 分别对应于按钮的不同状态。(The skin layers are in layer groups with the same names—you can ignore these; just edit the actual layers directly.)
   2. 在 Fireworks 里面，the artwork 被放在已经命名了的 layer folders 里。
   3. 在 Illustrator 里面， the artwork 被放在已经命名的 symbols 里。
4. 编辑 layers, layer folders, or symbols，画出新的皮肤。
5. 当你创建了皮肤之后，把文件保存在你指定的文件夹里。
6. 从菜单上选 Export Flex Skin. 对于 Photoshop and Fireworks, 这将会生成存放 PNG images 的文件夹；对于 Illustrator，将会创建含有皮肤部件的单独的一个 SWF 文件。In all cases, the resulting skin file(s) will be saved in the same directory as the template file you saved in step 4.

Creating skins in Flash

对于 Flash, 过程稍有不同。里面没有新的菜单；the skinning extension 将 skin templates 作为 Flash 的 document templates 安装。同样，Flash 里面的 skins 也按与其它设计工具不同的形式被组织起来，以便你为元件新建状态切换的动画。

1. 选 File > New 然后点 Templates 标签。
2. 选 the Flex Skins category. 你可以选某个 component, 也可以选 flex_skins 以便一次编辑所有的元件。
3. 注意，很多元件是被放在一个单独的 symbol 里面（相对其它工具的 multiple symbols or layers ）。每个元件不同的状态（例如，the up, over, down, and disabled states of a Button）被展示在 symbol 的时间线上。在下面几步里，我们将通过编辑 Button skin 以及为 Button skin 做动画。
4. 双击 Button symbol 进行编辑。
5. 看 “states” 层的时间线。注意它有用状态命名的帧。选中标有 “up” 的帧。
6. 选 “art” layer （确保你仍在 “up” 帧上），画 up state 的 artwork 。（不要画到 “states” layer里面——它只是用来存放状态标签的容器。）
7. 选其它 labeled frames 并编辑它们的 artwork 以便让它们看上去与它们的状态相配（请确保你仍在编辑 “art” layer）。注意，如果你想创建两个状态间的过渡动画，你需要拷贝你在 “up” 帧上绘制的 artwork 并粘贴到另一个关键帧上，然后修改粘贴过去的 artwork.
8. 看一下时间线上的 “transitions” layer. 注意第十帧标为 “up-over:start”, 第十一帧被标为 “up-over:end”. 这些标签指明了按钮从 up state 到 over state 的时候要播放的动画的起止位置。当然，现在它们就是从一帧到下一帧，因为它们没有中间帧，所以也没有动画可以播放。
9. 向左拖拽 “up-over:start” 帧到 frame 2. （你可以在时间线上看到帧的标签。）
10. 用标准的 Flash tweening 命令在 “art” layer 的第二帧与第十一帧之间新建一个动画。
11. 在 “transitions” layer 的其它对应帧之间做相同的操作。
12. 按你的要求编辑其它元件的皮肤。
13. 将文件保存到你指定的位置。
14. 做完之后，选 File > Publish. 这将自动创建含有 symbols for the skin parts 的SWC 文件。

请确保没有对 states or transitions 帧的名字做任何修改——otherwise the skin won’t work properly in Flex.

默认状态下，在你从后一个状态到前一个状态的时候，变换动画自动地会反过来。比如，如果用户将鼠标移到按钮上面，然后再移出，按钮会从 over state 到 up state，这时候 Flex 反向播放 up-to-over 动画。如果你想针对这种情况创建不同的反向动画，你需要在时间线的其它任何地方创建另一个动画，并在动画的开始帧标记 label “over-up:start”，在动画的结束帧标记 “over-up:end”.

将 Flash and Flex 协同使用，你还可以做很多我在这篇文章中没有提及的事——你甚至还可以在 Flash 里面创建有完整功能的 Flex components. 要了解更多这方面的信息，请参考 Flex Component Kit for Flash CS3.

Technical notes

下面有几点是你在使用各种设计工具制作 skins 的时候需要铭记的。

• 在 Illustrator and Flash 里面，你可以直接调整 skin symbols 的九宫格 (9-slice scaling grids). Photoshop and Fireworks 不支持层的九宫格编辑 (9-slice editing) （Fireworks 其实支持九宫格编辑，但是它不兼容这样的皮肤制作流程），所以你需要如下面文章 Editing skin properties in Flex Builder 介绍的一样，在 在 Flex Builder 里面用九宫格进行缩放操作。(For a discussion of 9-slice scaling, see the Scalability section of the Flex 2 skinning article.)
• 在 Photoshop template 里面，每一个皮肤部件都表现为一个单独命名的层里的内容（例如，Button_upSkin），它们被组织在一个同名的 layer group 里。由于 Photoshop export script 的技术限制，额外加入到这个 layer group 里的层不会被自动包含到皮肤中——只有单独的 Button_upSkin layer 被输出为按钮的皮肤。如果你需要用多层来构造皮肤，按下面步骤做：
  1. 删除你想要创建的皮肤部件的占位符 (e.g. Button_upSkin). 切记，不要删 layer!
  2. 新建一个 various layers 用于你想构建的 skin part. 你可以随便在什么地方创建这个层，但一定要能很方便地被放到用来组织 skin part 的 layer group 里面。
  3. Create a selection around the multi-layer artwork.
  4. If your artwork uses transparency, hide the background layer.
  5. Choose Edit > Copy Merged.
  6. Select the original skin part layer (Button_upSkin, in this example) and paste in the content.
• 在 Illustrator 里面，一定要用 Export Flex Skin 命令，不要用标准的 SWF export. 由于一个技术问题，从 Illustrator 导出的 Flex skins 需要兼容 Flash Player 8 SWF 而非 Flash Player 9 SWF. The Export Flex Skin command 会为你考虑好这些问题的。
• 新的 Flex Skin 对话框充许你为同一个元件创建多个皮肤——例如，你可能想为一个按钮创建不同的表现。更多有关信息，请参考文档 Importing Skins into Flex Builder.