Flex4弱化了css样式的功能，使得复杂界面效果必须通过Skin来完成，Skin几乎能实现所有你希望设计界面显示的效果。
SparkSkin是一个Group类型的容器（继承自Group）；全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类；
可以用几种方式使用Skin：
（1）在css中直接定义
s|Button{
skinClass:ClassReference("com.skin.ButtonSkin");
}
（2）在组件定义时设置
<s:Button skinClass="com.skin.ButtonSkin"/>
Skin实例详解：
所有skin的修改方式大都相同，根据详细的注释，可以清楚的了解控件的样式实现方法，知道哪些是用来设计边框的，哪些是用来设计填充颜色的，以及哪些是现实文本的颜色。可以通过<s:stroke>来修改边框，<s:fill>来修改填充等。
下面讲解如何通过皮肤将如左图的普通radioButton，设计如右图中的效果。
1）首先新建一个MXML Skin类型的文件，组件选择RadioButton.
2）初始生成的文件，为系统默认的皮肤效果。首先你会看到
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
......
</s:states>
定义了RadioButton的视图状态，包括鼠标滑过、选中等状态，在皮肤定义里会经常看到例如color.downStates="0xFFFFFF"；alpha. over="1"意在定义不同状态时组件呈现的颜色。
3）接着会有一个Group容器，里面放了很多用于效果设计的组件，RadioButton原始皮肤是由很多个Ellipse组件组成的，包括它的边框，阴影，高光等效果。因为效果图的显示效果比原来的效果要大，因此将Group大小由长宽13改为长宽都为14。
首先找到注释为<!-- drop shadow -->的椭圆控件，该内容定义了RadioButton的阴影效果。
默认情况下的阴影效果为：
<!-- drop shadow -->
<s:Ellipse left="-1" top="-1" right="-1" bottom="-1">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.011" alpha.downStates="0" />
<s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.121" alpha.downStates="0.57" />
</s:LinearGradientStroke>
</s:stroke>
</s:Ellipse>
即边框线性渐变，宽度为1，旋转角度90度，即正中切割一般有阴影，根据效果图，阴影效果在右上，因此旋转角度改为45度；
阴影颜色也不是纯黑色颜色
另外为了增加渐变的效果性，改为四色线性渐变，色彩之间通过透明度不同来实现缓冲效果；
阴影的宽度增加到3增强立体效果。
<!-- drop shadow -->
<s:Ellipse left="-1" top="-1" right="-1" bottom="-1">
<s:stroke>
<s:LinearGradientStroke rotation="45" weight="3">
<s:GradientEntry color="0x7ca39b" color.downStates="0xFFFFFF" alpha="0.8" alpha.downStates="0.8" />
<s:GradientEntry color="0x7ca39b" color.downStates="0xFFFFFF" alpha="1" alpha.downStates="1" />
<s:GradientEntry color="0xf5f8f7" color.downStates="0xFFFFFF" alpha="0.8" alpha.downStates="0.8" />
<s:GradientEntry color="0xf5f8f7" color.downStates="0xFFFFFF" alpha="1" alpha.downStates="1" />
</s:LinearGradientStroke>
</s:stroke>
</s:Ellipse>
再看边框，比较原图和效果图会发现，效果图没有边框，只靠阴影形成来形成圆形形状，因此找到注释为<!—border的组件，将其删掉，或者设置alpha值为0，使其不显示边框。
选中点：dot
找到注释为<!-- dot -->的组件，可以发现，中心选中点，是一个由path绘制而成的原点，填充而成的，现在需要加大这个原点。
path指令很难记的，绘制了半天最终偶放弃了，用了一个简单的Ellipse绘制而成的。
但是注意：可以用其他组件代替已有组件，但是id="dotFill"的定义要仍然保留给新定义组件的填充器，否则报错，代码如下。
<s:Ellipse right="3" bottom="3" left="3" top="3" includeIn = "selectedStates" id="dot" itemCreationPolicy="immediate">
<s:fill>
<s:SolidColor id="dotFill" color="#e67f25" />
</s:fill>
</s:Ellipse>
4)使用已定义的皮肤。
.chartRadioButton{
skinClass:ClassReference("com.skin.radioButtonSkin");
symbolColor:#1cb49b;
}
效果：
.levelRadioButton{
skinClass:ClassReference("com.skin.radioButtonSkin");
symbolColor:#e67f25;
}
效果：
使用同一个Skin，设置了不同的symbolColor（元件的颜色），使得选中效果有不同展示效果。
