學(xué)習(xí)筆記 如何創(chuàng)建一個(gè)Flex行為
在學(xué)習(xí)Flex的過(guò)程中,你可能會(huì)遇到Flex行為和效果方面的問(wèn)題,這里和大家分享一下,F(xiàn)lex行為是由一個(gè)觸發(fā)器和一種效果組合而成。觸發(fā)器是一種活動(dòng),如鼠標(biāo)在組件上點(diǎn)擊,組件獲得焦點(diǎn),或組件可見(jiàn)。
使用Flex行為
AdobeFlex行為使你可以為應(yīng)用程序添加動(dòng)畫和運(yùn)動(dòng),來(lái)對(duì)用戶和編程活動(dòng)作出反應(yīng)。Flex行為是由一個(gè)觸發(fā)器和一種效果組合而成。觸發(fā)器是一種活動(dòng),如鼠標(biāo)在組件上點(diǎn)擊,組件獲得焦點(diǎn),或組件可見(jiàn)。Flex效果是在目標(biāo)組件上的可視性或可聽(tīng)性上的某種變化,以毫秒計(jì)算。效果的例子包括淡出,尺寸變化,或者組件發(fā)生移動(dòng)。
本節(jié)將教授你如何在Flex用戶界面中添加行為。具體內(nèi)容包括如何使用MXML去創(chuàng)建行為,如何從不同的組件調(diào)用一種效果,以及如何組合多種效果以產(chǎn)生合成效果。
創(chuàng)建一個(gè)Flex行為
你打算創(chuàng)建一個(gè)Flex行為,當(dāng)按鈕被用戶點(diǎn)擊時(shí)變成綠色,維持一秒半以后,離開(kāi)按鈕時(shí)變成淡綠色以表明它已經(jīng)被點(diǎn)擊過(guò)。
1.在導(dǎo)航視圖中選擇Lessons項(xiàng)目,選擇File>New>MXMLApplication并創(chuàng)建名叫Behaviors.mxml的文件。
2.將Behaviors.mxml設(shè)置為被編譯的默認(rèn)文件,并在關(guān)聯(lián)菜單中選擇SetAsDefaultApplication。
3.在MXML編輯器源代碼模式中,在<mx:Application>標(biāo)簽后定義綠色Flex效果:
- <mx:Glowidmx:Glowid="buttonGlow"color="0x99FF66"alphafrom="1.0"
- alphaTo="0.3"duration="1500"/>
綠色Flex效果開(kāi)始時(shí)十分飽滿,然后逐步變得透明,但不完全透明。***變成淡綠色以表明按鈕已經(jīng)被點(diǎn)擊過(guò)。
4.在設(shè)計(jì)模式下,從組件視圖拖拉一個(gè)面板容器到布局上,并設(shè)置其相應(yīng)屬性:
- Width:200Height:300
- X:10
- Y:10
5.從組件視圖中拖拉一個(gè)按鈕控件到面板上,并設(shè)置其相應(yīng)屬性:
- ID:myButtonLabel:View
- X:40
- Y:60
6.在屬性視圖中,點(diǎn)擊工具條中的分類視圖/CategoryView查看屬性,然后找到效果分類/Effectscategory。按鈕控件相對(duì)應(yīng)的觸發(fā)器分類列表。
7.Flex行為通過(guò)在波浪括號(hào)中鍵入效果的ID來(lái)作為觸發(fā)器的值,為mouseUpEffect觸發(fā)器賦上綠色漸變效果,就象這樣:
- mouseUpEffect:{buttonGlow}
波浪括號(hào)({})是必須的,因?yàn)樾Ч鞘褂脭?shù)據(jù)綁定來(lái)分配給它們的觸發(fā)器的。在源代碼模式下,<mx:Button>標(biāo)簽看起來(lái)就象這樣:
- <mx:Buttonxmx:Buttonx="40"y="60"label="View"id="myButton"
- mouseUpEffect="{buttonGlow}"/>
8.保存文件,編譯后運(yùn)行。結(jié)果如下:從不同的組件調(diào)用一種Flex效果
取代組件觸發(fā)器,你還可以使用Flex事件去調(diào)用效果。這樣就可以使同一種效果為不同的組件所調(diào)用。舉個(gè)例子,你可以使用按鈕控件的點(diǎn)擊事件去告知TextArea控件播放淡入淡出?......
【編輯推薦】
- 學(xué)習(xí)筆記 Flex效果組件用法指南
- Flex基礎(chǔ) 創(chuàng)建***個(gè)Flex項(xiàng)目
- 剖析常見(jiàn)Flex效果組件用法
- FlexBuilder3.0與Eclipse3.4的***結(jié)合
- 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件