Flash 的發(fā)展促進(jìn)了網(wǎng)頁(yè)技術(shù)的發(fā)展,直到發(fā)展為至今的Flash MX,Macromedia的Swf格式已經(jīng)基本成為一種新的網(wǎng)頁(yè)動(dòng)畫(huà)標準。新的Flash MX加入了Properties Inspector之后,看起來(lái)更像可愛(ài)的Dreamweaver,而另一主要特色Components 的引入,Macromedia提供了我們更快捷的制作手段。
我們今天的話(huà)題就是界面組件 Components UI,我們將通過(guò)幾個(gè)例子來(lái)看看它的特色和學(xué)習使用的步驟。
Macromedia為我們預設了7個(gè)Components UI,它們分別模擬了網(wǎng)頁(yè)中的CheckBox、ComboBox、ListBox、PushButton、RadioButton、ScrollBar,ScrollPane(ScrollBar的圖片形式)。我們一個(gè)一個(gè)來(lái)看。(如圖1)
(圖1)
Components的使用方法類(lèi)似v5中的SmartClip(已經(jīng)進(jìn)入歷史),通過(guò)封裝好的結構,只要給幾個(gè)入口參數即可達到目的。
類(lèi)似網(wǎng)頁(yè)中的Checkbox,多用于用戶(hù)按照自己的情況選擇不同的內容。我們首先按F11打開(kāi)Components庫,然后用鼠標從其中托拽出幾個(gè)Checkbox部件,接下來(lái)你要做的只是在Properties Inspector中給入不同的參數即可,Label是修改顯示內容,Initial Value是初始點(diǎn)擊狀態(tài),Label Placement是文本出現的位置(左右)。(如圖2)
(圖2)
Handler是非常有用的,它可以在部件觸發(fā)事件的時(shí)候同時(shí)激活一個(gè)Handler程序,這個(gè)程序我們在主場(chǎng)景加入:
function clickCheckA() {
trace(a.getValue());
}
function clickCheckB() {
trace(b.getValue());
}
Components UI的每個(gè)部件在運行的時(shí)候都是封裝好的MovieClip,我們也可以通過(guò)給予Instance Name來(lái)用Action 控制其屬性和方法。
接著(zhù)分別寫(xiě)入Shoping和Music的Change Handler里面,加入后,在程序運行的時(shí)候,我們就會(huì )發(fā)現,在點(diǎn)擊事件的同時(shí),Handler程序也同時(shí)運行,并獲取當前的點(diǎn)擊狀態(tài)。(圖3)
(圖3)
Handler程序的目標還可以通過(guò)setChangeHandler來(lái)改變。
2、ComboBox:ComboBox也類(lèi)似網(wǎng)頁(yè)中的ComboList,是當用戶(hù)需要從中選擇單獨數據的時(shí)候使用的。從Components庫中拉出一個(gè)ComboBox,并放置到適當位置,取名Instance為c,這次我們來(lái)看看手動(dòng)加入數據和Action加入數據的不同:
在Properties Inspector面板分別打開(kāi)Label和Data,并加入如下數據:
(圖4)
選中c并按F2打開(kāi)Action面板,在c的Action面板上加入Action:
onClipEvent (load) {
this.addItem("china",_root.a);
this.addItem("usa",123);
this.addItem("england",false);
this.sortItemsBy("label","asc");
}
兩種方法實(shí)現的結果都是一樣的,但Action更靈活一些,例如動(dòng)態(tài)加入數據和排序。
3、ListBoxListBox和ComboBox十分的相似,而且事件和屬性很多都一樣,只是不同之處在于ComboBox是單行下拉滾動(dòng),而ListBox是平鋪滾動(dòng)。(圖5)
(圖5)
4、RadioButton:
通常都是給出一些選擇,但是只可以選擇一個(gè)的網(wǎng)頁(yè)上總會(huì )看到的那種單選框。值得注意的是所有的RadioButton都會(huì )歸于某個(gè)Group,這個(gè)Group組在默認狀態(tài)下是radioGroup,每個(gè)Group只可以有一個(gè)被選中,所以不同的Group也可以有不同的被選中的內容,但是相同的Group則不可以。(圖6)
(圖6)
5、ScrollBar:在Flash MX中已經(jīng)把以前經(jīng)常用到的Scroll這個(gè)屬性列為垃圾代碼之列,都是因為這個(gè)Component的出現導致。首先用Text工具建立一個(gè)Input文本區,并且命名為“txt1”,也可以使用來(lái)不使文本背景透明,接著(zhù),我們放入測試文本的Action在*幀:
txt1.text="never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...never mind...";
雖然有些像無(wú)用的代碼,但是只有這樣我們才可以使Scroll狀態(tài)激活。
文本準備好了之后,可以拉入一個(gè)ScrollBar到場(chǎng)景中,為了和文本區分的明顯,我們把它和文本間隔一些距離。放好之后只要指定Target TextField為txt1即可,接著(zhù)可以運行著(zhù)測試一下,會(huì )發(fā)現文本超出自己的*顯示長(cháng)度時(shí),ScrollBar狀態(tài)會(huì )被激活。(圖7)
(圖7)
6、ScrollPane:
ScrollPane是非常有創(chuàng )意的ScrollBar改進(jìn)版,它雖然不支持device文本,但是支持MovieClip對象,這就意味著(zhù)我們可以把圖片和Swf放入其中(我想只要有這個(gè)功能就已經(jīng)很Crazy了)
馬上拉入一個(gè)ScrollPane到場(chǎng)景中,然后就利用昨天那張boy.jpg來(lái)用用,在ScrollPane的Instance的Action中寫(xiě):
onClipEvent (load) {
function checkLoad() {
trace("loaded");
this.tempObj=this.getscrollcontent();
trace(this.tempObj._name);
}
this.loadScrollContent("boy.jpg","checkLoad",this);
}
方法loadScrollContent是讀入swf或者jpg到一個(gè)MovieClip中,讀取過(guò)程由checkLoad這個(gè)handler處理??墒沁@個(gè)MovieClip是什么呢?不可能存在的?帶著(zhù)問(wèn)題我們就加入了this.tempObj=this.getscrollcontent(); trace(this.tempObj._name);這兩個(gè)語(yǔ)句來(lái)測試一下。經(jīng)測試發(fā)現這個(gè)MovieClip的Instance名稱(chēng)是“l(fā)oadTemp”(這個(gè)發(fā)現可以利用來(lái)控制讀入的swf/jpg屬性)(圖8)
(圖8,今天也很多圖……)
7、PushButton這個(gè)東西還是沒(méi)什么特色(也不可能有什么特色),只是一般遞交內容的時(shí)候給一個(gè)Handler處理/糾錯一下而已。
Components UI的StyleFormat:
我們可以直接把它形象的叫做Flash的CSS,經(jīng)常我們要修改的風(fēng)格樣式我們可以定義為一個(gè)公用的樣式。例如把這個(gè)寫(xiě)入*幀:
globalStyleFormat.arrow = 0x088880;
globalStyleFormat.shadow = 0x123456;
globalStyleFormat.highlight3D = 0x333300;
globalStyleFormat.background = 0x456789;
globalStyleFormat.face = 0x456789;
globalStyleFormat.textColor = 0x011001;
globalStyleFormat.applyChanges();
globalStyleFormat是一個(gè)對象,主要存放當前ComponentsUI的所有樣式,我們用一些隨機數據先看看它的效果(具體的屬性請參看Help文檔),記住修改完后要用applyChanges()方法更新樣式。(圖9)
(圖9)
我們的Random數據看上去還不錯,這證明了ComponentsUI的靈活性特別好,對于喜歡經(jīng)常更改Skin的朋友來(lái)說(shuō)應該是個(gè)福音。
Flash MX的世界是精彩的,而更閃亮的世界就在我們的前方……
文件下載->
注意:
ComboBox和ListBox實(shí)際上可以作為小型的數據庫使用(不要被用戶(hù)在屏幕上看到即可),用Label作為Id,用Data存儲所有數據,并用適當的分隔符分離不同字段,就可以達到數據庫的效果,如果需要,可以和遠程服務(wù)器連接,或者通過(guò)FScommand寫(xiě)入硬盤(pán)。
ComboBox和ListBox的Label不要超過(guò)400行,否則系統會(huì )很慢。
ScrollPane是可以拖動(dòng)內容的,方法是只要修改DragContent為T(mén)rue即可。
專(zhuān)家模式->普通模式:Ctrl+Shift+N,原來(lái)是Ctrl+N;
普通模式->專(zhuān)家模式:Ctrl+Shift+E,原來(lái)是Ctrl+E。