《Flash CS3動(dòng)畫制作》Flash組件的應(yīng)用（模塊九）

模塊九Flash組件的應(yīng)用主講老師：***FlashCS3動(dòng)畫制作任務(wù)實(shí)訓(xùn)教程學(xué)習(xí)目標(biāo)了解FlashCS3幾種常用的組件熟練掌握添加組件和設(shè)置組件屬性的方法掌握為組件添加語句的方法任務(wù)一

制作用戶注冊界面任務(wù)目標(biāo)使用文本框和按鈕組件制作一個(gè)用戶注冊界面，通過本實(shí)例了解并掌握應(yīng)用組件制作動(dòng)畫的一般方法，完成后的最終效果如圖所示。用戶注冊界面任務(wù)一

制作用戶注冊界面操作思路（1）導(dǎo)入圖片，新建“背景”和“提示框”影片剪輯。（2）放置背景圖片，添加文本和組件。（3）對組件的屬性進(jìn)行設(shè)置，并加入相應(yīng)語句。制作用戶注冊界面的操作思路操作一

準(zhǔn)備素材及元件（1）新建一大小為700×500像素，背景顏色為黑色，幀頻為30fps名為“用戶注冊界面”的Flash文檔。（2）選擇【文件】→【導(dǎo)入】→【導(dǎo)入到庫】菜單命令，將“注冊背景.jpg”圖片素材導(dǎo)入到庫中。（3）選擇【插入】→【新建元件】菜單命令，在打開的“創(chuàng)建新元件”對話框新建一“背景”影片剪輯元件。（4）將“庫”面板中的“注冊背景.jpg”拖動(dòng)到“背景”影片剪輯元件場景中。這樣“背景”影片剪輯元件便制作完畢。操作一

準(zhǔn)備素材及元件（5）選擇【插入】→【新建元件】菜單命令，新建一個(gè)“提示框”影片剪輯元件。在場景中用矩形工具繪制一個(gè)黑色的如圖所示矩形，具體設(shè)置如圖所示。

繪制矩形矩形具體設(shè)置操作一

準(zhǔn)備素材及元件（6）然后在矩形框上使用文本工具繪制一個(gè)如圖所示動(dòng)態(tài)文本框，動(dòng)態(tài)文本框的具體設(shè)置如圖所示。（7）返回主場景，將圖層1命名為“背景”圖層，將“庫”面板中的“背景”影片剪輯元件拖動(dòng)到主場景中。

繪制動(dòng)態(tài)文本框動(dòng)態(tài)文本設(shè)置操作一

準(zhǔn)備素材及元件（8）選中場景中的“背景”影片剪輯元件，在“屬性”面板中將該元件的Alpha值設(shè)置為15%。得到如圖所示效果。設(shè)置背景圖層操作二

添加文字和組件（1）新建“文字”圖層，選擇工具箱中的文本工具，在“屬性”面板中對字體進(jìn)行設(shè)置后在場景中輸入如圖所示文本內(nèi)容。（2）新建“交互組件”圖層，選擇【窗口】→【組件】菜單命令，在打開的如圖所示面板中將TextInput組件拖動(dòng)到“姓名”文本后。

輸入文本拖動(dòng)TextInput組件操作二

添加文字和組件（3）選中該組件，在“屬性”面板中將該組件命名為“XM”，如圖所示，單擊“屬性”面板上的“參數(shù)”選項(xiàng)卡，在打開的面板中進(jìn)行如圖所示設(shè)置。

命名組件設(shè)置組件屬性操作二

添加文字和組件（4）用相同的方法分別在“性別”、“地址”、“電話”、“電子郵件”、“興趣愛好”、“自我介紹”文本后添加相應(yīng)組件，并將其分別按照如圖所示進(jìn)行命名。

命名行別組件命名地址組件命名電話組件命名電子郵件組件命名興趣愛好組件命名自我介紹組件操作二

添加文字和組件（5）再次選擇【窗口】→【組件】菜單命令，在打開的“組件”面板中將Button組件拖動(dòng)到場景的右下方位置。（6）選中該組件，在“屬性”面板中將該組件命名為“QCA”，如圖所示，單擊“屬性”面板上的“參數(shù)”選項(xiàng)卡，在打開的面板中進(jìn)行如圖所示設(shè)置。

命名清除組件設(shè)置組件屬性操作二

添加文字和組件（7）用相同的方法添加“提交”按鈕組件，并將該組件按如圖所示命名，其參數(shù)設(shè)置如圖所示。

命名組件設(shè)置組件屬性操作二

添加文字和組件（8）添加了所有文本和組件的界面效果如圖所示。添加了所有文本和組件的界面效果操作二

添加文字和組件（9）在“交互組件”圖層按“F9”鍵，打開如圖所示“動(dòng)作-幀”面板，在該面板中輸入腳本：“動(dòng)作-幀”面板操作二

添加文字和組件（10）新建“提示框”圖層，在打開的“庫”面板中將“提示框”影片剪輯拖動(dòng)到場景中央位置。（11）選中場景中的該元件，在“屬性”面板中將其命名為“TS”，并將其顏色Alpha值設(shè)置為100%，如圖所示。設(shè)置提示框?qū)傩圆僮鞫?/p>

添加文字和組件（12）這樣即可完成整個(gè)用戶注冊界面的操作，其時(shí)間軸狀態(tài)如圖所示。按“Ctrl+S”鍵保存該動(dòng)畫，按“Ctrl+Enter”鍵測試動(dòng)畫，即可打開注冊頁面，在該頁面輸入注冊信息后，單擊“提交”按鈕系統(tǒng)將彈出“無法連接服務(wù)器”的提示信息。時(shí)間軸狀態(tài)學(xué)習(xí)與探究Flash中組件的類型UI組件：UserInterface組件主要用于設(shè)置用戶交互界面，并通過交互界面使用戶與應(yīng)用程序進(jìn)行交互操作，在FlashCS3中，大多數(shù)交互操作都是通過這類組件實(shí)現(xiàn)的。在UI組件中，主要包括Button、CheckBox、ComboBox、RadioButton、List、TextArea和TextInupt等組件，如圖所示。UI組件學(xué)習(xí)與探究Video組件：Video組件主要用于對動(dòng)畫中的視頻播放器和視頻流進(jìn)行交互操作。其中主要包括FLVPlayback、FLVPlaybackCaptioning、BackButton、PlayButton、SeekBar、PlayPauseButton、VolumeBar和FullScreenButton等交互組件，如圖所示。Video組件學(xué)習(xí)與探究Button組件icon：用于為按鈕添加自定義圖標(biāo)，在該參數(shù)右側(cè)的文本框中可輸入自定義圖標(biāo)所在的路徑。label：用于設(shè)置按鈕的名稱，其默認(rèn)值為Button。labelPlacement：用于確定按鈕上的文本相對于圖標(biāo)的方向，包括left、right、top和bottom4個(gè)選項(xiàng)，其默認(rèn)值為right。selected：用于根據(jù)toggle的值設(shè)置按鈕是被按下還是被釋放，若toggle的值為true則表示按下，值為false表示釋放，默認(rèn)值為false。toggle：用于確定是否將按鈕轉(zhuǎn)變?yōu)榍袚Q開關(guān)。若要讓按鈕按下后馬上彈起，則選擇false選項(xiàng)；若要讓按鈕在按下后保持按下狀態(tài)，直到再次按下時(shí)才返回到彈起狀態(tài)，則選擇true，其默認(rèn)值為false。學(xué)習(xí)與探究CheckBox組件label：用于設(shè)置CheckBox組件顯示的內(nèi)容。其默認(rèn)值為CheckBox。labelPlacement：用于確定復(fù)選框上標(biāo)簽文本的方向，包括left、right、top和bottom4個(gè)選項(xiàng)，其默認(rèn)值為right。selected：用于確定CheckBox組件的初始狀態(tài)為選中（true）或取消選中（false）。其默認(rèn)值為false。學(xué)習(xí)與探究ComboBox組件data：用于設(shè)置相應(yīng)的數(shù)據(jù)，并將其與ComboBox組件中的項(xiàng)目相關(guān)聯(lián)。editable：用于確定是否允許用戶在下拉列表框中輸入文本。若允許輸入則選擇true，若不允許輸入則選擇false，默認(rèn)值為false。labels：用于設(shè)置下拉列表中顯示的項(xiàng)目內(nèi)容。rowCount：用于確定不使用滾動(dòng)條時(shí)，下拉列表中最多可以顯示的項(xiàng)目數(shù)量，默認(rèn)值為5。學(xué)習(xí)與探究RadioButton組件data：用于設(shè)置RadioButton的對應(yīng)值。groupName：用于指定該RadioButton組件所屬的項(xiàng)目組，項(xiàng)目組由該參數(shù)相同的所有RadioButton組件組成，在同一項(xiàng)目組中只能選擇一個(gè)RadioButton組件，并返回該組件的值。label：用于設(shè)置RadioButton的文本內(nèi)容，其默認(rèn)值是RadioButton。labelPlacement：用于確定RadioButton組件文本的方向，主要包括left、right、top和bottom4個(gè)選項(xiàng)，默認(rèn)值為right。selected：用于確定單選按鈕的初始狀態(tài)是否被選中，其中true表示選中，false表示未選中，默認(rèn)值為false。學(xué)習(xí)與探究ScrollPane組件contentPath：用于確定要加載到ScrollPane組件中的內(nèi)容所在的路徑。hLineScrollSize：用于設(shè)置每次按下ScrollPane組件中滾動(dòng)條兩側(cè)按鈕時(shí)，水平滾動(dòng)條移動(dòng)的距離，默認(rèn)值為5。hPageScrollSize：用于設(shè)置按下滾動(dòng)條時(shí)水平滾動(dòng)條移動(dòng)的距離，默認(rèn)值為20。hScrollPolicy：用于設(shè)置是否顯示水平滾動(dòng)條，包括on、off和auto3個(gè)選項(xiàng)，其默認(rèn)值為auto。scrollDrag：用于確定是否允許用戶在滾動(dòng)條中滾動(dòng)內(nèi)容，若允許則選擇true，若不允許選擇false，其默認(rèn)值為false。vLineScrollSize：用于設(shè)置每次按下ScrollPane組件滾動(dòng)條兩側(cè)的按鈕時(shí)，垂直滾動(dòng)條移動(dòng)的距離，默認(rèn)值為5。vPageScrollSize：用于設(shè)置按下滾動(dòng)條時(shí)垂直滾動(dòng)條移動(dòng)的距離，默認(rèn)值為20。vScrollPolicy：用于設(shè)置是否顯示垂直滾動(dòng)條，包括on、off和auto3個(gè)選項(xiàng)，其默認(rèn)值為auto。學(xué)習(xí)與探究List組件allowMultipleSelection：用于指定List組件是否可同時(shí)選擇多個(gè)選項(xiàng)。如果值為true，則可以通過按住“Shift”鍵來選擇多個(gè)選項(xiàng)。其默認(rèn)值為false。dataProvider：用于設(shè)置相應(yīng)的數(shù)據(jù)，并將其與List組件中的選項(xiàng)相關(guān)聯(lián)。horizontalLineScrollSize：用于設(shè)置當(dāng)單擊列表框中水平滾動(dòng)箭頭時(shí)，要在水平方向上滾動(dòng)的內(nèi)容量，該值以像素為單位。其默認(rèn)值為4。horizontalPageScrollSize：用于設(shè)置按滾動(dòng)條軌道時(shí)，水平滾動(dòng)條上滾動(dòng)滑塊要移動(dòng)的像素?cái)?shù)。當(dāng)值為0時(shí)，該屬性檢索組件的可用寬度。其默認(rèn)值為0。學(xué)習(xí)與探究horizontalScrollPolicy：用于設(shè)置List組件中的水平滾動(dòng)條是否始終打開。包括on、off和auto3個(gè)選項(xiàng)。其默認(rèn)值為auto。verticalLineScrollSize：用于設(shè)置當(dāng)單擊列表框中垂直滾動(dòng)箭頭時(shí)，要在垂直方向上滾動(dòng)的內(nèi)容量，該值以像素為單位。其默認(rèn)值為4。verticalPageScrollSize：用于設(shè)置按滾動(dòng)條軌道時(shí)，垂直滾動(dòng)條上滾動(dòng)滑塊要移動(dòng)的像素?cái)?shù)。當(dāng)值為0時(shí)，該屬性檢索組件的可用寬度。其默認(rèn)值為0。verticalScrollPolicy：用于設(shè)置List組件中的垂直滾動(dòng)條是否始終打開。包括on、off和auto3個(gè)選項(xiàng)。其默認(rèn)值為auto。學(xué)習(xí)與探究TextArea組件condenseWhite：用于設(shè)置是否從包含HTML文本的TextArea組件中刪除多余的空白。在FlashCS3中，空格和換行符都屬于組件中的多余空白。當(dāng)值為true時(shí)表示刪除多余的空白；值為false時(shí)表示不刪除多余空白。其默認(rèn)值為false。editable：用于設(shè)置允許用戶編輯TextArea組件中的文本。為true表示用戶可以編輯TextArea組件所包含的文本；為false則表示不能進(jìn)行編輯。其默認(rèn)值為true。horizontalScrollPolicy：用于設(shè)置TextArea組件中的水平滾動(dòng)條是否始終打開。包括on、off和auto3個(gè)選項(xiàng)。其默認(rèn)值為auto。htmlText：用于設(shè)置或獲取TextArea組件中文本字段所含字符串的HTML表示形式。其默認(rèn)值為空。學(xué)習(xí)與探究maxChars：用于設(shè)置用戶可以在TextArea組件中輸入的最大字符數(shù)。restrict：用于設(shè)置TextArea組件可從用戶處接受的字符串。如果此屬性的值為null，則TextArea組件會(huì)接受所有字符。如果此屬性值設(shè)置為空字符串(“”)，則TextInupt組件不接受任何字符。其默認(rèn)值為null。verticalScrollPolicy：用于設(shè)置TextArea組件中的垂直滾動(dòng)條是否始終打開。包括on、off和auto3個(gè)選項(xiàng)。其默認(rèn)值為auto。wordWrap：用于設(shè)置文本是否在行末換行。若值為true，表示文本在行末換行；若值為false則表示文本不換行。其默認(rèn)值為true。學(xué)習(xí)與探究TextInupt組件restrict：用于設(shè)置TextInupt組件可從用戶處接受的字符串。需注意的是：未包含在本字符串中的，以編程方式輸入的字符也會(huì)被TextInupt組件所接受。如果此屬性的值為null，則TextInupt組件會(huì)接受所有字符；若將值設(shè)置為空字符串("")，則不接受任何字符。其默認(rèn)值為null。text：用于獲取或設(shè)置TextInupt組件中的字符串。此屬性包含無格式文本，不包含HTML標(biāo)簽。若要檢索格式為HTML的文本，應(yīng)使用TextArea組件的htmlText屬性。任務(wù)二

利用組件制作IQ測試任務(wù)目標(biāo)使用組件制作一個(gè)IQ測試動(dòng)畫，通過本實(shí)例了解并掌握應(yīng)用組件制作動(dòng)畫的一般方法，完成后的最終效果如圖所示。

IQ測試任務(wù)二

利用組件制作IQ測試操作思路（1）導(dǎo)入圖片，放置背景圖片。（2）新建“題目圖形”圖層，在該圖層各幀中添加測試題目的文本內(nèi)容。（3）新建“組件”圖層，在該圖層各幀中添加相應(yīng)組件并對參數(shù)進(jìn)行設(shè)置。（4）新建“語句”圖層，為各幀添加腳本語言，并使用組件檢查器檢查并修改各組件。制作IQ測試的操作思路操作一

設(shè)置背景添加文本（1）新建一大小為500×370像素，背景顏色為白色，幀頻為12fps名為“IQ測試”的Flash文檔。（2）選擇【文件】→【導(dǎo)入】→【導(dǎo)入到庫】菜單命令，將“背景.jpg”圖片導(dǎo)入到庫中。（3）將圖層1命名為“背景”圖層，將“庫”面板中的“背景.jpg”拖動(dòng)到“背景”圖層中，設(shè)置其大小得到如圖所示效果。放置背景圖片操作一

設(shè)置背景添加文本（4）在該圖層第5幀單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入幀”命令。（5）新建“題目圖形”圖層，在該圖層第1幀使用文本工具、直線工具添加如圖所示的文字和直線。標(biāo)題中將文本類型設(shè)置為“靜態(tài)文本”，字體為“微軟雅黑”，字體顏色為黑色，字號(hào)為“36”，下面部分文字除字號(hào)設(shè)置不同外（第2、3排文本的字號(hào)分別為20、30），其他都相同。添加首頁文本操作一

設(shè)置背景添加文本（6）選擇【窗口】→【公用庫】→【按鈕】菜單命令，打開如圖所示面板，在該面板中選擇“Circlewitharrow”選項(xiàng)，將其拖到到場景中第3排文字的下方。（7）選中該按鈕，在“屬性”面板中對其進(jìn)行如圖所示設(shè)置。

公共庫調(diào)用按鈕為按鈕命名操作一

設(shè)置背景添加文本（8）在該圖層的第2幀處插入空白關(guān)鍵幀，然后再使用文本工具和其他繪圖工具添加如圖所示文本和圖形。（9）用相同的方法在公用庫中拖動(dòng)兩個(gè)“Circlewitharrow”按鈕到場景中，將其中一個(gè)按鈕進(jìn)行水平翻轉(zhuǎn)處理，得到如圖所示效果。

添加第2幀文本及圖形為第2幀添加按鈕操作一

設(shè)置背景添加文本（10）選中“回首頁”前的按鈕，在“屬性”面板中對其進(jìn)行如圖所示命名；選中“下一題”后的按鈕，在“屬性”面板中對其進(jìn)行如圖所示命名，（11）在該圖層第3幀處插入空白關(guān)鍵幀，然后再使用文本工具和其他繪圖工具添加如圖所示文本和圖形，并在公共庫中添加相同的“上一題”和“下一題”按鈕。

命名“回首頁”按鈕命名“下一題”按鈕添加第3幀文本及圖形操作一

設(shè)置背景添加文本（12）在該圖層第4幀處插入空白關(guān)鍵幀，然后再使用文本工具和其他繪圖工具添加如圖所示文本和圖形，并在公共庫中添加相同的“上一題”和“下一題”按鈕。添加第4幀文本及圖形操作一

設(shè)置背景添加文本（13）在該圖層第5幀處插入空白關(guān)鍵幀，然后再使用文本工具輸入如圖所示文本，并添加一個(gè)動(dòng)態(tài)文本框。動(dòng)態(tài)文本框的具體設(shè)置如圖所示。添加第5幀文本及動(dòng)態(tài)文本設(shè)置動(dòng)態(tài)文本屬性操作二

添加組件（1）新建“組件”圖層，在該圖層第1幀處插入空白關(guān)鍵幀。（2）在該圖層第2幀處插入空白關(guān)鍵幀，然后在該幀場景中添加如圖所示的4個(gè)單選框、1個(gè)文本框和一個(gè)“提交”按鈕。為第2幀添加組件操作二

添加組件（3）選中不同的組件，在“屬性”面板中分別進(jìn)行如圖所示參數(shù)設(shè)置。

第2幀“A”組件參數(shù)設(shè)置第2幀“B”組件參數(shù)設(shè)置第2幀“C”組件參數(shù)設(shè)置第2幀“D”組件參數(shù)設(shè)置第2幀文本框組件參數(shù)設(shè)置第2幀按鈕組件參數(shù)設(shè)置操作二

添加組件（4）在該圖層第3幀處插入空白關(guān)鍵幀，然后在該幀場景中添加如圖所示的4個(gè)單選框、1個(gè)文本框和一個(gè)“提交”按鈕。為第3幀添加組件操作二

添加組件（5）選中不同的組件，在“屬性”面板中分別進(jìn)行如圖所示參數(shù)設(shè)置。

第3幀“A”組件參數(shù)設(shè)置第3幀“B”組件參數(shù)設(shè)置第3幀“C”組件參數(shù)設(shè)置第3幀“D”組件參數(shù)設(shè)置第3幀文本框組件參數(shù)設(shè)置第3幀按鈕組件參數(shù)設(shè)置操作二

添加組件（6）在該圖層第4幀處插入空白關(guān)鍵幀，然后在該幀場景中添加如圖所示的4個(gè)單選框、1個(gè)文本框和一個(gè)“提交”按鈕。然后使用相同的方法對各組件參數(shù)進(jìn)行設(shè)置。（7）在該圖層第5幀處插入空白關(guān)鍵幀，然后在該幀場景中添加如圖所示文本和按鈕。選中該幀中的按鈕，在“屬性”面板中將該按鈕命名為“atop”。

為第4幀添加組件為第5幀添加組件操作三

添加腳本及檢查動(dòng)畫（1）新建“語句”圖層，在該圖層的第1幀至第5幀分別插入空白關(guān)鍵幀。（2）用鼠標(biāo)單擊該圖層第1幀，按“F9”鍵，在打開的“動(dòng)作-幀”面板中輸入腳本：（3）用鼠標(biāo)單擊該圖層第2幀，按“F9”鍵，在打開的“動(dòng)作-幀”面板中輸入腳本：（4）用鼠標(biāo)單擊該圖層第3幀，按“F9”鍵，在打開的“動(dòng)作-幀”面板中輸入腳本：操作三

添加腳本及檢查動(dòng)畫（5）用鼠標(biāo)單擊該圖層第4幀，按“F9”鍵，在打開的“動(dòng)作-幀”面板中輸入腳本：（6）用鼠標(biāo)單擊該圖層第5幀，按“F9”鍵，在打開的“動(dòng)作-幀”面板中輸入腳本：（7）新建圖層5，在第1幀和第2幀分別插入空白關(guān)鍵幀，在第5幀處插入關(guān)鍵幀，用鼠標(biāo)單擊該圖層第2幀，按“F9”鍵，在打開的“動(dòng)作-幀”面板中輸入腳本：操作四

使用組件檢查器檢查動(dòng)畫（1）按“Ctrl+S”鍵保存該動(dòng)畫。該動(dòng)畫完成后的時(shí)間軸狀態(tài)如圖所示。時(shí)間軸狀態(tài)操作四

使用組件檢查器檢查動(dòng)畫（2）選擇【窗口】→【組件檢查器】菜單命令或按“Alt+F7”鍵，打開如圖所示“組件檢查器”面板?！敖M件檢查器”面板操作四

使用組件檢查器檢查動(dòng)畫（3）在場景中選中需要檢查的組件，即可在“組件檢查器”面板出現(xiàn)如圖所示參數(shù)，在該面板中可檢查參數(shù)是否有錯(cuò)。（4）單擊“架構(gòu)”選項(xiàng)卡，可查看與該組件相關(guān)的架構(gòu)信息。檢查完