原文：http://www.jiangzone.com.cn/article.asp?id=57

 

      这里是第一篇，将讲述一下Flex中如何应用UI的皮肤，其实应用UI皮肤不难，你们在使用Flex的过程中是否觉得Flex中自带的皮肤样式不太好看？或者是想自已做个比较有特色的？下面就我们来说说皮肤吧，先来个简单的，你们在做网页时，做导航按钮什么的很多人都是用一个图片来作为一个按钮吧？之后做几个不同的颜色，之后就在CSS或者JS里设置一下当鼠标Over和Down和Out等等动作时，就切换不同颜色的图片，这样实现动态效果。在Flex里也可以如此简单的做皮肤。你可以先画好一个UI的皮肤，之就就将该图片应用到Flex里面。
先来看看效果：

之后我们来看看代码：

 

 

      怎么样？很简单吧？大家需要注意一下的是在Embed标签里，我定义了一些scaleGridTop之类的属性，这是跟皮肤的缩放有关的，如果不定义那些属性的话，那么图片是多大的，就按多大来进行缩放，当你的按钮很大时，那些皮肤图片就会被拉大，出现马赛克与变形等，这都是不好看的。加入了 9格缩放模式后，当你缩放按钮时，九个格中的四个角的区域不会被缩放，保持原样，中间格会宽高同时缩放，中间上下格会仅是宽度缩放，中间左右格只会高度缩放，这样，那个皮肤的边框无论你如何缩放，都是原来的大小比例，而不会将整个图片一起拉申。
      现在的按钮太单调了，只有一个外观，现在大家可以再加多两个不同颜色或者其它图案的图片作为不同状态的皮肤就可以了，比如将overSkin改成红色边框的图片等。

      其实大家有没有发现，上面代码的写法感觉比较麻烦的。我们可以用CSS来实现，我们可以直接点，将皮肤直接写在Button上，如下：

 

这样也是同样的效果。省事好多了吧。或者我们用CSS来写：

 

 

 

 

      但有人可能会问，这样做的话，如果一个程序有很多不同的UI，并有不同的皮肤，那不就是要生成很多的图片？这个问得好，确实，如果以这种方式的话，就像一个网站里的images文件夹一样，有很多的小图片，这样太麻烦了，而且也不好维护。既然有这样的问题，我们就将皮肤干脆做成在一个文件里面算了，方便快捷，维护又方便，而这个文件，就是SWF文件。我们如果有Flash基础的话，基本对MC都不会陌生，对，这次我们的主角就是SWF里面的 MC，我们可以将一个皮肤做成一个MC，在Flash里将所有用到的皮肤都做在一个SWF里，一个图片就像是一个MC，之后发布该SWF文件，在Flex 里加载这个SWF文件，再在需要的皮肤里调用SWF里面相应皮肤的MC的名字就可以了。如下：
这个是在Flash里做好的皮肤SWF文件，里面有三个不同颜色的皮肤模式

 

这里要注意一下，在Flash里做这些皮肤时，要将MC加上链接，链接的名称，就是你在Flex里调用该皮肤的名称，图片如下：

 

 

 

 

在做好皮肤的SWF后，让我们回到Flex 里面，在Flex里写如下代码：

 

 

注意一下的就是，在Embed标签里，要导入的资源文件不是PNG了，而是一个SWF，就是我们刚才在Flash里做好的皮肤文件，注意看，后面还跟着一个symbol属性，该属性就是指明你要调用哪一个MC，就是SWF里面的MC，记得，都要为每个MC做链接，并链接名字要与symbol里的名字致。至此，我们的皮肤就完成了。一个SWF文件就搞掂。这里是最终效果：
 

好了，这篇教程就到些结束，上面介绍的都是Skin的比较简单快捷的用法，不过灵活性就不是很大，但也是皮肤技术的最基础的，大家也可以再扩展一下其它用法等等的，在下篇文章，也就是Flex皮肤系列文章的（二）中，我会介绍一下用程序代码来编写皮肤，这就是不依赖于外部的资源文件，直接用AS3代码用 Graphics来自已画皮肤。下篇将会用到AS3的Draw API方面的知识，请大家做好准备。