增强用户界面设计

《 增强用户界面设计》由会员分享，可在线阅读，更多相关《 增强用户界面设计（27页珍藏版）》请在金锄头文库上搜索。

1、第16章 增强用户界面设计在设计应用程序模型时，默认的组件界面往往不能满 足用户的要求。Flex 4.0组件支持自定义界面。从广义上讲 ，美化界面不仅包括组件静态外观，也包括组件的动态效 果。16.1 自定义事件效果自定义事件效果是指当组件的一个事件被触发，且这个 事件允许有效果，那么这个事件就可以应用自定义的效果。 在Flex里这种效果触发器叫做“Behaviors”。 组件中一般都有许多效果触发器（Behaviors）。特定的组件都有其特殊的效果事件。16.2 Spark组件库的效果组件（新添加）相比较之前的Flex 3.0，在Flex4.0的Spark组件库中，新 增加了很多丰富的效果组

2、件 各种效果组件都有各自独特的属性。定义效果组件的属 性就可修改制作出满足用户要求的效果。16.2.1 擦拭效果组件WipeWipe组件实现的是从上、下、左、右不同方向的切换 显示效果。常用的属性是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 AnimateColorAnimateColor组件是在Animate组件基础上，增加了颜 色变换的特效。16.2.10 AnimateShaderTransitionAnimateShaderTransition组件是在Animate组件的基础 上，添加了图形扭曲变形的过度转换特效。其中shaderCode 属性表示扭曲变形的类型

5、，一般是使用pbj格式定义。16.3 自定义组件界面自定义组件界面的方法有直接使用组件属性、使用 setStyle()方法、使用CSS样式3种。本节介绍前两种，CSS样 式内容在后续章节中详细介绍。16.3.1 使用组件属性改变界面自定义组件界面可直接使用组件属性。组件中有关样式 的属性很多，也不尽相同，但方法是一致的。16.3.2 使用setStyle()方法改变界面Flex组件中都有一个setStyle()方法，用以动态修改组件 界面。例如，按下按钮后修改其他组件的界面。16.4 使用Filter滤镜类滤镜是对矢量图的特殊效果处理，在PhotoShop等专业 矢量图处理工具中经常使用。Fl

6、ex 3.0中提供少量的滤镜类 ，包含于“flash.filter.*”中。16.5 FXG图形格式（新增）FXG定义了Flex的图形格式的描述规范。FXG产生的 目的其实是为了不同平台之间的数据交换，以提供更好的工 作流程。16.5.1 使用FXGFlash 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组件

8、，但是新的Group要比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在开发中如何使用。