本文和大家重点讨论一下在FlexBuilder教程中如何使用CSS格式化组件和使用特效丰富用户体验。希望通过本文你对FlexBuilder的理解更加深入。
一、FlexBuilder教程中使用CSS格式化组件
1.文字横竖排列AligningTextVertically&Horizontally
样式对于定义Flex应用程序的外观和感觉(外观)很有用。您可以使用它们来更改单一组件的外观,或在所有组件上应用它们。
在Flex中应用样式有许多方法。某些样式提供更多粒度控制并能以编程方式被执行。其他样式不像那么灵活,但可能需要较少的计算。在Flex中,可以使用以下几种方法将样式应用到控件:
1,使用本地样式定义
2,使用外部样式表
3,使用线上样式
4,使用setStyle()方法
二、FlexBuilder教程中使用特效丰富用户体验
1、添加效果
效果是在较短时间上发生的对组件的更改。效果的例子有:淡化组件、调整组件大小和移动组件。一种效果与一个触发器相结合才能形成一个行为,如组件上的鼠标单击、组件获得焦点或组件变成可见的。在MXML中,您将效果应用为控件或容器的属性。AdobeFlex提供具有默认属性的一组内置效果。
作为对某些用户或编程操作的响应,行为使您可以将动画、动作和声音添加到应用程序中。例如,您可使用行为在获得焦点时弹出对话框,或是在用户输入无效的值时发出声音。
Flex触发器属性是作为层叠样式表(CSS)样式被实施的。在AdobeFlex2语言参考中,触发器被列出在标题“效果”的下面。
若要创建行为,您定义一个具有唯一ID的特定效果并将它绑定到触发器。例如,下面的代码创建两个缩放效果:一个用于轻微缩小组件,一个用于将组件还原至其原始大小。这些效果通过使用它们的唯一ID被分配到“按钮”组件上的mouseDownEffect和mouseUpEffect触发器上。
注意如何将Panel容器的autoLayout属性设置为"false"。这样是为了阻止在按钮改变大小时面板改变大小。
2、FlexBuilder教程中使用效果方法和事件
您可以调用效果上的方法来改变它们播放的方式。例如,可以通过调用效果的pause()方法来暂停效果,并通过使用其resume()方法来继续该效果。可以通过调用效果的end()方法来结束该效果。
当效果开始和效果结束时,它也会发出startEffect和endEffect事件。您可以监听这些事件并响应您的事件状态中的更改。
下面的示例使用“移动”效果的方法和事件来创建一个简单的游戏。该游戏的目标是使直升飞机尽可能接近靶而又不撞到它。靠得越近,赢得的点数越多。
3、FlexBuilder教程中使用过渡增加用户界面切换效果
过渡(transition,变换)是定义在视图状态切换之间播放的一种或多种视觉效果。过渡不会替换效果；即,您仍可以将单一效果应用到一个组件,并通过使用一个效果触发器或者playEffect()方法来调用该效果。创建过渡样例如下
- <mx:transitions>
- //fromState属性指定当应用该过渡时您要更改的视图状态
- //toState属性指定您要更改为的视图状态
- //effect属性是对要播放的Effect对象的引用
- <mx:Transitionidmx:Transitionid="myTransition"fromState="*"toState="Advanced">
- //<mx:Parallel>和<mx:Sequence>标签分别引发并行或按顺序播放的效果
- <mx:Paralleltargetmx:Paralleltarget="{myVBox}">
- //效果标签
- <mx:WipeDowndurationmx:WipeDownduration="2000"/>
- <mx:DissolvealphaFrommx:DissolvealphaFrom="0.0"alphaTo="1.0"duration="2000"/>
- </mx:Parallel>
- </mx:Transition>
- </mx:transitions>
4、为用户提供工具提示
AdobeFlexToolTip使您能够为您的用户提供有帮助的信息。当用户在图形组件上移动鼠标指针时,会弹出包含文本信息的工具提示。您可以使用工具提示来指导用户完成使用应用程序或自定义它们来提供其他功能。
扩展UIComponent类(该类实现IToolTipManagerClient界面)的每个可视Flex组件都支持toolTip属性。您将toolTip属性的值设置为一个文本字符串,并且,当鼠标指针悬停在该组件上时,会显示该文本字符串。
尽管长消息很难读取,但对工具提示文本的大小不存在任何限制。当工具提示文本达到工具提示框的宽度时,文本会自动换至下一行。可以在工具提示文本中添加换行符。在ActionScript中,您使用\n转义的新行字符。在MXML标签中,您使用XML实体。
可以通过使用层叠样式表(CSS)语法或mx.styles.StyleManager类更改工具提示文本和工具提示框的外观。对工具提示样式的更改适用于当前应用程序中的所有工具提示。
5、FlexBuilder教程中如何控制光标
使用Flex光标管理器可以控制Flex应用程序中的光标图像。例如,如果应用程序执行的处理需要用户等待,直到处理完成为止,则可以将光标更改为某个自定义的光标图像,比如沙漏,以使它反映该等待期。
您还可以更改光标以向用户提供反馈,指示用户可以执行的操作。例如,您可以使用一个光标图像来指示用户输入被启用,而使用另一个光标图像来指示输入被禁用。
CursorManager类控制一个光标优先顺序列表,在其中具有***优先级的光标当前是可见的。如果光标列表包含具有相同优先级的多个光标,则光标管理器会显示最近创建的光标。
1),使用默认的忙光标
Flex定义了一个默认的忙光标,可用来指示应用程序正在处理,且在应用程序对用户输入作出响应之前,用户应等待,直到处理完成。默认的忙光标是一个动画时钟。
可以使用以下几种方式来控制忙光标:
可以使用CursorManager方法来设置和删除忙光标。
可以使用SWFLoader、WebService、HttpService和RemoteObject类的showBusyCursor属性自动显示忙光标。
下面的示例使用CursorManager类的静态setBusyCursor()和removeBusyCursor()方法,根据切换按钮的状态显示和隐藏默认的Flex忙光标。
2),使用自定义光标
可以使用JPEG、GIF、PNG或SVG图像,Sprite对象或SWF文件作为光标图像。
若要使用光标管理器,您将mx.managers.CursorManager类导入到应用程序中,然后引用其属性和方法。
下面的示例嵌入一个在AdobeFlash中创建的沙漏的SWF动画,并将它用作一个自定义光标。在该示例中,创建自定义光标的方法是,调用CursorManager类的setCursor()静态方法,然后将它传送给对您希望用作自定义光标的嵌入资源的类的引用。可以通过调用CursorManager类的removeCursor()静态方法并将它传送给CursorManager类的currentCursorID静态属性来删除活动的自定义光标。
【编辑推荐】
