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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18、飛7.4.1流水本練習(xí)制制作流水水效果，如下圖圖所示，主要練練習(xí)遮罩罩動畫的的創(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流流水進入“svi0”影片片剪輯元元件的編編輯區(qū)，用套索索工具將將水選擇擇出來。進入“svi”影片剪剪輯元件件的編輯輯區(qū)，在在新建的的圖層2中繪制制水波若若干，并并將其轉(zhuǎn)轉(zhuǎn)換為“ze”影片剪剪輯元件件，再創(chuàng)創(chuàng)建從上上往下移移動的動動畫補間間動畫，建立上上下兩層層的遮罩罩關(guān)系。7.4.2秋秋葉飄飄飛本練習(xí)制制作秋葉葉飄飛的的動畫效效果，如如下圖所所示，主主要練習(xí)習(xí)引導(dǎo)動動畫的創(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