Flash CS5中文版標準實例教程 第9章

第9章組件

本章重點本章我們用FlashCS5自帶的表單實例介紹幾種常見組件的使用和自定義滾動文本框的方法；同時，我們將舉例詳細說明每個組件的使用方法。通過這些例子讓讀者不僅僅了解組件的用法，更是希望讀者能夠經(jīng)過這些例子的學習，制作出自己的東西來。學習目的通過本章的學習，您可以掌握：滑動條組件ComboBox，CheckBox和PushButtonRadioButtonScrollBarScrollPane自定義滾動文本框9.1組件

用戶可以對組件的每一個實例指定不同的參數(shù)值，根據(jù)參數(shù)值的不同，組件的實例的性質(zhì)也不同。這些可以指定的參數(shù)是用來描述某些自定義的屬性的，就像影片剪輯的預定義屬性一樣，可以在屬性面板的參數(shù)面板中對它們進行修改。使用組件時，使用者不必知道某個影片剪輯到底是如何實現(xiàn)的，他只需要通過參數(shù)面板，對一個組件實例的參數(shù)進行初始化。可以這么說，組件的使用提高了影片剪輯的通用性。組件的使用方法很簡單。選擇“窗口”/“組件”命令打開組件庫面板，從庫面板拖一個組件的實例到舞臺上，然后在參數(shù)面板中設(shè)置參數(shù)的參數(shù)值。選中舞臺上的按鈕，打開動作面板，添加下面的代碼：on(press){drag=1;}on(release,releaseOutside){drag=0;}drag是一個標志，drag為1表示當前的鼠標處于按下的狀態(tài)?；氐街鲿r間軸。從庫面板拖一個simpleslider到舞臺上。選中這個實例，打開動作面板，添加下面的代碼：OnClipEvent(mouseMove){if(drag==1){_x=_root._xmouse;}}修改上一步添加的代碼，在_x=_root._xmouse;這一行后面加入下面這行：

updateAfterEvent();這樣將對每一個鼠標移動事件都進行響應(yīng)，看起來比較平滑。如果不加這一句，當cpu比較繁忙的時候，它會把好幾個鼠標移動事件放在一起響應(yīng)?；瑒訔l總是有一個范圍的，給它加上范圍。選中舞臺上的simpleslider實例，然后打開動作面板，添加另一部分代碼：onClipEvent(load){min=1;//最小邊界。

max=500;//最大邊界。}修改鼠標移動的代碼，把鼠標限制在限定的范圍之內(nèi)。把修改OnClipEvent(mouseMove)處理函數(shù)改成下面的代碼：OnClipEvent(mouseMove){if(drag==1){_x=_root._xmouse;if(_x>max){_x=max;}if(_x<min){_x=min;}

updateAfterEvent();}}當這個影片剛剛加載進來的時候，文本框里顯示的并不是當前滑動條所在位置的比例，所以需要手動來設(shè)置。把_root.percent=Math.floor((_x.min)/(max.min)*100);放在OnClipEvent(load)的最后一行。注意一些代碼的改動。把原來在simpleslider里處理鼠標移動事件的代碼寫成了一個函數(shù)，moveSlider()，這個函數(shù)保持滑動條跟蹤鼠標并設(shè)置文本框相應(yīng)的值。這個函數(shù)寫在comslider的第一幀，定義如下：functionmoveSlider(){_x=_root._xmouse+Xoffset;if(_x>max)_x=max;if(_x<min)_x=min;percent=Math.floor((_x.min)/(max.min)*100);_root.sliderMoving(sliderName,percent);}由于要創(chuàng)建的組件需要某些可以讓用戶選擇的參數(shù)，所以把第一幀對min，max和percent的賦值去掉，取而代之，在組件定義對話框中把它們設(shè)置成組件的參數(shù)。為了與被控制對象通信，必須為comslider添加另一個參數(shù)。如圖所示，加入一個參數(shù)為sliderName，值和類型選默認，其實是一個字符串。單擊主時間軸的第一幀，然后打開動作面板，添加如下的代碼：functionsliderMoving(whichSlider,howMuch){if(whichSlider=="alphaclip"){_root.box1._alpha=howMuch;}if(whichSlider=="rotateclip"){_root.box1._rotation=(howMuch/100)*360;}}9.2使用用戶接口組件

ComboBox，CheckBox和PushButton

使用RadioButton

使用ScrollBar

使用ScrollPane

9.2.1ComboBox，CheckBox和PushButton

首先要寫的是PushButton的onClick函數(shù)。這是一個條件分支函數(shù)，如果Submit按鈕被單擊，那么將執(zhí)行g(shù)etResults函數(shù)，(稍后定義這個函數(shù))然后跳到第二頁；如果是Return按鈕被單擊，那么它將跳到第一頁。在動作面板中輸入下面的代碼：functiononClick(btn){if(btn==submit_btn){getResults();gotoAndStop("pg2");}elseif(btn==return_btn){gotoAndStop("pg1");}}

getResults函數(shù)將從checkbox和combobox中取得用戶選擇的結(jié)果。把下面的代碼輸入動作面板：//從第一頁得到結(jié)果functiongetResults(){//如果用戶選擇了CheckBox，那么getValue返回True，否則返回Falsesweepstakes_result=sweepstakes_box.getValue();//getSelectedItem()將選返回用戶選擇的項目，//它的label屬性就是顯示在combobox彈出式菜單里的內(nèi)容。color_result=color_box.getSelectedItem().label;//返回被選擇項目的下標selectedItem=color_box.getSelectedIndex();}

initValue()函數(shù)將根據(jù)用戶輸入的信息初始化第一頁的各個文本框和組件。當用戶單擊了Return按鈕之后，將調(diào)用這個函數(shù)。//initializethevaluesonpg1withthevaluestheuserhaspreviouslyselectedfunctioninitValue(){sweepstakes_box.setValue(sweepstakes_result);if(!started){color_box.setSelectedIndex(0);started=true;}else{ color_box.setSelectedIndex(selectedItem);}}最后，在所有ActionScript最前面加上一行對initValue()函數(shù)的調(diào)用。選中FrameAction層第6幀，然后在動作面板中添加如下的代碼：//sweepstakestextif(sweepstakes_result==true){sweepstakes_text="YouhavebeenenteredintheStilettoFantasysweepstakes.Winnersareannouncedattheendofeachmonth.";}else{sweepstakes_text="YouhavenotbeenenteredintheStilettoFantasysweepstakes.";}9.2.2使用RadioButton

在制作實例之前先介紹這幾個進制使用的數(shù)字和轉(zhuǎn)化過程。十進制使用數(shù)字0－9。二進制使用數(shù)字0和1。八進制使用數(shù)字0－7。十六進制使用數(shù)字0－9和字母字母A，B，C，D，E，F(xiàn)，分別代表10，11，12，13，14，15。在動作面板中為NEXT按鈕添加下面的代碼：on(release){if(radioBox1.getState()){nextFrame();}if(radioBox2.getState()){gotoAndStop(_currentframe+2);}if(radioBox3.getState()){gotoAndStop(_currentframe+3);}if(radioBox4.getState()){gotoAndStop(_currentframe+4);}}按鈕釋放時會根據(jù)當前哪一個RadioButton處于活動狀態(tài)，影片跳到相應(yīng)的關(guān)鍵幀。在舞臺頂端添加一個輸入文本框，命名為input。然后在它的下面添加前面創(chuàng)建的圖形元件，在每一個圖形元件下面添加動態(tài)文本框，總共三個，將它們分別命名為output1,output2,output3。最后在輸入文本框的右側(cè)添加一個Convert按鈕，為這個按鈕添加如下的腳本：on(release,keyPress"<Enter>"){numinput=input;output1=decimalToBinary(numinput);output2=decimalToOctal(numinput);output3=decimalToHexadecimal(numinput);}注意到第一行有一個keyPress"<Enter>"，這是說同時響應(yīng)Enter鍵按下的消息，換句話說，按下這個按鈕和按下回車鍵是一樣的作用。在第三幀按圖所示進行布局，將輸入框和動態(tài)文本框分別命名為input,output1,output2,output3。這一幀是從二進制轉(zhuǎn)化到其他的進制。為按鈕Convert添加如下的代碼：on(release,keyPress"<Enter>"){numinput=input;output1=binaryToDecimal(numinput);output2=decimalToOctal(output1);output3=decimalToHexadecimal(output1);}在第四幀按照圖所示進行布局，文本框采用和前面兩幀一樣的名稱。這一幀是從八進制轉(zhuǎn)換到其他進制。所以，為按鈕Convert添加下面的代碼：on(release,keyPress"<Enter>"){numinput=input;output1=octalToDecimal(numinput);output2=decimalToBinary(output1);output3=decimalToHexadecimal(output1);}在第五幀按照圖進行布局，同樣，文本框采用和前面三幀一樣的名稱。這一幀是從十六進制轉(zhuǎn)化到其他的進制。為按鈕Convert添加下面的代碼：on(release,keyPress"<Enter>"){numinput=input;output1=hexadecimalToDecimal(numinput);output2=decimalToBinary(output1);output3=decimalToOctal(output1);}9.2.3使用ScrollBar

使用滾動條組件，可以用來為動態(tài)文本框或者輸入文本框添加水平或者垂直滾動條。通過拖動滾動條可以顯示或者輸入更多的內(nèi)容，而不需要增大文本框占用的面積。當把一個滾動條拖到舞臺上的動態(tài)文本框或者輸入文本框上的時候，滾動條自動對齊到文本框最近的水平或者垂直邊。一旦滾動條對齊到文本框，F(xiàn)lash自動為滾動條實例添加targetTextField參數(shù)值。盡管滾動條自動對齊到文本框，但是它并沒有和文本框成為一組。因此，移動或者刪除文本框的時候，也應(yīng)該相應(yīng)的移動或者刪除滾動條。滾動條和文本框可以放在不同的層，但必須放在同一個時間軸里。9.2.4使用ScrollPane

ScrollPane是一個有水平和垂直滾動條的小窗口，可以在這個窗口里顯示影片剪輯。由于有滾動條，所以可以使用很小的一塊面積顯示很大的內(nèi)容。scrollDrag：如果勾選了此項，則允許用戶拖動ScrollPane窗口中顯示的內(nèi)容；否則，只能通過滾動條來滾動顯示內(nèi)容。默認不選中。HorizontalScrollPolicy：該參數(shù)指定水平滾動條顯示的方式。如果選擇on，則顯示水平滾動條；off表示不顯示水平滾動條；auto表示當需要的時候顯示。HorizontalLineScrollSize：設(shè)置每次單擊滾動箭頭時水平滾動條移動多少個單位。默認值為5。HorizontalPageScrollSize：設(shè)置每次單擊滾動條軌道時垂直滾動條移動多少個單位。默認值為20。Source：指定要加載到滾動窗格中的內(nèi)容。該值可以是本地SWF或JPEG文件的相對路徑，或Internet上的文件的相對或絕對路徑。也可以是設(shè)置為“為ActionScript導出”的庫中的影片剪輯元件的鏈接標識符。verticalLineScrollSize：設(shè)置每次單擊滾動箭頭時垂直滾動條移動多少個單位。默認值為5。verticalPageScrollSize：設(shè)置每次單擊滾動條軌道時垂直滾動條移動多少個單位。默認值為20。VerticalScrollPolicy：該參數(shù)指定垂直滾動條顯示的方式。如果選擇on，則顯示垂直滾動條；off表示不顯示垂直滾動條；auto表示當需要的時候顯示。9.3自定義滾動文本框

添加按鈕制作文本為按鈕添加代碼

選中舞臺上向上的按鈕，打開動作面板，添加如下的代碼：on(press){scrolling="up";frameCounter=speedFactor;}on(release,releaseOutside){scrolling=0;}選中舞臺上向下的按鈕添，打開動作面板，添加如下的代碼：on(press){scrolling="down";frameCounter=speedFactor;}on(release,releaseOutside){scrolling=0;}制作文本邊框

在containerMC的時間軸添加一個新層，起名為outline。選擇繪圖工具欄的矩形工具，選擇邊框顏色為黑色，填充顏色無，在舞臺上畫一個只有邊框的矩形，如圖所示。添加containerMC實例

選中舞臺上的containerMC實例，打開動作面板，添加如下的代碼：onClipEvent(load){daTextBox="Goahead….WhatwasItalkingabout?</FONT></P>";scrolling=0;frameCounter=1;speedFactor=3;}onClipEvent(enterFram