《Flash 8動畫制作案例教程》課件第4章

第4章圖?層?與?元?件

4.1圖層4.2元件課堂實踐疑難解析課外拓展 4.1圖層

4.1.1圖層的概念與作用

1．圖層的概念

圖層就好像是一張透明的紙，可以在這張透明的紙上繪畫，而沒有畫上的部分保持透明狀態(tài)，可以看到這張紙下面的畫面。在繪制動畫對象時，先建立不同的圖層來繪制圖形的各個組成部分，并對各圖層進行編輯處理，然后將這些圖層按照想要的次序疊放在一起，就構(gòu)成了一幅完整的圖形。每個圖層是互相獨立的，在編輯的過程中不會互相影響。

2．圖層的作用

在Flash中，圖層的作用主要表現(xiàn)在以下三個方面。

(1)舞臺中不同的元素需要分布在不同的圖層上，不同圖層上的元素互不影響，方便動畫創(chuàng)作期間元素的編輯與管理。

(2)每個圖層都有獨立的時間幀，舞臺中不同的運動補間動畫需要分布在不同的圖層上，因為在一個圖層上只能有一個動畫實例。(第5章將詳細介紹補間動畫的制作。)

(3)利用特殊類型的圖層可以制作一些特殊的動畫效果，例如使用遮罩圖層制作遮罩特效等。(第6章將詳細介紹遮罩的使用。)4.1.2圖層的編輯

1．選取圖層

在對圖層進行復制、刪除等操作前，都需要先選取圖層。選取圖層的方法有如下三種。

(1)選取單個圖層。在時間軸上單擊圖層的名稱或單擊圖層的某一幀，可選取單個圖層，此時這個圖層為當前圖層，使用鉛筆圖標標識，如圖4-1所示。

(2)選取相鄰圖層。單擊圖層名稱選取圖層后，按住Shift鍵，單擊另一個圖層的名稱，可同時選取這兩個圖層之間的所有圖層，如圖4-2所示。

(3)選取不相鄰圖層。按住Ctrl鍵，逐個單擊需要選擇的圖層的名稱，可同時選取多個圖層，如圖4-3所示。圖4-1選取單個圖層圖4-2選取相鄰圖層圖4-3選取不相鄰圖層

2．新建圖層

創(chuàng)建新文檔時，系統(tǒng)會自動創(chuàng)建一個圖層。用戶可以單擊“插入圖層”按鈕來添加新圖層，新建的圖層位于當前圖層的上方。

當圖層較多時，可以使用圖層文件夾來組織管理圖層。圖層文件夾的功能類似于操作系統(tǒng)下的文件夾功能。單擊“插入圖層文件夾”按鈕，可以在當前圖層的上方新建一個圖層文件夾，把要管理的圖層直接拖到圖層文件夾上即可。

3．命名圖層

新建的圖層自動命名為“圖層1”、“圖層2”、…。為了便于識別圖層中的內(nèi)容，最好為圖層取一個與圖層內(nèi)容相符的名稱。圖層命名的方法是：在要重命名的圖層名稱上快速雙擊，然后輸入新的圖層名稱即可。

4．復制圖層

制作動畫時，如果兩個圖層中的內(nèi)容很相似，則可以在一個圖層中制作動畫，然后將該圖層的內(nèi)容全部復制到另一個圖層上，再進行適當?shù)男薷?。復制圖層的操作步驟如下：

(1)選擇要復制的圖層。

(2)執(zhí)行【編輯】→【時間軸】→【復制幀】命令。

(3)新建一個圖層。

(4)執(zhí)行【編輯】→【時間軸】→【粘貼幀】命令，把源圖層中的內(nèi)容粘貼到新建圖層中，新復制的圖層位于當前圖層的上方。

5．刪除圖層

當不需要整個圖層上的內(nèi)容時，可以刪除圖層。使用下面的三種操作方法都可以刪除圖層。

(1)選擇要刪除的圖層，單擊“刪除圖層”按鈕。

(2)把要刪除的圖層直接拖到“刪除圖層”按鈕上。

(3)在圖層上單擊鼠標右鍵，執(zhí)行“刪除圖層”菜單命令。

6．移動圖層

移動圖層是指調(diào)整圖層的疊放順序。其操作方法很簡單，直接把圖層拖到目標位置即可。

7．設置圖層屬性

創(chuàng)建圖層后，還可以通過“圖層屬性”對話框設置圖層名稱、圖層狀態(tài)等屬性。在要設置圖層屬性的圖層上單擊鼠標右鍵，在彈出的下拉菜單中選擇“屬性”命令，彈出“圖層屬性”對話框，如圖4-4所示。圖4-4“圖層屬性”對話框?qū)υ捒蛑懈鲄?shù)含義如下。

①名稱：名稱輸入框中可以輸入圖層的名稱。

②顯示：勾選此選項，顯示該圖層，否則就隱藏該圖層。圖層隱藏后，在舞臺上將不顯示該圖層中的任何內(nèi)容。

③鎖定：勾選此選項，用于鎖定該圖層。圖層鎖定后，將不能對該圖層上的對象進行任何編輯修改。

④類型：設置圖層的類型。

⑤輪廓顏色：單擊“拾色器”按鈕，可以為輪廓顯示模式的圖層選擇輪廓顏色。

⑥將圖層視為輪廓：勾選此選項，可將圖層上的對象以輪廓線顯示。

⑦圖層高度：從下拉列表中可以選擇圖層的顯示高度。該選項常用于觀察聲音的波形。4.1.3設置圖層狀態(tài)

在動畫制作過程中，為了在操作時不影響其他圖層上的對象，可以將其他圖層隱藏或鎖定。為了觀察所有圖層中對象的形狀和位置關系，可以把圖層設置為輪廓顯示模式，這在編輯圖形時會非常有用。

設置圖層的狀態(tài)除了可以使用“圖層屬性”對話框之外，在實際應用中還常常使用時間軸上的圖層狀態(tài)設置按鈕來完成。圖層狀態(tài)設置按鈕如圖4-5所示。圖4-5圖層狀態(tài)設置按鈕

4.2元件

4.2.1元件與實例的概念

對于初學者來說，元件與實例是一對全新而又陌生的概念。打個比方，元件與實例的關系就像是工廠里模具與零件的關系，工人使用模具鑄造零件，使用不同的零件來裝配機器；模具就好像Flash中的元件，零件就好像是實例，機器就好比Flash動畫，只要制作出模具，就可以源源不斷地鑄造出零件，供不同的機器來裝配使用。

在Flash中，元件就是指創(chuàng)建一次即可多次重復使用的對象，它可以是圖形，也可以是動畫，還可以是按鈕。創(chuàng)建元件后，元件自動保存在庫中。元件在動畫中只存儲一次。實例是元件在場景中的應用，實例是元件的副本，但其外觀和動作又可以和元件有所不同。

在Flash動畫制作中，使用元件具有重要的意義，其表現(xiàn)在以下幾個方面。

(1)使用元件可以大大減小文件的體積。因為不管元件引用多少次，它在動畫中只存儲一次，占用很少的空間。

(2)元件實例比圖形具有更多的屬性。例如可以設置實例的亮度、透明度等屬性。

(3)使用元件為動畫的編輯修改帶來了很大的方便。例如一個元件被引用了多次，當編輯修改這個元件時，所有的引用都會自動更新。

(4)使用元件為制作豐富的動畫效果提供了平臺。例如創(chuàng)建一個蝴蝶展翅的影片剪輯元件，引用這個元件后，它會不停地循環(huán)播放，可以用來制作蝴蝶飛舞的動畫效果。

(5)使用元件和庫面板，能實現(xiàn)對動畫資源的有效管理。

(6)使用元件還可以加快SWF文件的回放速度。因為一個元件只需下載一次。4.2.2元件的種類

在Flash動畫制作中，根據(jù)在文檔中使用元件的不同要求，可以創(chuàng)建三種類型的元件。

(1)“圖形”元件：用于靜態(tài)圖像，或連接到主影片時間軸上的可重復播放的動畫片段。圖形元件與主時間軸同步運行。

(2)“按鈕”元件：可以創(chuàng)建響應鼠標事件的交互按鈕。

(3)“影片剪輯”元件：可以創(chuàng)建可重用的動畫片段，其用途最為廣泛。影片剪輯擁有自己獨立的時間軸，它與場景中的主時間軸彼此之間相互獨立。也就是說，即使主動畫停止，主動畫中的影片剪輯仍然可以繼續(xù)播放。4.2.3創(chuàng)建元件和實例

1．創(chuàng)建元件

執(zhí)行【插入】→【新建元件】命令或按Ctrl+F8快捷鍵，彈出“創(chuàng)建新元件”對話框，如圖4-6所示。圖4-6“創(chuàng)建新元件”對話框

2．創(chuàng)建實例

創(chuàng)建元件之后，可以在文檔的任何位置創(chuàng)建實例。不管元件是什么類型的，創(chuàng)建實例的方法都相同。把元件拖入舞臺或元件編輯窗口，即創(chuàng)建了一個元件的實例。一個元件可以有多個實例，且每一個實例都可以擁有各自的屬性。案例4-1：椰樹

案例展示與任務

繪制一棵椰樹，效果如圖4-7所示。要求首先把樹葉、椰子和樹干制作成元件，然后在舞臺上引用元件制作椰樹。實例最終效果參見隨書光盤中“第4章/案例1/椰樹.fla”。圖4-7椰樹制作分析

首先制作樹葉、椰子和樹干圖形元件，然后在舞臺中引用這三個元件，制作椰樹。

操作步驟

(1)新建文檔，命名為“椰樹.fla”。

(2)打開“庫”面板，按Ctrl+F8快捷鍵，彈出“創(chuàng)建新元件”對話框，輸入元件名稱“樹葉”，選擇“圖形”元件類型，單擊“確定”按鈕，進入元件編輯窗口。使用繪圖工具在元件編輯窗口中繪制如圖4-8所示的樹葉，使用“對齊”面板把樹葉的中心點與注冊點“”重合。

(3)按上面的方法創(chuàng)建“椰子”和“樹干”的圖形元件，效果如圖4-9和圖4-10所示。注冊點

圖4-8樹葉元件圖4-9椰子元件

圖4-10樹干元件圖4-11為圖層命名

(5)單擊“樹干”圖層使之成為當前圖層，從庫中把“樹干”元件拖到舞臺中，創(chuàng)建“樹干”元件的實例。

(6)在“椰子”圖層中創(chuàng)建6個“椰子”元件的實例，調(diào)整其位置及大小。

(7)在“樹葉”圖層中創(chuàng)建8個“樹葉”元件的實例，通過旋轉(zhuǎn)操作布局樹葉實例。

(8)制作完成，保存文件。4.2.4編輯元件

在動畫制作中，有時候需要對已經(jīng)創(chuàng)建的元件進行編輯修改。編輯修改元件后，該元件引用的所有實例會自動更新。常用的編輯修改元件的操作方法有如下兩種：

(1)單擊時間軸右上方的“編輯元件”按鈕，從下拉列表中選擇需要編輯的元件。

(2)在“庫”面板中雙擊元件圖標或元件縮覽圖。

提示：在舞臺上雙擊元件實例，也可以進入元件編輯狀態(tài)，此時，舞臺中的其他圖形對象將變灰，與當前編輯的元件區(qū)別開來。4.2.5編輯實例

1．改變實例的外觀形狀

每個元件的實例都有獨立于該元件的，屬于自己的屬性?？梢岳谩皩傩浴泵姘鍖嵗M行編輯修改，例如更改實例的色調(diào)、透明度和亮度等屬性，還可以對實例進行縮放、旋轉(zhuǎn)、傾斜等操作。編輯修改實例后，并不會改變引用的元件。案例4-2：椰樹投影

案例展示與任務

利用元件功能制作案例4-1中椰樹的投影，效果如圖4-12所示，實例最終效果參見隨書光盤中“第4章/案例2/椰樹投影.fla”。圖4-12椰樹投影制作分析

首先把舞臺中的椰樹圖形轉(zhuǎn)換為椰樹元件，創(chuàng)建椰樹元件的實例，對該實例進行屬性設置、縮放變形等操作，制作椰樹的投影。

操作步驟

(1)打開案例4-1中的“椰樹.fla”文檔。

(2)按Ctrl+A鍵全選舞臺中的椰樹圖形，按F8功能鍵，在彈出的“創(chuàng)建新元件”對話框中輸入元件名稱為“椰樹”，類型為“圖形”元件，單擊“確定”按鈕。此時“樹干”和“椰子”圖層上的對象自動合并到“樹葉”圖層中。

(3)單擊“椰子”圖層名稱，按住Shift鍵，單擊“樹干”圖層，然后再單擊“刪除圖層”按鈕，刪除“椰子”和“樹干”圖層。

(4)單擊“插入圖層”按鈕，新建“投影”圖層。

(5)單擊“投影”圖層名稱，確?！巴队啊眻D層為當前圖層。從庫中把“椰樹”元件拖入到舞臺中。

(6)在“屬性”面板中單擊“顏色”下拉按鈕，選擇“色調(diào)”選項，單擊顏色選擇框，選擇“黑灰”(#666666)色調(diào)作投影顏色，“屬性”面板設置如圖4-13所示。

(7)選擇“投影”圖層，把“投影”層拖到“樹葉”層的下面。

(8)選擇任意變形工具，對投影實例進行縮放、傾斜操作，適當調(diào)整其位置，制作椰樹的投影效果。

(9)制作完成，把文件另存為“椰樹投影.fla”。圖4-13設置投影屬性2．交換元件

所謂交換元件，就是指為實例重新指定另外的元件。

案例4-3：藍貓變企鵝

案例展示與任務

打開隨書光盤中“第4章/案例3/4-3.fla”案例文件，利用元件交換功能把舞臺右邊的藍貓?zhí)鎿Q為企鵝，效果如圖4-14所示。實例最終效果參見隨書光盤中“第4章/案例3/藍貓變企鵝.fla”。圖4-14交換元件操作步驟

(1)打開隨書光盤中“第4章/案例3/4-3.fla”案例文件。

(2)選擇舞臺右邊的藍貓實例，在“屬性”面板中單擊“交換”按鈕，彈出“交換元件”對話框，如圖4-15所示。在“交換元件”對話框中，選擇“企鵝”元件，然后單擊“確定”按鈕。

(3)單擊“確定”按鈕后，舞臺右邊的藍貓實例被替換成了企鵝的實例。圖4-15“交換元件”對話框

3．分離實例

實例不能像圖形或文字那樣改變填充顏色，但是如果將實例打散分離后，它就變成了普通圖形，可以使用工具箱中的工具對它進行任何編輯修改。

當一個實例被打散分離后，該實例與元件之間的鏈接關系自動斷開，元件的編輯修改不再對該實例產(chǎn)生影響。案例4-4：笑臉變哭臉

案例展示與任務

打開隨書光盤中“第4章/案例4/4-4.fla”案例文件，把舞臺中綠色的笑臉變?yōu)榧t色的哭臉，效果如圖4-16所示，實例最終效果參見隨書光盤中“第4章/案例4/笑臉變哭臉.fla”。圖4-16分離實例操作步驟

(1)打開隨書光盤中“第4章/案例4/4-4.fla”案例文件。

(2)選擇笑臉實例，連續(xù)兩次執(zhí)行【修改】→【分離】命令或按Ctrl+B快捷鍵兩次，把笑臉實例打散。

(3)使用選取工具對“嘴”進行線條整形，填充紅色，把笑臉變成哭臉。

4．更改實例的類型

當在舞臺上創(chuàng)建實例后，該實例自動繼承引用元件的屬性類型。用戶可以通過“屬性”面板來重新定義實例在Flash文檔中的類型，如圖4-17所示。圖4-17更改實例類型4.2.6使用庫面板管理元件

“庫”面板中除了元件之外，還存儲了動畫的各種資源，包括位圖、視頻、聲音等外部導入的素材。選擇【窗口】→【庫】命令，可以顯示“庫”面板，如圖4-18所示。利用“庫”面板可以方便地查找、編輯和使用元件，實現(xiàn)對資源的有效管理。圖4-18“庫”面板

1．更改元件的類型

選擇要更改類型的元件，單擊“庫”面板中的“屬性”按鈕，彈出“元件屬性”對話框，如圖4-19所示，重新選擇元件的類型。圖4-19“元件屬性”對話框

2．復制元件

在同一個Flash文檔中，如果想利用已有的元件來創(chuàng)建新元件，這時可以先復制一個元件副本，然后編輯副本以創(chuàng)建新元件。復制元件副本的操作方法是：

在“庫”面板中要復制的元件上單擊鼠標右鍵，執(zhí)行“直接復制”命令，彈出“直接復制元件”對話框，如圖4-20所示。在該對話框中輸入元件名稱，為元件副本指定新的元件類型，最后單擊“確定”按鈕。圖4-20“直接復制元件”對話框如果要將元件復制到另一個Flash文檔，有以下兩種操作方法。

(1)在“庫”面板中用鼠標右鍵單擊需要復制的元件，執(zhí)行“復制”命令，然后切換到目標文檔，在“庫”面板中單擊鼠標右鍵，執(zhí)行“粘貼”命令。

(2)將舞臺上的元件實例復制到剪貼板，然后切換到目標文檔，將實例復制到目標文檔舞臺上，此時實例所鏈接的元件也同時被復制到目標文檔的“庫”中。

3．刪除元件

刪除元件的操作方法是：選取要刪除的元件，再單擊“庫”面板底部的“刪除”按鈕即可。刪除元件后，該元件在舞臺上的所有實例也同時被刪除。

提示：制作動畫時，為了減小動畫文件的體積，可以將沒有使用的元件刪除。其操作方法是：單擊“庫”面板菜單按鈕，執(zhí)行“選擇未用項目”命令，系統(tǒng)自動選取所有沒有使用的元件，再單擊“刪除”按鈕。

4．重命名元件

要重命名元件，只需雙擊元件的名稱，再輸入元件的新名稱即可。

5．排序元件

在“庫”面板中列出了各種資源的名稱、類型、使用次數(shù)等信息，要對“庫”中的項目進行排序，只要單擊列標題即可按該列進行排序。單擊“庫”面板上的“切換排列順序”按鈕，可以按降序排序。

6．更新元件

如果動畫中使用了導入的素材，則當素材源文件被編輯修改后，需要更新導入的素材。其操作方法是：在“屬性”面板中需要更新的元件上單擊鼠標右鍵，執(zhí)行“更新”命令，彈出“更新庫項目”對話框，如圖4-21所示。在“更新庫項目”對話框中勾選要更新的素材，然后單擊“更新”按鈕即可。圖4-21“更新庫項目”對話框

課堂實踐

(1)使用圖層與元件功能制作如圖4-22所示的紫葡萄，要求把葉子和果子制作成元件。實例最終效果參見隨書光盤中“第4章/案例5/紫葡萄.fla”。圖4-22紫葡萄

(2)把第(1)題中的紫葡萄變?yōu)榍嗥咸?，實例最終效果參見隨書光盤中“第4章/案例6/青葡萄.fla”。

(3)