增强用户界面设计

《增强用户界面设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、种效果组件都有各自独特的属性。定义效果组件的属性就可修改制作出满足用户要求的效果。16.2.1擦拭效果组件WipeWipe组件实现的是从上、下、左、右不同方向的切换显示效果。常用的属性是duration属性，表示持续时间，单位为毫秒。16.2.2旋转效果组件Rotate组件实现的是旋转效果。需要说明是的，originX和originY属性是指参照坐标系的坐标。16.2.3改变大小组件Resize组件实现的是改变大小效果。需要说明是的，组件改变大小是一个动态效果，由heightBy属性和widthBy属性分别指明高度

3、和宽度变化的速度。16.2.4移动组件Move组件实现的是移动效果。需要说明是的，xBy属性和yBy属性的意义分别为X坐标方向的移动速度和Y坐标方向的移动速度。16.2.5移动3D组件Move3D组件实现的是3D移动效果，与Move不同的是，在属性中多了一个zBy，表示Z轴方向移动的像素，其他属性与Move组件类似。按下Ctrl+F11编译运行程序。16.2.6渐显效果组件Fade组件实现的是逐渐显示效果。需要说明是的，组件指明a;phaFrom和alphaTo属性后可实现渐显或渐隐效果。按下Ctrl+F1

4、1键编译运行程序。16.2.7交叉渐显组件CrossFade与Fade组件不同的是，CrossFade组件在图片切换的时候，有一个很明显的交叉过度特效。16.2.8Animate在Flex4.0中，所有的新的特效组件类都是继承自Animate类的，也就是说，Animate类是其他特效类的父类。所以使用Animate类，可以实现其他特效类实现的效果。16.2.9AnimateColorAnimateColor组件是在Animate组件基础上，增加了颜色变换的特效。16.2.10AnimateShaderTransitionAnimateShaderTransition组件是在

5、Animate组件的基础上，添加了图形扭曲变形的过度转换特效。其中shaderCode属性表示扭曲变形的类型，一般是使用pbj'格式定义。16.3自定义组件界面自定义组件界面的方法有直接使用组件属性、使用setStyle()方法、使用CSS样式3种。本节介绍前两种，CSS样式内容在后续章节中详细介绍。16.3.1使用组件属性改变界面自定义组件界面可直接使用组件属性。组件中有关样式的属性很多，也不尽相同，但方法是一致的。16.3.2使用setStyle()方法改变界面Flex组件中都有一个setStyle()方法，用以动态修改组件界面。例如，按下按钮后修改其他组件的界面。16

6、.4使用Filter滤镜类滤镜是对矢量图的特殊效果处理，在PhotoShop等专业矢量图处理工具中经常使用。Flex3.0中提供少量的滤镜类，包含于“flash.filter.*”中。16.5FXG图形格式（新增）FXG定义了Flex的图形格式的描述规范。FXG产生的目的其实是为了不同平台之间的数据交换，以提供更好的工作流程。16.5.1使用FXGFlashXMLGraphics（FXG）是在构建Flex应用程序时，定义的一种图形格式。使用FXG，Flex可以同其他的Adobe工具，如FlashCatalyst、Illustrator等交换数据。这样可以大大简化整个设计和开

7、发的工作流程。界面图形设计师可以使用通过其他平面设计工具。开发工程师就可以把FXG文件直接在Flex项目中应用。16.5.2路径Path类在矢量图形中，路径就是由一系列的点组成的，最后再由线汇集成一个图像。在Flex中，可以使用Path类，通过绘制线来定义一个矢量图形。其中，LineSegment，CubicBezierSegment，和QuadraticBezierSegment类，可以定义线的类型。在绘制线或者图形之前，需要使用MoveSegment类定义起始位置。标签是FXG中比较常用的，