元件、實例和庫課件

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

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

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

4、。通常情況下，按鈕的制作需要經過繪制圖形、添加關鍵幀和編寫事件代碼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 在“指針經過”幀改變按鈕的顏色（5）用鼠標單擊“按下”幀，按“F6”鍵插入關鍵幀。選擇顏料桶工具，將圓形填充為綠白漸變，如圖6.1.9所示。在此對“點擊”幀不進行設置，使默認的按鈕區(qū)域為響應區(qū)域。此時，一個按鈕元件就創(chuàng)建完成了。按“Ctrl+E”組合鍵返

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

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

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

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

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

10、128，就會產生一個新的綠色值178。 （3）設置完成后單擊“確定”按鈕即可。圖6.2.5 透明度為95% 圖6.2.6 透明度為70% 圖6.2.7 “高級效果”對話框6.2.3 使用其他元件替換實例在Flash中，用戶可以使用其他元件來替換實例而保留該實例的所有屬性，其具體操作步驟如下：（1）按“Ctrl+L”組合鍵打開“庫”面板。（2）將元件1拖動到舞臺上。（3）在“屬性”面板中將其Alpha值設置為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）用鼠標單擊選中元件1，單擊“確定”按鈕，則舞臺上的元件2的實例被替換成了元件1的實例，但仍然保留元件2的屬性，如圖6.2.12所示。圖6.2.11 “交換元件”對話 圖6.2.12 將元件2的實例替換為元件1的實例 6.2.4 改變實例類型在Flash 8中，用戶可以通過改變實例類型來重新定義它在Flash應用程序中的行為，其操作步驟如下：（1）選中舞臺上的一個實例。（2）打開“屬性”面板，在其左上角的下拉列表中選擇即可，如圖6.

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

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

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

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

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

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

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