《flash8動畫設計實例教程》第五章

1、機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程 目標技能目標技能理解遮罩動畫的概念和原理學會遮罩動畫的建立方法能夠熟練運用遮罩技術制作遮罩動畫第第5章章 遮罩動畫實例遮罩動畫實例機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程 本章目錄本章目錄5.1 5.1 遮罩動畫實例遮罩動畫實例1 15.2 5.2 遮罩動畫實例遮罩動畫實例2 25.3 5.3 遮罩動畫實例遮罩動畫實例3 3

2、機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程 本章重點：遮罩動畫建立的方法 本章難點：運用遮罩技術制作遮罩動畫。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程5.1 遮罩動畫實例遮罩動畫實例5.1.1 概念介紹概念介紹 遮罩動畫遮罩動畫遮罩動畫是Flash中的一個很重要的動畫類型，在Flash的作品中，很多生動的畫面都是通過遮罩畫實現(xiàn)的。例如：探照燈效果、水波、用放大鏡將小物

3、體放大以及百葉窗式圖片的切換等等。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程遮罩層及被遮罩層遮罩層及被遮罩層最簡單的遮罩動畫需要上、下兩個圖層，上面的圖層稱為遮罩層，下面的圖層稱為被遮罩層。 遮罩層對象遮罩層對象按鈕、影片剪輯、圖形、位圖、文字、經(jīng)過處理的線條可作為遮罩層對象。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程5.1.2 建立遮罩層建立遮罩層步驟：1）打開Fla

4、sh 8，新建一個Flash文檔。2）雙擊圖層名稱，將文檔中名稱為圖層1的普通圖層重新命名為遮罩層。3）在遮罩層名稱框上單擊右鍵，從彈出的快捷菜單中選擇【遮罩層】命令，這時命令的左邊出現(xiàn)一個小勾，該普通圖層就成為了遮罩層。4）此時，層圖標就從普通圖層圖標變?yōu)椤罢谡謱印眻D標。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程5.1.3 添

5、加被遮罩層添加被遮罩層添加被遮罩層有多種方式。最常用的方式是：1）打開Flash 8，新建一個Flash文檔。2）單擊插入圖層按鈕，建立兩個普通圖層。3）將上面的圖層重新命名為遮罩層，下面的圖層重新命名為被遮罩層。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程4）在遮罩層名稱框上單擊右鍵，從彈出的快捷菜單中選擇【遮罩層】命令，這時命令的左邊出現(xiàn)一個小勾，該普通圖層就成為遮罩層。5）在建立遮罩層后，系統(tǒng)會自動把遮罩層下面的一層關聯(lián)為被遮罩層。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五

6、十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程5.1.4 實現(xiàn)遮罩效果實現(xiàn)遮罩效果制作遮罩動畫：探照燈效果。步驟：1）打開Flash 8，新建一個Flash文檔，設置影片尺寸為“400px200px”,背景顏色為“黑色”，幀頻為“12”。2）單擊插入圖層按鈕，建立兩個圖層，分別命名為：遮罩層和被遮罩層，遮罩層在上，被遮罩層在下。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程3）選擇工具箱中的文本工具，在文本工具的屬性面板中

7、設置文本的屬性：字體為“宋體”，字號為“96”，顏色為：“紅色。4）單擊被遮罩層的第1幀，用鼠標在場景中拖出一個文本框，在其中輸入文字遮罩動畫，適當調(diào)整文本的位置。5）單擊遮罩層的第1幀，選擇工具箱中的橢圓工具，設置填充色為綠色。按住Shift鍵，用橢圓工具在場景中畫一個綠色的圓，調(diào)整圓的大小和文本一樣高，調(diào)整圓的位置，將它放在文字的左邊。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程6）單擊被遮罩層的第50幀，單擊鼠標右鍵，從彈出的快捷菜單選擇【插入幀】命令。 7）單擊遮罩層的第50

8、幀，單擊鼠標右鍵，從彈出的快捷菜單選擇【插入關鍵幀】命令，選擇工具箱中的箭頭工具，將圓拖到文字的右邊。 8）選中遮罩層的第1幀，單擊鼠標右鍵，從彈出的快捷菜單中選擇【創(chuàng)建補間動畫】命令，設置遮罩層中的圓的補間為動畫補間。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程9）在遮罩層名稱框上單擊鼠標右鍵，從彈出的快捷菜單中選擇【遮罩層】命令，這時將看不到場景中的對象，遮罩層和被遮罩層自動被鎖定。10）按【Ctrl】+【Enter】鍵預覽動畫效果。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五

9、十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程5.2 遮罩動畫實例遮罩動畫實例25.2.1 制作遮罩動畫：水波制作遮罩動畫：水波步驟： 1）打開Flash 8，新建一個Flash文檔，影片尺寸為“500px400px”,背景顏色為“黑色”，幀頻為“12”。2）選擇圖層1第1幀，選擇菜單欄“文件”“導入”命令，導入一幅圖片（此圖片就是光盤中的水波.jpg）到舞臺，設置圖片的寬和高分別為500 px400 px，與舞臺大小相同。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版

10、社Flash8 動畫設計實例教程動畫設計實例教程3）選擇菜單欄“插入”“新建元件”命令，創(chuàng)建一個名稱為水波的影片剪輯。4）在水波元件的編輯模式下，導入水波.jpg圖片到圖層1的第1幀，將該圖片作為水波元件的背景，設置圖片的大小為500px400px，調(diào)整圖片的位置至中心。5）在水波元件的編輯模式下，更改圖層1名稱為被遮罩層，在該圖層的上面新建一個圖層，命名為遮罩層。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程6）選擇被遮罩層的第23幀，單擊鼠標右鍵，從彈出的快捷菜單選擇【插入幀】命令

11、。7）選擇遮罩層的第1幀，選擇工具箱中的橢圓工具，設置筆觸顏色為白色，輪廓線粗細為1，去掉填充色。8）拖動鼠標，繪制一個小圓形，調(diào)整小圓形到適當?shù)奈恢?。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程9）選中此圓，選擇菜單欄“修改”“形狀”“將線條轉換為填充”命令，對線條進行轉換填充處理。這是因為此圓將作為遮罩層中的對象，而在遮罩層中的圖形對象不能使用線條，如果一定要用線條，需要將線條轉化為“填充”。10）選擇遮罩層第23幀，單擊鼠標右鍵，從彈出的快捷菜單選擇【插入關鍵幀】命令。11）選

12、擇工具箱“任意變形工具”，在第23幀放大該圓。 機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程12）選擇遮罩層第1幀，設置屬性面板中的【補間】選項為形狀，將該層中對象的第1至 23幀設為形狀漸變。13）在遮罩層上單擊右鍵，從彈出的快捷菜單中選擇【遮罩層】命令。14）單擊返回按鈕，回到場景1。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程15）選擇圖層1的第27幀，單擊鼠標右鍵，

13、從彈出的快捷菜單選擇【插入幀】命令。16）單擊插入圖層按鈕，建立圖層2，選中該圖層的第1幀，選擇菜單欄“窗口”庫”命令，打開“庫”面板，拖動“水波”影片剪輯到場景1中合適的位置。17）單擊插入圖層按鈕，新建圖層3，選中圖層3的第8幀，單擊鼠標右鍵，從彈出的快捷菜單選擇【插入關鍵幀】命令。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程18）單擊【插入圖層】按鈕，新建圖層4，選中圖層4的第14幀，單擊鼠標右鍵，從彈出的快捷菜單選擇【插入關鍵幀】命令。選中圖層2的第1幀，選擇菜單欄“編輯”“

14、復制”命令，再選中圖層4的第14幀，選擇菜單欄“編輯”“粘帖到當前位置”命令，將圖層2中水波影片剪輯實例復制并原地粘貼過來 。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程19）單擊【插入圖層】按鈕，新建圖層5，選中圖層5的第21幀，單擊鼠標右鍵，從彈出的快捷菜單選擇【插入關鍵幀】命令。用上面的方法，將圖層2中水波影片剪輯實例復制并原地粘貼到圖層5的第21幀。20）按【Ctrl】+【Enter】鍵預覽動畫效果。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子

15、商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程21）選擇菜單欄“文件”“保存”命令，將該文件保存為“水波.fla”。22）選擇菜單欄“文件”“發(fā)布”命令，生成“水波.swf”。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程5.3 遮罩動畫實例遮罩動畫實例35.3.1 制作遮罩動畫：紅星閃閃制作遮罩動畫：紅星閃閃步驟：1）打開Flash 8，新建一個Flash文檔，影片尺寸為“400px400px”,背景顏色為“黑色”，幀頻為“12”。2）選擇工具箱中的

16、矩形工具按鈕，設置筆觸顏色為無，填充顏色為“放射狀”漸變色，在場景中繪制出一個“400px400px”的無邊正方形，調(diào)整它的位置與場景重疊。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程3）選擇菜單欄“插入”“新建元件”命令，新建一個圖形元件，命名為線條。4）在線條元件編輯模式下，選擇工具箱中的線條工具按鈕，在線條元件的“屬性”面板中，設置筆觸顏色為黃色，筆觸高度為3，設置線條寬為：200，線條高為：0，設置線條的位置：X為-200，Y為20。拖動鼠標在場景中畫一條直線。機械工業(yè)出版社

17、中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程5）選擇菜單欄“插入”“新建元件”命令，新建一個圖形元件，命名為線條組合。6）選擇菜單欄“窗口”“庫”命令，打開“庫”面板，將線條元件拖到線條組合元件場景中。7）選中場景中的線條元件，在“屬性”面板中,設置X為-200，Y為20。單擊工具箱中的任意變形工具，此時該元件實例的中心會出現(xiàn)一個小白點，它就是對象的“變形點。用鼠標左鍵按住它，拖到場景的中心“+”處松手。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專

18、業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程8）選擇菜單欄“窗口”“變形”命令，打開“變形”面板，選擇旋轉單選按鈕，每次旋轉角度設為15度。9）連續(xù)單擊復制并應用變形按鈕，在場景中復制出的效果。10）在時間軸的第1幀上單擊一下，選中全部圖形，執(zhí)行菜單欄“修改”“分離”命令，把線條打散。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程11）執(zhí)行菜單欄“修改” “形狀” “將線條轉化為填充”命令，將線條轉變?yōu)樘畛?。這是因為這些線條將被用作為遮罩層的對象，而遮罩層中的對象可以

19、是按鈕、影片剪輯、圖形、位圖、文字等，但不能使用線條，如果一定要用線條，要將線條轉化為填充。12）選擇菜單欄“插入”“新建元件”命令，新建一個影片剪輯，命名為閃光。 機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程13）在閃光元件編輯場景中，選擇“窗口” “庫”命令，打開“庫”面板，將庫中線條組合元件拖到閃光元件場景中，并使線條組合元件實例的中心點與閃光元件場景中心點“+”符號對齊。14）在閃光元件編輯模式下，選擇圖層1第30幀，單擊鼠標右鍵，從彈出的菜單中選擇【插入關鍵幀】命令，再用鼠

20、標右鍵單擊圖層1第1幀，在彈出的菜單中選擇【創(chuàng)建補間動畫】命令。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程15）選擇圖層1第1幀，在“屬性”面板，設置【旋轉】為【順時針】，旋轉1次。16）選擇圖層1的第1幀，選擇菜單欄“編輯”“復制”命令。17）單擊插入圖層按鈕，新建圖層2，選擇圖層2第1幀，選擇菜單欄“編輯” “粘貼到當前位置”命令，使兩圖層中的“閃光線條組合”實例完全重合。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出

21、版社Flash8 動畫設計實例教程動畫設計實例教程18）選擇圖層2第1幀，執(zhí)行菜單欄“修改” “變形” “水平翻轉”命令，讓復制過來的線條和圖層1中的線條方向相反，在場景中形成交叉的圖形。 19）選擇圖層2的第30幀，按F6鍵，插入關鍵幀，用鼠標右鍵單擊第1幀，選擇【創(chuàng)建補間動畫】命令，建立圖層2補間動畫。20）選擇圖層2第1幀，在“屬性”面板中，設置【旋轉】為逆時針，旋轉1周。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程21）用鼠標右鍵單擊圖層2名稱框，在彈出的快捷菜單中選擇【遮罩

22、層】命令，建立遮罩。22）選擇菜單欄“插入”“新建元件”命令，新建一個圖形元件，命名為“紅星”。23）在紅星元件編輯場景中，選擇工具箱中的線條工具按鈕，按住Shift鍵，從場景中心向上畫一根黃色的線條。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程24）選擇工具箱中的任意變形工具,在畫好的線條上單擊一下，線條的中心出現(xiàn)一個白色的小圓點，即“變形點” 。用鼠標左鍵按住變形點，拖到線條的最下端，這是因為我們要讓線條以下端為中心旋轉復制。25）執(zhí)行菜單欄“窗口”“設計面板”“變形”，打開【變

23、形】面板。單擊4次復制并應用變形按鈕，就會在場景中每隔72度復制出一條線條，五條線條的頂端構成五角星的五個頂點。機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程26）用綠色線條分別連接五條線條的頂端，用白色線條分別連接五角星中心和上一步連線的交叉點所示。27）選擇工具箱中的橡皮擦工具，選擇工具箱中“選項”下的水龍頭工具，在多余的線段上單擊一下，刪除線段，修整好的五角星。28）選擇工具箱中的填充色工具按鈕下方的小黑三角形，打開“調(diào)色器”面板，用拾色器拾取由紅到黑的放射狀漸變色。 機械工業(yè)出版社中等職業(yè)教育中等職業(yè)教育“十一五十一五”規(guī)劃教材規(guī)劃教材?電子商務專業(yè)電子商務專業(yè)機械工業(yè)出版社Flash8 動畫設計實例教程動畫設計實例教程29）選擇工具箱中顏料桶工具按鈕，給五角星填充顏色，再用“填充變形工具”按鈕，調(diào)整每個角的顏色范圍，使之略有區(qū)別，增加立體感。 30）選擇工具箱中的橡皮擦工具按鈕，單擊選項下的按鈕，從下拉列表中選擇“擦除線條”項，選擇后，會在