第16章 增强用户界面设计

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