一.什么是皮肤？ 为什么要定义皮肤？
皮肤是用于控制组件的外观的组件，就是说控制组件的所有可视化部分。
将组件的外观和行为分开，通过皮肤可以对可视化部分进行独立的修改，而不影响到组件的底层核心部分
二.皮肤和css的区别
皮肤与css都是设计样式的，但是却有本质的不同。
Skin就好比一件衣服，有一个默认的款式与外观，同时也包含了一些参数，可以改变skin的默认样式。具体的应用
三.皮肤的使用
1.FLEX默认的皮肤
（1）Flash Builder 4.5 新增的主题
C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\frameworks\themes目录下面的内容就是Fl  包括：AeonGraphical、Halo、Mobile、Spark、Wireframe主题。 SDK4.5默认的主题：Spark
（2）Spark和Halo中重要的三套皮肤所在的位置
Spark组件默认皮肤的位置：C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\frameworks\  Halo组件默认皮肤的位置： C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\frameworks\  Spark skin for Halo皮肤的位置：C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\frame
2.SparkSkin介绍
（1）SparkSkin：是全部Spark Class的基础类，大部分可视化控件的皮肤都是SparkSkin的子类。我们通过这个（2）Skin：是SparkSkin的父类，例如：ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的皮肤，
综上所述，也就是可以使用SparkSkin的地方，我们使用Skin一样可以达到同样的效果。
3.皮肤的创建
（1）直接将默认皮肤拷贝过来后进行修改
（2）在Eclipse下，右键-新規-MXML スキン
  1)名前：创建的皮肤的名称
  2)ホストコンポーネント：需要追加皮肤的控件
  3)コピーする対象：选中：拷贝默认的spark皮肤代码， 不选中：不拷贝默认皮肤代码，只生成一个皮肤框
  4)ActionScriptのスタイル設定コードを削除： 选中：生成相关的ActionScript代码 不选中：不生成相关
4.皮肤的使用
（1）s|CheckBox {
skinClass:ClassReference("components.skins.checkBox.CheckBoxSkin");
}
（2）<s:Button skinClass="components.skins.button.CreativeDeleteButtonSkin" />
（3）myButton.setStyle( "skinClass", CustomEnterButtonSkin);
5.皮肤代码的讲解
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe/flex/spark"
xmlns:fx="ns.adobe/mxml/2009">
<fx:Metadata>
[HostComponent("sparkponents.RadioButton")]HostComponent 元数据指</fx:Metadata>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/><s:State name="upAndSelected"/><s:State name="overAndSelected"/><s:State name="downAndSelected"/><s:State name="disabledAndSelected"/>
</s:states><s:Group x="0" y="0">
<s:Group x="0" y="0">
<s:Ellipse x="0" y="0" width="20" height="20">
<s:fill>
<s:LinearGradient x="10" y="20" rotation="270" scaleX="20">
<s:GradientEntry color="#333333" ratio="0"/>
<s:GradientEntry color="#737373" ratio="1"/>
</s:LinearGradient>
</s:fill>
</s:Ellipse>
</s:Group>
<s:Group x="2" y="2" >
<s:Ellipse x="0" y="0" width="16" height="16">
<s:fill>
<s:LinearGradient x="8" y="16" rotation="270" scaleX="16">
<s:GradientEntry color="#737373" ratio="0"/>
<s:GradientEntry color="#333333" ratio="1"/>
</s:LinearGradient>
</s:fill>
</s:Ellipse>
</s:Group>
<s:Group x="4" y="4"
visible.disabled="false"
visible.down="false" visible.over="false"
visible.up="false">
<s:Ellipse x="0" y="0" width="12" height="12">
<s:fill>
<s:RadialGradient x="6.33301" y="0.666992" rotation="90" scaleX="22.754"
<s:GradientEntry color="#FFFF00" ratio="0"/>
<s:GradientEntry color="#FF9900" ratio="1"/>
</s:RadialGradient>
</s:fill>
</s:Ellipse>
</s:Group>
</s:Group>
<s:Label id="labelDisplay" left="24" right="0" top="3" bottom="3" maxDisplayedLines="1"
textAlign="start" verticalAlign="middle" verticalCenter="2"/>
</s:Skin>
6.复杂皮肤的制作
（1）Flash Catalyst介绍
Adobe推出的一款便于设计师与开发者之间交互的产品，它把Illustrator或是Photoshop里边设计好的图纸
定义RadioBut
设置没有选中时的样式
（2）Flash Catalyst工作流程
（3）Download按钮举例说明
（4）定义皮肤时的常用类
Flex中基本形状有三种：
Rect矩形（圆角矩形）
Ellipse椭圆（圆形）
Line直线
Flex的复杂图形使用Path来绘制
以下是一个尖角向下的红三角形的绘制（其主要通过节点坐标来绘制）：
<Path data="M 0 0 L 100 0 L 50 100 Z">
<fill>
<SolidColor color="#FF0000"/>
</fill>
</Path>
data中M表示起始位置，Z表示返回到起始位置。
Flex使用fill对图形本体进行上，使用stroke对图形边框进行上，而fill（填充）和stroke（画笔）fill — SolidColor（块），RadialGradient（径向渐变），LinearGradient（线性渐变）。
stroke — SolidColorStroke（实线），RadialGradientStroke（径向渐变），LinearGradientStr
Flex中常用的效果滤镜有7个：
GlowFilter（单发光滤镜）
BlurFilter（模糊滤镜）
DropShadowFilter（阴影滤镜）
BevelFilter（斜角滤镜）
GradientGlowFilter（彩发光滤镜）
GradientBevelFilter（彩斜角滤镜）
ColorMatrixFilter（彩响应矩阵滤镜）
核心部分
kin的默认样式。具体的应用样式，用CSS帮你细化，如：给这件衣服设置不同的颜，不同的尺码emes目录下面的内容就是Flash Builder 4.5 新增的主题（theme）样式所在的位置。
5\sdks\4.5.0\frameworks\projects\spark\src\spark\skins\spark
5\sdks\4.5.0\frameworks\projects\mx\src\mx\skins\halo
der 4.5\sdks\4.5.0\frameworks\projects\sparkskins\src\mx\skins\spark
kSkin的子类。我们通过这个SparkSkin来实现自定义控件的皮肤。
自定义这部分组件的皮肤，则需要使用Skin。
皮肤代码，只生成一个皮肤框架
checkbox和radiobutton的区别
pt代码 不选中：不生成相关的ActionScript代码
HostComponent 元数据指向您要设计外观的组件
up: 抬起时(默认)
over: 鼠标经过按钮时
down: 按下时
disabled: 禁用时
upAndSelected: 抬起并且被选中时
overAndSelected: 鼠标经过并且被选中
downAndSelected: 按下并且被选中
disabledAndSelected: 禁用并且被选中
Ellipse: 画一个椭圆形
fill: 设置填充方式
LinearGradient： 设置渐变颜
rotation：设置过滤方向，这里是从下到上
GradientEntry：设置渐变颜
ion="90" scaleX="22.754" scaleY="22.754">
xDisplayedLines="1"
Photoshop里边设计好的图纸直接导入，然后自动生成开发人员所需要的Flex代码
ioButton的一组外观状态
设置文本样式
和stroke（画笔）有三种上方法：radient（线性渐变）。
渐变），LinearGradientStroke（线性渐变）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。