增强用户界面的设计.pptVIP

第16章 增强用户界面设计 在设计应用程序模型时，默认的组件界面往往不能满足用户的要求。Flex 4.0组件支持自定义界面。从广义上讲，美化界面不仅包括组件静态外观，也包括组件的动态效果。 16.1 自定义事件效果 自定义事件效果是指当组件的一个事件被触发，且这个事件允许有效果，那么这个事件就可以应用自定义的效果。在Flex里这种效果触发器叫做“Behaviors”。 组件中一般都有许多效果触发器（Behaviors）。 特定的组件都有其特殊的效果事件。 16.2 Spark组件库的效果组件（新添加） 相比较之前的Flex 3.0，在Flex4.0的Spark组件库中，新增加了很多丰富的效果组件 各种效果组件都有各自独特的属性。定义效果组件的属性就可修改制作出满足用户要求的效果。 16.2.1 擦拭效果组件Wipe Wipe组件实现的是从上、下、左、右不同方向的切换显示效果。常用的属性是duration属性，表示持续时间，单位为毫秒。 16.2.2 旋转效果组件Rotate s:Rotate组件实现的是旋转效果。需要说明是的，originX和originY属性是指参照坐标系的坐标。 16.2.3 改变大小组件Resize s:Resize组件实现的是改变大小效果。需要说明是的，s:Resize组件改变大小是一个动态效果，由heightBy属性和widthBy属性分别指明高度和宽度变化的速度。 16.2.4 移动组件Move s:Move组件实现的是移动效果。 需要说明是的，xBy属性和yBy属性的意义分别为X坐标方向的移动速度和Y坐标方向的移动速度。 16.2.5 移动3D组件Move3D s: Move3D组件实现的是3D移动效果，与Move不同的是，在属性中多了一个zBy，表示Z轴方向移动的像素，其他属性与Move组件类似。 按下Ctrl+F11编译运行程序。 16.2.6 渐显效果组件Fade s:Fade组件实现的是逐渐显示效果。 需要说明是的，s:Fade组件指明a;phaFrom和alphaTo属性后可实现渐显或渐隐效果。 按下Ctrl+F11键编译运行程序。 16.2.7 交叉渐显组件CrossFade 与Fade组件不同的是，CrossFade组件在图片切换的时候，有一个很明显的交叉过度特效。 16.2.8 Animate 在Flex 4.0中，所有的新的特效组件类都是继承自Animate类的，也就是说，Animate类是其他特效类的父类。所以使用Animate类，可以实现其他特效类实现的效果。 16.2.9 AnimateColor AnimateColor组件是在Animate组件基础上，增加了颜色变换的特效。 16.2.10 AnimateShaderTransition AnimateShaderTransition组件是在Animate组件的基础上，添加了图形扭曲变形的过度转换特效。其中shaderCode属性表示扭曲变形的类型，一般是使用pbj格式定义。 16.3 自定义组件界面 自定义组件界面的方法有直接使用组件属性、使用setStyle()方法、使用CSS样式3种。本节介绍前两种，CSS样式内容在后续章节中详细介绍。 16.3.1 使用组件属性改变界面 自定义组件界面可直接使用组件属性。组件中有关样式的属性很多，也不尽相同，但方法是一致的。 16.3.2 使用setStyle()方法改变界面 Flex组件中都有一个setStyle()方法，用以动态修改组件界面。例如，按下按钮后修改其他组件的界面。 16.4 使用Filter滤镜类 滤镜是对矢量图的特殊效果处理，在PhotoShop等专业矢量图处理工具中经常使用。Flex 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项目中应用。 16.5.2 路径Path类 在矢量图形中，路径就是由一系列的点组成的，最后再由线汇集成一个图像。 在Flex中，可以使用Path类，通过绘制线来定义一个矢量图形。其中，LineSegment，CubicBezierSegment，和QuadraticB