hanyeah

参考：http://www.riaway.com/flex/84.html

spark中的自定义皮肤。和mx中用css样式设置皮肤有很大的不同。spark中，给组件设置skinClass之后，原来的皮肤外观就不起作用了，只能显示skinClass定义的组件外观（只是外观不起作用，代码逻辑还起作用），我理解为：代码继承了父类，而外观不能继承。我最初想的自定义外观，是在原来基础上修改，而spark中能做的，是完全重写。

flex开发还是用flash builder比较方便，可以新建mxml外观，选择“主机组件”，就能自动生成“主机组件”原来皮肤的源码，然后只需要在此基础上修改就行。但是如此一来，问题又来了，有的组件（其实大部分都是）定义的相当复杂，在原有的基础上修改，不是件容易的事，不仅要求程序员对组件的组成有深入的了解，还要让设计人员按照一定的结构来设计组件外观，从目前公司和个人的实际情况来看，这么做不太现实。

干脆，直接把那些复杂的外观定义删掉，自己重写。spark中的皮肤定义是用的矢量图，制作并导出可用的矢量图，对于设计妹子来说有点难，还是直接出图或者在flash里摆放好了，导出swf简单。然后在spark的皮肤定义文件中用Embed元标签来嵌入相应的元件。这么一来，在spark中定义皮肤就简单多了，但是要注意，有些东西还要保留，比如按钮的Label(文本)，其他未作研究，以后遇到再做补充。

这么一来，又遇到了一个问题，就是本篇的题目中提到的，位图在缩放的时候，会变形，flash或者好多其他软件都用到的一个方法，就是位图九宫格。在flash中使用位图九宫格还是很简单的，但是spark自定义皮肤中如何使用九宫格呢？也就是说如何对Embed嵌入的元件来使用位图九宫格呢？参见文章开始提到的那篇文章，如

1. [Embed(source="assets/btn.png",scaleGridTop="14",scaleGridBottom="88",scaleGridLeft="12",scaleGridRight="125")]

说了半天，其实就是加了几个参数，scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight。如果是嵌入的图片，需要自己指定这几个参数，但是我们用的是swf，而在swf中，元件已经设置了使用九宫格，在嵌入的时候，swf中设置的九宫格是否仍其作用呢，答案是:是的，仍然起作用。说了半天，这里提到的几个参数根本不用加，只需要在swf里边设置好九宫格就好了。

可是直接嵌入元件之后确实没有缩放，或者缩放了，却变形了，又是为什么呢？

1. <s:BitmapImage left="0" right="0" top="0" bottom="0" source.up='@Embed(source="flexskinheatherford.swf", symbol="Button_upSkin")'

2.    source.over='@Embed(source="flexskinheatherford.swf", symbol="Button_overSkin")'

3.    source.down='@Embed(source="flexskinheatherford.swf", symbol="Button_downSkin")'

4.    source.disabled='@Embed(source="flexskinheatherford.swf", symbol="Button_disabledSkin")'/>

   
   

看上面这几行代码，这个是设置的按钮的4个状态，关键就在于left="0" right="0" top="0" bottom="0"，有了这几句，背景图就会跟着文字内容缩放了。至于九宫格，已经有了，可以自己试试。

参考文章中有一段是这么写的：

1. override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void {

2. bgSkin = getStyle("bgImg");

3. }

4. ...

5. <s:BitmapImage source="{bgSkin}"

6. left="0" right="0" top="0" bottom="0"

7. alpha.over="0.5" alpha.down="0.8" alpha.disabled="0.1"

8. />

然后再通过css来设置bgSkin，也就是说，我们可以自己定义css样式。

关于id属性。flex中是通过id来实现在代码中操作xml定义的标签的。那么删除相应id的标签，会不会出问题呢？貌似是不会，等遇到问题再说吧。有些皮肤是有相应的功能的，如果我们想要自定义皮肤又保留相应的功能，只需要指定相应的id就可以了（相当于只替换了外观，保留了功能）。