使用Creative suite 3和Flex Builder3实现Flex 3的换肤

==============引子，多为废话，可以跳过不看==================

前个星期，“铮总”（注：因为公司小，所以大家的称呼都带总的，我就是费总。哼哼。）兴致勃勃的告诉我FLEX可以换肤了，发了一个中文简易教程给我，我照着做，经过一些挫折（挫折主要来源于九宫格的不熟悉，以及坐标轴定位问题），最后调整了很久，终于让我给弄出来了。做了一个button和scrollbar的小demo。scrollbar的样式是模仿Flex.org网站中的showcase来画的，Scrollbar在所有的控件中算最难的，因为它涉及到的元素比较多，当然保持耐性细致，也是比较容易的。

最后，铮总拿出1年前帮浩沙做项目中的一个让他耿耿于怀的scrollbar让我画。花了不到半个小时的时间（熟练的话应该能更快） 就完成了，终于让铮总出了口恶气。呼呼。

后来google到adobe 的官方博客中的文章《Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3
》，仔细阅读了，对flex3换肤有了更进一步的认识。

================废话说完了，现在讲如何由丑女成长为美女的过程==============

相信从事flex开发的开发者们已经非常厌恶flex组件默认的那套灰蓝色皮肤，我虽然看得不多，但已经看着有想吐的感觉。ADOBE在FLEX2就已经给出了换肤的解决方案，请见 Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator，这里详细描述了flex2同ps，ai，fw，fl结合的换肤方法（这里不做说明），此外还给了flex样式的网页通过页面上直接变化组件的样式，如填充色、描边颜色、背景颜色等，直接获得相应的样式代码，添加到flex中的相应组件css文件中，此样式表文件可以指定一个name，表示指针对该name的组件应用特殊样式，如果不指定name，对项目中所有这类组件应用此特殊样式。
其实flex3换肤原理和flex2几乎类似，只是把这个过程“傻瓜化”。

好，进入正题，现在会详细介绍如何换肤。

>>准备工作。

工欲善其事，必先利其器。要实现flex的换肤，我们需要有以下工具：

• Flex Builder 3
• One of Photoshop CS3, Illustrator CS3, Fireworks CS3, or Flash CS3
• Flex Skin Design Extensions for CS3（分别针对PS AI  FW  FL 有4个扩展插件）
• If you’re using Flash, the Flex Component Kit for Flash CS3

注意felx skin design extensions 不受无商业序列号的限制，所以可以免费修改皮肤模板只要你愿意的话(文章原话)。

>>两种选择——Styling or Skining？

前面提到了要替flex盖头换面有两种选择，一种就是在默认的组件中修改style，这种方法操作起来非常简单，一是用flex已经为每个组件定义好的一套样式参数，你可以任意修改它们，例如填充色、圆角的直径、或者文字的大小等，我们把这种方法统称为Styling。如图所示，这3个按钮就是用flex自带的flex property完成的，左边第一个是系统默认的样式，右边2个是修改后的皮肤。

倘若大家觉得这样的修改还太细微，不够大胆，想做一个完全另类的button，甚至什么点击它就出现爆炸效果，那么我们就推荐下面一种方法——Skining——也就是说在adobe提供的工具如PS、AI、FW、FL中画出你所想要的皮肤，然后再倒入到FLEX中去。如下图中所示：

从左到右，图标的来源分别是Ralf Sczepan, fleksray.org; Jeff Bennett, Media Innovation Group/Yahoo!; Juan Sanchez, scalenine.com。

>>Styling的操作方法

Flex Builder 3的最主要新功能之一就是——CSS设计模式。在这个模式中，你可以为组件可视化编辑样式CSS样式。这个模式有许多功能来源于Flex Style Explorer,可以有效的直接写入CSS到你的项目文件中，而不需要复制粘贴的步骤。说白点，就是把Flex Style Explorer的功能融进了 Flex Builder 3。由于方法都很容易上手，我这里就不具体讲述，但是，我试用了一下，感觉还是Flex Style Explorer体验性更好，尤其是颜色的选取，还有文字大小，边距大小都是由滑动选择，可视性很强，操作方便，而且最后样式改变结果，如button鼠标roll over、roll down等效果都可以直观的看到。

>>Skining的操作方法（重点介绍）

教程推荐： Importing Skins into Flex Builde 。里面步骤讲的很详细，唯一不足的是没有图文解释。

我们前面介绍了可以用PS/FW/AI/FL来生产Flex组件的皮肤，但是怎样选择合适的tool来完成呢，下面有几个原则：

• If you want to create bitmap skins, use Photoshop or Fireworks.位图用PS或FW
• If you want to create vector skins with animation between the states of a component—for example, if you want the background of a button to become lighter over 50 ms when you mouse over it—use Flash.组件中的状态切换而且是矢量的，就用FL，例如当鼠标移上button，其背景颜色在50ms后发生变化，这样的效果就要用FL。再比如点击button爆炸的效果了。当然也要用FL。
• If you want to create vector skins, but you don’t need animation, use Illustrator or Flash.如果是仅仅是画矢量化，不需要有动画，就用AI/FL。个人喜欢用AI，因为它实在是画矢量画的专业工具啊，操作起来非常顺手，始终觉得FL在绘制矢量画方面还不足。因此在这里说明一下即使在做矢量动画的时候也可以借助于AI，在AI中绘制好你所需要的图形再导入到FL中做动画，效率更高，起码我是这样。

确定好用哪种工具来绘制皮肤之后，我们确定本机上安装好CS3 Flex skinning extension（针对PS AI FW FL有4个），如果是用flash画，还要安装 Flex Component Kit for Flash CS3。

现在重点介绍用flash来换肤（最难的是动画制作，用PS或AI来画都非常简易，导入到Flex中也非常容易，在这里不做叙述，大家可以去下载 Importing Skins into Flex Builde查看）。

1、新建文件，选择从模板新建，选择Flex Skin>Scrollbar，如下图所示：

 

2、点击确认之后，可以看到新建的模板文件中有2个scrollbar，分别是垂直方向和水平方向的scrollbar。
我们点选垂直方向的scrollbar进行设计修改，水平方向类似操作即可。

 

 

 

 

 

                  

分析 垂直scrollbar有5个mc（影片剪辑），实例名分别是VScrollBar_downArrowSkin，VScrollBar_upArrowSkin、VScrollBar_thumbIcon、VScrollBar_thumbSkin、VScrollBar_trackSkin。根据取名也能知道5个mc各自代表的功能区域。其中以 VScrollBar_thumbSkin为例。在场景中点击该mc，进入mc编辑，可以很清楚的看到此mc由9 slice scaling（九宫格或者9切片，个人更喜欢9宫格，有小时候学写毛笔字的情节吧，点击可以查看adobe给的官方使用教程，可以点击查看9宫格的使用图文教程），虚线分成了9块。

最中间部分是可以随着scrollbar控件的尺寸变化而拉伸缩短，而中间以外的8个区域的尺寸是不会变化的，这个在其他软件开发中也是经常应用到的。

3、可以看到 VScrollBar_thumbSkin一共有3层，art层、transition层和state层。

看到state层有up over down disable4个标签，分别提示此帧按钮处于对应状态时的外观，该组件元素的外观是在art层中定义的，每种状态有一个外观样式。transition此层拖动标签的位置，就可以实现某2种状态切换按钮的外观改变过程——也就是组件的动态效果了。因此我们可以在对应的标签所在帧定义各种动画。例如此案例中我在art层新添一层animation，该层我做了 thumbSkin当鼠标移上去时的动画效果，由灰色变为橘色的效果，不要忘了，需要将transition层把up-over的起始结束的标签，挪到你想要表现的动画起始结束的帧上。大家可以试一下，相信是非常简单的。

4、做完以上步骤，我们保存该文件，命名为myScrollbar.fla，导出影片剪辑，会生成myScrollbar.swc和myScrollbar.swf两个文件。

5、切换到Flex Builder 3中，新建一个flex项目文件SkinTest.mxml，定义一个宽的panel，将刚才生成的swc放置在flex项目文件夹下的libs文件夹中。然后点击file>import>skin art>选择libs下的myScrollbar.swc，系统会自动替你生成对应的样式文件放在src文件夹中，此时run SkinTest.mxml文件，在生产的网页上看到你想要的效果。ok就这么简单。

接下来会把源码发出来，大家感兴趣可以下载。

1简单调整scrollbar的效果，包括flash源文件和flex源文件。

2是制作稍微复杂的scrollbar的效果,包括flash源文件和flex源文件。

查看全文