FLEX4皮肤1_概述
发布时间：2020-12-15 04:02:25 所属栏目：百科 来源：网络整理
导读：转自http://blog.chinaunix.net/uid-122937-id-142921.html 1.SparkSkin介绍 ?? (1)spark.skins，这个包里面只有一个class：SparkSkin，非美工的程序员可以通过这个class来实现任意自定义控件的样式。 ?? (2)SparkSkin是一个Group类型的容器。（它继承自Grou
|
转自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，然后在其中加入一些我想要的内容即可，请看以下的代码： 点击(此处)折叠或打开
我们可以用以下几个方式： (1) Button {? ?? ? skinClass: ClassReference("com.skin.ButtonSkin2"); ??? } (2)<Button skinClass="com.skin.ButtonSkin2" /> (3)myButton.setStyle( "skinClass",Class( ButtonSkin2)); 例如 点击(此处)折叠或打开 '1.0'?'UTF-8':Application xmlns"library://ns.adobe.com/flex/spark"
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上色三种方法
stroke上色三种方法 SolidColor常见属性有 使用举例 点击(此处)折叠或打开 > 5.2 线性渐变 s:LinearGradient来设置线性渐变效果，常见属性 ??? rotation：颜色方向渐变，默认值为 0，表示从左到右渐变，90为从上到下 LinearGradient 内部是 entries 属性，它是一个 GradientEntry 类数组。常见属性 ??? color：该点设置的颜色 ??? ratio：一个百分比（从 0.0 到 1），在某个百分比处使用某种颜色 ??? alpha：表明透明度，值从0到1， 1代表完全不透明 例子如下，参见ShangsheExam1.mxml 点击(此处)折叠或打开 :Rect?"100"?"100">
另一例子参见《 Linear Gradients in Flex 4 5.3 RadialGradient ? s:RadialGradient 表示从中心向外以放射方式进行的填充模式。 例子如下，参见ShangsheExam1.mxml 点击(此处)折叠或打开 >
5.4三种线条颜色渐变 ??? s : SolidColorStroke、s LinearGradientStroke和s RadialGradientStroke分另表示了三种颜色渐变的方法 点击(此处)折叠或打开 :HGroup gap"21">
滤镜共有7种 6.1 阴影滤镜DropShadowFilter ??? s:DropShadowFilter可以设置组件的投影效果。 该组件常见属性如下： ??? alpha：阴影颜色的 Alpha 透明度值。 有效值为 ?0? 到 ?1 。例如， .25? 设置透明度值为 ?25% 。默认值是 ?1 ??? angle：阴影的角度。 ?360 （浮点）。默认值是 ?45 。角度值表示理论上的光源落在对象上的角度，它决定了效果相对于该对象的位置。 如果距离设置为 ?0 ，则该效果相对于该对象没有发生偏移，因此 ?angle? 属性没有任何效果。 ??? blurX：水平模糊量。 ?255 （浮点）。默认值为 ?4 。作为 ?2? 的乘方的值（如 ?2 、 4 8 16? 和 ?32 ）经过了优化，呈现速度比其它值更快。 ??? blurY：垂直模糊量 。有效值为 ??? color：阴影的颜色。 效值采用十六进制格式 ? 0xRRGGBB ??? distance：阴影的偏移距离，以像素为单位。 以像素为单位。 默认值为 （浮点） ??? inner：表示阴影是否为内侧阴影。 ??? knockout：应用挖空效果 (true)，这将有效地使对象的填色变为透明，并显示文档的背景颜色。 ??? quality:应用滤镜的次数。有效值为 0 到 15。默认值为 1，它表示低品质。值为 2 表示中等品质，值为 3 表示高品质。滤镜的值越小，呈现速度越快。 ??? strength：印记或散布的强度。该值越高，印记的颜色越深，而且阴影与背景之间的对比度也越强。有效值为 0 到 255。默认值为 1。 设置可以有两种方式 1.通过includeIn设置何种状态阴影的显示效果 点击(此处)折叠或打开 --?仅对 down state进行投影?:Rect radiusX"5"?radiusY"5"?top"0"?right"0"?bottom"0"?
??? <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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
