Dreamweaver-Flash-Fireworks網(wǎng)頁制作培訓(xùn)教程第7課

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

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

3、動(dòng)畫畫。7.1.1知知識講講解1.創(chuàng)建與編編輯元件件2.調(diào)用元件件3.逐幀動(dòng)畫畫4.形狀補(bǔ)間間動(dòng)畫5.為形狀補(bǔ)補(bǔ)間動(dòng)畫畫添加形形狀提示示6.動(dòng)畫補(bǔ)間間動(dòng)畫7.時(shí)間軸特特效動(dòng)畫畫1.創(chuàng)建與編編輯元件件元件有影影片剪輯輯、圖形形和按鈕鈕3種，各類類元件的的區(qū)別與與作用如如下。影片剪輯輯：該類類元件可可以包含含F(xiàn)lash動(dòng)畫的一一個(gè)片段段，也可可以是靜靜止的對對象。作作為動(dòng)畫畫片段時(shí)時(shí)，它能能獨(dú)立于于場景動(dòng)動(dòng)畫進(jìn)行行播放。此外，在影片片剪輯元元件實(shí)例例上還可可以添加加交互動(dòng)動(dòng)作。1.創(chuàng)建與編編輯元件件圖形：該該類元件件中也可可以包含含動(dòng)畫片片段，但但不能獨(dú)獨(dú)立于場場景播放放；在調(diào)調(diào)用該類類元件時(shí)時(shí)，

4、時(shí)間間軸的幀幀數(shù)必須須與圖形形元件中中的幀數(shù)數(shù)相同，否則不不能播放放。一般般將它作作為靜止止的對象象處理。注意，圖形元元件上不不能添加加交互行行為。1.創(chuàng)建與編編輯元件件按鈕：用用于創(chuàng)建建動(dòng)畫的的交互控控制按鈕鈕，以響響應(yīng)鼠標(biāo)標(biāo)事件（如單擊擊、釋放放和滑過過等），實(shí)現(xiàn)按按鈕的功功能。按按鈕有“彈起”、“指指針經(jīng)過過”、“按下”和“點(diǎn)點(diǎn)擊”4個(gè)不同同狀態(tài)的的幀，“點(diǎn)擊”幀中創(chuàng)創(chuàng)建鼠標(biāo)標(biāo)對按鈕鈕起作用用的范圍圍；其他他幀中可可以是靜靜止圖形形，也可可是影片片剪輯。2.調(diào)用元件件元件從庫庫中被拖拖到場景景或編輯輯區(qū)的過過程稱為為調(diào)用元元件。元元件是可可以反復(fù)復(fù)調(diào)用的的對象，當(dāng)元件件作為一一個(gè)對象象從

5、庫中中調(diào)用到到場景或或其他元元件編輯輯區(qū)時(shí)，它變?yōu)闉樵撛囊粋€(gè)個(gè)具體的的實(shí)例。因此，當(dāng)修改改元件后后，其對對應(yīng)的元元件實(shí)例例也會相相應(yīng)地改改變，這這就使編編輯動(dòng)畫畫變得十十分方便便，不需需逐一地地修改每每個(gè)元件件實(shí)例。當(dāng)然，元件實(shí)實(shí)例也有有獨(dú)立的的屬性，這部分分內(nèi)容將將在創(chuàng)建建動(dòng)畫補(bǔ)補(bǔ)間動(dòng)畫畫時(shí)介紹紹。2.調(diào)用元件件調(diào)用元件件的方法法為：在在庫中選選取要調(diào)調(diào)用的元元件，將將其拖入入場景或或編輯區(qū)區(qū)后釋放放鼠標(biāo)。3.逐幀動(dòng)畫畫逐幀動(dòng)畫畫已經(jīng)在在第6課的典型型案例中中應(yīng)用過過了，它它是以單單幀中內(nèi)內(nèi)容的變變化來實(shí)實(shí)現(xiàn)動(dòng)畫畫效果的的。這種種動(dòng)畫文文件占用用的存儲儲空間較較大，因因此，變變化過程程

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

7、完成成，這說說明中間間過程的的變化是是不可控控制的。如果要要使某點(diǎn)點(diǎn)在動(dòng)畫畫變形過過程中固固定不變變，那么么可以添添加形狀狀提示。6.動(dòng)畫補(bǔ)間間動(dòng)畫在動(dòng)畫補(bǔ)補(bǔ)間動(dòng)畫畫中，首首末關(guān)鍵鍵幀中的的對象必必須是同同一個(gè)元元件的實(shí)實(shí)例，并并且一個(gè)個(gè)關(guān)鍵幀幀中只能能有一個(gè)個(gè)元件實(shí)實(shí)例。動(dòng)動(dòng)畫補(bǔ)間間動(dòng)畫有有位置、大小、旋轉(zhuǎn)、傾斜和和顏色幾幾方面的的變化，這些變變化可以以單獨(dú)存存在，也也可以加加多個(gè)變變化于一一個(gè)元件件上。例例如，對對象在舞舞臺中一一邊移動(dòng)動(dòng)，一邊邊旋轉(zhuǎn)，并且呈呈淡入效效果。7.時(shí)間軸特特效動(dòng)畫畫時(shí)間軸特特效動(dòng)畫畫是Flash8的新增功功能。使使用它，可以用用最少的的步驟創(chuàng)創(chuàng)建復(fù)雜雜動(dòng)畫。時(shí)間

8、軸軸特效的的對象包包括文本本、影片片剪輯和和按鈕。7.1.2典型案例例制作banner動(dòng)畫案例目標(biāo)標(biāo)本案例將將為第6課中制作作的banner.fla添加形狀狀補(bǔ)間動(dòng)動(dòng)畫、動(dòng)動(dòng)畫補(bǔ)間間動(dòng)畫和和時(shí)間軸軸特效動(dòng)動(dòng)畫，添添加后的的效果如如下圖所所示。7.1.2典型案例例制作banner動(dòng)畫操作思路路：（1）確定畫畫面中需需要?jiǎng)?chuàng)建建為動(dòng)畫畫的元素素：“welcome”、“幻鈴鈴”文字字及環(huán)狀狀對象將將創(chuàng)建為為影片剪剪輯元件件，而“一號通通”文字字將創(chuàng)建建為按鈕鈕。（2）給“welcome”文字添加加時(shí)間軸軸特效，將“幻幻鈴”文文字創(chuàng)建建為透明明度漸變變動(dòng)畫，將環(huán)狀狀對象創(chuàng)創(chuàng)建為圖圖形變?yōu)闉?個(gè)圓環(huán)的的形

9、狀補(bǔ)補(bǔ)間動(dòng)畫畫，將“一號通通”文字字創(chuàng)建為為指針經(jīng)經(jīng)過時(shí)狀狀態(tài)顯示示“#FF6600”顏色的按按鈕。7.1.2典型案例例制作banner動(dòng)畫（3）在制作作過程中中，可以以隨時(shí)按按【Ctrl+Enter】組合鍵查查看動(dòng)畫畫效果。操作步驟驟請老師師參照軟軟件講解解7.1.2典型案例例制作banner動(dòng)畫案例小結(jié)結(jié)本案例中中練習(xí)了了形狀補(bǔ)補(bǔ)間動(dòng)畫畫、動(dòng)畫畫補(bǔ)間動(dòng)動(dòng)畫的創(chuàng)創(chuàng)建和時(shí)時(shí)間軸特特效的添添加，以以及元件件的轉(zhuǎn)換換、元件件實(shí)例屬屬性的更更改等。本案例例中采用用的元件件轉(zhuǎn)換方方式比通通過創(chuàng)建建元件再再調(diào)用元元件來創(chuàng)創(chuàng)建動(dòng)畫畫更方便便快捷，因?yàn)檗D(zhuǎn)轉(zhuǎn)換為元元件前對對象已在在需要的的位置上上了，轉(zhuǎn)轉(zhuǎn)換為

10、元元件后再再進(jìn)入元元件編輯輯區(qū)進(jìn)行行編輯便便可以看看到場景景中對象象的相對對位置，因此采采用這種種方法創(chuàng)創(chuàng)建動(dòng)畫畫的直觀觀性更強(qiáng)強(qiáng)。7.2制作引導(dǎo)導(dǎo)動(dòng)畫引導(dǎo)動(dòng)畫畫是使對對象沿某某條路徑徑運(yùn)動(dòng)而而產(chǎn)生的的動(dòng)畫，例如，雪花飄飄落、樹樹葉落下下、汽車車或人沿沿某路線線行走等等都可使使用引導(dǎo)導(dǎo)動(dòng)畫來來制作。7.2制作引導(dǎo)導(dǎo)動(dòng)畫7.2.1知識講解解7.2.2典型案例例變變幻光環(huán)環(huán)7.2.1知知識講講解本節(jié)將介介紹引導(dǎo)導(dǎo)動(dòng)畫的的構(gòu)成原原理及其其創(chuàng)建方方法。7.2.1知知識講講解1.引導(dǎo)動(dòng)畫畫的構(gòu)成成原理2.創(chuàng)建引導(dǎo)導(dǎo)動(dòng)畫1.引導(dǎo)動(dòng)畫畫的構(gòu)成成原理引導(dǎo)動(dòng)畫畫是由引引導(dǎo)層和和被引導(dǎo)導(dǎo)層構(gòu)成成的，引引導(dǎo)層位位于

11、被引引導(dǎo)層的的上方。被引導(dǎo)層層的對象象沿著引引導(dǎo)層的的對象運(yùn)運(yùn)動(dòng)，引引導(dǎo)層的的對象必必須是不不封閉的的路徑，并且以以普通幀幀（而不不是關(guān)鍵鍵幀）結(jié)結(jié)束。被被引導(dǎo)層層的對象象必須是是元件實(shí)實(shí)例，通通過動(dòng)畫畫補(bǔ)間動(dòng)動(dòng)畫來完完成對象象的運(yùn)動(dòng)動(dòng)。一條條引導(dǎo)路路徑可以以被多個(gè)個(gè)被引導(dǎo)導(dǎo)層對象象共用，即多個(gè)個(gè)對象沿沿同一條條路徑運(yùn)運(yùn)動(dòng)。2.創(chuàng)建引導(dǎo)導(dǎo)動(dòng)畫創(chuàng)建引導(dǎo)導(dǎo)動(dòng)畫的的具體操操作如下下：（1）創(chuàng)建引引導(dǎo)層。單擊圖圖層區(qū)中中的按按鈕新建建引導(dǎo)層層，此時(shí)時(shí)建立的的引導(dǎo)層層與下方方的圖層層已建立立了鏈接接關(guān)系。（2）在引導(dǎo)導(dǎo)層中繪繪制路徑徑。選中中引導(dǎo)層層，選擇擇工具箱箱中的鉛鉛筆、鋼鋼筆、多多邊形、矩形或或

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

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

14、光環(huán)練習(xí)習(xí)了引導(dǎo)導(dǎo)層和引引層動(dòng)畫畫的創(chuàng)建建、元件件的轉(zhuǎn)換換、柔化化填充、【混色色器】面面板的使使用等。讀者應(yīng)應(yīng)主要掌掌握引導(dǎo)導(dǎo)動(dòng)畫的的創(chuàng)建及及設(shè)置方方法，當(dāng)當(dāng)然，其其他輔助助知識點(diǎn)點(diǎn)也是創(chuàng)創(chuàng)建動(dòng)畫畫效果時(shí)時(shí)隨時(shí)要要用到的的，也應(yīng)應(yīng)該逐步步掌握。另外，在“引引導(dǎo)動(dòng)畫畫”元件件的編輯輯區(qū)中，如果在在【屬性性】面板板中將旋旋轉(zhuǎn)方式式設(shè)置為為“順時(shí)時(shí)針”或或“逆時(shí)時(shí)針”，則會產(chǎn)產(chǎn)生另一一種動(dòng)畫畫效果。7.3制制作作遮罩動(dòng)動(dòng)畫遮罩動(dòng)畫畫在Flash動(dòng)畫制作作中使用用得十分分廣泛，因?yàn)樗鼘?shí)現(xiàn)的的許多效效果是普普通動(dòng)畫畫無法實(shí)實(shí)現(xiàn)的，如在一一個(gè)圓形形內(nèi)看其其他對象象的變化化狀態(tài)、神奇的的萬花筒筒效果等等。

15、7.3制制作作遮罩動(dòng)動(dòng)畫7.3.1知識講解解7.3.2典型案例例展展卷畫7.3.1知識講解解本節(jié)將介介紹遮罩罩動(dòng)畫的的構(gòu)成原原理和創(chuàng)創(chuàng)建方法法。7.3.1知識講解解1.遮罩動(dòng)畫畫的構(gòu)成成原理2.創(chuàng)建遮罩罩動(dòng)畫 1.遮遮罩動(dòng)畫畫的構(gòu)成成原理遮罩動(dòng)畫畫是由遮遮罩層和和被遮罩罩層構(gòu)成成的，遮遮罩層位位于被遮遮罩層的的上方。遮罩動(dòng)動(dòng)畫就是是從遮罩罩層的圖圖形區(qū)域域觀看被被遮罩層層中的對對象，遮遮罩層中中圖形外外的區(qū)域域?qū)㈦[藏藏被遮罩罩層中的的對象。1.遮遮罩動(dòng)畫畫的構(gòu)成成原理遮罩層中中的對象象可以是是填充的的形狀、文字、圖形元元件的實(shí)實(shí)例或影影片剪輯輯元件，但是遮遮罩層中中只能有有一個(gè)獨(dú)獨(dú)立的對對象，

16、形形狀例外外。在一一個(gè)遮罩罩動(dòng)畫中中，遮罩罩層只能能有一個(gè)個(gè)，但被被遮罩層層可以有有多個(gè)。2.創(chuàng)創(chuàng)建遮罩罩動(dòng)畫遮罩動(dòng)畫畫有以下下3種情況：遮罩層與與被遮罩罩層中的的對象都都為靜態(tài)態(tài)對象，創(chuàng)建的的遮罩圖圖形相當(dāng)當(dāng)于Fireworks的蒙版效效果。遮罩層中中為靜態(tài)態(tài)對象，被遮罩罩層中有有補(bǔ)間動(dòng)動(dòng)畫；或或遮罩層層中有補(bǔ)補(bǔ)間動(dòng)畫畫，被遮遮罩層中中為靜態(tài)態(tài)對象。遮罩層與與被遮罩罩層中都都有補(bǔ)間間動(dòng)畫。7.3.2典型案例例展卷畫案例目標(biāo)標(biāo)本案例將將制作展展卷畫，主要練練習(xí)遮罩罩動(dòng)畫的的創(chuàng)建，完成后后的效果果如下圖圖所示。7.3.2典型案例例展卷畫操作思路路：（1）設(shè)置動(dòng)動(dòng)畫場景景大小為為800300像素，

17、幀幀頻為12fps。（2）分別創(chuàng)創(chuàng)建外框框的展卷卷遮罩及及框內(nèi)畫畫面的移移動(dòng)遮罩罩。（3）創(chuàng)建畫畫軸的展展開與閉閉合動(dòng)畫畫。（4）使用元元件實(shí)例例【屬性】面板的【顏色】下拉列表表框中的的【高級】選項(xiàng)設(shè)置置制作畫畫面出現(xiàn)現(xiàn)與離開開的動(dòng)畫畫效果。操作步驟驟請老師師參照軟軟件講解解7.3.2典型案例例展卷畫案例小結(jié)結(jié)本案例通通過制作作展卷畫畫練習(xí)了了遮罩動(dòng)動(dòng)畫的創(chuàng)創(chuàng)建、元元件顏色色的高級級設(shè)置、各個(gè)面面畫的轉(zhuǎn)轉(zhuǎn)換等。讀者應(yīng)應(yīng)主要掌掌握遮罩罩動(dòng)畫的的創(chuàng)建和和元件顏顏色的高高級設(shè)置置方法。在本案案例中，還需注注意如何何從一個(gè)個(gè)畫面轉(zhuǎn)轉(zhuǎn)換到另另一個(gè)面面畫。7.4上上機(jī)機(jī)練習(xí)7.4.1流水7.4.2秋葉飄飛

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