Flex效果
视频课：https://edu.csdn.net/course/play/7621
本章简介
通过前面章节的学习，我们已经可以开发FLex应用了，本章的任务是对Flex应用进行美化以提高用户的感受度。
在Flex中依然可以使用CSS来设置组件的样式，但是和Html中相比，在flex中的CSS功能受到了限制和削弱，在flex的默认主题下只支持有闲的CSS属性，在Flex4中是提倡使用皮肤来进行外观控制的。
Flex的行为机制便于开发者为应用程序添加动画效果，使用户界面更加丰富多彩。借助于Flex内置的动画组件，可以实现淡入淡出效果、溶解效果、缩放效果、3D旋转效果、模糊效果、斜面阴影效果等。
核心技能部分
CSS标准最早应用于网页开发中，使得程序开发和界面开发分离。Flex也支持使用CSS,CSS由于其简单、方便等优点，逐渐成为了Flex应用程序美化界面的最重要方法。本章将介绍CSS的语法及在Flex中如何使用CSS美化界面和动画特效的应用。
1.1 Flex中的CSS
Flex 4 对CSS做了很大的改进，虽然还不能像HTML那样随心所欲，但是也能满足任何项目的要求了。
Flex 不支持使用层叠样式表 (CSS) 来控制组件的所有可视方面属性, 比如 x, y, width 和 height 是 UIComponent 类的属性, 而不是其样式, 因此, 无法在 CSS 中进行设置。您还必须知道您的主题支持哪些属性。Flex 中的默认主题并不支持所有样式属性。
另外对于具有Web设计背景的人，最为重要的是要理解Flex CSS样式并不遵循与W3C-CSS规定相同的约定。在W3C-CSS版本2.0中被用来分离单词的连字符（-）并未用作Flex实现内的代码约定的一部分。相反，CSS的Flex实现使用了驼峰式大小写。比如，W3CCSS2规范内的vertical-center对等于FlexCSS内的verticalCenter。
1.1.1 在Flex中设置样式的几种方式
(1)使用本地样式定义
@namespace mx "library://ns.adobe.com/flex/halo";
@namespace s "library://ns.adobe.com/flex/spark";
#but {
cornerRadius: 14;
letterSpacing: 1;
highlightAlphas: 0.56, 0.76;
fillAlphas: 0.46, 0.4, 0.75, 0.65;
color: #6666ff;
textRollOverColor: #66ffff;
}
在组件上应用样式：
效果如图8.1.1所示。
图8.1.1 使用本地样式
在flex4中使用css和flex3有较大的区别 定义样式的时候必须先引用命名空间，即上例中的@namespace mx "library://ns.adobe.com/flex/halo";和@namespace s "library://ns.adobe.com/flex/spark"。
(2)使用外部样式表
FLEX支持外部CSS样式表。要应用一个样式表到当前文档和子文档，使用<fx:Style>标签中的source属性。
style.css文件中的样式表定义与本地样式定义相同。
(3)使用内联样式
可以像设定组件的属性一样在MXML标签中设定样式属性。内联样式的优先级高于本地样式和外部样式。
例如：
(3)使用 setStyle() 方法
可以在ActionScript中使用方法来操作组件的样式属性。使用setStyle()方法的优先级是最高的。
setStyle() 方法采用两个参数: 样式名称和样式值。
private function initVbox():void
{
box2.setStyle("paddingTop",12);
box2.setStyle("paddingBottom",12);
box2.setStyle("borderStyle","solid");
}
]]>
1.1.2 四种基本的选择方式
（1）Type
例如：s|Button{ color: #FFFFFF; }
适合任意一个Button的实例。
（2）Class：由组件的stylename属性引用
例如：.rounded { cornerRadius: 10;｝
则引用为：
（3）ID：对应组件的ID
例如：#header{ backgroundColor: #FF0000; } （header为组件的ID）
（4）组合方式
四种方式可以也可以通过组合形成新的选择方式
例如：.main s|Button{ fontSize: 15; }
即对引用Class 为main的组件内所有Button的样式都有影响。
下面通过示例8.1快速展示这四种选择器的使用。
1）mycss.css 文件
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
/*-----------1、全局选择：定制全局样式-----------*/
mx|Button s|Button{
color: #FF0000;
}
s|Button{
color: #FF00FF;
}
/*-----------2、全局选择器：可在组件的属性里面指定样式类，然后在css中声明相应的样式类-----
------*/
.myStyleClass{
backgroundColor: #000000;
color:#0000FF;
}
/*-----------3、ID选择：组件ID设置相应的组件样式-----------*/
#can01ID{
backgroundColor: #0000FF;
}
/*-----------4、派生选择：类里面的组件ID来定义样式-----------*/
s|VGroup#vGroupID mx|ProgressBar{
color:#FF0000;
}
/*-----------5、状态选择：通过状态定义样式，只适用于Button组件-----------*/
s|Button:down{
fontSize:20;
color:#FF0000;
}
2）CssTest.mxml 文件
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"> styleName="myStyleClass"/> 效果如图8.1.2所示。 图8.1.2 css选择器 在Flex4.0中对于组件的外观控制做了比较大的调整，建议通过皮肤来进行组件外观的设置，Css的使用受到了很大的限制，控件的位置，大小，布局等都不能使用Css设置，只能用来进行类似于字体，背景色等简单设置，如果要进行更加深入的外观控制必须使用Flex皮肤。 Flex 4 默认为Spark主题，Spark组件的外观设计与之前相比也变得更简单高效。Spark组件都不包含可视外观属性，所有这类信息都包含在外观文件SkinClass中。 在Flex SDK 4(Gumbo)新增加了一个包：spark.skins，这个包里面只有一个class：SparkSkin，而我们通过这个class来实现任意自定义控件的样式。 图8.1.3是SparkSkin的继承关系： 8.1.3 SparkSkin的继承关系 通过上述关系可以得出如下的结论： Ø SparkSkin是一个Group类型的容器。（它继承Group） Ø Base class for Spark skins.（是全部Spark Class的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类） 另外，请注意另外一个class：Skin，这个class是SparkSkin的父类，同时Skin继承与Group，那么Skin与SparkSkin的区别的什么呢？ 图8.1.4是Skin的继承关系： 图8.1.4 Skin类的继承关系 parkSkin：是全部Spark Class的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。 Skin：是SparkSkin的父类，例如ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的样式，则需要使用Skin。 综上所述，也就是可以使用SparkSkin的地方，我们使用Skin一样可以达到同样的效果。 设置Application容器的背景图片，如果使用Css是一件很简单的事情，但Flex4中你只能通过皮肤来进行设置，下面是使用皮肤进行背景图设置的例子，我们通过这个例子初步认识一下Flex皮肤的使用。 示例 8.2。 xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" > smooth="true" left="0" right="0" top="0" bottom="0" top.normal="0" left.normal="0" bottom.normal="0" right.normal="0"/> 在上例中HostComponent("spark.components.Application")制定了皮肤应用于Application组件。 皮肤开发完毕，下面我们可以通过以下方式将皮肤应用到控件上。 Ø 使用css指定控件的样式。 skinClass: ClassReference("com.rianote.flex.skin. CustomApplicationSkin "); Ø 使用控件的skinClass 或者styleName属性指定皮肤类 Ø 使用代码动态的设置 myButton.setStyle( "skinClass", Class( KButton )); xmlns:s="library://ns.adobe.com/flex/spark" skinClass="CustomApplicationSkin" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
import mx.controls.Alert; import mx.events.FlexEvent; protected function button1_clickHandler(event:MouseEvent):void { this.setStyle("skinClass", Class(CustomApplicationSkin2)); } ]]> 运行程序效果如图8.1.5所示： 图8.1.5 设置Application背景 本节我们通过设计Button控件的皮肤来演示皮肤开发的详细内容。 示例 8.3 (1) 在Button控件上输入skinClass ，在自动提示中选择【创建外观】 ，如图8.1.6所示 图8.1.6 创建外观 (2 )在创建外观面板输入包名，皮肤名称 ，主机控件等信息,如图8.1.7所示 图8.1.7 创建外观 在图8.1.7中按下【Finish】按钮，自动生成相应的代码： xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">
/** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.Button")] ]]> color.down="0xFFFFFF" alpha="0.01" alpha.down="0" /> color.down="0xFFFFFF" alpha="0.07" alpha.down="0.5" /> color.over="0xBBBDBD" color.down="0xAAAAAA" alpha="0.85" /> color.over="0x9FA0A1" color.down="0x929496" alpha="0.85" /> ratio="0.0" alpha="0.33" alpha.over="0.22" alpha.down="0.12"/> ratio="0.48" alpha="0.33" alpha.over="0.22" alpha.down="0.12" /> ratio="0.48001" alpha="0" /> alpha="0.5625" alpha.down="0.6375" /> alpha="0.75" alpha.down="0.85" /> textAlign="center" verticalAlign="middle" maxDisplayedLines="1" horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2"> IDE已经帮我们生成了Button皮肤的基本代码，我们只需要在此基础上进行修改即可。把源文件简化修改成以下内容： xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" >
/** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.Button")] ]]> LinearGradient> text="button" textAlign="center" verticalAlign="middle" maxDisplayedLines="1" horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2"> 主文件： 运行程序，效果如图8.1.8所示 图8.1.8 自定义Button皮肤 代码解释： SkinClass借助 FXG和状态语法完成组件的交互式设计，其使用MXML编写新的外观文件。 (1) xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"> 含义：如果要自定义控件样式，必须要要继承SparkSkin或者Skin，关于二者的区别在上一节已经阐述过了。 (2) 含义：我们要修改的是spark.components.Button的外形，Flex SDK 4(Gumbo)新增了一个matadata tag：HostComponent同时，Metadata也由原来的mx:变成了现在的fx，因为namespace发生了改变。 (3) 含义：定义了Button的四种状态：up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能，用State来描述状态。 在Flex SDK 3的情况下，只能描述UI的不同状态，而在Flex SDK 4(Gumbo)中，又赋予了State描述控件状态的功能。 (4) 含义：画一个圆形（椭圆形）的图形，而Ellipse也是Flex SDK 4(Gumbo)新增一个包：spark.primitives里面的一个class。 spark.primitives里面定义了一些图形，例如：Ellipse、Rect、Path、Line等class。同样根据这些class name就可以得出是做什么用的。 (4) /* 含义：设定填充的方式（SolidColor）填充颜色值0x131313的颜色，color.over是指鼠标移动上去后的颜色，color.down是鼠标按下时候的颜色。 引申一下，还有color.up、color.display，通过这些值就可以描述四种状态时的颜色。 另外，请注意一下，SolidColor外层必须要有 LinearGradient即设置颜色的渐变。 6 含义：设定边线的颜色（SolidColorStroke）当然也可以设定诸如：color.up、color.display、color.down、color.over的颜色。 同样SolidColorStroke必须在stroke内部，而stroke的含义：设定边框。 8 text="button" textAlign="center" verticalAlign="middle" maxDisplayedLines="1" horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2"> 含义：上面的代码定义了Button中可以显示文字的部分。 我们要注意的地方：skinClass，这也是Flex SDK 4(Gumbo)新增加的一个class，专门用来设定当前皮肤的properties，请注意skinClass只适用于Spark包里面的可视化控件。Flex SDK 4(Gumbo)众所周知有两套组件：spark组件和halo组件，那么既然spark组件中的皮肤设定是非常容易的事情，在halo中呢？能否也会像spark组件一样方便？ 答案是肯定的，在halo中仍旧可以使用SparkSkin和Skin组件来完成自定义皮肤。只是在引用皮肤的时候稍有不同，halo组件没有SkinClass属性，只能通过css的方式来引用皮肤。 示例8.4 .sparkButtonStyle { skin: ClassReference("com.rianote.flex.skin.KButton"); } 以上就是这个简单的自定义Button皮肤的代码详解，通过以上的例子，我们知道在Flex SDK 4(Gumbo)中可以通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。 FXG的基本形状有三种，矩形（圆角矩形）、椭圆（圆形）、直线。 （1）Rect（矩形）基本属性如表7-1-1所示： 表7-1-1 Rect基本属性 属性 类型 说明 width length 矩形的宽度。 height length 矩形的高度。 radiusX length 圆角矩形，圆角在X轴椭圆半径的弯道，此值四舍五入。 radiusY length 圆角矩形，圆角在y轴椭圆半径的弯道，此值四舍五入。 rotation Number 旋转角度，正数为顺时针，负数为逆时针。 scaleX Number x轴缩放，1为100%。 scaleY Number y轴缩放，1为100%。 visible Boolean 可见性。 表7-1-2 Ellipse基本属性 属性 类型 说明 width length 椭圆的宽度。 height length 椭圆的高度 rotation Number 旋转角度，正数为顺时针，负数为逆时针。 scaleX Number x轴缩放，1为100%。 scaleY Number y轴缩放，1为100%。 visible Boolean 可见性。 （3）Line（直线）基本属性： Line（矩形）基本属性如表7-1-3所示： 表7-1-3 Line基本属性 属性 类型 说明 xFrom Number X轴起点，默认为0。 yFrom Number y轴起点，默认为0。 xTo Number X轴终点，默认为0。 yTo y轴终点，默认为0。 rotation Number 旋转角度，正数为顺时针，负数为逆时针。 scaleX Number x轴缩放，1为100%。 scaleY Number y轴缩放，1为100%。 visible Boolean :可见性。 （4）FXG的复杂图形使用Path来绘制。 以下是一个尖角向下的红色三角形的绘制（其主要通过节点坐标来绘制）： 示例8.5 其中data中M表示起始位置，Z表示返回到起始位置。 运行代码 效果如图8.1.9所示。 图8.1.9 Path的使用 （5）FXG复杂图形 FXG对于复杂的图形会生成多而繁琐的代码，这时还不如使用一张透明的PNG图片代替来得“划算”。 当然SkinClass中也有插入图片的标签，就是 示例8.6 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">
/** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.Button")] ]]> textAlign="center" verticalAlign="middle" maxDisplayedLines="1" horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2"> FXG使用fill对图形本体进行上色，使用stroke对图形边框进行上色，而fill（填充）和stroke（画笔）有三种上色方法： Fill： SolidColor（色块），RadialGradient（径向渐变），LinearGradient（线性渐变）。 stroke ：SolidColorStroke（实线），RadialGradientStroke（径向渐变），LinearGradientStroke（线性渐变）。 示例8.7 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> 效果如图8.1.10所示。 图8.1.10 填充和画笔 FXG中常用的效果滤镜有7个： Ø GlowFilter（单色发光滤镜） Ø BlurFilter（模糊滤镜） Ø DropShadowFilter（阴影滤镜） Ø BevelFilter（斜角滤镜） Ø GradientGlowFilter（彩色发光滤镜） Ø GradientBevelFilter（彩色斜角滤镜） Ø ColorMatrixFilter（色彩响应矩阵滤镜） 示例8.8 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
private const myMatrix:Array = [0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0, 0, 0, 1, 0]; ]]> 效果如图8.1.11所示。 图8.1.11 FXG滤镜 可以将行为对象视为触发器（Trigger）和动画效果（Effect）的结合体，一个行为由一个触发器和一个动画效果组成。其中，触发器是一个用户动作，往往伴随着1个事件，如鼠标的点击、释放 等。一旦动作发生、触发器被激活，动画就开始播放。动画效果由非可视组件完成， Flex中内置了多种动画效果，如淡入淡出、放大缩小、移动、遮罩效果等。 触发器与事件不同，针对一个事件的触发器.将受到事件的制约。例如. 在1个单击事件中击动作发生后，单击对象先派发出事件，然后初始化行为触发器，最后才播放行为对应的动画。 组件定义了多种触发器，成为本身的一个属性。默认情况下，这些触发器没有设定动画效果例如，showEffect在当对象变为可见（即visible属性变为true）时被触发，默认是空值，没有动画 效果。 行为对象允许对一个触发器定义多个动画效果。当触发器被激活时，一系列的动画会按某种顺序运行。例如，在单击一个窗口的最大按钮后，窗口的尺寸变大，窗口的位置也不断变化。 Effects动画效果位于包spark,effects内，该包内的所有的动画对象都继承自Effect类。 1.Effect类 Effect是一个抽象类，它定义了一些属性和方法来控制动画的播放方式和流程，而且用户用Effect类的事件对动画效果进行扩展。 （1）Effect类重要属性见表7-1-4。 表 7-1-4 Effect类重要属性 属性名 类型 属性描述 target Object 指定动画的作用目标对象 duration Number 指定动画持续的时间.单位为毫秒 repeatCount int 指定动画重复播放的次数，默认为1。值为0时表示始终重复播放动画，直到调用end()方法强制结束 repeatDelay int 指定每次播放的间隔时间，单位为毫秒.默认值为0 (2) Effect类重要方法见表7-1-5。 表7-1-5 Effect类重要方法 方法名 方法描述 play 开始播放动画、产生动画效果 end 将停止播放动画 pause 暂停播放动画 resume 暂停后继续播放动画 reverse 逆向播放动画，如果动画正在播放，则从当前位置开始逆向播放 (3) Effect类重要事件见表7-1-6。 表7-1-6 Effect类重要事件 事件名 事件描述 effectStart 当动画开始播放时.触发此事件 effectEnd 当动画播放完毕或调用end（}方法强制终止动画时触发 effectStop 当动画停业播放或调用stop()方法停止动画播放时触发 2. repeatBehavior类 RepeatBehavior类定义用子与Animate和Animation类的repeatBehavior属性一起使用的常量，在spark.effects包内的Effect动画对象继承自Animate或Animation类，所以大部分Effect动画对象都拥有repeatBehavior属性，该属性的取值如下： (l) loop:指定动画以正向方式熏复播放。 (2) reverse:指定动画以逆向方式重复播放。 在动画的实际使用中，可以将repeatBehavior设置为reverse,并且将repeatCount值设置为2，来达到动画复位的效果。 3. 常用的Effect动画效果 (1)淡入淡出效果(Fade)。 在Flex中，使用spark.effects.Fade类改变目标对象的透明度，实现淡入淡出效果。 示例 8.9： xmlns:s="library://ns.adobe.com/flex/spark" initialize="application1_initializeHandler(event)" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
import mx.events.FlexEvent; protected function playbutton_clickHandler(event:MouseEvent):void { this.fadeeffect.play(); } protected function application1_initializeHandler(event:FlexEvent):void { this.fadeeffect.play(); } ]]> alphaFrom="0" alphaTo="1" duration="5000" effectStart="this.playbutton.enabled=false" effectEnd="this.playbutton.enabled=true" > 在上例中，Fade类的target属性用于指定动画的作用目标，alphaFrom属性用于指定动画开始时的初始透明度，取值范围为0.0～1.0。当值为0.0时表示透明状态，为1.0时表示完全不透明状态；alphaTo属性用于指定Fade动阐效果的结束透明度，取值范围为0.0-- 1.0。此外，示例8.9中使用了effectStart 和effectEnd事件，用于实现在动画播放时播放按钮不可用，而在动画结束时播放按钮恢复可用状态。如果需要Fade动画效果在运行之后复位，将repeatBehavior属性值设为reverse.并将repeatCount 属性设置为2。单击“fade淡入淡出效果”按钮， Panel面板的透明度会发生缓缓的改变，实现淡入淡出效果，如图8.1.12所示。 图8.1.12 淡入淡出效果 (2) Move3D动画效果。 在Flex中，通过使用spark.effects.Move3D类使目标对象同时在x轴、Y轴和z轴方向移动.以实现3D移动效果。 示例 8.10 id="move2" target="{img1}" xFrom="0" xTo="200" yFrom="0" yTo="200" repeatCount="2" repeatBehavior="reverse" duration="2000" zFrom="0" zTo="-200" autoCenterTransform="true" /> 在示例8.10中， xFrom和xTo分别表示在X轴平移的起始位置和结束位置；yFrom和yTo分别表示在Y轴平移的起始位置和结束位置；，zFrom和zTo分别表示在Z轴平移的起始位置和结束位置。autoCenterTransform属性被设置为true.表示动两效果将以目标对象为中心进行操作。运行结果如图8.1.13所示。 图8.1.13 Move3D效果 (3) Rotate3D动画效果 在Flex中，通过使用spark.effects.Rotate3D类，使目标对象在X轴、Y轴和Z轴方向旋转， 以实现3D旋转效果。 示例8.11 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> angleXFrom="0" angleXTo="360" duration="4000" autoCenterTransform="true" /> angleYFrom="0" angleYTo="360" duration="4000" autoCenterTransform="true" /> angleZFrom="0" angleZTo="360" duration="4000" autoCenterTransform="true" /> 运行结果如图8.1.14所示。 图8.1.14 3D旋转 （4） Resize调整大小动画效果 在Flex中，使用spark.effects.Resize类调整目标对象大小，从而实现动画效果。 示例 8.12 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
import mx.controls.Alert; import mx.events.EffectEvent; protected function button1_clickHandler(event:MouseEvent):void { this.res1.play(); } protected function button2_clickHandler(event:MouseEvent):void { this.res2.play(); } ]]> 示例8.12中定义了两个Resize类的实例。其中res1实例的widthBy和heightBy属性分别表示在目标对象的原有尺寸基础上给宽度和长度增加指定值，当值为正数时表示放大目标对象.为负数时表示缩小目标对象。执行以上代码，不断单击“放大”按钮，img组件中的图片会缓缓放大： 单击“缩小”按钮，图片会不断缩小， 运行效果 如图8.1.15所示。 图8.1.15 Resize 效果 静态滤镜是指为对象添加特殊的静态效果，如模糊效果、发光效果、旋转效果等。静态滤镜效果是静态的，即经过滤镜处理后结果。本节将为读者介绍CSS标准中常用的几种静态Filter滤镜效果位于spark.filters包内，该包内的所有动画对象都继承自BaseFilter类并实现IBitmapFilter接口。但是Filter滤镜效果不会以动画形式呈现，以动画形式呈现滤镜效果必须借助于spark.effects.AnimateFilter类，该类是Effect抽象类的子类。AnimateFilter类有一个重要的属性-bitmapFilter，用于指定AnimateFilter类需要应用动画效果的Filter滤镜类实例。 实现滤镜动画效果需要首先定义Filter滤镜实例，然后定义AnimateFilter类的实例，并通过bitmapFilter属性将Filter滤镜实例与之关联。 Blur模糊滤镜效果 Blur模糊滤镜效果是通过设置blurX、blurY和quality3个属性值实现的。其中，blurX表示水平方向的模糊数壤，取值范围为0～255，默认值为4.该值经常取2的整数倍（如2、4、8、16、 32等）；blurY表示垂直方向的模糊数量，其取值范围为0～255.默认值为4，该值经常取2的整 数倍；quality表示应用到滤镜的次数，值越大目标对象越模糊。默认值为BitmapFilterQuality. LOW时表示应用一次；取值BitmapFilterQuality.MEDIUM时表示应用两次；取值BitmapFilterQuality.HIGH时表示应用3次。在Flex中，使用spark.filters.BlurFilter类实现此效果。 示例 8.13 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
import flash.filters.BitmapFilterQuality; ]]> 运行效果如图8.1.16所示。 图8.1.16 模糊效果 通过使用组件上的行为触发器来实现对组件的使用行为。 组件都有触发器，但这些触发器值在与其动作向关联的时候才起作用。触发器并不是事件，例如，当按钮既有mouseDownEffect触发器又有mouseDown事件。使用mouseDownEffect触发器则不必指定事件处理程序，只要指定需要产生的行为即可。在触发器触发时可以指定多个效果。例如，当用户按下鼠标的时候可以使某个窗口重新调整大小并淡出显示。组件常见的行为触发器见表7-1-7，这些行为触发器和特定的时间一一对应。 表7-1-7 常见的行为触发器列表 触发器名称 对应的事件 事件描述 HideEffect Hide 组件隐藏时触发 ShowEffect Show 组件变为可见时触发 Mousedowneffect Mousedown 鼠标按下 Mouseupeffect Mouseup 鼠标松开 Rollouteffect Rollout 鼠标离开 Rollovereffect Rollover 鼠标进入 Moveeffect Move 组件被移动 Resizeeffect Resize 组件大小变化 在表7-1-7中，行为触发器可以和任意的动画效果绑定在一起，从而简化操作。 （1）showEffect和hideEfFect行为触发器 通过复选框以淡入淡出的方式隐藏、显示Panel面板。当用户勾选复选框时Panel面板淡入，取消勾选时Panel面板淡出。 示例 8.14 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 执行示例8.14 取消勾选复选框后 测试面板会淡出，再次勾选复选框，测试面板淡入。如图8.1.17所示。 图8.1.17 行为触发器 （2） mouseDownEffect和mouseUpEffect效果 示例8.15 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> angleXTo="360" angleYFrom="0" angleYTo="360" angleZFrom="0" angleZTo="360" duration="3000" autoCenterTransform="true"/> heightBy="200" widthBy="200"/> angleXTo="360" angleYFrom="0" angleYTo="360" angleZFrom="0" angleZTo="360" duration="3000" autoCenterTransform="true"/> heightBy="-200" widthBy="-200"/> 示例8.15将多种效果叠加在一起，当用户在图片区按下鼠标，图片将缓缓放大，淡出并旋转。同时具有三种动画效果，当用户松开鼠标的时候，反之。 图8.1.18 Parallel 训练技能点 使用css美化Flex应用。 常用组件的综合应用。 需求说明 模仿Vista风格 美化Flex应用。 实现思路 （1）创建MXML应用程序，并设计功能接界面 并引入各种资源。 Win.mxml xmlns:mx="http://www.adobe.com/2006/mxml" horizontalCenter="0" verticalCenter="0" backgroundColor="#ffffff" creationComplete="init()" verticalGap="0" >
import mx.collections.XMLListCollection; [Bindable] public var menuBarCollection:XMLListCollection; private var menubarXML:XMLList = <> ; private function init():void{ menuBarCollection = new XMLListCollection(menubarXML); } ]]> left="4" right="3" top="11" bottom="3"> dataProvider="{menuBarCollection}" width="100%" /> Sj71.mxml 主界面 layout="vertical" creationComplete="openWin()" viewSourceURL="srcview/index.html">
import mx.managers.PopUpManager; private function openWin():void{ PopUpManager.createPopUp(this,win,false); }; ]]> 运行主界面效果如图8.2.1所示。 图8.2.1 sj71界面 （2）界面创建完毕，我们就可以在style目录下创建style.css文件 并在主界面中引入，以美化界面。 /* /////////////////////////////////////////////////////////////////////////////// // // Vista Theme by Bhavin Padhiyar. // /////////////////////////////////////////////////////////////////////////////// */ @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; global { backgroundSize: "auto"; themeColor: #7AA4B9; rollOverColor: #AADEFF; selectionColor: #7FCDFE; } mx|AccordionHeader { disabledSkin: Embed("/style/accordion/disable2.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=1, scaleGridRight=2 ); downSkin: Embed("/style/accordion/over.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=1, scaleGridRight=2 ); overSkin: Embed("/style/accordion/over.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=1, scaleGridRight=2 ); selectedDisabledSkin: Embed("/style/accordion/selectedDisabled.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=1, scaleGridRight=2 ); selectedDownSkin: Embed("/style/accordion/over.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=1, scaleGridRight=2 ); selectedOverSkin: Embed("/style/accordion/over.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=1, scaleGridRight=2 ); selectedUpSkin: Embed("/style/accordion/up.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=1, scaleGridRight=2 ); upSkin: Embed("/style/accordion/disable.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=1, scaleGridRight=2 ); } mx|Application { backgroundColors: #000000,#3f3f3f; backgroundImage: Embed(source="/style/background.jpg"); backgroundSize: "100%"; } mx|Button { upSkin: Embed(source="buttons/up.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); overSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); downSkin: Embed(source="buttons/up.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); disabledSkin: Embed(source="buttons/disable.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); selectedDisabledSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); selectedDownSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); selectedOverSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); selectedUpSkin: Embed(source="buttons/over.png", scaleGridTop=5, scaleGridBottom=10, scaleGridLeft=5, scaleGridRight=10 ); color: #000000; textRollOverColor: #000000; textSelectedColor:#000000; } mx|ButtonBar { buttonStyleName: "buttonBarButton"; firstButtonStyleName: "firstButtonBarButton"; lastButtonStyleName: "lastButtonBarButton"; } mx|ToggleButtonBar { buttonStyleName: "buttonBarButton"; firstButtonStyleName: "firstButtonBarButton"; lastButtonStyleName: "lastButtonBarButton"; } .roundedButtonBar { buttonStyleName: "roundedButtonBarButton"; firstButtonStyleName: "roundedFirstButtonBarButton"; lastButtonStyleName: "roundedLastButtonBarButton"; } .firstButtonBarButton { disabledSkin: Embed(source="/style/buttonBar/disableLeft.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=11, scaleGridRight=13 ); downSkin: Embed(source="/style/buttonBar/overLeft.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=11, scaleGridRight=13 ); overSkin: Embed(source="/style/buttonBar/overLeft.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=11, scaleGridRight=13 ); selectedDisabledSkin: Embed(source="/style/buttonBar/disableLeft.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=11, scaleGridRight=13 ); selectedDownSkin: Embed(source="/style/buttonBar/overLeft.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=11, scaleGridRight=13 ); selectedOverSkin: Embed(source="/style/buttonBar/overLeft.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=11, scaleGridRight=13 ); selectedUpSkin: Embed(source="/style/buttonBar/overLeft.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=11, scaleGridRight=13 ); upSkin: Embed(source="/style/buttonBar/upLeft.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=11, scaleGridRight=13 ); color: #000000; textRollOverColor: #000000; textSelectedColor:#000000; } .buttonBarButton { disabledSkin: Embed(source="/style/buttonBar/disableCenter.png", scaleGridTop=2, scaleGridBottom=4, scaleGridLeft=1, scaleGridRight=3 ); downSkin: Embed(source="/style/buttonBar/overCenter.png", scaleGridTop=2, scaleGridBottom=4, scaleGridLeft=1, scaleGridRight=3 ); overSkin: Embed(source="/style/buttonBar/overCenter.png", scaleGridTop=2, scaleGridBottom=4, scaleGridLeft=1, scaleGridRight=3 ); selectedDisabledSkin: Embed(source="/style/buttonBar/disableCenter.png", scaleGridTop=2, scaleGridBottom=4, scaleGridLeft=1, scaleGridRight=3 ); selectedDownSkin: Embed(source="/style/buttonBar/overCenter.png", scaleGridTop=2, scaleGridBottom=4, scaleGridLeft=1, scaleGridRight=3 ); selectedOverSkin: Embed(source="/style/buttonBar/overCenter.png", scaleGridTop=2, scaleGridBottom=4, scaleGridLeft=1, scaleGridRight=3 ); selectedUpSkin: Embed(source="/style/buttonBar/overCenter.png", scaleGridTop=2, scaleGridBottom=4, scaleGridLeft=1, scaleGridRight=3 ); upSkin: Embed(source="/style/buttonBar/upCenter.png", scaleGridTop=2, scaleGridBottom=4, scaleGridLeft=1, scaleGridRight=3 ); color: #000000; textRollOverColor: #000000; textSelectedColor:#000000; } .lastButtonBarButton { disabledSkin: Embed(source="/style/buttonBar/disableRight.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=1, scaleGridRight=2 ); downSkin: Embed(source="/style/buttonBar/overRight.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=1, scaleGridRight=2 ); overSkin: Embed(source="/style/buttonBar/overRight.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=1, scaleGridRight=2 ); selectedDisabledSkin: Embed(source="/style/buttonBar/disableRight.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=1, scaleGridRight=2 ); selectedDownSkin: Embed(source="/style/buttonBar/overRight.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=1, scaleGridRight=2 ); selectedOverSkin: Embed(source="/style/buttonBar/overRight.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=1, scaleGridRight=2 ); selectedUpSkin: Embed(source="/style/buttonBar/overRight.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=1, scaleGridRight=2 ); upSkin: Embed(source="/style/buttonBar/upRight.png", scaleGridTop=11, scaleGridBottom=22, scaleGridLeft=1, scaleGridRight=2 ); color: #000000; textRollOverColor: #000000; textSelectedColor:#000000; } mx|CheckBox { disabledIcon: Embed("checkBox/unSelectedDisable.png"); downIcon: Embed("checkBox/selected.png"); overIcon: Embed("checkBox/unSelected.png"); selectedDisabledIcon: Embed("checkBox/selectedDisable.png"); selectedDownIcon: Embed("checkBox/selected.png"); selectedOverIcon: Embed("checkBox/selected.png"); selectedUpIcon: Embed("checkBox/selected.png"); upIcon: Embed("checkBox/unSelected.png"); color: #000000; textSelectedColor: #000000; textRollOverColor: #000000; } mx|ColorPicker { disabledSkin: Embed("/style/colorPicker/up.png"); downSkin: Embed("/style/colorPicker/up.png"); overSkin: Embed("/style/colorPicker/over.png"); upSkin: Embed("/style/colorPicker/up.png"); } mx|ComboBox { downSkin: Embed(source="combobox/up.png", scaleGridLeft=1, scaleGridTop=2, scaleGridBottom=4, scaleGridRight=19 ); overSkin: Embed(source="combobox/up.png", scaleGridLeft=1, scaleGridTop=2, scaleGridBottom=4, scaleGridRight=19 ); upSkin: Embed(source="combobox/up.png", scaleGridLeft=1, scaleGridTop=2, scaleGridBottom=4, scaleGridRight=25 ); color: #000000; textRollOverColor: #000000; textSelectedColor:#ffffff; dropDownStyleName: "dropDown"; highlightAlphas: .5, .8; fontWeight:normal; } .dropDown { backgroundColor: #ffffff; backgroundAlpha: .9; borderStyle: solid; borderThickness: 0; borderColor: #ffffff; roundedCorners:5; color: #000000; textRollOverColor: #000000; textSelectedColor:#000000; rollOverColor: #EEF2FB; } mx|CursorManager { busyCursor: Embed(source="/style/other/busy.png"); busyCursorBackground: Embed(source="/style/other/empty.png"); cursor: Embed(source="/style/other/busy.png"); } mx|DataGrid { headerStyleName: "dataGridHeader"; headerColors: #f0f0f0, #ffffff; rollOverColor: #EEF2FB; selectionColor: #EEF2FB; disabledColor: #999999; selectiondDisabledColor: #999999; alternatingItemColors: #ffffff, #eeeeee; } .dataGridHeader { color: #000000; } mx|DateChooser { headerColors: #e5e5e5, #edebeb; nextMonthDisabledSkin: Embed("/style/date/dateNext.png"); nextMonthDownSkin: Embed("/style/date/dateNext.png"); nextMonthOverSkin: Embed("/style/date/dateNext.png"); nextMonthUpSkin: Embed("/style/date/dateNext.png"); prevMonthDisabledSkin: Embed("/style/date/dateBack.png"); prevMonthDownSkin: Embed("/style/date/dateBack.png"); prevMonthOverSkin: Embed("/style/date/dateBack.png"); prevMonthUpSkin: Embed("/style/date/dateBack.png"); nextYearDisabledSkin: Embed("/style/date/yearNext.png"); nextYearDownSkin: Embed("/style/date/yearNext.png"); nextYearOverSkin: Embed("/style/date/yearNext.png"); nextYearUpSkin: Embed("/style/date/yearNext.png"); prevYearDisabledSkin: Embed("/style/date/yearBack.png"); prevYearDownSkin: Embed("/style/date/yearBack.png"); prevYearOverSkin: Embed("/style/date/yearBack.png"); prevYearUpSkin: Embed("/style/date/yearBack.png"); todayIndicatorSkin: Embed("/style/date/selected.png"); todayStyleName: "today"; rollOverIndicatorSkin: Embed('/style/date/today.png'); selectionIndicatorSkin: Embed('/style/date/today.png'); } .today { color: #000000; textRollOverColor: #cc3300; textSelectedOverColor: #cc3300; } mx|DateField { disabledSkin: Embed("/style/date/icon.png"); downSkin: Embed("/style/date/icon.png"); overSkin: Embed("/style/date/icon.png"); upSkin: Embed("/style/date/icon.png"); } mx|Loader { brokenImageSkin: Embed("/style/other/brokenImage.png"); } mx|Image { brokenImageSkin: Embed("/style/other/brokenImage.png"); } mx|Menu { backgroundColor: #ffffff; backgroundAlpha: .9; borderStyle: solid; borderThickness: 0; borderColor: #cccccc; roundedCorners:5; color: #000000; textRollOverColor: #ffffff; textSelectedColor:#000000; rollOverColor: #1874CD; } mx|MenuBar { fillColor: #e3e2e2, #ffffff; backgroundColor:#ffffff; backgroundAlpha: 1; alpha: 1; textSelectedColor:#ffffff; } mx|NumericStepper { downArrowDisabledSkin: Embed("/style/numSteper/downDisable.png"); downArrowDownSkin: Embed("/style/numSteper/downDown.png"); downArrowOverSkin: Embed("/style/numSteper/down.png"); downArrowUpSkin: Embed("/style/numSteper/down.png"); upArrowDisabledSkin: Embed("/style/numSteper/upDisable.png"); upArrowDownSkin: Embed("/style/numSteper/upDown.png"); upArrowOverSkin: Embed("/style/numSteper/up.png"); upArrowUpSkin: Embed("/style/numSteper/up.png"); cornerRadius:0; backgroundColor:#eef2fb; borderColor:#ffffff; } mx|Panel { closeButtonDisabledSkin: Embed("panel/up.png"); closeButtonDownSkin: Embed("panel/up.png"); closeButtonOverSkin: Embed("panel/over.png"); closeButtonUpSkin: Embed("panel/up.png"); borderSkin: Embed(source="panel/windowSkin.png", scaleGridTop=50, scaleGridLeft=11, scaleGridBottom=60, scaleGridRight=20 ); borderThicknessLeft: 6; borderThicknessRight: 6; borderThicknessTop: 0; borderThicknessBottom: 6; headerHeight: 30; titleStyleName: "title"; backgroundColor: #ffffff; backgroundAlpa:.5; } .title { fontSize: 11; color: #ffffff; fontWeight: bold; } /* ControlBar { borderSkin: Embed(source="wmp11.swf", symbol="Panel_controlBarBackgroundSkin"); themeColor:#000000; } ApplicationControlBar { borderSkin: Embed(source="wmp11.swf", symbol="app_controlBarBackgroundSkin"); verticalAlign: middle; } */ mx|ProgressBar { barSkin: Embed(source="/style/progressBar/trackOver.png", scaleGridTop=1, scaleGridLeft=1, scaleGridBottom=2, scaleGridRight=3 ); /* indeterminateSkin: Embed(source="wmp11.swf", symbol="ProgressIndeterminateSkin");*/ trackSkin: Embed(source="/style/progressBar/track.png", scaleGridTop=3, scaleGridLeft=3, scaleGridBottom=6, scaleGridRight=6 ); } mx|RadioButton { disabledIcon: Embed("radio/unSelectedDisable.png"); downIcon: Embed("radio/selected.png"); overIcon: Embed("radio/unSelected.png"); selectedDisabledIcon: Embed("radio/selectedDisable.png"); selectedDownIcon: Embed("radio/selected.png"); selectedOverIcon: Embed("radio/selected.png"); selectedUpIcon: Embed("radio/selected.png"); upIcon: Embed("radio/unSelected.png"); color: #000000; textRollOverColor: #000000; textSelectedColor:#000000; } mx|ScrollBar { thumbDownSkin: Embed(source="scrollBar/thumb.gif", scaleGridTop=2, scaleGridLeft=2, scaleGridBottom=4, scaleGridRight=4 ); thumbOverSkin: Embed(source="scrollBar/thumb.gif", scaleGridTop=2, scaleGridLeft=2, scaleGridBottom=4, scaleGridRight=4 ); thumbUpSkin: Embed(source="scrollBar/thumb.gif", scaleGridTop=2, scaleGridLeft=2, scaleGridBottom=4, scaleGridRight=4 ); thumbIcon: Embed("scrollBar/thumbIcon.gif"); trackSkin: Embed("scrollBar/trackBack.jpg"); downArrowDisabledSkin: Embed("scrollBar/btnDown.jpg"); downArrowDownSkin: Embed("scrollBar/btnDown.jpg"); downArrowOverSkin: Embed("scrollBar/btnDownOver.jpg"); downArrowUpSkin: Embed("scrollBar/btnDown.jpg"); upArrowDisabledSkin: Embed("scrollBar/btnUp.jpg"); upArrowDownSkin: Embed("scrollBar/btnUp.jpg"); upArrowOverSkin: Embed("scrollBar/btnUpOver.jpg"); upArrowUpSkin: Embed("scrollBar/btnUp.jpg"); } mx|HSlider { thumbDisabledSkin: Embed(source="/style/slider/disable.png"); thumbDownSkin: Embed(source="/style/slider/up.png"); thumbOverSkin: Embed(source="/style/slider/over.png"); thumbUpSkin: Embed(source="/style/slider/up.png"); trackHighlightSkin: Embed(source="/style/slider/trackUp.png", scaleGridTop=1, scaleGridLeft=1, scaleGridBottom=2, scaleGridRight=2 ); trackSkin: Embed(source="/style/slider/trackUp.png", scaleGridTop=1, scaleGridLeft=1, scaleGridBottom=2, scaleGridRight=2 ); } mx|MenuBar { backgroundAlpha: .9; backgroundColor: #ffffff; borderColor: #ffffff; rollOverColor: #3370ce; selectionColor: #3370ce; color: #000000; textRollOverColor: #ffffff; textSelectedColor: #ffffff; disabledColor: #8e8e8e; borderThickness: 0; borderStyle: none; dropShadow: true; } mx|VSlider { thumbDisabledSkin: Embed(source="/style/slider/disable.png"); thumbDownSkin: Embed(source="/style/slider/up.png"); thumbOverSkin: Embed(source="/style/slider/over.png"); thumbUpSkin: Embed(source="/style/slider/up.png"); trackHighlightSkin: Embed(source="/style/slider/trackUp.png", scaleGridTop=1, scaleGridLeft=1, scaleGridBottom=2, scaleGridRight=2 ); trackSkin: Embed(source="/style/slider/trackUp.png", scaleGridTop=1, scaleGridLeft=1, scaleGridBottom=2, scaleGridRight=2 ); } mx|TabBar { firstButtonStyleName: "tabStyle"; tabStyleName: "tabStyle"; lastButtonStyleName: "tabStyle"; selectedTabTextStyleName: "selectedTabText"; color:#000000; textRollOverColor:#000000; textSelectedColor:#000000; } .tabStyle { disabledSkin: Embed(source="tab/disabled.png", scaleGridTop=6, scaleGridBottom=12, scaleGridLeft=5, scaleGridRight=10 ); downSkin: Embed(source="tab/selected.png", scaleGridTop=6, scaleGridBottom=12, scaleGridLeft=5, scaleGridRight=10 ); overSkin: Embed(source="tab/selected.png", scaleGridTop=6, scaleGridBottom=12, scaleGridLeft=5, scaleGridRight=10 ); selectedDisabledSkin: Embed(source="tab/selectedDisabled.png", scaleGridTop=6, scaleGridBottom=12, scaleGridLeft=5, scaleGridRight=10 ); selectedDownSkin: Embed(source="tab/selected.png", scaleGridTop=6, scaleGridBottom=12, scaleGridLeft=5, scaleGridRight=10 ); selectedOverSkin: Embed(source="tab/selected.png", scaleGridTop=6, scaleGridBottom=12, scaleGridLeft=5, scaleGridRight=10 ); selectedUpSkin: Embed(source="tab/selected.png", scaleGridTop=6, scaleGridBottom=12, scaleGridLeft=5, scaleGridRight=10 ); upSkin: Embed(source="tab/up.png", scaleGridTop=6, scaleGridBottom=12, scaleGridLeft=5, scaleGridRight=10 ); color:#000000; textRollOverColor:#000000; textSelectedColor:#000000; } .selectedTabText { color:#000000; textRollOverColor:#000000; textSelectedColor:#000000; } mx|TextInput { backgroundImage: Embed(source="/style/textInput/up.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=2, scaleGridRight=4 ); backgroundSize:"100%"; cornerRadius:0; border-style:none; } mx|TextArea { backgroundImage: Embed(source="/style/textInput/up.png", scaleGridTop=1, scaleGridBottom=2, scaleGridLeft=2, scaleGridRight=4 ); backgroundSize:"100%"; cornerRadius:0; border-style:none; } mx|TitleWindow { closeButtonDisabledSkin: Embed("panel/up.png"); closeButtonDownSkin: Embed("panel/up.png"); closeButtonOverSkin: Embed("panel/over.png"); closeButtonUpSkin: Embed("panel/up.png"); } （3）将应用的主题换成Halo 然后运行程序 效果如图8.2.2所示。 图8.2.2 仿Vista风格 训练技能点 Ø 使用行为对象和动画效果。 需求说明 (l) colorFrom：指定动画开始的颜色，默认值为OxFFFFFFFF。 (2) colorTo：指定动画结束时的颜色，默认值为OxFFFFFF。 (3) colorPropertyName:指定应用于目标上的颜色属性，如color , backgroundColor等，默认值为color,表示对目标对象上的文字颜色实现动画过度。 使用 实现思路： （1）创建MXML应用程序，设计用于实现颜色过渡效果的界面。 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> left="0" right="0" top="0" bottom="30" fontSize="20" fontFamily="楷体_gb2312" /> （2）编写用于实现过渡效果的功能代码。 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> colorTo="red" duration="2000" repeatBehavior="reverse" repeatCount="0" colorPropertyName="color" target="{ret1}" /> colorTo="#d4d048" duration="2000" repeatBehavior="reverse" repeatCount="0" colorPropertyName="backgroundColor" target="{ret1}" /> left="0" right="0" top="0" bottom="30" fontSize="20" fontFamily="楷体_gb2312" /> 执行以上代码，单击“变换背景色”按钮，输入框的背景色开始渐变；单击“变换前景色”按钮，输入框的文字开始渐变，如图8.2.2所示。 图8.2.2 颜色渐变效果 训练技能点 Ø 使用行为对象和动画效果。 需求说明 使用 实现思路： （1）创建MXML应用程序，设计用于实现图片过渡淡入淡出效果的界面。 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> （2）编写用于实现过渡效果的功能代码。 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> visible.cross="false" /> visible.default="false" /> click="this.currentState=(this.currentState=='default'?'cross':'default')" /> （3）运行应用程序，效果如图8.2.4所示。 图8.2.4 过渡淡入淡出效果 选择题 1. 在Flex中使用css ，正确的说法是 （） A. 在Flex中可以像HTML中一样自由的使用css来控制所有的组件外观。 B. Flex4中推荐使用皮肤类来控制组件外观。 C. Flex的所有主题支持的Css属性完全一样。 D. 在Halo主题下只能使用css 而不能使用皮肤。 2. 在Flex中使用皮肤 ，正确的说法是 （） A. 开发皮肤类必须继承SparkSkin类。 B. 开发皮肤类必须继承Skin类。 C. 皮肤类中可以通过HostComponent指定目标控件，会自动作用于目标控件。 D. 皮肤类创建之后，在控件上设置skinClass属性才能起作用 。 3. 关于动画复位 ，说法正确的是（）。 A. 使用Effect的repeatDelay属性可以使动画复位。 B. 使用Effect的repeatCount 属性可以使动画复位。 C. 使用Effect的resume 方法可以使动画复位。 D. 使用repeatBehavior和repeatCount可以达到动画复位的目的。 4. 可以实现颜色过渡特效的组件是（）。 A. B. C. D. 1.2 Flex皮肤
s|Application{
}
主程序代码如下：1.2.1 Flex皮肤详解
1.2.2 FXG的基本形状
（2）Ellipse椭圆（圆形）基本属性如表7-1-2所示：
1.2.3 FXG中使用fill和stroke
1.2.4 FXG滤镜
1.3 使用行为对象和动画效果
1.3.1 行为对象概述
1.3.2 Effects动画效果
1.3.3 滤镜动画效果(Filter)
1.3.4 在组件上使用行为
任务实训部分 实训任务1：实现Vista风格
实训任务2：行为对象和动画效果的使用（一）
实训任务3：行为对象和动画效果的使用（二）
巩固练习