2.1 CheckBox（復(fù)選框）

　　在許多軟件中，復(fù)選框組件是經(jīng)常會被用到的，如Visual C++的資源編輯器中我們就可以看見很多的復(fù)選框。復(fù)選框可以允許我們選擇一個或者多個選項，當(dāng)某選項被選中后，該復(fù)選框的小框里就會出現(xiàn)一個小勾。

　　我們把Components面板中的CheckBox（復(fù)選框）組件拖拽到場景中，然后打開它的參數(shù)設(shè)置面板，如圖5所示。

圖5 CheckBox組件的參數(shù)面板

　　同樣的，你也可以選擇Window菜單下的Component Parameters命令，或是按快捷鍵Alt+F7調(diào)出Component Parameters（組件參數(shù)）面板來設(shè)置組件的參數(shù)，如圖6所示。

圖6 UI組件參數(shù)設(shè)置面板

　　在CheckBox組件的參數(shù)面板中，各項參數(shù)的功能如下：

　　　　Label（組件名稱）：命名復(fù)選框組件，如圖7所示。

　　　　InitialValue（初始值）：初始化組件的狀態(tài)為選中（true）或是未選中（false）。

圖7 命名復(fù)選框組件

　　　　 Alignment（對齊方式）：設(shè)置復(fù)選框的可選方式。Left：勾選框在左面，right：勾選框在右邊。 如圖7所示。

　　　　Change Handler（處理函數(shù)）：執(zhí)行用戶自己定義的函數(shù)，該設(shè)置選項的參數(shù)為用戶定義函數(shù)的函數(shù)名。在函數(shù)被調(diào)用前，我們需要對它進行定義。

　　現(xiàn)在我們看一個簡單的組件效果。該效果中，當(dāng)我們選中組件“CheckBox1”時，組件“CheckBox2”也會同時被選中。當(dāng)組件“CheckBox1”不被選中的時候，組件“CheckBox2”也不被選中，而且會變成灰色，即該組件不可用，但兩個組件的名稱都會改變，效果如圖8所示。但選擇組件“CheckBox2”卻不會影響到組件“CheckBox1”，效果如圖9所示。

圖8 第一個組合框控制著第二個組合框

圖9 第二個組合框獨立運行

　　這個實例的具體做法如下：

　　首先按快捷鍵Ctrl+F7打開Components面板，然后用鼠標(biāo)左鍵的按住組件并把它拖拽到場景中，接著打開Component Parameters面板進行如圖10所示的參數(shù)設(shè)置。

圖10 設(shè)置第一個組合框的參數(shù)

　　在Label參數(shù)選項里我們重新命名這個復(fù)選框的名字為“Paris”。Change Handler參數(shù)選項里設(shè)置的“func”字符串就是我們自己定義的一個函數(shù)的函數(shù)名，也就是這個復(fù)選框被執(zhí)行的時候，這個函數(shù)將會被調(diào)用。

　　再拖拽一個復(fù)選框組件到場景中，然后在Component Parameters面板進行如圖10所示的參數(shù)設(shè)置?！癴unc2”也是自定義的函數(shù)。

圖10 設(shè)置第一個組合框的參數(shù)

　　現(xiàn)在右鍵單擊場景中的第一幀，然后選擇Actions命令，在打開的Actions面板中輸入如下代碼：

//為CheckBox1創(chuàng)建func函數(shù)

function func() {

//復(fù)選框被勾選后改變組件名稱

CheckBox1.setLabel("巴黎");

//得到復(fù)選框的被選狀態(tài)，復(fù)選框被勾選時，n_CheckBox1的值為true

n_CheckBox1 = CheckBox1.getValue();

//如果復(fù)選框未被勾選，則修改組件的名稱為“Paris”

if (n_CheckBox1 != true){

CheckBox1.setLabel("Paris");

}

//改變CheckBox2的狀態(tài)

CheckBox2.setValue(n_CheckBox1);

CheckBox2.setEnabled(n_CheckBox1);

}

//為CheckBox1創(chuàng)建func2函數(shù)，代碼含義如上

function func2() {

CheckBox2.setLabel("倫敦");

n_CheckBox2 = CheckBox2.getValue();

if (n_CheckBox2 != true){

CheckBox2.setLabel("London");

}

}

　　以上代碼中，我們先定義了一個func()函數(shù)，這個函數(shù)的主要功能是在控制組件CheckBox1的同時，對組件CheckBox2也進行著控制。當(dāng)我們勾選CheckBox1后，復(fù)選框CheckBox2也會被勾選，并同時改變兩個組件的名稱。當(dāng)CheckBox1不被勾選時，復(fù)選框CheckBox2是不可用的。代碼中的getValue()方法是用來獲取組件的可選狀態(tài)的，其返回值為true或false；方法setEnabled()可以設(shè)置組件是否可用，如果組件不可用，則呈現(xiàn)灰色不可用狀態(tài)；方法setLabel()可以改變組件的名稱。

　　2.2 RadioBox（單選框）

　　選擇不會永遠(yuǎn)都是多項的，有時我們不得不在多項內(nèi)容中選取其一，于是與CheckBox相對應(yīng)的便產(chǎn)生了RadioButton組件。該組件是單一選擇項組件，我們可以將一些相關(guān)的內(nèi)容列為一組，然后在該組內(nèi)選擇其中符合自己的一項作為正確結(jié)果。

　　我們把Components面板中的RadioButton（單選框）組件拖拽到場景中，然后打開它的參數(shù)設(shè)置面板(或Alt+F7調(diào)出Component Parameters面板)設(shè)置相應(yīng)參數(shù)，如圖11所示。

圖11 RadioButton組件的參數(shù)面板

　　在RadioButton組件的參數(shù)面板中，各項參數(shù)的功能如下：

　　　　Label（組件名稱）：命名單選框組件。

　　　　InitialValue（初始值）：初始化組件的狀態(tài)為選中（true）或是未選中（false）。

　　　　GroupName（組別名稱）：確定該單選框隸屬于哪個組別，同一組內(nèi)的單選框只能有一種單選框可被激活選中，如選中其一則其它單選框?qū)⑻幱跓o效狀態(tài)。

　　　　Data（數(shù)據(jù)信息）：選擇該單選框之后將產(chǎn)生的數(shù)據(jù)信息。

　　　　LabelPlacement（標(biāo)簽位置）：組件名稱（Label）在單選框的位置方向。Left：組件名稱將顯示在單選框的左邊；Right：組件名稱將顯示在單選框的右邊。

　　　　Change Handler（處理函數(shù)）：與CheckBox的Change Handler一樣，該設(shè)置選項的參數(shù)為用戶定義函數(shù)的函數(shù)名，這里將執(zhí)行用戶自己定義的函數(shù)，當(dāng)然在函數(shù)被調(diào)用前，我們需要對它進行定義。

　　接下來我們來學(xué)習(xí)一個簡單組件效果，該實例中我們設(shè)置了一個radioGroup組別，在這個組里有兩個RadioButton，一個為“男”一個為“女”用以判斷我們的性別，然后我們還將放置一個動態(tài)文本框Sex來顯示我們的選擇信息。當(dāng)我們選中組件“RadioMale”時，Sex文本框?qū)@示“先生，您好！”，而當(dāng)我們選中組件“RadioFemale”時，Sex文本框?qū)@示“女士，您好！”。當(dāng)然，只要我們選中了其中的一項，另一項單選框的焦點必然將失去，效果如圖12所示：

　　

圖12 選擇不同的性別時出樣不同的結(jié)果

　　首先我們先拖拽兩個RadioButton到場景中，分別將這兩個RadioButton的Label設(shè)置為“男”、“女”；InitialValue則都設(shè)置為False；GroupName則都設(shè)置為radioGroup（注意：這里千萬將兩個RadioButton的GroupName設(shè)置為相同，而且拼寫的大小寫也應(yīng)當(dāng)注意）；Data則分別設(shè)置為“先生，您好！”與“女士，您好！”；LabelPlacement則都設(shè)置為Right；Change Handler則都設(shè)置為changeLabel（注意：changeLabel為自定義函數(shù)，我們在下面會列出它的代碼）。

　　然后我們在場景中創(chuàng)建一個Dynamic Text（動態(tài)文本框），將它的Var設(shè)置為Sex。

　　接下來我們在場景中新建一層ActionScript層用以放置代碼，在第一幀關(guān)鍵幀內(nèi)我們編寫了這樣一個自定義函數(shù)：

//此處的changeLabel即是RadioButton的參數(shù)設(shè)置中Change Handler處設(shè)置的changeLabel

function changeLabel(whichRadio) {

sex= whichRadio.getValue();

}

　　由于RadioButton組件其自身加入了Group（組別）的判定，因而我們可以將RadioButton實例中的自定義函數(shù)與CheckBox實例中的自定義函數(shù)作以比較，我們將很容易的得出一個結(jié)果：RadioButton比起CheckBox省去了對同組選項中許多內(nèi)容的控制，如Enabled等。



　　2.3 ComboBox（組合框）

　　使用組合框組件可以設(shè)計出大家常見的下拉菜單。我們可以創(chuàng)建靜態(tài)文本框和可輸入文本框兩個組合框組件。靜態(tài)的組合框只可以拖動滾動條來選擇菜單中的項目，而可輸入文本框與靜態(tài)的組合框所不同的就是可以在頂端輸入所需要的菜單項，如圖13所示。

圖13 設(shè)置可輸入組合框組件

　　組合框組件的索引是從數(shù)字0開始的，也就是組合框顯示的第一個菜單項目的索引值為0。可以使用小鍵盤的方向鍵來控制組合框組件里菜單選項的選擇：

　　敲擊一下方向鍵↑可以向上移動一個單位。

　　敲擊一下方向鍵↓可以向下移動一個單位。

　　敲擊PageUp鍵會向上滾動5個菜單選項。

　　敲擊PageDown鍵會向下滾動5個菜單選項。

　　敲擊Home鍵可以跳轉(zhuǎn)到菜單的第一個選項。

　　敲擊End鍵可以跳轉(zhuǎn)到菜單的第一個選項。

　　現(xiàn)在我們從Components面板中拖拽一個ComboBox組件到場景中，然后打開它的參數(shù)設(shè)置面板，如圖14所示。

圖14 ComboBox組件的參數(shù)面板

圖14中各項參數(shù)的設(shè)置功能如下：

　　Editable（可編輯）：設(shè)置組合框是否可以提供文本地輸入功能。如果設(shè)置該項的參數(shù)為true，組合框就提供文本輸入功能；如果設(shè)置該項的參數(shù)為false，就不能在組合框內(nèi)輸入文本，但可以拖動滾動條進行選擇。

　　Labels（標(biāo)簽）：標(biāo)簽的功能是給組合框輸入各菜單選項。雙擊該選項會彈出如圖15所示的Values（參數(shù)）面板。圖15中四個按鈕的功能分別是增減菜單選項和上下移動菜單選項。

圖15 Values（參數(shù)）輸入面板

　　Data（數(shù)據(jù)）：同Labels參數(shù)選項一樣，Data中的數(shù)據(jù)也是一個字符串?dāng)?shù)組。Data參數(shù)中的數(shù)組元素分別對應(yīng)著Labels參數(shù)中的元素，其值也可以從Values面板中輸入。

　　RowCount（行數(shù)）：該參數(shù)選項的功能是設(shè)置同時顯示菜單的數(shù)目，默認(rèn)值為8。如果該參數(shù)選項的參數(shù)值為5，打開下拉菜單時可以同時顯示5個菜單項目。

　　ChangeHandler：執(zhí)行用戶自定義的函數(shù)。該參數(shù)選項的參數(shù)為用戶定義函數(shù)的函數(shù)名。在函數(shù)被調(diào)用前，我們需要對它進行定義，而且函數(shù)需要和實體在同一時間軸列上。還有，該函數(shù)還可以使用組合框的實體名作為自己的參數(shù)。

　　下面我們來學(xué)習(xí)一個實例，讓我們來制作一個常用的目錄導(dǎo)航。

　　打開Components面板，然后把組件拖拽到場景中，接著打開Component Parameters面板進行如圖16所示的參數(shù)設(shè)置。

圖16 設(shè)置第一個組合框的參數(shù)

　　雙擊Labels參數(shù)選項，在彈出的Values面板中輸入菜單項目的名稱，最終設(shè)置如圖17所示。接著雙擊Data參數(shù)選項，在彈出的Values面板中輸入和目錄名相對應(yīng)的連接地址，輸入后的設(shè)置如圖18所示。在Change Handler參數(shù)選項里輸入“func”。當(dāng)選擇下來導(dǎo)航條中的菜單選項時，函數(shù)“func”將被執(zhí)行?！癈omboBox”是組合框的實體名。

圖17 輸入顯示目錄

圖18 輸入鏈接地址

　　右鍵單擊場景中的第1幀，打開Actions面板，輸入如下代碼：

//ComboBox就是場景中組件的實體名，方法setSize用來改變組件的寬度

ComboBox.setSize(150);

//為ComboBox創(chuàng)建func函數(shù)

function func(obj) {

//obj._name取得組件的實體名，如果實體名為ComboBox則往下執(zhí)行

if (obj._name == "ComboBox") {

//getURL()方法可以打開瀏覽器

getURL(obj.getValue());

}

}

　　在代碼中使用參數(shù)obj是讓函數(shù)能夠判斷到底是哪個組件在調(diào)用它。一般情況下我們也不會為每個組件都創(chuàng)建一個函數(shù)，而是讓它們使用同一個函數(shù)進行處理。本例的測試結(jié)果如圖19所示。

圖19 實例效果

2.4 ListBox（列表框）

　　假若按繼承的方式來比較ComboBox與ListBox，那么應(yīng)該說它們繼承于相同的父類，正因如此所以這兩個組件之間在許多方面具有相似的點，包括我們要講述的參數(shù)設(shè)置及其它的一些相關(guān)操作。當(dāng)然，區(qū)別總是存在的，ComboBox在空間的利用上為我們節(jié)約了很大的開支，但倘若項目增多就會變得十分的累贅累人，而ListBox雖然增加了一些空間占用面積，可是里面項目內(nèi)容增加以后卻比ComboBox要來得方便的多。

　　現(xiàn)在我們從Components面板中拖拽一個ListBox組件到場景中，然后打開它的參數(shù)設(shè)置面板，如圖20所示。

圖20 ListBox組件的參數(shù)面板

　　比較Combox的組件參數(shù)面板，圖20中各項參數(shù)的設(shè)置功能如下：

　　Labels（標(biāo)簽）：標(biāo)簽的功能是給列表框輸入各菜單選項。雙擊該選項會彈出如圖21所示的Values（參數(shù)）面板（與ComboBox一樣）。

圖21 Values（參數(shù)）輸入面板

　　Data（數(shù)據(jù)）：也與同Labels參數(shù)選項一樣，Data中的數(shù)據(jù)也是一個字符串?dāng)?shù)組。Data參數(shù)中的數(shù)組元素分別對應(yīng)著Labels參數(shù)中的元素，其值也可以從Values面板中輸入（與ComboBox的Data一致）。

　　Select Multiple（多選）：該項的功能是判斷列表框是否具有多選功能。False：只能選擇列表框中的一個數(shù)據(jù)項；True：可以同時選擇列表框中的多個數(shù)據(jù)項（按下Ctrl或Shift進行多項數(shù)據(jù)選擇）。

　　ChangeHandler：執(zhí)行用戶自定義的函數(shù)。該參數(shù)選項的參數(shù)為用戶定義函數(shù)的函數(shù)名。在函數(shù)被調(diào)用前，我們需要對它進行定義，而且函數(shù)需要和實體在同一時間軸列上。還有，該函數(shù)還可以使用列表框的實體名作為自己的參數(shù)。

　　現(xiàn)在讓我們參見前面的ComboBox的實例再利用ListBox進行進一步的改進，我們將利用ListBox羅列一些相關(guān)的網(wǎng)站，我們通過在列表框中選擇不同的站點名稱來定制窗口大小的打開一個新的站點。因而這里不僅可以讓我們對ListBox的操作有所掌握，而且還可以讓我們清楚如何利用一些其它的技術(shù)（如JavaScript）來結(jié)合ListBox實現(xiàn)一些實用的效果。

　　當(dāng)我們設(shè)置完ListBox的Labels與Data的項目內(nèi)容以后我們再確認(rèn)一下Select Multiple是否設(shè)置為False（本實例中為否），然后我們在ChangeHandler中輸入ListOpenWindow（此為自定義函數(shù)ListOpenWindow()的名稱）。

　　接下來我們新建一層ActionScript層，并在此關(guān)鍵幀中輸入如下的代碼內(nèi)容：

//構(gòu)建一個自定義函數(shù)CenterPopupMX，利用getURL與JavaScript來實現(xiàn)彈出定制大小的居中窗口

MovieClip.prototype.CenterPopupMX = function(theurl, title, w, h, features) {

var sysW = System.capabilities.screenResolutionX;

var sysH = System.capabilities.screenResolutionY;

var centerx = Math.round((sysW/2)-(w/2));

var centery = Math.round((sysH/2)-(h/2));

getURL("javascript:void(window.open('"+theUrl+"','"+title+"','width="+w+", height="+h+", left="+centerx+", top="+centery+",screenX="+centerx+", screenY="+centery+","+features+"'));");

};

//構(gòu)建一個自定義函數(shù)ListOpenWindow，利用getURL與前面的CenterPopupMX函數(shù)結(jié)合在取出ListBox相應(yīng)名稱的超鏈接以后打開一個寬為400高為500無工具欄等內(nèi)容的定制瀏覽窗口

function ListOpenWindow() {

getURL(CenterPopupMX((listBox.getSelectedItem().data),"4Tstudio",400,500,"menubar=no"), "_blank");

}

　　在ListOpenWindow中我們利用了listBox.getSelectedItem().data取出該列表框當(dāng)前取得焦點的項的數(shù)據(jù)。本例的測試結(jié)果如圖22所示。

　　　

圖22 選擇ListBox中相應(yīng)的地址名稱彈出相應(yīng)的定制大小的網(wǎng)站