1、第16章 增强用户界面设计,在设计应用程序模型时，默认的组件界面往往不能满足用户的要求。Flex 4.0组件支持自定义界面。从广义上讲，美化界面不仅包括组件静态外观，也包括组件的动态效果。,16.1 自定义事件效果,自定义事件效果是指当组件的一个事件被触发，且这个事件允许有效果，那么这个事件就可以应用自定义的效果。在Flex里这种效果触发器叫做“Behaviors”。 组件中一般都有许多效果触发器（Behaviors）。 特定的组件都有其特殊的效果事件。,16.2 Spark组件库的效果组件（新添加）,相比较之前的Flex 3.0，在Flex4.0的Spark组件库中，新增加了很多丰富的效果组
2、件 各种效果组件都有各自独特的属性。定义效果组件的属性就可修改制作出满足用户要求的效果。,16.2.1 擦拭效果组件Wipe,Wipe组件实现的是从上、下、左、右不同方向的切换显示效果。常用的属性是duration属性，表示持续时间，单位为毫秒。,16.2.2 旋转效果组件Rotate,组件实现的是旋转效果。需要说明是的，originX和originY属性是指参照坐标系的坐标。,16.2.3 改变大小组件Resize,组件实现的是改变大小效果。需要说明是的，组件改变大小是一个动态效果，由heightBy属性和widthBy属性分别指明高度和宽度变化的速度。,16.2.4 移动组件Move,组件
3、实现的是移动效果。 需要说明是的，xBy属性和yBy属性的意义分别为X坐标方向的移动速度和Y坐标方向的移动速度。,16.2.5 移动3D组件Move3D,组件实现的是3D移动效果，与Move不同的是，在属性中多了一个zBy，表示Z轴方向移动的像素，其他属性与Move组件类似。 按下Ctrl+F11编译运行程序。,16.2.6 渐显效果组件Fade,组件实现的是逐渐显示效果。 需要说明是的，组件指明a;phaFrom和alphaTo属性后可实现渐显或渐隐效果。 按下Ctrl+F11键编译运行程序。,16.2.7 交叉渐显组件CrossFade,与Fade组件不同的是，CrossFade组件在图片
4、切换的时候，有一个很明显的交叉过度特效。,16.2.8 Animate,在Flex 4.0中，所有的新的特效组件类都是继承自Animate类的，也就是说，Animate类是其他特效类的父类。所以使用Animate类，可以实现其他特效类实现的效果。,16.2.9 AnimateColor,AnimateColor组件是在Animate组件基础上，增加了颜色变换的特效。,16.2.10 AnimateShaderTransition,AnimateShaderTransition组件是在Animate组件的基础上，添加了图形扭曲变形的过度转换特效。其中shaderCode属性表示扭曲变形的类型，一
5、般是使用pbj格式定义。,16.3 自定义组件界面,自定义组件界面的方法有直接使用组件属性、使用setStyle()方法、使用CSS样式3种。本节介绍前两种，CSS样式内容在后续章节中详细介绍。,16.3.1 使用组件属性改变界面,自定义组件界面可直接使用组件属性。组件中有关样式的属性很多，也不尽相同，但方法是一致的。,16.3.2 使用setStyle()方法改变界面,Flex组件中都有一个setStyle()方法，用以动态修改组件界面。例如，按下按钮后修改其他组件的界面。,16.4 使用Filter滤镜类,滤镜是对矢量图的特殊效果处理，在PhotoShop等专业矢量图处理工具中经常使用。F
6、lex 3.0中提供少量的滤镜类，包含于“flash.filter.*”中。,16.5 FXG图形格式（新增）,FXG定义了Flex的图形格式的描述规范。FXG产生的目的其实是为了不同平台之间的数据交换，以提供更好的工作流程。,16.5.1 使用FXG,Flash XML Graphics（FXG）是在构建Flex应用程序时，定义的一种图形格式。使用FXG，Flex可以同其他的Adobe工具，如FlashCatalyst、Illustrator等交换数据。这样可以大大简化整个设计和开发的工作流程。界面图形设计师可以使用通过其他平面设计工具。开发工程师就可以把FXG文件直接在Flex项目中应用。
7、,16.5.2 路径Path类,在矢量图形中，路径就是由一系列的点组成的，最后再由线汇集成一个图像。 在Flex中，可以使用Path类，通过绘制线来定义一个矢量图形。其中，LineSegment，CubicBezierSegment，和QuadraticBezierSegment类，可以定义线的类型。在绘制线或者图形之前，需要使用MoveSegment类定义起始位置。 标签是FXG中比较常用的，定义了图形边框样式，如颜色、粗细等。,16.5.3 群组Group类,Group是所有容器组件中最基本的类，所有的容器组件都是继承Group类的。相当于Flex 4之前版本的Canvas组件，但是新的G
8、roup要比Canvas更加的简洁、体积更加小。,16.5.4 图形元素,在FXG中，所有的图形元素都是继承自IgraphicElement接口。FXG中定义的基本图形元素有矩形、椭圆形、线。矩形使用标签绘制，椭圆形使用标签绘制，线使用标签绘制。,16.5.5 文字布局,在Flex 4之前，官方已经推出了一个开源框架Text Layout Framework，该框架意在处理复杂的文字排列方式，如横向排列。 在Flex 4中，已经集成了该框架的基本功能，而且在文字显示的相关组件中，也添加了新的属性，使得可以更加方便地使用。,16.5.6 填充图形,使用标签，可以对图形进行颜色或者图像的填充。填充
9、的类型有单色填充SolidColor、放射性填充RadialGradient、线性填充LinearGradient和图像填充BitmapFill。,16.5.7 位图BitmapImage标签,可以使用标签把图像填充在一个规则的区域内。区域和图像的关系就如同系统的桌面和背景一样，可以重复平铺，可以适合区域的拉伸图像，也可以对图像剪裁。,16.5.8 遮罩特性,FXG同样也支持遮罩的特性。遮罩简单来说就是使得组件元素以特定的方式部分呈现出来。FXG中提供了两种类型的遮罩呈现方式：clipping和alpha。clipping就是按照遮罩层的组件元素，区域呈现出来，而alpha则是呈现的透明度。,16.6 小结,本章主要介绍了Fex 4.0中如何自定义效果来美化界面。组件界面可直接使用样式属性，也可使用setStyle()方法。Flex 4.0中有丰富的效果组件，用户可通过组合多种效果组件制定满足需要的效果。另外，Flex 4.0中也提供了少量的滤镜类，用以支持更特殊的效果。在本章后面内容中，详细介绍了Flex 4新的特性FXG在开发中如何使用。,
