FLEX4皮肤1_概述

1.SparkSkin介绍
   (1)spark.skins，这个包里面只有一个class：SparkSkin，非美工的程序员可以通过这个class来实现任意自定义控件的样式。
   (2)SparkSkin是一个Group类型的容器。（它继承自Group）
   (3)全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类
   (4)SparkSkin：是全部Spark Class的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。
      Skin：是SparkSkin的父类，例如ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的样式，则需要使用Skin。
      综上所述，也就是可以使用SparkSkin的地方，我们使用Skin一样可以达到同样的效果。

2.SparkSkin的定义与使用
   在Flex SDK 4(Gumbo)中，我们只需要将这个button的样式继承与SparkSkin或者Skin，然后在其中加入一些我想要的内容即可，请看以下的代码：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fx="">
    <s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
    </s:states>
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:Ellipse width="100%" height="100%">
        <s:fill>
            <s:SolidColor color="0x222222" color.over="#191919" color.down="#eeeeee"/>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0xFF0000" />
        </s:stroke>
    </s:Ellipse>

    <s:RichText id="labelElement"
                fontFamily="Myriad Pro"
                fontSize="11"
                color="0x00ff00"
             text="我的入室操戈"
                textAlign="center"
                horizontalCenter="0"
                verticalCenter="1"
                width="100%">
    </s:RichText>

</s:SparkSkin>

具体代码详见ButtonSkin2.mxml

我们可以用以下几个方式：
(1) Button {
     skinClass: ClassReference("com.skin.ButtonSkin2");
    }
(2)
(3)myButton.setStyle( "skinClass", Class( ButtonSkin2));

例如

<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:fx=""
               height="254" width="576">
    <fx:Script>
        <![CDATA[
            import com.skin.ButtonSkin2;
        ]]>
    </fx:Script>
    <s:Button x="54" y="56" skinClass="com.skin.ButtonSkin2" height="32"
              width="77" label="我的按钮"/>
</s:Application>

3.皮肤的状态
    s:states用于描述组件所具有的状态。这样可以具体的定义不同状态下皮肤的显示效果。

     
     
     
     

含义：
   定义了Button的四种状态：up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能，用State来描述状态。
   在Flex SDK 3的情况下，只能描述UI的不同状态，而在Flex SDK 4(Gumbo)中，又赋予了State描述控件状态的功能。

4.FLEX的基本图形
      FLEX中基本形状分为矩形（圆角矩形）、椭圆（圆形）、直线
      s:stroke用于画边框
      s:Ellipse 画一个圆形（椭圆形）
      s:Rect 画一个矩形
      s:fill用于对图形本体进行上色

Rect矩形和Ellipse椭圆形的一些基本属性：
    width : 矩形的宽度。
    height : 矩形的高度。
    radiusX : 圆角矩形，圆角在X轴椭圆半径的弯道，此值四舍五入。
    radiusY : 圆角矩形，圆角在y轴椭圆半径的弯道，此值四舍五入。
    rotation : 旋转角度，正数为顺时针，负数为逆时针。
    scaleX : x轴缩放，默认为100，表示两个颜色融合区域的大小。
    scaleY : y轴缩放，默认为100，表示两个颜色融合区域的大小。
    visible : 可见性。

我们在重新看一下这些代码的意义：

     
           
     
     
           
     

含义：
   定义一个椭圆形（因为宽和高相等）然后填充一个0x131313的颜色，并且设定鼠标移上、按下时的颜色值（color.over="#191919" color.down="#ffffff"）然后在定义一个边框，设定颜色为0x0c0d0d。

      fontFamily="Myriad Pro"
      fontSize="11"
      color="0xBBBBBB"
      textAlign="center"
      horizontalCenter="0"
      verticalCenter="1"
      width="100%">

上面的代码定义了Button中可以显示文字的部分。

5.图形上色
      FLEX皮肤通过s:fill对图形本体进行上色，使用s:stroke对图形边框进行上色，而fill（填充）和stroke（画笔）有三种上色方法：

fill上色三种方法

• SolidColor（色块）
• LinearGradient（线性渐变）
• RadialGradient（径向渐变）

stroke上色三种方法

• SolidColorStroke（实线）
• RadialGradientStroke（径向渐变）
• LinearGradientStroke（线性渐变）

5.1 SolidColor
SolidColor常见属性有

• alpha：阴影颜色的 Alpha 透明度值。有效值为 0 到 1，1代表完全不透明。例如，.25 设置透明度值为 25%。默认值是 1
• color：阴影的颜色。效值采用十六进制格式 0xRRGGBB

SolidColor原码参见《mx.graphics.SolidColor源代码解析》。

使用举例

<s:Ellipse width="100%" height="100%">
        <s:fill>
            <s:SolidColor color="0x222222" color.over="#191919" color.down="#eeeeee" alpha="1"/>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0xFF0000" />
        </s:stroke>
</s:Ellipse>

具体代码详见ButtonSkin2.mxml
     定义一个椭圆形，然后填充一个0x222222的颜色，并且设定鼠标移上、按下时的颜色值（color.over="#191919" color.down="#ffffff"），椭圆的透明度为1(不透明)，然后在定义一个边框，设定颜色为0xFF0000。

5.2 线性渐变
s:LinearGradient来设置线性渐变效果，常见属性
    rotation：颜色方向渐变，默认值为 0，表示从左到右渐变，90为从上到下

LinearGradient 内部是 entries 属性，它是一个 GradientEntry 类数组。常见属性
    color：该点设置的颜色
    ratio：一个百分比（从 0.0 到 1），在某个百分比处使用某种颜色
    alpha：表明透明度，值从0到1，1代表完全不透明

例子如下，参见ShangsheExam1.mxml

<s:Rect width="100" height="100">
   <s:fill>
       <s:LinearGradient>
              <s:GradientEntry color="#00cc00" ratio="0.1"/>
              <s:GradientEntry color="#ff4400"  ratio="0.5"/>
              <s:GradientEntry color="#004488" ratio="0.7"/>
              </s:LinearGradient>
       </s:fill>
</s:Rect>

表示，矩形在三个点(10%,50%,70%)处采用三种不同的颜色，其它地方为颜色渐变区域，效果如下


另一例子参见《》。

5.3 RadialGradient
  s:RadialGradient 表示从中心向外以放射方式进行的填充模式。
例子如下，参见ShangsheExam1.mxml

<s:Ellipse width="100" height="100">
    <s:fill>
        <s:RadialGradient>
            <s:GradientEntry color="#00cc00" ratio="0.1"/>
            <s:GradientEntry color="#ff4400" ratio="0.5"/>
            <s:GradientEntry color="#004488" ratio="0.7"/>
        </s:RadialGradient>
    </s:fill>
</s:Ellipse>

表示，椭圆在三个点(10%,50%,70%)处采用三种不同的颜色，其它地方为颜色渐变区域，效果如下



5.4三种线条颜色渐变
    s:SolidColorStroke、s:LinearGradientStroke和s:RadialGradientStroke分另表示了三种颜色渐变的方法
例子如下，参见ShangsheExam1.mxml

<s:HGroup gap="21">
            <s:Ellipse width="100" height="100">
                <s:stroke>
                    <s:LinearGradientStroke  weight="20">
                        <s:GradientEntry color="#00cc00"/>
                        <s:GradientEntry color="#ff4400"/>
                        <s:GradientEntry color="#004488"/>
                    </s:LinearGradientStroke>
                </s:stroke>
            </s:Ellipse>
            <s:Rect width="100" height="100">
                <s:stroke>
                    <s:RadialGradientStroke weight="20">
                        <s:GradientEntry color="#00cc00"/>
                        <s:GradientEntry color="#ff4400"/>
                        <s:GradientEntry color="#004488"/>
                    </s:RadialGradientStroke>
                </s:stroke>
            </s:Rect>
            <s:Ellipse width="100" height="100">
                <s:stroke>
                    <s:SolidColorStroke color="#ffaa00" weight="20"/>
                </s:stroke>
            </s:Ellipse>
</s:HGroup>

6.FLEX滤镜

滤镜共有7种

• DropShadowFilter（阴影滤镜）
• GlowFilter（单色发光滤镜）
• BlurFilter（模糊滤镜）
• BevelFilter（斜角滤镜）
• GradientGlowFilter（彩色发光滤镜）
• GradientBevelFilter（彩色斜角滤镜）
• ColorMatrixFilter（色彩响应矩阵滤镜）

6.1 阴影滤镜DropShadowFilter
    s:DropShadowFilter可以设置组件的投影效果。

该组件常见属性如下：
    alpha：阴影颜色的 Alpha 透明度值。有效值为 0 到 1。例如，.25 设置透明度值为 25%。默认值是 1
    angle：阴影的角度。有效值为 0 到 360（浮点）。默认值是 45。角度值表示理论上的光源落在对象上的角度，它决定了效果相对于该对象的位置。
如果距离设置为 0，则该效果相对于该对象没有发生偏移，因此 angle 属性没有任何效果。
    blurX：水平模糊量。有效值为 0 到 255（浮点）。默认值为 4。作为 2 的乘方的值（如 2、4、8、16 和 32）经过了优化，呈现速度比其它值更快。
    blurY：垂直模糊量。有效值为 0 到 255（浮点）。默认值为 4。作为 2 的乘方的值（如 2、4、8、16 和 32）经过了优化，呈现速度比其它值更快。
    color：阴影的颜色。效值采用十六进制格式 0xRRGGBB
    distance：阴影的偏移距离，以像素为单位。以像素为单位。 默认值为 4（浮点）
    inner：表示阴影是否为内侧阴影。
    knockout：应用挖空效果 (true)，这将有效地使对象的填色变为透明，并显示文档的背景颜色。
    quality:应用滤镜的次数。有效值为 0 到 15。默认值为 1，它表示低品质。值为 2 表示中等品质，值为 3 表示高品质。滤镜的值越小，呈现速度越快。
    strength：印记或散布的强度。该值越高，印记的颜色越深，而且阴影与背景之间的对比度也越强。有效值为 0 到 255。默认值为 1。

设置可以有两种方式
1.通过includeIn设置何种状态阴影的显示效果

<!-- 仅对 down state进行投影 -->
    <s:Rect radiusX="5" radiusY="5" top="0" right="0" bottom="0"
            left="0" includeIn="down">
        <s:fill>
            <s:SolidColor color="0"/>
        </s:fill>
        <s:filters>
            <s:DropShadowFilter knockout="true" blurX="5" blurY="5"
                                alpha="0.62" distance="10" />
        </s:filters>
    </s:Rect>

2.通过blurX.状态值显示阴影效果
            alpha="0.5" alpha.over="0.3"
        distance="5" distance.over="15"
        blurX.over="15" blurY.over="15"
        inner.down="true"/>
具体例子详见ButtonSkin3.mxml



参考文献：
1.Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin .http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin.html
2.Flex 4中Skin Class外观设计.
3.Linear Gradients in Flex 4.