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