下面以Button组件为例，开始FLEX皮肤制作的入门

wangxq 2010-05-04

展开全文

我们先在Flex Builder 3中新建一个项目FlexSkinTest

新建文件夹style，并在style文件夹下新建style.css文件：

双击打开style.css，切换到Design面板并新建一个样式：

选择Button组件：

按下OK后可以看到按钮的8种状态。便于测试，我们把背景色调整为0×333333：

切换到Source面板调整字体样式：

结果如下图：

接下来的工作就是把按钮的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，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’);
}