解析FlexBuilder教程中使用CSS格式化組件和特效豐富用戶體驗方法
本文和大家重點討論一下在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靜態屬性來刪除活動的自定義光標。
【編輯推薦】
