FlexBuilder教程教你如何使用特效豐富用戶(hù)體驗(yàn)
在學(xué)習(xí)FlexBuilder教程的過(guò)程中，你可能會(huì)遇到使用特效豐富用戶(hù)體驗(yàn)問(wèn)題，這里和大家分享一下，希望本文的介紹能讓你有所收獲。
使用特效豐富用戶(hù)體驗(yàn)
1、添加效果
FlexBuilder教程中添加效果是在較短時(shí)間上發(fā)生的對(duì)組件的更改。效果的例子有:淡化組件、調(diào)整組件大小和移動(dòng)組件。一種效果與一個(gè)觸發(fā)器相結(jié)合才能形成一個(gè)行為,如組件上的鼠標(biāo)單擊、組件獲得焦點(diǎn)或組件變成可見(jiàn)的。在MXML中,您將效果應(yīng)用為控件或容器的屬性。AdobeFlex提供具有默認(rèn)屬性的一組內(nèi)置效果。
作為對(duì)某些用戶(hù)或編程操作的響應(yīng),行為使您可以將動(dòng)畫(huà)、動(dòng)作和聲音添加到應(yīng)用程序中。例如,您可使用行為在獲得焦點(diǎn)時(shí)彈出對(duì)話(huà)框,或是在用戶(hù)輸入無(wú)效的值時(shí)發(fā)出聲音。
Flex觸發(fā)器屬性是作為層疊樣式表(CSS)樣式被實(shí)施的。在AdobeFlex2語(yǔ)言參考中,觸發(fā)器被列出在標(biāo)題“效果”的下面。
若要?jiǎng)?chuàng)建行為,您定義一個(gè)具有唯一ID的特定效果并將它綁定到觸發(fā)器。例如,下面的代碼創(chuàng)建兩個(gè)縮放效果:一個(gè)用于輕微縮小組件,一個(gè)用于將組件還原至其原始大小。這些效果通過(guò)使用它們的唯一ID被分配到“按鈕”組件上的mouseDownEffect和mouseUpEffect觸發(fā)器上。
注意如何將Panel容器的autoLayout屬性設(shè)置為"false"。這樣是為了阻止在按鈕改變大小時(shí)面板改變大小。
2、FlexBuilder教程中使用效果方法和事件
您可以調(diào)用效果上的方法來(lái)改變它們播放的方式。例如,可以通過(guò)調(diào)用效果的pause()方法來(lái)暫停效果,并通過(guò)使用其resume()方法來(lái)繼續(xù)該效果?？梢酝ㄟ^(guò)調(diào)用效果的end()方法來(lái)結(jié)束該效果。
當(dāng)效果開(kāi)始和效果結(jié)束時(shí),它也會(huì)發(fā)出startEffect和endEffect事件。您可以監(jiān)聽(tīng)這些事件并響應(yīng)您的事件狀態(tài)中的更改。
下面的示例使用“移動(dòng)”效果的方法和事件來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的游戲。該游戲的目標(biāo)是使直升飛機(jī)盡可能接近靶而又不撞到它。靠得越近,贏得的點(diǎn)數(shù)越多。
3、FlexBuilder教程中使用過(guò)渡增加用戶(hù)界面切換效果
過(guò)渡(transition,變換)是定義在視圖狀態(tài)切換之間播放的一種或多種視覺(jué)效果。過(guò)渡不會(huì)替換效果；即,您仍可以將單一效果應(yīng)用到一個(gè)組件,并通過(guò)使用一個(gè)效果觸發(fā)器或者playEffect()方法來(lái)調(diào)用該效果。創(chuàng)建過(guò)渡樣例如下:<mx:transitions>
- //fromState屬性指定當(dāng)應(yīng)用該過(guò)渡時(shí)您要更改的視圖狀態(tài)
- //toState屬性指定您要更改為的視圖狀態(tài)
- //effect屬性是對(duì)要播放的Effect對(duì)象的引用
- <mx:Transitionidmx:Transitionid="myTransition"fromState="*"toState="Advanced">
- //<mx:Parallel>和<mx:Sequence>標(biāo)簽分別引發(fā)并行或按順序播放的效果
- <mx:Paralleltargetmx:Paralleltarget="{myVBox}">
- //效果標(biāo)簽
- <mx:WipeDowndurationmx:WipeDownduration="2000"/>
- <mx:DissolvealphaFrommx:DissolvealphaFrom="0.0"alphaTo="1.0"duration="2000"/>
- </mx:Parallel>
- </mx:Transition>
- </mx:transitions>
4、為用戶(hù)提供工具提示
AdobeFlexToolTip使您能夠?yàn)槟挠脩?hù)提供有幫助的信息。當(dāng)用戶(hù)在圖形組件上移動(dòng)鼠標(biāo)指針時(shí),會(huì)彈出包含文本信息的工具提示。您可以使用工具提示來(lái)指導(dǎo)用戶(hù)完成使用應(yīng)用程序或自定義它們來(lái)提供其他功能。
擴(kuò)展UIComponent類(lèi)(該類(lèi)實(shí)現(xiàn)IToolTipManagerClient界面)的每個(gè)可視Flex組件都支持toolTip屬性。您將toolTip屬性的值設(shè)置為一個(gè)文本字符串,并且,當(dāng)鼠標(biāo)指針懸停在該組件上時(shí),會(huì)顯示該文本字符串。
盡管長(zhǎng)消息很難讀取,但對(duì)工具提示文本的大小不存在任何限制。當(dāng)工具提示文本達(dá)到工具提示框的寬度時(shí),文本會(huì)自動(dòng)換至下一行?？梢栽诠ぞ咛崾疚谋局刑砑訐Q行符。在ActionScript中,您使用\n轉(zhuǎn)義的新行字符。在MXML標(biāo)簽中,您使用XML實(shí)體。
可以通過(guò)使用層疊樣式表(CSS)語(yǔ)法或mx.styles.StyleManager類(lèi)更改工具提示文本和工具提示框的外觀。對(duì)工具提示樣式的更改適用于當(dāng)前應(yīng)用程序中的所有工具提示。
5、控制光標(biāo)
FlexBuilder教程中使用Flex光標(biāo)管理器可以控制Flex應(yīng)用程序中的光標(biāo)圖像。例如,如果應(yīng)用程序執(zhí)行的處理需要用戶(hù)等待,直到處理完成為止,則可以將光標(biāo)更改為某個(gè)自定義的光標(biāo)圖像,比如沙漏,以使它反映該等待期。
您還可以更改光標(biāo)以向用戶(hù)提供反饋,指示用戶(hù)可以執(zhí)行的操作。例如,您可以使用一個(gè)光標(biāo)圖像來(lái)指示用戶(hù)輸入被啟用,而使用另一個(gè)光標(biāo)圖像來(lái)指示輸入被禁用。
CursorManager類(lèi)控制一個(gè)光標(biāo)優(yōu)先順序列表,在其中具有最高優(yōu)先級(jí)的光標(biāo)當(dāng)前是可見(jiàn)的。如果光標(biāo)列表包含具有相同優(yōu)先級(jí)的多個(gè)光標(biāo),則光標(biāo)管理器會(huì)顯示最近創(chuàng)建的光標(biāo)。
1),使用默認(rèn)的忙光標(biāo)
Flex定義了一個(gè)默認(rèn)的忙光標(biāo),可用來(lái)指示應(yīng)用程序正在處理,且在應(yīng)用程序?qū)τ脩?hù)輸入作出響應(yīng)之前,用戶(hù)應(yīng)等待,直到處理完成。默認(rèn)的忙光標(biāo)是一個(gè)動(dòng)畫(huà)時(shí)鐘。
可以使用以下幾種方式來(lái)控制忙光標(biāo):
可以使用CursorManager方法來(lái)設(shè)置和刪除忙光標(biāo)。
可以使用SWFLoader、WebService、HttpService和RemoteObject類(lèi)的showBusyCursor屬性自動(dòng)顯示忙光標(biāo)。
下面的示例使用CursorManager類(lèi)的靜態(tài)setBusyCursor()和removeBusyCursor()方法,根據(jù)切換按鈕的狀態(tài)顯示和隱藏默認(rèn)的Flex忙光標(biāo)。
2),使用自定義光標(biāo)
可以使用JPEG、GIF、PNG或SVG圖像,Sprite對(duì)象或SWF文件作為光標(biāo)圖像。
若要使用光標(biāo)管理器,您將mx.managers.CursorManager類(lèi)導(dǎo)入到應(yīng)用程序中,然后引用其屬性和方法。
下面的示例嵌入一個(gè)在AdobeFlash中創(chuàng)建的沙漏的SWF動(dòng)畫(huà),并將它用作一個(gè)自定義光標(biāo)。在該示例中,創(chuàng)建自定義光標(biāo)的方法是,調(diào)用CursorManager類(lèi)的setCursor()靜態(tài)方法,然后將它傳送給對(duì)您希望用作自定義光標(biāo)的嵌入資源的類(lèi)的引用?？梢酝ㄟ^(guò)調(diào)用CursorManager類(lèi)的removeCursor()靜態(tài)方法并將它傳送給CursorManager類(lèi)的currentCursorID靜態(tài)屬性來(lái)刪除活動(dòng)的自定義光標(biāo)。
【編輯推薦】
