Flex中的皮肤（一）

好久没有写文章了，一直用“忙”来为自已找籍口，其实是懒，不过这个月发生了这么大的事情 5.12 让我们每个人都永记心中，看到中国人的团结，看见解放军们志愿者们这么努力地为灾区奉献，我也不能再为自已找借口了，虽然我远在广东，不能到现场去参与救缓，钱也捐过了，但想想，我还有事情可以做的，就是用我自已的知识，写点技术文章，虽则不能直接的帮助到灾区，但也为国民提高Flex技术知识出分力，做好本职工作。在这里哆嗦点也得说句：为灾区遇难者祈祷，为灾区救缓不懈努力的军民给与崇高的敬意!
.....................................................(三分钟后)

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


之后我们来看看代码：

 1  <? xml version="1.0" encoding="utf-8" ?>
 2  < mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  creationComplete ="init()"  width ="257"  height ="182"  backgroundGradientColors ="[#ffffff, #ffffff]" >
 3     
 4       < mx:Script >
 5           <![CDATA[
 6             
 7              //Embed标签是用于将一些外部资源加入到Flex中，随Flex的编译成SWF文件，
 8              //这里是加入一张PNG图片，即是做好的Skin图片
 9              [Embed(source="images/buttonskin.png",
10                     scaleGridTop="26",
11                     scaleGridBottom="64",
12                     scaleGridLeft="30",
13                     scaleGridRight="106")]
14              //上面的Embed标签下面要紧跟着这个Class，意思就是将上面的资源加入到Flex
15              //后变为这个Class的内容，即调用这个Class时，就是调用那些资源
16              private var MyBtnSkin:Class;
17             
18              //在程序创建完成时会调用该函数，在函数里面设置Button的样式（Style）
19              //这里就是设置按钮的up,over,down三个鼠标状态时的皮肤，就是上面加入的图片资源
20              private function init():void{
21                  btn.setStyle("upSkin",MyBtnSkin);
22                  btn.setStyle("overSkin",MyBtnSkin);
23                  btn.setStyle("downSkin",MyBtnSkin);
24              }
25           ]]>
26       </ mx:Script >
27       < mx:Button  id ="btn"  label ="Hello World"  width ="190"  height ="90" />
28  </ mx:Application >

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

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

1  < mx:Button  label ="Hello World"
2          upSkin ="@Embed('images/buttonskin.png')"
3          overSkin ="@Embed('images/buttonskin.png')"
4          downSkin ="@Embed('images/buttonskin.png')"
5       />

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

 1  <? xml version="1.0" encoding="utf-8" ?>
 2  < mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="257"  height ="182"  backgroundGradientColors ="[#ffffff, #ffffff]" >
 3       < mx:Style >
 4          Button{
 5              up-skin:Embed(source="images/buttonskin.png",
 6                            scaleGridTop="26",
 7                            scaleGridBottom="64",
 8                            scaleGridLeft="30",
 9                            scaleGridRight="106");
10              over-skin:Embed(source="images/buttonskin.png",
11                            scaleGridTop="26",
12                            scaleGridBottom="64",
13                            scaleGridLeft="30",
14                            scaleGridRight="106");
15          }
16       </ mx:Style >
17       < mx:Button  id ="btn"  label ="Hello World"  width ="190"  height ="90" />
18  </ mx:Application >

如果觉得加上CSS代码会令程序代码混乱的话，就将CSS代码写在CSS文件里去，在程序里导入CSS文件就可以了。(至于CSS的用法，我就不说了，反正Flex里的CSS方式与Html里的用法用样。只是要注意一下CSS里面设置的属性的名字就可以了)

<mx:Style source="styles/styles.css" />

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




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

 1  <? xml version="1.0" encoding="utf-8" ?>
 2  < mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="257"  height ="182"  backgroundGradientColors ="[#ffffff, #ffffff]" >
 3       < mx:Style >
 4          Button{
 5              up-skin:Embed(source="images/btnSkin.swf",symbol="btnUP");
 6              over-skin:Embed(source="images/btnSkin.swf",symbol="btnOVER");
 7              down-skin:Embed(source="images/btnSkin.swf",symbol="btnDOWN");
 8          }
 9       </ mx:Style >
10       < mx:Button  id ="btn"  label ="Hello World"  width ="100"  height ="60" />
11  </ mx:Application >

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


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