下面以Button组件为例，开始FLEX皮肤制作的入门。
下面以Button组件为例，开始FLEX皮肤制作的入门。
我们先在Flex Builder 3中新建一个项目FlexSkinTest
新建文件夹style，并在style文件夹下新建style.css文件：
双击打开style.css，切换到Design面板并新建一个样式：
选择Button组件：
按下OK后可以看到按钮的8种状态。便于测试，我们把背景色调整为0×333333：
切换到Source面板调整字体样式：
- Button
- {
- color:#AAAAAA;/*Color*/
- textRollOverColor:#FFFFFF; /*text rolling over color*/
- textSelectedColor:#FFFFFF; /*SelectedColor*/
- disabledColor:#5A5A5A; /* disabledColor */
- fontWeight:normal; /*fontweight*/
- }
结果如下图：
接下来的工作就是把按钮的8种状态用自定义的皮肤替换掉。
常用的实现方法有4种，我们将逐步介绍。
我们先学习KingnareStyle中Button组件皮肤的实现方法：将外部swf文件里的皮肤元件嵌入到组件样式文件中。
嵌入swf文件中的元件
首先在style文件夹下新建文件skin.fla，背景色同样设置为#333333。
CTRL+F8新建影片剪辑Button_upSkin，属性设置如下:
这里最好启用9切片，以后嵌入FLEX样式时就不用进行9切片设置了。
关于9切片，可以参考下面图示（引自Flex Developer Center）：
将舞台放大至400%，使用矩形工具画一个空心矩形，坐标为（0，0），厚度为1像素，高宽均为23像素，填充色为#FFFFFF，透明度10%
再新建一个层，用同样的方法在内部画一个空心矩形，坐标为（1，1），厚度1像素，高宽均为21像素，填充色为#000000，透明度60%
下面填充空白区。
新建一个层，画实心矩形，坐标为（2，2），高宽均为19像素，填充线性渐变色白色，透明度由10%至0%：
最后再加高亮框。新建一个层，画空心矩形，坐标为（2，2），厚度为1，高宽均为19像素，填充线性渐变色白色，透明度由8%至3%
至此，图形部分完成，再把9切片的线重新定位：
CTRL+ENTER发布程序。
Flash部分告一段落，回到FLEX的style.css中。切换到Source面板，在Button样式中加入下面语句：
- upSkin:Embed(source=”skin.swf”, symbol=”Button_upSkin”);
解释一下，upSkin，Button弹起状态皮肤。Embed语句，用于将外部资源嵌入程序中使用，本例中将skin.swf中的Button_upSkin元件嵌入到样式中。
保存后切换到Design面板，会发现up状态已经更新为我们刚才制作的元件了：
使用同样的方法来制作其他状态皮肤，要注意给元件赋合适的名字。最后CCS如下：
- Application
- {
- backgroundGradientAlphas: 1.0, 1.0;
- backgroundGradientColors: #333333, #333333;
- }
- Button
- {
- color: #AAAAAA;
- textRollOverColor: #FFFFFF;
- textSelectedColor:#FFFFFF;
- disabledColor:#5A5A5A;
- fontWeight:normal;
- upSkin: Embed(source=”skin.swf”, symbol=”Button_upSkin”);
- overSkin: Embed(source=”skin.swf”, symbol=”Button_overSkin”);
- downSkin: Embed(source=”skin.swf”, symbol=”Button_downSkin”);
- disabledSkin: Embed(source=”skin.swf”, symbol=”Button_disabledSkin”);
- selectedUpSkin: Embed(source=’skin.swf’, symbol=’Button_selectedUpSkin’);
- selectedOverSkin: Embed(source=’skin.swf’, symbol=’Button_selectedOverSkin’);
- selectedDownSkin: Embed(source=’skin.swf’, symbol=’Button_selectedDownSkin’);
- selectedDisabledSkin: Embed(source=’skin.swf’, symbol=’Button_selectedDisabledSkin’);
- }
效果图：
接下来我们打开FlexSkinTest.mxml文件，切换到Source面板，
添加 <mx:Style source="style/style.css"/>
<mx:Button x="10" y="10" label="Button"/>
换到Design面板，可以看到新加的Button组件已经应用我们的样式了，也可以多拖几个Button到程序中并设置不同的大小，可以发现边缘并未因形变发生模糊，这是我们使用了9切片的结果。
可以说，我们的Button组件皮肤已经完工了。
使用Flex Skin Design Extensions for Flash CS3
我们再开始第二种皮肤制作方法。
先做准备活动：
从http://www.adobe.com/go/flex3_cs3_swfkit下载Flex Component Kit for Flash CS3。
从http://www.adobe.com/go/flex3_skinning下载Flex Skin Design Extensions for Flash CS3.安装后重启Flash CS3.
到http://livedocs.adobe.com/flex/3/skinning_extensions_flex3.pdf下载操作手册。
从上面地址中还可以看到有For Fireworks,For Photoshop等FLEX皮肤制作插件，我们可能在后续文章中介绍实现方法。
首先打开Flash CS3,CTRL+N新建文件，切换“新建文档”到“模板”面板，选择Flex Skins->Button,如下图：
将文件命名为skintemplate.fla,背景色调整#333333。
新建成功后，可以看到舞台上的按钮元件。双击按钮元件进入编辑状态，或者在库中双击Button_skin元件。可看到如下图所示的时间轴：
简略的介绍一下这些层的用途。
States：定义对应组件的每种状态时间线上的关键帧，如上图所示中的关键帧帧名
Transitions:定义组件状态切换时的过渡动画，默认为每种状态的最后两个关键帧为起始帧和终止帧，以up状态切换到over状态举例，Transitions层的up-over:start帧为起始帧，up-over:end帧为终止帧，可在art层中制作相应的过渡动画
Art：组件的图形部分
你会发现程序只生成了4种状态，通过前面的学习知道Button组件可以有8种状态，没关系，我们在disabled后面再加入4个状态(注意区分大小写)：
以selectedUp状态为例：
States层关键帧名为selectedUp.
Transitions层，在最后两帧增加down-selectedOver:start, down-selectedOver:start两个关键帧作为过渡动画的起始与终止帧.
将前面制作的skin.fla中的Button组件皮肤移植过来。
例如up状态的：
所有状态完成后，CTRL+ENTER发布程序，这时会生成skintemplate.swf和skintemplate.swc两个文件。
