2.1 CheckBox(復選框)
在許多軟件中,復選框組件是經常會被用到的,如Visual C++的資源編輯器中我們就可以看見很多的復選框。復選框可以允許我們選擇一個或者多個選項,當某選項被選中後,該復選框的小框里就會出現一個小勾。
我們把Components面板中的CheckBox(復選框)組件拖拽到場景中,然後打開它的參數設置面板,如圖5所示。

圖5 CheckBox組件的參數面板
同樣的,你也可以選擇Window菜單下的Component Parameters命令,或是按快捷鍵Alt+F7調出Component Parameters(組件參數)面板來設置組件的參數,如圖6所示。

圖6 UI組件參數設置面板
在CheckBox組件的參數面板中,各項參數的功能如下︰
Label(組件名稱)︰命名復選框組件,如圖7所示。
InitialValue(初始值)︰初始化組件的狀態為選中(true)或是未選中(false)。

圖7 命名復選框組件
Alignment(對齊方式)︰設置復選框的可選方式。Left︰勾選框在左面,right︰勾選框在右邊。 如圖7所示。
Change Handler(處理函數)︰執行用戶自己定義的函數,該設置選項的參數為用戶定義函數的函數名。在函數被調用前,我們需要對它進行定義。
現在我們看一個簡單的組件效果。該效果中,當我們選中組件“CheckBox1”時,組件“CheckBox2”也會同時被選中。當組件“CheckBox1”不被選中的時候,組件“CheckBox2”也不被選中,而且會變成灰色,即該組件不可用,但兩個組件的名稱都會改變,效果如圖8所示。但選擇組件“CheckBox2”卻不會影響到組件“CheckBox1”,效果如圖9所示。

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

圖9 第二個組合框獨立運行
這個實例的具體做法如下︰
首先按快捷鍵Ctrl+F7打開Components面板,然後用鼠標左鍵的按住

組件並把它拖拽到場景中,接著打開Component Parameters面板進行如圖10所示的參數設置。

圖10 設置第一個組合框的參數
在Label參數選項里我們重新命名這個復選框的名字為“Paris”。Change Handler參數選項里設置的“func”字符串就是我們自己定義的一個函數的函數名,也就是這個復選框被執行的時候,這個函數將會被調用。
再拖拽一個復選框組件到場景中,然後在Component Parameters面板進行如圖10所示的參數設置。“func2”也是自定義的函數。

圖10 設置第一個組合框的參數
現在右鍵單擊場景中的第一幀,然後選擇Actions命令,在打開的Actions面板中輸入如下代碼︰
//為CheckBox1創建func函數
function func() {
//復選框被勾選後改變組件名稱
CheckBox1.setLabel("巴黎");
//得到復選框的被選狀態,復選框被勾選時,n_CheckBox1的值為true
n_CheckBox1 = CheckBox1.getValue();
//如果復選框未被勾選,則修改組件的名稱為“Paris”
if (n_CheckBox1 != true){
CheckBox1.setLabel("Paris");
}
//改變CheckBox2的狀態
CheckBox2.setValue(n_CheckBox1);
CheckBox2.setEnabled(n_CheckBox1);
}
//為CheckBox1創建func2函數,代碼含義如上
function func2() {
CheckBox2.setLabel("倫敦");
n_CheckBox2 = CheckBox2.getValue();
if (n_CheckBox2 != true){
CheckBox2.setLabel("London");
}
}
以上代碼中,我們先定義了一個func()函數,這個函數的主要功能是在控制組件CheckBox1的同時,對組件CheckBox2也進行著控制。當我們勾選CheckBox1後,復選框CheckBox2也會被勾選,並同時改變兩個組件的名稱。當CheckBox1不被勾選時,復選框CheckBox2是不可用的。代碼中的getValue()方法是用來獲取組件的可選狀態的,其返回值為true或false;方法setEnabled()可以設置組件是否可用,如果組件不可用,則呈現灰色不可用狀態;方法setLabel()可以改變組件的名稱。
2.2 RadioBox(單選框)
選擇不會永遠都是多項的,有時我們不得不在多項內容中選取其一,于是與CheckBox相對應的便產生了RadioButton組件。該組件是單一選擇項組件,我們可以將一些相關的內容列為一組,然後在該組內選擇其中符合自己的一項作為正確結果。
我們把Components面板中的RadioButton(單選框)組件拖拽到場景中,然後打開它的參數設置面板(或Alt+F7調出Component Parameters面板)設置相應參數,如圖11所示。

圖11 RadioButton組件的參數面板
在RadioButton組件的參數面板中,各項參數的功能如下︰
Label(組件名稱)︰命名單選框組件。
InitialValue(初始值)︰初始化組件的狀態為選中(true)或是未選中(false)。
GroupName(組別名稱)︰確定該單選框隸屬于哪個組別,同一組內的單選框只能有一種單選框可被激活選中,如選中其一則其它單選框將處于無效狀態。
Data(數據信息)︰選擇該單選框之後將產生的數據信息。
LabelPlacement(標簽位置)︰組件名稱(Label)在單選框的位置方向。Left︰

0組件名稱將顯示在單選框的左邊;Right︰

1組件名稱將顯示在單選框的右邊。
Change Handler(處理函數)︰與CheckBox的Change Handler一樣,該設置選項的參數為用戶定義函數的函數名,這里將執行用戶自己定義的函數,當然在函數被調用前,我們需要對它進行定義。
接下來我們來學習一個簡單組件效果,該實例中我們設置了一個radioGroup組別,在這個組里有兩個RadioButton,一個為“男”一個為“女”用以判斷我們的性別,然後我們還將放置一個動態文本框Sex來顯示我們的選擇信息。當我們選中組件“RadioMale”時,Sex文本框將顯示“先生,您好!”,而當我們選中組件“RadioFemale”時,Sex文本框將顯示“女士,您好!”。當然,只要我們選中了其中的一項,另一項單選框的焦點必然將失去,效果如圖12所示︰

2

3 圖12 選擇不同的性別時出樣不同的結果
首先我們先拖拽兩個RadioButton到場景中,分別將這兩個RadioButton的Label設置為“男”、“女”;InitialValue則都設置為False;GroupName則都設置為radioGroup(注意︰這里千萬將兩個RadioButton的GroupName設置為相同,而且拼寫的大小寫也應當注意);Data則分別設置為“先生,您好!”與“女士,您好!”;LabelPlacement則都設置為Right;Change Handler則都設置為changeLabel(注意︰changeLabel為自定義函數,我們在下面會列出它的代碼)。
然後我們在場景中創建一個Dynamic Text(動態文本框),將它的Var設置為Sex。
接下來我們在場景中新建一層ActionScript層用以放置代碼,在第一幀關鍵幀內我們編寫了這樣一個自定義函數︰
//此處的changeLabel即是RadioButton的參數設置中Change Handler處設置的changeLabel
function changeLabel(whichRadio) {
sex= whichRadio.getValue();
}
由于RadioButton組件其自身加入了Group(組別)的判定,因而我們可以將RadioButton實例中的自定義函數與CheckBox實例中的自定義函數作以比較,我們將很容易的得出一個結果︰RadioButton比起CheckBox省去了對同組選項中許多內容的控制,如Enabled等。
2.3 ComboBox(組合框)
使用組合框組件可以設計出大家常見的下拉菜單。我們可以創建靜態文本框和可輸入文本框兩個組合框組件。靜態的組合框只可以拖動滾動條來選擇菜單中的項目,而可輸入文本框與靜態的組合框所不同的就是可以在頂端輸入所需要的菜單項,如圖13所示。

4 圖13 設置可輸入組合框組件
組合框組件的索引是從數字0開始的,也就是組合框顯示的第一個菜單項目的索引值為0。可以使用小鍵盤的方向鍵來控制組合框組件里菜單選項的選擇︰
敲擊一下方向鍵↑可以向上移動一個單位。
敲擊一下方向鍵↓可以向下移動一個單位。
敲擊PageUp鍵會向上滾動5個菜單選項。
敲擊PageDown鍵會向下滾動5個菜單選項。
敲擊Home鍵可以跳轉到菜單的第一個選項。
敲擊End鍵可以跳轉到菜單的第一個選項。
現在我們從Components面板中拖拽一個ComboBox組件到場景中,然後打開它的參數設置面板,如圖14所示。

5 圖14 ComboBox組件的參數面板
圖14中各項參數的設置功能如下︰
Editable(可編輯)︰設置組合框是否可以提供文本地輸入功能。如果設置該項的參數為true,組合框就提供文本輸入功能;如果設置該項的參數為false,就不能在組合框內輸入文本,但可以拖動滾動條進行選擇。
Labels(標簽)︰標簽的功能是給組合框輸入各菜單選項。雙擊該選項會彈出如圖15所示的Values(參數)面板。圖15中四個按鈕的功能分別是增減菜單選項和上下移動菜單選項。

6 圖15 Values(參數)輸入面板
Data(數據)︰同Labels參數選項一樣,Data中的數據也是一個字符串數組。Data參數中的數組元素分別對應著Labels參數中的元素,其值也可以從Values面板中輸入。
RowCount(行數)︰該參數選項的功能是設置同時顯示菜單的數目,默認值為8。如果該參數選項的參數值為5,打開下拉菜單時可以同時顯示5個菜單項目。
ChangeHandler︰執行用戶自定義的函數。該參數選項的參數為用戶定義函數的函數名。在函數被調用前,我們需要對它進行定義,而且函數需要和實體在同一時間軸列上。還有,該函數還可以使用組合框的實體名作為自己的參數。
下面我們來學習一個實例,讓我們來制作一個常用的目錄導航。
打開Components面板,然後把組件

7拖拽到場景中,接著打開Component Parameters面板進行如圖16所示的參數設置。

8 圖16 設置第一個組合框的參數
雙擊Labels參數選項,在彈出的Values面板中輸入菜單項目的名稱,最終設置如圖17所示。接著雙擊Data參數選項,在彈出的Values面板中輸入和目錄名相對應的連接地址,輸入後的設置如圖18所示。在Change Handler參數選項里輸入“func”。當選擇下來導航條中的菜單選項時,函數“func”將被執行。“ComboBox”是組合框的實體名。

9 圖17 輸入顯示目錄

0 圖18 輸入鏈接地址
右鍵單擊場景中的第1幀,打開Actions面板,輸入如下代碼︰
//ComboBox就是場景中組件的實體名,方法setSize用來改變組件的寬度
ComboBox.setSize(150);
//為ComboBox創建func函數
function func(obj) {
//obj._name取得組件的實體名,如果實體名為ComboBox則往下執行
if (obj._name == "ComboBox") {
//getURL()方法可以打開瀏覽器
getURL(obj.getValue());
}
}
在代碼中使用參數obj是讓函數能夠判斷到底是哪個組件在調用它。一般情況下我們也不會為每個組件都創建一個函數,而是讓它們使用同一個函數進行處理。本例的測試結果如圖19所示。

1 圖19 實例效果
2.4 ListBox(列表框)
假若按繼承的方式來比較ComboBox與ListBox,那麼應該說它們繼承于相同的父類,正因如此所以這兩個組件之間在許多方面具有相似的點,包括我們要講述的參數設置及其它的一些相關操作。當然,區別總是存在的,ComboBox在空間的利用上為我們節約了很大的開支,但倘若項目增多就會變得十分的累贅累人,而ListBox雖然增加了一些空間佔用面積,可是里面項目內容增加以後卻比ComboBox要來得方便的多。
現在我們從Components面板中拖拽一個ListBox組件到場景中,然後打開它的參數設置面板,如圖20所示。

2 圖20 ListBox組件的參數面板
比較Combox的組件參數面板,圖20中各項參數的設置功能如下︰
Labels(標簽)︰標簽的功能是給列表框輸入各菜單選項。雙擊該選項會彈出如圖21所示的Values(參數)面板(與ComboBox一樣)。

3 圖21 Values(參數)輸入面板
Data(數據)︰也與同Labels參數選項一樣,Data中的數據也是一個字符串數組。Data參數中的數組元素分別對應著Labels參數中的元素,其值也可以從Values面板中輸入(與ComboBox的Data一致)。
Select Multiple(多選)︰該項的功能是判斷列表框是否具有多選功能。False︰只能選擇列表框中的一個數據項;True︰可以同時選擇列表框中的多個數據項(按下Ctrl或Shift進行多項數據選擇)。
ChangeHandler︰執行用戶自定義的函數。該參數選項的參數為用戶定義函數的函數名。在函數被調用前,我們需要對它進行定義,而且函數需要和實體在同一時間軸列上。還有,該函數還可以使用列表框的實體名作為自己的參數。
現在讓我們參見前面的ComboBox的實例再利用ListBox進行進一步的改進,我們將利用ListBox羅列一些相關的網站,我們通過在列表框中選擇不同的站點名稱來定制窗口大小的打開一個新的站點。因而這里不僅可以讓我們對ListBox的操作有所掌握,而且還可以讓我們清楚如何利用一些其它的技術(如JavaScript)來結合ListBox實現一些實用的效果。
當我們設置完ListBox的Labels與Data的項目內容以後我們再確認一下Select Multiple是否設置為False(本實例中為否),然後我們在ChangeHandler中輸入ListOpenWindow(此為自定義函數ListOpenWindow()的名稱)。
接下來我們新建一層ActionScript層,並在此關鍵幀中輸入如下的代碼內容︰
//構建一個自定義函數CenterPopupMX,利用getURL與JavaScript來實現彈出定制大小的居中窗口
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+"'));");
};
//構建一個自定義函數ListOpenWindow,利用getURL與前面的CenterPopupMX函數結合在取出ListBox相應名稱的超鏈接以後打開一個寬為400高為500無工具欄等內容的定制瀏覽窗口
function ListOpenWindow() {
getURL(CenterPopupMX((listBox.getSelectedItem().data),"4Tstudio",400,500,"menubar=no"), "_blank");
}
在ListOpenWindow中我們利用了listBox.getSelectedItem().data取出該列表框當前取得焦點的項的數據。本例的測試結果如圖22所示。

4

5 圖22 選擇ListBox中相應的地址名稱彈出相應的定制大小的網站(出處︰PConline)

