FLEX4皮肤1_概述.doc

转自/uid-122937-id-142921.html1.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，然后在其中加入一些我想要的内容即可，请看以下的代码：点击(此处)折叠或打开1. 2. 5. 6. 7. 8. 9. 10. 11. 12. HostComponent(ponents.Button)13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 33. 34. 35. 具体代码详见ButtonSkin2.mxml我们可以用以下几个方式：(1) Button skinClass: ClassReference(com.skin.ButtonSkin2); (2)(3)myButton.setStyle( skinClass, Class( ButtonSkin2);例如点击(此处)折叠或打开1. 2. 5. 6. 9. 10. 12. 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。上面的代码定义了Button中可以显示文字的部分。5.图形上色 FLEX皮肤通过s:fill对图形本体进行上色，使用s:stroke对图形边框进行上色，而fill（填充）和stroke（画笔）有三种上色方法：fill上色三种方法 SolidColor（色块） LinearGradient（线性渐变） RadialGradient（径向渐变）stroke上色三种方法 SolidColorStroke（实线） RadialGradientStroke（径向渐变） LinearGradientStroke（线性渐变）5.1 SolidColorSolidColor常见属性有 alpha：阴影颜色的 Alpha 透明度值。有效值为0到1，1代表完全不透明。例如，.25设置透明度值为25%。默认值是1 color：阴影的颜色。效值采用十六进制格式0xRRGGBBSolidColor原码参见mx.graphics.SolidColor源代码解析。使用举例点击(此处)折叠或打开1. 2. 3. 4. 5. 6. 7. 8. 具体代码详见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点击(此处)折叠或打开1. 2. 3. 4. 5. 6. 7. 8. 9. 表示，矩形在三个点(10%,50%,70%)处采用三种不同的颜色，其它地方为颜色渐变区域，效果如下另一例子参见Linear Gradients in Flex 4。5.3 RadialGradient s:RadialGradient 表示从中心向外以放射方式进行的填充模式。例子如下，参见ShangsheExam1.mxml点击(此处)折叠或打开1. 2. 3. 4. 5. 6. 7. 8. 9. 表示，椭圆在三个点(10%,50%,70%)处采用三种不同的颜色，其它地方为颜色渐变区域，效果如下5.4三种线条颜色渐变 s:SolidColorStroke、s:LinearGradientStroke和s:RadialGradientStroke分另表示了三种颜色渐变的方法例子如下，参见ShangsheExam1.mxml点击(此处)折叠或打开1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 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设置何种状态阴影的显示效果点击(此处)折叠或打开1. 2. 4. 5. 6. 7. 8. 10. 11. 2.通过blurX.状态值显示阴影效果 具体例子详见ButtonSkin3.mxml参考文献：1.Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin ./zblog/post/flash-builde