1、第7課 制作動(dòng)畫(huà),本課要點(diǎn) 具體要求 本課導(dǎo)讀 上機(jī)練習(xí),本課要點(diǎn),基礎(chǔ)動(dòng)畫(huà) 引導(dǎo)動(dòng)畫(huà) 遮罩動(dòng)畫(huà),具體要求,掌握元件的創(chuàng)建、編輯及調(diào)用方法 掌握庫(kù)的使用方法 掌握形狀補(bǔ)間動(dòng)畫(huà)的創(chuàng)建方法及形狀提示的使用方法 掌握動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)的創(chuàng)建方法及元件實(shí)例屬性的設(shè)置方法 掌握引導(dǎo)動(dòng)畫(huà)的原理及創(chuàng)建方法 掌握遮罩動(dòng)畫(huà)的原理及創(chuàng)建方法,本課導(dǎo)讀,使用Flash就是為了制作出漂亮的動(dòng)畫(huà)效果，本課就來(lái)講解Flash的這個(gè)核心內(nèi)容。根據(jù)創(chuàng)建方式的不同，F(xiàn)lash動(dòng)畫(huà)分為基礎(chǔ)動(dòng)畫(huà)和特殊動(dòng)畫(huà)。其中，基礎(chǔ)動(dòng)畫(huà)可分為逐幀動(dòng)畫(huà)和補(bǔ)間動(dòng)畫(huà)，補(bǔ)間動(dòng)畫(huà)根據(jù)不同對(duì)象又可分為形狀補(bǔ)間動(dòng)畫(huà)和動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)兩種；根據(jù)不同的輔助對(duì)象，特殊動(dòng)畫(huà)可分

2、為引導(dǎo)動(dòng)畫(huà)和遮罩動(dòng)畫(huà)兩種。,7.1 制作基礎(chǔ)動(dòng)畫(huà),基礎(chǔ)動(dòng)畫(huà)主要包括逐幀動(dòng)畫(huà)、形狀補(bǔ)間動(dòng)畫(huà)和動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)3類。此外，利用時(shí)間軸的特效功能還可以將對(duì)象制作為有模糊、擴(kuò)展等效果的動(dòng)畫(huà)。,7.1 制作基礎(chǔ)動(dòng)畫(huà),7.1.1 知識(shí)講解 7.1.2 典型案例制作banner動(dòng)畫(huà),7.1.1 知識(shí)講解,元件是動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)的基本單位，因此創(chuàng)建元件是學(xué)習(xí)動(dòng)畫(huà)的基礎(chǔ)。本節(jié)將介紹如何創(chuàng)建、編輯、調(diào)用元件以及如何應(yīng)用元件創(chuàng)建補(bǔ)間動(dòng)畫(huà)和時(shí)間軸動(dòng)畫(huà)。,7.1.1 知識(shí)講解,1. 創(chuàng)建與編輯元件 2. 調(diào)用元件 3. 逐幀動(dòng)畫(huà) 4. 形狀補(bǔ)間動(dòng)畫(huà) 5. 為形狀補(bǔ)間動(dòng)畫(huà)添加形狀提示 6. 動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà) 7. 時(shí)間軸特效動(dòng)畫(huà),1

3、. 創(chuàng)建與編輯元件,元件有影片剪輯、圖形和按鈕3種，各類元件的區(qū)別與作用如下。 影片剪輯：該類元件可以包含F(xiàn)lash動(dòng)畫(huà)的一個(gè)片段，也可以是靜止的對(duì)象。作為動(dòng)畫(huà)片段時(shí)，它能獨(dú)立于場(chǎng)景動(dòng)畫(huà)進(jìn)行播放。此外，在影片剪輯元件實(shí)例上還可以添加交互動(dòng)作。,1. 創(chuàng)建與編輯元件,圖形：該類元件中也可以包含動(dòng)畫(huà)片段，但不能獨(dú)立于場(chǎng)景播放；在調(diào)用該類元件時(shí)，時(shí)間軸的幀數(shù)必須與圖形元件中的幀數(shù)相同，否則不能播放。一般將它作為靜止的對(duì)象處理。注意，圖形元件上不能添加交互行為。,1. 創(chuàng)建與編輯元件,按鈕：用于創(chuàng)建動(dòng)畫(huà)的交互控制按鈕，以響應(yīng)鼠標(biāo)事件（如單擊、釋放和滑過(guò)等），實(shí)現(xiàn)按鈕的功能。按鈕有“彈起”、“指針經(jīng)過(guò)”

4、、“按下”和“點(diǎn)擊”4個(gè)不同狀態(tài)的幀，“點(diǎn)擊”幀中創(chuàng)建鼠標(biāo)對(duì)按鈕起作用的范圍；其他幀中可以是靜止圖形，也可是影片剪輯。,2. 調(diào)用元件,元件從庫(kù)中被拖到場(chǎng)景或編輯區(qū)的過(guò)程稱為調(diào)用元件。元件是可以反復(fù)調(diào)用的對(duì)象，當(dāng)元件作為一個(gè)對(duì)象從庫(kù)中調(diào)用到場(chǎng)景或其他元件編輯區(qū)時(shí)，它變?yōu)樵撛囊粋€(gè)具體的實(shí)例。因此，當(dāng)修改元件后，其對(duì)應(yīng)的元件實(shí)例也會(huì)相應(yīng)地改變，這就使編輯動(dòng)畫(huà)變得十分方便，不需逐一地修改每個(gè)元件實(shí)例。當(dāng)然，元件實(shí)例也有獨(dú)立的屬性，這部分內(nèi)容將在創(chuàng)建動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)時(shí)介紹。,2. 調(diào)用元件,調(diào)用元件的方法為：在庫(kù)中選取要調(diào)用的元件，將其拖入場(chǎng)景或編輯區(qū)后釋放鼠標(biāo)。,3. 逐幀動(dòng)畫(huà),逐幀動(dòng)畫(huà)已經(jīng)在第6課

5、的典型案例中應(yīng)用過(guò)了，它是以單幀中內(nèi)容的變化來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果的。這種動(dòng)畫(huà)文件占用的存儲(chǔ)空間較大，因此，變化過(guò)程太長(zhǎng)的動(dòng)畫(huà)不宜采用該類型；但變化比較復(fù)雜、不易體現(xiàn)出變化過(guò)程的動(dòng)畫(huà)，如表現(xiàn)舉手、抬足或面部表情等，應(yīng)采用該類型。,4. 形狀補(bǔ)間動(dòng)畫(huà),形狀補(bǔ)間動(dòng)畫(huà)指外觀形狀變化的動(dòng)畫(huà)；在實(shí)際的動(dòng)畫(huà)創(chuàng)建過(guò)程中，除了外觀形狀的變化外，也可以是位置、顏色的變化。 在Flash中，要?jiǎng)?chuàng)建形狀補(bǔ)間動(dòng)畫(huà)，需首先確定首末兩個(gè)關(guān)鍵幀的內(nèi)容，中間的變化過(guò)程由計(jì)算機(jī)自動(dòng)完成。關(guān)鍵幀中的內(nèi)容可以是一個(gè)或多個(gè)不同的對(duì)象，但對(duì)象必須是可分離的圖形。,5. 為形狀補(bǔ)間動(dòng)畫(huà)添加形狀提示,形狀補(bǔ)間動(dòng)畫(huà)的中間過(guò)程由計(jì)算機(jī)自動(dòng)完成，這說(shuō)明

6、中間過(guò)程的變化是不可控制的。如果要使某點(diǎn)在動(dòng)畫(huà)變形過(guò)程中固定不變，那么可以添加形狀提示。,6. 動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà),在動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)中，首末關(guān)鍵幀中的對(duì)象必須是同一個(gè)元件的實(shí)例，并且一個(gè)關(guān)鍵幀中只能有一個(gè)元件實(shí)例。動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)有位置、大小、旋轉(zhuǎn)、傾斜和顏色幾方面的變化，這些變化可以單獨(dú)存在，也可以加多個(gè)變化于一個(gè)元件上。例如，對(duì)象在舞臺(tái)中一邊移動(dòng)，一邊旋轉(zhuǎn)，并且呈淡入效果。,7. 時(shí)間軸特效動(dòng)畫(huà),時(shí)間軸特效動(dòng)畫(huà)是Flash 8的新增功能。使用它，可以用最少的步驟創(chuàng)建復(fù)雜動(dòng)畫(huà)。時(shí)間軸特效的對(duì)象包括文本、影片剪輯和按鈕。,7.1.2 典型案例制作banner動(dòng)畫(huà),案例目標(biāo) 本案例將為第6課中制作的bann

7、er.fla添加形狀補(bǔ)間動(dòng)畫(huà)、動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)和時(shí)間軸特效動(dòng)畫(huà)，添加后的效果如下圖所示。,7.1.2 典型案例制作banner動(dòng)畫(huà),操作思路： （1）確定畫(huà)面中需要?jiǎng)?chuàng)建為動(dòng)畫(huà)的元素：“welcome”、“幻鈴”文字及環(huán)狀對(duì)象將創(chuàng)建為影片剪輯元件，而“一號(hào)通”文字將創(chuàng)建為按鈕。 （2）給“welcome”文字添加時(shí)間軸特效，將“幻鈴”文字創(chuàng)建為透明度漸變動(dòng)畫(huà)，將環(huán)狀對(duì)象創(chuàng)建為圖形變?yōu)?個(gè)圓環(huán)的形狀補(bǔ)間動(dòng)畫(huà)，將“一號(hào)通”文字創(chuàng)建為指針經(jīng)過(guò)時(shí)狀態(tài)顯示“#FF6600”顏色的按鈕。,7.1.2 典型案例制作banner動(dòng)畫(huà),（3）在制作過(guò)程中，可以隨時(shí)按【Ctrl+Enter】組合鍵查看動(dòng)畫(huà)效果。 操作步

8、驟請(qǐng)老師參照軟件講解,7.1.2 典型案例制作banner動(dòng)畫(huà),案例小結(jié) 本案例中練習(xí)了形狀補(bǔ)間動(dòng)畫(huà)、動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)的創(chuàng)建和時(shí)間軸特效的添加，以及元件的轉(zhuǎn)換、元件實(shí)例屬性的更改等。本案例中采用的元件轉(zhuǎn)換方式比通過(guò)創(chuàng)建元件再調(diào)用元件來(lái)創(chuàng)建動(dòng)畫(huà)更方便快捷，因?yàn)檗D(zhuǎn)換為元件前對(duì)象已在需要的位置上了，轉(zhuǎn)換為元件后再進(jìn)入元件編輯區(qū)進(jìn)行編輯便可以看到場(chǎng)景中對(duì)象的相對(duì)位置，因此采用這種方法創(chuàng)建動(dòng)畫(huà)的直觀性更強(qiáng)。,7.2 制作引導(dǎo)動(dòng)畫(huà),引導(dǎo)動(dòng)畫(huà)是使對(duì)象沿某條路徑運(yùn)動(dòng)而產(chǎn)生的動(dòng)畫(huà)，例如，雪花飄落、樹(shù)葉落下、汽車或人沿某路線行走等都可使用引導(dǎo)動(dòng)畫(huà)來(lái)制作。,7.2 制作引導(dǎo)動(dòng)畫(huà),7.2.1 知識(shí)講解 7.2.2 典型案

9、例變幻光環(huán),7.2.1 知識(shí)講解,本節(jié)將介紹引導(dǎo)動(dòng)畫(huà)的構(gòu)成原理及其創(chuàng)建方法。,7.2.1 知識(shí)講解,1. 引導(dǎo)動(dòng)畫(huà)的構(gòu)成原理 2. 創(chuàng)建引導(dǎo)動(dòng)畫(huà),1. 引導(dǎo)動(dòng)畫(huà)的構(gòu)成原理,引導(dǎo)動(dòng)畫(huà)是由引導(dǎo)層和被引導(dǎo)層構(gòu)成的，引導(dǎo)層位于被引導(dǎo)層的上方。 被引導(dǎo)層的對(duì)象沿著引導(dǎo)層的對(duì)象運(yùn)動(dòng)，引導(dǎo)層的對(duì)象必須是不封閉的路徑，并且以普通幀（而不是關(guān)鍵幀）結(jié)束。被引導(dǎo)層的對(duì)象必須是元件實(shí)例，通過(guò)動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)來(lái)完成對(duì)象的運(yùn)動(dòng)。一條引導(dǎo)路徑可以被多個(gè)被引導(dǎo)層對(duì)象共用，即多個(gè)對(duì)象沿同一條路徑運(yùn)動(dòng)。,2. 創(chuàng)建引導(dǎo)動(dòng)畫(huà),創(chuàng)建引導(dǎo)動(dòng)畫(huà)的具體操作如下： （1）創(chuàng)建引導(dǎo)層。單擊圖層區(qū)中的 按鈕新建引導(dǎo)層，此時(shí)建立的引導(dǎo)層與下方的圖層

10、已建立了鏈接關(guān)系。 （2）在引導(dǎo)層中繪制路徑。選中引導(dǎo)層，選擇工具箱中的鉛筆、鋼筆、多邊形、矩形或橢圓工具進(jìn)行繪制。繪制完成的路徑只能為筆觸線，而不能有填充色。,2. 創(chuàng)建引導(dǎo)動(dòng)畫(huà),（3）在被引導(dǎo)層中創(chuàng)建動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)，并且首末關(guān)鍵幀中的元件實(shí)例必須位于路徑中的不同位置。 （4）設(shè)置動(dòng)畫(huà)。在被引導(dǎo)層的時(shí)間軸上單擊鼠標(biāo)，選中【屬性】面板中的 復(fù)選框，使動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)中的元件實(shí)例在播放過(guò)程中為了適合路徑的變化方向做一定角度的旋轉(zhuǎn)。如果不選中該復(fù)選框，則元件實(shí)例保持初始狀態(tài)進(jìn)行運(yùn)動(dòng)。,7.2.2 典型案例變幻光環(huán),案例目標(biāo) 本案例將制作變幻光環(huán)，主要練習(xí)引導(dǎo)動(dòng)畫(huà)的創(chuàng)建，完成后的效果如下圖所示。,7.2.

11、2 典型案例變幻光環(huán),操作思路： （1）設(shè)置動(dòng)畫(huà)場(chǎng)景大小為550400像素，背景色為“#000000”，幀頻為20fps。 （2）在場(chǎng)景中創(chuàng)建圓，并逐層創(chuàng)建“yj”元件、“引導(dǎo)動(dòng)畫(huà)”元件和“環(huán)圖”元件。 （3）在“引導(dǎo)動(dòng)畫(huà)”元件中創(chuàng)建以圓為路徑的引導(dǎo)動(dòng)畫(huà)。,7.2.2 典型案例變幻光環(huán),（4）在“環(huán)圖”元件中編輯圓，使其為圓的一小部分，并進(jìn)行漸變和柔化填充。 （5）在“yj”元件中復(fù)制多個(gè)“引導(dǎo)動(dòng)畫(huà)”元件實(shí)例，并調(diào)整出造型。 操作步驟請(qǐng)老師參照軟件講解,7.2.2 典型案例變幻光環(huán),案例小結(jié) 本案例通過(guò)制作變幻光環(huán)練習(xí)了引導(dǎo)層和引層動(dòng)畫(huà)的創(chuàng)建、元件的轉(zhuǎn)換、柔化填充、【混色器】面板的使用等。讀者

12、應(yīng)主要掌握引導(dǎo)動(dòng)畫(huà)的創(chuàng)建及設(shè)置方法，當(dāng)然，其他輔助知識(shí)點(diǎn)也是創(chuàng)建動(dòng)畫(huà)效果時(shí)隨時(shí)要用到的，也應(yīng)該逐步掌握。另外，在“引導(dǎo)動(dòng)畫(huà)”元件的編輯區(qū)中，如果在【屬性】面板中將旋轉(zhuǎn)方式設(shè)置為“順時(shí)針”或“逆時(shí)針”，則會(huì)產(chǎn)生另一種動(dòng)畫(huà)效果。,7.3 制作遮罩動(dòng)畫(huà),遮罩動(dòng)畫(huà)在Flash動(dòng)畫(huà)制作中使用得十分廣泛，因?yàn)樗鼘?shí)現(xiàn)的許多效果是普通動(dòng)畫(huà)無(wú)法實(shí)現(xiàn)的，如在一個(gè)圓形內(nèi)看其他對(duì)象的變化狀態(tài)、神奇的萬(wàn)花筒效果等。,7.3 制作遮罩動(dòng)畫(huà),7.3.1 知識(shí)講解 7.3.2 典型案例展卷畫(huà),7.3.1 知識(shí)講解,本節(jié)將介紹遮罩動(dòng)畫(huà)的構(gòu)成原理和創(chuàng)建方法。,7.3.1 知識(shí)講解,1. 遮罩動(dòng)畫(huà)的構(gòu)成原理 2. 創(chuàng)建遮罩動(dòng)畫(huà),1

13、. 遮罩動(dòng)畫(huà)的構(gòu)成原理,遮罩動(dòng)畫(huà)是由遮罩層和被遮罩層構(gòu)成的，遮罩層位于被遮罩層的上方。遮罩動(dòng)畫(huà)就是從遮罩層的圖形區(qū)域觀看被遮罩層中的對(duì)象，遮罩層中圖形外的區(qū)域?qū)㈦[藏被遮罩層中的對(duì)象。,1. 遮罩動(dòng)畫(huà)的構(gòu)成原理,遮罩層中的對(duì)象可以是填充的形狀、文字、圖形元件的實(shí)例或影片剪輯元件，但是遮罩層中只能有一個(gè)獨(dú)立的對(duì)象，形狀例外。在一個(gè)遮罩動(dòng)畫(huà)中，遮罩層只能有一個(gè)，但被遮罩層可以有多個(gè)。,2. 創(chuàng)建遮罩動(dòng)畫(huà),遮罩動(dòng)畫(huà)有以下3種情況： 遮罩層與被遮罩層中的對(duì)象都為靜態(tài)對(duì)象，創(chuàng)建的遮罩圖形相當(dāng)于Fireworks的蒙版效果。 遮罩層中為靜態(tài)對(duì)象，被遮罩層中有補(bǔ)間動(dòng)畫(huà)；或遮罩層中有補(bǔ)間動(dòng)畫(huà)，被遮罩層中為靜態(tài)對(duì)

14、象。 遮罩層與被遮罩層中都有補(bǔ)間動(dòng)畫(huà)。,7.3.2 典型案例展卷畫(huà),案例目標(biāo) 本案例將制作展卷畫(huà)，主要練習(xí)遮罩動(dòng)畫(huà)的創(chuàng)建，完成后的效果如下圖所示。,7.3.2 典型案例展卷畫(huà),操作思路： （1）設(shè)置動(dòng)畫(huà)場(chǎng)景大小為800300像素，幀頻為12fps。 （2）分別創(chuàng)建外框的展卷遮罩及框內(nèi)畫(huà)面的移動(dòng)遮罩。 （3）創(chuàng)建畫(huà)軸的展開(kāi)與閉合動(dòng)畫(huà)。 （4）使用元件實(shí)例【屬性】面板的【顏色】下拉列表框中的【高級(jí)】選項(xiàng)設(shè)置制作畫(huà)面出現(xiàn)與離開(kāi)的動(dòng)畫(huà)效果。 操作步驟請(qǐng)老師參照軟件講解,7.3.2 典型案例展卷畫(huà),案例小結(jié) 本案例通過(guò)制作展卷畫(huà)練習(xí)了遮罩動(dòng)畫(huà)的創(chuàng)建、元件顏色的高級(jí)設(shè)置、各個(gè)面畫(huà)的轉(zhuǎn)換等。讀者應(yīng)主要掌握遮

15、罩動(dòng)畫(huà)的創(chuàng)建和元件顏色的高級(jí)設(shè)置方法。在本案例中，還需注意如何從一個(gè)畫(huà)面轉(zhuǎn)換到另一個(gè)面畫(huà)。,7.4 上機(jī)練習(xí),7.4.1 流水 7.4.2 秋葉飄飛,7.4.1 流水,本練習(xí)制作流水效果，如下圖所示，主要練習(xí)遮罩動(dòng)畫(huà)的創(chuàng)建。,7.4.1 流水,操作思路： 新建大小為540390像素的場(chǎng)景，幀頻為12fps。 導(dǎo)入shui.jpg圖像，使圖像頂部與場(chǎng)景上方對(duì)齊。,7.4.1 流水,新建圖層2，復(fù)制shui.jpg圖像與下方的圖像重合，并將它們分別轉(zhuǎn)換成名為“svi”和“svi0”的影片剪輯元件。,7.4.1 流水,進(jìn)入“svi0”影片剪輯元件的編輯區(qū)，用套索工具將水選擇出來(lái)。 進(jìn)入“svi”影片剪輯元件的編輯區(qū)，在新建的圖層2中繪制水波若干，并將其轉(zhuǎn)換為“ze”影片剪輯元件，再創(chuàng)建從上往下移動(dòng)的動(dòng)畫(huà)補(bǔ)間動(dòng)畫(huà)，建立上下兩層的遮罩關(guān)系。,7.4.2 秋葉飄飛,本練習(xí)制作秋葉飄飛的動(dòng)畫(huà)效果，如下圖所示，主要練習(xí)引導(dǎo)動(dòng)畫(huà)的創(chuàng)建。,7.4.2 秋葉飄飛,操作思路： 新建文檔，設(shè)置場(chǎng)景大小為540340像素，幀頻為20fps。 導(dǎo)入“風(fēng)景1.jpg”圖片。新建圖層2，導(dǎo)入“葉.jpg”圖片。,7.4.2 秋葉飄飛,將“葉.jpg”圖片依次轉(zhuǎn)為“葉”、