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