FLEX4皮肤1_概述

转自http://blog.chinaunix.net/uid-122937-id-142921.html

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，然后在其中加入一些我想要的内容即可，请看以下的代码：

具体代码详见ButtonSkin2.mxml

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

例如

3.皮肤的状态
    s:states用于描述组件所具有的状态。这样可以具体的定义不同状态下皮肤的显示效果。
<s:states>
      <s:State name="up"/>
      <s:State name="over"/>
      <s:State name="down"/>
      <s:State name="disabled"/>
</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 <length>: 矩形的宽度。
    height <length>: 矩形的高度。
    radiusX <length>: 圆角矩形，圆角在X轴椭圆半径的弯道，此值四舍五入。
    radiusY <length>: 圆角矩形，圆角在y轴椭圆半径的弯道，此值四舍五入。
    rotation <Number>: 旋转角度，正数为顺时针，负数为逆时针。
    scaleX <Number>: x轴缩放，默认为100，表示两个颜色融合区域的大小。
    scaleY <Number>: y轴缩放，默认为100，表示两个颜色融合区域的大小。
    visible <Boolean>: 可见性。

我们在重新看一下这些代码的意义：
<s:Ellipse width="100%" height="100%">
      <s:fill>
            <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
      </s:fill>
      <s:stroke>
            <s:SolidColorStroke color="0x0c0d0d" />
      </s:stroke>
</s:Ellipse>
含义：
   定义一个椭圆形（因为宽和高相等）然后填充一个0x131313的颜色，并且设定鼠标移上、按下时的颜色值（color.over="#191919" color.down="#ffffff"）然后在定义一个边框，设定颜色为0x0c0d0d。

<s:RichText id="labelElement" 
      fontFamily="Myriad Pro" 
      fontSize="11" 
      color="0xBBBBBB" 
      textAlign="center" 
      horizontalCenter="0" 
      verticalCenter="1" 
      width="100%">
</s:RichText>
上面的代码定义了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源代码解析 》。

使用举例
具体代码详见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 表示，矩形在三个点(10%,50%,70%)处采用三种不同的颜色，其它地方为颜色渐变区域，效果如下


另一例子参见《 Linear Gradients in Flex 4 》。

5.3 RadialGradient
  s:RadialGradient 表示从中心向外以放射方式进行的填充模式。
例子如下，参见ShangsheExam1.mxml
表示，椭圆在三个点(10%,50%,70%)处采用三种不同的颜色，其它地方为颜色渐变区域，效果如下



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

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设置何种状态阴影的显示效果

2.通过blurX .状态值显示阴影效果
    <s:DropShadowFilter quality="3"
        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外观设计.http://hi.baidu.com/shuperjolly/item/c605b40e390855cf91571800
3.Linear Gradients in Flex 4. http://www.artima.com/articles/linear_gradients_in_flex_4.html

最后

以上就是活泼小馒头为你收集整理的FLEX4皮肤1_概述的全部内容，希望文章能够帮你解决FLEX4皮肤1_概述所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。