元件、實例和庫課件

1、第6章 元件、實例和庫6.1 元件6.2 實例6.3 庫 6.1 元 件 元件是在Flash中創(chuàng)建的圖形、按鈕或影片剪輯，它們都保存在“庫”面板中。元件只需要創(chuàng)建一次，即可在整個文檔中重復(fù)使用。當(dāng)修改元件的內(nèi)容后，所修改的內(nèi)容就會運(yùn)用到所有包含此元件的文件中，這樣就使得用戶對影片的編輯更加容易。而且，在文檔中使用元件會明顯地減小文件的大小。本節(jié)將具體介紹元件的類型和創(chuàng)建不同類型元件的方法。6.1.1 元件的類型在Flash 8中，用戶可以創(chuàng)建3種類型的元件，分別為圖形、按鈕和影片剪輯。圖形元件通常用于靜態(tài)圖像，并且可以用來創(chuàng)建可重復(fù)使用的動畫片段，但不能添加交互控制；按鈕元件可以創(chuàng)建響應(yīng)鼠標(biāo)事

2、件的交互式按鈕；影片剪輯元件本身即為獨(dú)立的動畫片斷，在影片剪輯元件中可以包含交互式控件、聲音或其他影片剪輯實例。（1）創(chuàng)建新元件。創(chuàng)建新元件的操作步驟如下：1）選擇“插入”“新建元件”命令，或者按“Ctrl+F8”組合鍵，彈出“創(chuàng)建新元件”對話框，如圖6.1.1所示。圖6.1.1 “創(chuàng)建新元件”對話框2）選中“圖形”單選按鈕即表示將該元件設(shè)置為圖形元件，然后在“名稱”文本框中輸入元件名稱。3）單擊“確定”按鈕后進(jìn)入新元件的編輯區(qū)，此時，可以看到場景名稱的旁邊多了“元件1”的名稱，并且在舞臺中心顯示出“十”字形，表示該元件的中心點。在元件的編輯區(qū)中，用戶可以進(jìn)行繪制圖形、輸入文本或?qū)雸D像等操作

3、，如圖6.1.2所示。4）單擊“場景1”圖標(biāo)，或者按“Ctrl+E”組合鍵返回到場景中。按“Ctrl+L”組合鍵打開“庫”面板，即可看到剛才新建的元件，如圖6.1.3所示。 圖6.1.2 元件編輯區(qū) 圖6.1.3 “庫”面板（2）將舞臺上的對象轉(zhuǎn)換為元件。將舞臺上的對象轉(zhuǎn)換為圖形元件的步驟如下： 1）選中舞臺上的對象。 2）選擇“修改”“轉(zhuǎn)換為元件”命令，或者按“F8”鍵彈出“轉(zhuǎn)換為元件”對話框，如圖6.1.4所示。3）選中“圖形”單選按鈕，并輸入元件名稱，最后單擊“確定”按鈕即可。6.1.3 創(chuàng)建按鈕元件按鈕元件是一種特殊的元件，它不是單一的圖形，而具有4種狀態(tài)，即彈起、指針經(jīng)過、按下和點擊

4、。通常情況下，按鈕的制作需要經(jīng)過繪制圖形、添加關(guān)鍵幀和編寫事件代碼3步來完成。創(chuàng)建按鈕元件的具體操作步驟如下：（1）按“Ctrl+F8”組合鍵，彈出“創(chuàng)建新元件”對話框，選中“按鈕”單選按鈕并輸入元件名稱，如圖6.1.5所示。 圖6.1.5 “創(chuàng)建新元件”對話框 圖6.1.6 按鈕元件的編輯區(qū)圖6.1.7 在“彈起”幀中繪制按鈕 圖6.1.8 在“指針經(jīng)過”幀改變按鈕的顏色（5）用鼠標(biāo)單擊“按下”幀，按“F6”鍵插入關(guān)鍵幀。選擇顏料桶工具，將圓形填充為綠白漸變，如圖6.1.9所示。在此對“點擊”幀不進(jìn)行設(shè)置，使默認(rèn)的按鈕區(qū)域為響應(yīng)區(qū)域。此時，一個按鈕元件就創(chuàng)建完成了。按“Ctrl+E”組合鍵返

5、回到主場景中，打開“庫”面板，將剛才創(chuàng)建好的按鈕元件拖動到主場景中。按“Ctrl+Enter”組合鍵測試效果，如圖6.1.10所示。這時，將鼠標(biāo)指針移動到按鈕上并單擊鼠標(biāo)左鍵，按鈕即會呈現(xiàn)出不同的狀態(tài)。提示： 這里不設(shè)置“點擊”幀，即會默認(rèn)按鈕區(qū)域為響應(yīng)區(qū)域。圖6.1.9 “按下”幀效果 圖6.1.10 按鈕效果6.1.4 創(chuàng)建影片剪輯元件當(dāng)在影片中需要重復(fù)使用某一個動畫片斷時，最好將其轉(zhuǎn)換為影片剪輯元件。下面以一個實例來介紹創(chuàng)建影片剪輯元件的方法，其具體操作步驟如下：（1）新建一個Flash文檔，按“Ctrl+F8”組合鍵彈出“創(chuàng)建新元件”對話框，選中“影片剪輯”單選按鈕并輸入其名稱，然后單

6、擊“確定”按鈕進(jìn)入其編輯區(qū)。（2）選擇工具箱中的文本工具，設(shè)置好其屬性后在舞臺上輸入字母“A”，如圖6.1.11所示，然后將其移動到舞臺的左側(cè)。（3）選中該字母后按“Ctrl+B”組合鍵將其轉(zhuǎn)換為矢量圖形。（4）在時間軸第15幀處單擊鼠標(biāo)，按“F6”鍵插入一個關(guān)鍵幀，在舞臺上輸入字母“B”，將其移動到舞臺的右側(cè)并將字母“A”刪除，如圖6.1.12所示。選中字母“B”，然后按“Ctrl+B”組合鍵將其轉(zhuǎn)換為矢量圖形。（5）用鼠標(biāo)單擊第1幀，在“屬性”面板中的“補(bǔ)間”下拉列表中選擇“形狀”選項，如圖6.1.13所示。這樣就創(chuàng)建了一個共15幀的形狀補(bǔ)間動畫。這時在“時間軸”面板上的第1幀到第15幀之

7、間會出現(xiàn)一個箭頭形狀，表示在這些幀之間存在補(bǔ)間動畫，如圖6.1.14所示。圖6.1.14 “時間軸”面板圖6.1.13 “屬性”面板（4）選中舞臺上需要編輯元件后，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“在當(dāng)前位置編輯”命令，如圖6.1.15所示。進(jìn)入元件的編輯模式后，用戶可以應(yīng)用“變形”面板或菜單命令對元件進(jìn)行各種變形操作，例如可以對元件進(jìn)行旋轉(zhuǎn)、縮放、扭曲、封套等操作，如圖6.1.16所示為對元件進(jìn)行變形前后的效果。圖6.1.15 快捷菜單 圖6.1.16 對元件進(jìn)行變形前后的效果 6.2.1 創(chuàng)建實例創(chuàng)建實例的方法非常簡單，其操作步驟如下：（1）選擇“時間軸”面板上的一個圖層。 （2）按“

8、Ctrl+L”組合鍵打開“庫”面板。（3）選擇需要的元件并將其拖動到舞臺上，即可創(chuàng)建該元件的實例。提示：在默認(rèn)情況下，實例會被添加到當(dāng)前圖層的第1幀，如果需要將其添加到特定的幀上，則需要事先插入關(guān)鍵幀。6.2.2 編輯實例當(dāng)創(chuàng)建了元件的實例后，可以使用“屬性”面板來更改它的屬性，如顏色、透明度等。更改實例的顏色和透明度的具體操作步驟如下：（1）選中舞臺上的實例，如圖6.2.1所示。圖6.2.1 選中實例（2）在“屬性”面板上單擊“顏色”后面的按鈕，彈出其下拉列表，如圖6.2.2所示。該下拉列表中各選項的含義如下：無：選擇該選項后，實例的顏色無任何變化。亮度：選擇該選項后，用戶可以在彈出的下拉列

9、表中設(shè)定實例的亮度，如圖6.2.3所示。色調(diào)：選擇該選項后，“屬性”面板上彈出如圖6.2.4所示的選項，用戶可以為實例著色，設(shè)置實例的透明度。Alpha：選擇該選項后，用戶可以在彈出的文本框中設(shè)定實例的透明度，如圖6.2.5和圖6.2.6所示分別為透明度為95%和70%時的效果。高級：選擇該選項后，“屬性”面板中彈出“設(shè)置”按鈕，單擊該按鈕，彈出如圖6.2.7所示的“高級效果”對話框。在該對話框中，用戶可以分別調(diào)節(jié)實例的紅、綠、藍(lán)和透明度的值。最終顏色的計算方法是將當(dāng)前紅、綠、藍(lán)和Alpha的值乘以左邊的百分比值，然后加上右邊的常數(shù)值即可。如當(dāng)前紅色值為100，左邊的百分比值為50%，右邊值為

10、128，就會產(chǎn)生一個新的綠色值178。 （3）設(shè)置完成后單擊“確定”按鈕即可。圖6.2.5 透明度為95% 圖6.2.6 透明度為70% 圖6.2.7 “高級效果”對話框6.2.3 使用其他元件替換實例在Flash中，用戶可以使用其他元件來替換實例而保留該實例的所有屬性，其具體操作步驟如下：（1）按“Ctrl+L”組合鍵打開“庫”面板。（2）將元件1拖動到舞臺上。（3）在“屬性”面板中將其Alpha值設(shè)置為65%，此時的圖形效果和“屬性”面板如圖6.2.8和圖6.2.9所示。（4）將“庫”面板中的元件2拖動到舞臺上，如圖6.2.10所示。此時舞臺上就出現(xiàn)了元件1和元件2兩個實例。 圖6.2.8

11、 圖形效果 圖6.2.9 “屬性”面板圖6.2.10 拖動元件2到舞臺上（5）選中元件2的實例，單擊“交換”按鈕，彈出如圖6.2.11所示的“交換元件”對話框。（6）用鼠標(biāo)單擊選中元件1，單擊“確定”按鈕，則舞臺上的元件2的實例被替換成了元件1的實例，但仍然保留元件2的屬性，如圖6.2.12所示。圖6.2.11 “交換元件”對話 圖6.2.12 將元件2的實例替換為元件1的實例 6.2.4 改變實例類型在Flash 8中，用戶可以通過改變實例類型來重新定義它在Flash應(yīng)用程序中的行為，其操作步驟如下：（1）選中舞臺上的一個實例。（2）打開“屬性”面板，在其左上角的下拉列表中選擇即可，如圖6.

12、2.13所示。圖6.2.13 “屬性”面板6.3 庫 庫的主要作用是存放用戶創(chuàng)建的元件和導(dǎo)入的位圖、聲音以及視頻文件，用戶可以在“庫”面板中對其進(jìn)行管理，也可以將它們從“庫”面板中拖動到舞臺上來制作動畫。選擇“窗口”“庫”命令，或者按“Ctrl+L”組合鍵即可打開“庫”面板，如圖6.3.1所示。圖6.3.1 “庫”面板6.3.1 “庫”面板介紹“庫”面板中各個按鈕的作用如下：“新建元件”按鈕：單擊該按鈕，可以新建一個文件夾，如圖6.3.2所示?！靶陆ㄎ募A”按鈕：單擊該按鈕后會在“庫”面板中新建一個文件夾。當(dāng)用戶制作復(fù)雜動畫時，通常需要許多元件，這時就可以將這些元件放在不同的文件夾中進(jìn)行分類。

13、“屬性”按鈕：單擊該按鈕后會彈出所選元件的屬性對話框，如圖6.3.3所示為“位圖屬性”對話框，在該對話框中，用戶可以看到所選元件的相關(guān)屬性。 圖6.3.2 “庫”面板 圖6.3.3 “位圖屬性”對話框“刪除”按鈕：單擊該按鈕后會刪除所選元件?！皩拵煲晥D”按鈕：通常情況下，“庫”面板顯示為窄庫，單擊該按鈕后，“庫”面板會顯示為寬庫，如圖6.3.4所示。用戶可以從該面板中查看所選元件的名稱、類型、使用次數(shù)、鏈接和修改日期等信息。“窄庫視圖”按鈕：當(dāng)“庫”面板顯示為寬庫時，單擊該按鈕后“庫”面板會以窄庫顯示。圖6.3.4 寬庫6.3.2 重命名庫元素“庫”面板中的元件、位圖、聲音和視頻文件都可以稱為

14、庫元素。用戶在制作動畫的過程中，通常需要對某些元素重命名。其方法有以下兩種：（1）用鼠標(biāo)雙擊需要重新命名的元素名稱。（2）選中要重命名的元素，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“重命名”命令。如圖6.3.5所示為重命名前后的“庫”面板。圖6.3.5 重命名前后的“庫”面板 6.3.3 使用外部庫在制作動畫的過程中，用戶不僅可以使用本文檔中的庫資源，而且也可以使用其他文檔中的庫資源，這樣可以幫助動畫創(chuàng)作者減少許多重復(fù)性的勞動。下面就來介紹打開外部庫的具體操作步驟：（1）選擇“文件”“導(dǎo)入”“打開外部庫”命令，彈出如圖6.3.6所示的“作為庫打開”對話框。（2）選擇需要打開其庫的Flash文件，

15、然后單擊“打開”按鈕。選定文件的庫就會在當(dāng)前文檔中打開。此時，用戶就可以將選定文件的庫中的元素拖動到當(dāng)前文檔中使用了。圖6.3.6 “作為庫打開”對話框6.3.4 公用庫Flash 8中提供了3種類型的公用庫，分別為學(xué)習(xí)交互、按鈕和類。這些庫中存放有許多Flash自帶的元件供用戶直接使用。選擇“窗口”“公用庫”“學(xué)習(xí)交互”命令，即可打開“學(xué)習(xí)交互”庫，如圖6.3.7所示。該庫中保存的是一些交互控制的模板，引用這些模板后，只需進(jìn)行少量的修改，就可以完成一個簡單的交互式控制動畫，如圖6.3.8所示。圖6.3.7 “學(xué)習(xí)交互”庫 圖6.3.8 “學(xué)習(xí)交互”庫中的模板選擇“窗口”“公用庫”“按鈕”命令

16、，即可打開“按鈕”庫，如圖6.3.9所示。該庫中保存了各種類型的按鈕。當(dāng)用戶需要時，直接將其拖動到舞臺上引用即可，如圖6.3.10所示。選擇“窗口”“公用庫”“類”命令，可以打開“類”庫。該庫中只提供了如圖6.3.11所示的3項內(nèi)容，當(dāng)用戶引用它們后，可以提供數(shù)據(jù)鏈接、網(wǎng)絡(luò)服務(wù)器設(shè)置等功能。圖6.3.9 “按鈕”庫 圖6.3.10 “按鈕”庫中的元件 圖6.3.11 “類”庫6.3.5 添加公用庫如果用戶有一些非常有價值的Flash動畫，也可以將其添加到公用庫中，以便以后直接引用。其方法很簡單，只要將這些文件復(fù)制到硬盤上Flash應(yīng)用程序文件夾中的Libraries文件中即可。6.4 實戰(zhàn)演習(xí)

17、 實戰(zhàn)演習(xí)內(nèi)容本例將從外部導(dǎo)入一張圖片，然后從“按鈕”庫中拖動一個按鈕到舞臺上，并且實現(xiàn)當(dāng)按鈕被按下時就彈出這張圖片的動畫效果。 實戰(zhàn)演習(xí)步驟（1）啟動Flash 8應(yīng)用程序，新建一個Flash文檔，其參數(shù)設(shè)置如圖6.4.1所示。（2）選擇“文件”“導(dǎo)入”“導(dǎo)入到庫”命令，彈出“導(dǎo)入到庫”對話框，如圖6.4.2所示。圖6.4.1 “文檔屬性”對話框 圖6.4.2 “導(dǎo)入到庫”對話框（3）在“導(dǎo)入到庫”對話框中找到目標(biāo)文件后單擊“打開”按鈕，該文件就被導(dǎo)入到了“庫”面板中，如圖6.4.3所示。（4）選擇“窗口”“公用庫”“按鈕”命令，即可打開“按鈕”庫，選擇一個按鈕并將其拖動到舞臺上，這時，“庫

18、”面板中有兩個元件，如圖6.4.4所示。圖6.4.3 導(dǎo)入一張位圖 圖6.4.4 導(dǎo)入按鈕（5）雙擊場景中的按鈕，進(jìn)入其編輯模式。（6）單擊該按鈕圖層的“按下”幀，刪除該幀中的對象，然后將“庫”面板中的位圖拖動到編輯區(qū)的中央位置，如圖6.4.5所示。（7）按“Ctrl+E”組合鍵返回到主場景中。（8）選擇“控制”“啟用簡單按鈕”命令，該按鈕即被啟用。這時單擊工作區(qū)中的按鈕，即可得到如圖6.4.6所示的效果。圖6.4.5 在“按下”幀添加位圖 圖6.4.6 最終效果6.5 知識鞏固 知識鞏固內(nèi)容本例將應(yīng)用導(dǎo)入的位圖制作一個影片剪輯元件。 知識鞏固步驟（1）啟動Flash 8應(yīng)用程序并新建一個Flash文檔。（2）選擇“文件”“導(dǎo)入”“導(dǎo)入到庫”命令，打開“導(dǎo)入到庫”對話框，如圖6.5.1所示。圖6.5.1 “導(dǎo)入到庫”對話框選擇一個目標(biāo)文件后單擊“打開”按鈕，該文件就被導(dǎo)入到了“庫”面板中，如圖6.5.2所示。 （3）繼續(xù)執(zhí)行步驟（2）的操作導(dǎo)入第2幅圖片，此時“庫”面板如圖6.5.3所示。（4）選擇“插入”“新建元件”命令，彈出“創(chuàng)建新元件”對話框，選中“影片剪輯”單選按鈕并輸入其名稱，如圖6.5.4所示。單擊“確定”按鈕進(jìn)入其編輯區(qū)。圖6.5.2 導(dǎo)入一幅圖片 圖6.5.3 導(dǎo)入第2幅圖片 圖6.5.4 “創(chuàng)建新元