《Flash 8動(dòng)畫制作案例教程》課件第4章

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

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

4.1.1圖層的概念與作用

1．圖層的概念

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

2．圖層的作用

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

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

(2)每個(gè)圖層都有獨(dú)立的時(shí)間幀，舞臺(tái)中不同的運(yùn)動(dòng)補(bǔ)間動(dòng)畫需要分布在不同的圖層上，因?yàn)樵谝粋€(gè)圖層上只能有一個(gè)動(dòng)畫實(shí)例。(第5章將詳細(xì)介紹補(bǔ)間動(dòng)畫的制作。)

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

1．選取圖層

在對(duì)圖層進(jìn)行復(fù)制、刪除等操作前，都需要先選取圖層。選取圖層的方法有如下三種。

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

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

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

2．新建圖層

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

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

3．命名圖層

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

4．復(fù)制圖層

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

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

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

(3)新建一個(gè)圖層。

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

5．刪除圖層

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

(1)選擇要?jiǎng)h除的圖層，單擊“刪除圖層”按鈕。

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

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

6．移動(dòng)圖層

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

7．設(shè)置圖層屬性

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

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

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

③鎖定：勾選此選項(xiàng)，用于鎖定該圖層。圖層鎖定后，將不能對(duì)該圖層上的對(duì)象進(jìn)行任何編輯修改。

④類型：設(shè)置圖層的類型。

⑤輪廓顏色：?jiǎn)螕簟笆吧鳌卑粹o，可以為輪廓顯示模式的圖層選擇輪廓顏色。

⑥將圖層視為輪廓：勾選此選項(xiàng)，可將圖層上的對(duì)象以輪廓線顯示。

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

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

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

4.2元件

4.2.1元件與實(shí)例的概念

對(duì)于初學(xué)者來說，元件與實(shí)例是一對(duì)全新而又陌生的概念。打個(gè)比方，元件與實(shí)例的關(guān)系就像是工廠里模具與零件的關(guān)系，工人使用模具鑄造零件，使用不同的零件來裝配機(jī)器；模具就好像Flash中的元件，零件就好像是實(shí)例，機(jī)器就好比Flash動(dòng)畫，只要制作出模具，就可以源源不斷地鑄造出零件，供不同的機(jī)器來裝配使用。

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

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

(1)使用元件可以大大減小文件的體積。因?yàn)椴还茉枚嗌俅危趧?dòng)畫中只存儲(chǔ)一次，占用很少的空間。

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

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

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

(5)使用元件和庫(kù)面板，能實(shí)現(xiàn)對(duì)動(dòng)畫資源的有效管理。

(6)使用元件還可以加快SWF文件的回放速度。因?yàn)橐粋€(gè)元件只需下載一次。4.2.2元件的種類

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

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

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

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

1．創(chuàng)建元件

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

2．創(chuàng)建實(shí)例

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

案例展示與任務(wù)

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

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

操作步驟

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

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

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

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

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

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

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

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

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

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

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

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

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

1．改變實(shí)例的外觀形狀

每個(gè)元件的實(shí)例都有獨(dú)立于該元件的，屬于自己的屬性。可以利用“屬性”面板對(duì)實(shí)例進(jìn)行編輯修改，例如更改實(shí)例的色調(diào)、透明度和亮度等屬性，還可以對(duì)實(shí)例進(jìn)行縮放、旋轉(zhuǎn)、傾斜等操作。編輯修改實(shí)例后，并不會(huì)改變引用的元件。案例4-2：椰樹投影

案例展示與任務(wù)

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

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

操作步驟

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

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

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

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

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

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

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

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

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

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

案例4-3：藍(lán)貓變企鵝

案例展示與任務(wù)

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

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

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

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

3．分離實(shí)例

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

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

案例展示與任務(wù)

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

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

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

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

4．更改實(shí)例的類型

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

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

1．更改元件的類型

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

2．復(fù)制元件

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

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

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

(2)將舞臺(tái)上的元件實(shí)例復(fù)制到剪貼板，然后切換到目標(biāo)文檔，將實(shí)例復(fù)制到目標(biāo)文檔舞臺(tái)上，此時(shí)實(shí)例所鏈接的元件也同時(shí)被復(fù)制到目標(biāo)文檔的“庫(kù)”中。

3．刪除元件

刪除元件的操作方法是：選取要?jiǎng)h除的元件，再單擊“庫(kù)”面板底部的“刪除”按鈕即可。刪除元件后，該元件在舞臺(tái)上的所有實(shí)例也同時(shí)被刪除。

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

4．重命名元件

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

5．排序元件

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

6．更新元件

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

課堂實(shí)踐

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

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

(3)