電子課件《Flash動畫設(shè)計與制作(第二版)》A063961項目五遮罩動畫制作

1、任務(wù) 3任務(wù) 1春暖花開任務(wù) 2放大鏡心為你動項目五遮罩動畫制作任務(wù) 4飛流直下遮罩動畫是 Flash 中重要的動畫類型，很多動畫特效都是通過遮罩來完成的。遮罩動畫和引導(dǎo)層動畫一樣，最少需要兩個圖層，透過遮罩層上對象的形狀來顯示被遮罩層中的內(nèi)容。遮罩動畫可以實現(xiàn)水波、卷軸、百葉窗、放大鏡等效果。任務(wù) 1春暖花開1. 理解遮罩動畫的概念和原理。2. 掌握被遮罩層運動的遮罩動畫的制作方法和技巧，能制作簡單的遮罩動畫。本任務(wù)是一個簡單的遮罩動畫實例，透過遮罩層上文字的形狀觀看被遮罩層中的圖片移動，效果如圖所示。通過本任務(wù)的學(xué)習(xí)，理解遮罩層和被遮罩層的概念，以及遮罩動畫的原理，掌握遮罩動畫的制作方法和

2、技巧。春暖花開效果圖一、遮罩動畫的概念在 Flash 作品中，經(jīng)常會看到一些炫目神奇的效果，其中很多就是用最簡單的“遮罩”完成的，如水波、百葉窗、放大鏡、卷軸等效果。遮罩動畫和引導(dǎo)層動畫一樣，最少需要兩個圖層，與普通圖層不同的是，遮罩動畫中只能通過遮罩層上對象的形狀來觀看被遮罩層中的內(nèi)容。二、遮罩層和被遮罩層（1）遮罩層：遮罩動畫中位于上方的圖層是遮罩層，一個遮罩動畫中只能有一個遮罩層。（2）被遮罩層：遮罩動畫中位于下方的圖層是被遮罩層。三、制作遮罩動畫的步驟（1）在“時間軸”面板中創(chuàng)建兩個普通圖層，在圖層中可以導(dǎo)入位圖、繪制對象或者制作動畫。（2）在位于上方的圖層上單擊鼠標(biāo)右鍵，從彈出的快捷

3、菜單中選擇“遮罩層”選項，創(chuàng)建遮罩動畫，如圖所示。此時，遮罩層的圖標(biāo)由 變?yōu)?，被遮罩層的圖標(biāo)變?yōu)?，被遮罩層自動縮進，“時間軸”面板中的效果如圖所示。創(chuàng)建遮罩動畫遮罩動畫的“時間軸”面板四、遮罩動畫的用途遮罩動畫有兩種用途：一種是用在整個場景或一個特定區(qū)域，使場景外的對象或特定區(qū)域外的對象不可見；另一種是用來遮罩某一元件的一部分，從而實現(xiàn)一些特殊的效果。1. 創(chuàng)建影片文檔新建一個 Flash 文檔，設(shè)置舞臺大小為 650 像素 200 像素，背景為白色。2. 創(chuàng)建“文字”圖層（1）將圖層 1 重命名為“文字”，選擇文本工具 ，設(shè)置字體為華文琥珀，字體大小為 150，字體顏色為黑色，輸入文字“

4、春暖花開”，如圖所示。輸入文字（2）打開“對齊”面板，選中“相對于舞臺”按鈕，依次單擊“對齊”選項中的“水平中齊”“垂直中齊”按鈕，使文字位于舞臺的中央。（3）在第 100 幀處插入幀，使文字圖層延續(xù)到第 100 幀。3. 創(chuàng)建“圖片”圖層（1）新建“圖片”圖形元件，將素材庫中名為“春暖花開 .jpg”的圖片導(dǎo)入到元件編輯區(qū)中，再復(fù)制兩張，使圖片按如圖所示位置擺放。導(dǎo)入圖片并復(fù)制兩張圖片（2）返回到場景中，新建圖層 2，重命名為“圖片”。將“圖片”圖層移動到“文字”圖層下方，選中“圖片”圖層的第 1 幀，將“庫”面板中的“圖片”元件拖動到舞臺中。（3）選中“圖片”元件，打開“對齊”面板，選中“

5、相對于舞臺”按鈕，再依次單擊“對齊”選項中的“右對齊”“垂直中齊”按鈕，調(diào)整第 1 幀的圖片位置，如圖所示。第 1 幀圖片對齊設(shè)置（4）在第 100 幀處插入關(guān)鍵幀，單擊“對齊”面板中的“左對齊”按鈕，調(diào)整第100 幀的圖片位置，如圖所示。（5）選擇“圖片”圖層的第 1 幀，在“屬性”面板中設(shè)置補間類型為動畫，建立第 1100 幀之間的補間動畫。第 100 幀圖片對齊設(shè)置4. 創(chuàng)建遮罩動畫選中“文字”圖層，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“遮罩層”選項，創(chuàng)建遮罩動畫?！皶r間軸”面板如圖所示，舞臺效果如圖所示。遮罩動畫的“時間軸”面板遮罩動畫舞臺效果操作演示5. 為文字添加邊框為使遮罩效果更

6、加美觀，可為舞臺中的文字添加修飾邊框，方法如下。（1）選擇“文字”圖層第 1 幀，單擊鼠標(biāo)右鍵，從快捷菜單中選擇“復(fù)制幀”選項。（2）新建圖層 3，在第 1 幀上單擊鼠標(biāo)右鍵，從快捷菜單中選擇“粘貼幀”選項，將“春暖花開”文字復(fù)制到圖層 3 的第 1 幀中。同時，圖層屬性也跟著復(fù)制過來，如圖所示。復(fù)制遮罩層（3）在復(fù)制的“文字”圖層上單擊鼠標(biāo)右鍵，從快捷菜單中選擇“屬性”選項，打開“圖層屬性”對話框，將名稱改為“邊框”，類型改為“一般”，如圖所示。修改圖層屬性（4）執(zhí)行【修改】【分離】命令兩次，將文字打散，如圖所示。打散文字（5）選擇墨水瓶工具 ，設(shè)置筆觸顏色為紅（#FF00000）、黃（#F

7、FFF00）、綠（#00FF00）三種顏色的線性漸變，并設(shè)置筆觸高度為 6，在文字的邊緣上單擊，添加漸變色邊框，如圖所示。（6）使用選擇工具 ，選擇文字的填充部分，按【Delete】鍵進行刪除，效果如圖所示。至此，“春暖花開”遮罩動畫制作完畢。給文字加邊框春暖花開最終效果6. 測試保存執(zhí)行【控制】【測試影片】命令，觀察動畫效果。如果滿意，執(zhí)行【文件】【保存】命令，將文件保存為“春暖花開 .f la”。任務(wù) 2放大鏡1. 熟悉遮罩動畫中可以使用的動畫類型。2. 掌握遮罩層運動的遮罩動畫的制作方法和技巧，能制作簡單的遮罩動畫。本任務(wù)是一個遮罩動畫實例，遮罩層中的鏡片在舞臺上移動，透過鏡片的形狀觀看

8、被遮罩層中放大后的文字，效果如圖所示。通過本任務(wù)的學(xué)習(xí)，進一步理解遮罩層和被遮罩層的概念、遮罩動畫的原理，熟悉遮罩動畫中的動畫類型，熟練掌握遮罩動畫的制作方法和技巧。放大鏡效果圖1. 創(chuàng)建影片文檔新建一個Flash文檔，設(shè)置舞臺大小為400像 素700 像素，背景為白色。2. 創(chuàng)建“背景”圖層（1）將圖層 1 重命名為“背景”，將素材庫中名為“放大鏡 .jpg”的圖片導(dǎo)入舞臺中。（2）選擇文本工具 ，在“屬性”面板中設(shè)置字體為黑體，字體大小為 50，字體顏色為 #990099，粗體，字體間距為 10，改變文本方向為垂直，在舞臺的左側(cè)輸入“注意坐姿保護視力”，效果如圖所示。（3）在第 50 幀處

9、插入幀，使“背景”圖層延續(xù)到 50 幀。輸入文字3. 創(chuàng)建“視力表”圖層（1）新建圖層，重命名為“視力表”，選擇文本工具 ，設(shè)置字體為 Arial，字體大小為 50，字體顏色為黑色，粗體，在舞臺的上方輸入大寫字母“E”，讓其作為視力表中的第一行字母。（2）制作視力表的第二行字母，重新設(shè)置字體大小為 40，保持其他選項不變，輸入大寫字母“E”，在“變形”面板中設(shè)置旋轉(zhuǎn)角度為 -90.0 度，按【Enter】鍵確認(rèn)。復(fù)制此文字，在“變形”面板中設(shè)置旋轉(zhuǎn)角度為 180.0 度，按【Enter】鍵，調(diào)整字母的位置，效果如圖所示。輸入視力表中的字母（3）仿照步驟（2）的方法分別制作視力表的第三行字母和第

10、四行字母。其中，第三行字母的字體大小為 30，第四行字母的字體大小為 20。視力表效果如圖所示。（4）在第 50 幀處插入幀，使“視力表”圖層延續(xù)到 50 幀。視力表4. 創(chuàng)建“大視力表”圖層（1）新建圖層，重命名為“大視力表”。選擇文本工具 ，設(shè)置字體為 Arial，字體大小為 150，字體顏色為黑色，粗體，輸入大寫字母“E”。使字母“E”與“視力表”圖層中的第一行字母“E”相對應(yīng)，效果如圖所示。大小字母對照（2）仿照步驟 3 中（2）（3）的方法，制作“大視力表”圖層中的其余字母。其中，第二行字母的字體大小為 130，第三行字母的字體大小為 100，第四行字母的字體大小為 80。調(diào)整字母的

11、位置，大視力表效果如圖所示。（3）在第 50 幀處插入幀，使“大視力表”圖層延續(xù)到50 幀。大視力表5. 繪制“卡通放大鏡”元件（1）新建“卡通放大鏡”圖形元件，在圖層 1 中繪制放大鏡的手柄。選擇矩形工具 ，設(shè)置筆觸顏色為無，填充色為 #993300，繪制矩形，調(diào)整矩形形狀如圖所示。繪制手柄（2）新建圖層 2，繪制放大鏡的鏡頭。選擇橢圓工具 ，設(shè)置筆觸顏色為 #000000，筆觸高度為 5，填充類型為放射狀，兩個顏色滑塊從左到右分別為 #FFFFFF 和 #78C9FE，繪制一個寬和高均為 150 的正圓，“屬性”面板如圖所示。調(diào)整鏡頭的位置，組合成卡通放大鏡，效果如圖所示。在“屬性”面板中

12、設(shè)置對象的大小卡通放大鏡6. 將卡通放大鏡拖進舞臺返回到場景中，在“視力表”圖層的上方新建圖層，重命名為“放大鏡”。將“庫”面板中的“卡通放大鏡”元件拖動到舞臺中擺放好，效果如圖所示。場景中的卡通放大鏡7. 制作鏡片運動效果（1）在“大視力表”圖層的上方新建圖層，重命名為“鏡片”。選擇橢圓工具 ，設(shè)置筆觸顏色為無，填充顏色為 #0000FF，繪制一個比“卡通放大鏡”元件中鏡頭略小的正圓，效果如圖所示。繪制鏡片（2）分別在“鏡片”圖層的第 10 幀、第 20 幀、第 25 幀、第 35 幀、第 40 幀和第50 幀插入關(guān)鍵幀，調(diào)整好每一個關(guān)鍵幀中鏡片的位置，效果如圖所示。鏡片在各個關(guān)鍵幀中的位置

13、（3）在“鏡片”圖層的每兩個關(guān)鍵幀之間創(chuàng)建形狀補間動畫。（4）選中“鏡片”圖層，單擊鼠標(biāo)右鍵，從快捷菜單中選擇“遮罩層”選項，“時間軸”面板效果如圖所示。遮罩動畫的“時間軸”面板操作演示8. 制作放大鏡運動效果（1）分別在“放大鏡”圖層的第 10 幀、第 20 幀、第 25 幀、第 35 幀、第 40 幀和第 50 幀插入關(guān)鍵幀，調(diào)整每一個關(guān)鍵幀中放大鏡的位置與“鏡片”圖層中的鏡片位置一致，效果如圖所示。卡通放大鏡在各個關(guān)鍵幀中的位置（2）在“放大鏡”圖層的每兩個關(guān)鍵幀之間創(chuàng)建動畫補間動畫，“時間軸”面板效果如圖所示。 放大鏡動畫的“時間軸”面板9. 測試保存執(zhí)行【控制】【測試影片】命令，觀察

14、動畫效果。如果滿意，執(zhí)行【文件】【保存】命令，將文件保存為“放大鏡 .f la”。任務(wù) 3心為你動1. 進一步熟悉遮罩動畫的基本原理。2. 掌握遮罩層和被遮罩層同時運動的遮罩動畫的制作方法和技巧，能熟練制作遮罩動畫。本任務(wù)制作一個基本的遮罩動畫，動畫中給兩個反向旋轉(zhuǎn)的線條組合制作遮罩，形成閃動的效果，如圖所示。通過本任務(wù)的學(xué)習(xí)，進一步理解遮罩動畫的基本原理，熟練掌握遮罩動畫的制作方法和技巧。心為你動效果圖遮罩動畫一般有以下三種基本形式。（1）遮罩層是靜止的，被遮罩層在運動。（2）遮罩層在運動，被遮罩層是靜止的。（3）遮罩層和被遮罩層都在運動。1. 創(chuàng)建影片文檔新建一個 Flash 文檔，設(shè)置舞

15、臺大小為 550 像素 400 像素，背景為黑色（#000000）。2. 繪制“線條”元件（1）新建“線條”圖形元件，選擇矩形工具 ，設(shè)置筆觸顏色為無，填充顏色為紅色（#FF0000），在舞臺中繪制一條水平直線。使用選擇工具 選中直線，在“屬性”面板中修改大?。簩挒?300，高為 4，再修改位置：X為 -20，Y為 -20，如圖所示。設(shè)置直線屬性（2）使用任意變形工具 選中直線，將直線中心點移到元件編輯區(qū)中心點的十字型標(biāo)記上，如圖所示。移動直線中心點（3）打開“變形”面板，設(shè)置旋轉(zhuǎn)角度為 10.0 度，單擊“復(fù)制并應(yīng)用變形”按鈕 35 次，復(fù)制出如圖所示的線條組合。線條組合3. 制作遮罩效果（

16、1）新建“遮罩”影片剪輯元件，選擇圖層 1 的第 1 幀，從“庫”面板中將“線條”元件拖動到元件編輯區(qū)。打開“對齊”面板，使用“水平中齊”“垂直中齊”按鈕將元件調(diào)整到元件編輯區(qū)中央。（2）在第 30 幀插入關(guān)鍵幀。選擇圖層 1 的第 1 幀，在“屬性”面板中設(shè)置補間類型為動畫，旋轉(zhuǎn)為順時針1 次。（3）新建圖層 2，選擇第 1 幀，從“庫”面板中再次將“線條”元件拖動到元件編輯區(qū)，并放置在元件編輯區(qū)的中央，使兩個圖層中的圖形完全重合，然后執(zhí)行【修改】【變形】【水平翻轉(zhuǎn)】命令，效果如圖所示。圖層 2 中的線條組合（4）在第 30 幀插入關(guān)鍵幀。選擇圖層 2 的第 1 幀，在“屬性”面板中設(shè)置補間

17、類型為動畫，旋轉(zhuǎn)為逆時針 1 次。（5）選擇圖層 2，單擊鼠標(biāo)右鍵，從快捷菜單中選擇“遮罩層”選項，遮罩效果制作完畢，如圖所示。遮罩效果4. 制作“心動”影片剪輯元件（1）新建圖形元件“心”，繪制如圖所示心形。繪制心形（2）新建“心 動” 影片剪輯元件， 從“庫” 面板中將“心”元件拖動到元件編輯區(qū)中心，在第 10 幀和第 13 幀處分別插入關(guān)鍵幀。選中第 10 幀的心形，執(zhí)行【修改】【變形】【縮放和旋轉(zhuǎn)】命令，在“縮放和旋轉(zhuǎn)”對話框中設(shè)置“縮放”值為 130%，單擊“確定”按鈕，使心形放大。選中第 13 幀的心形，在“縮放和旋轉(zhuǎn)”對話框中設(shè)置“縮放”值為 160%，放大心形。選擇第 10 幀

18、，將第 10 幀的內(nèi)容復(fù)制到第 15 幀中。選擇第 1 幀，將第 1 幀的內(nèi)容復(fù)制到第 25 幀中。（3）在“時間軸”面板中單擊圖層 1，圖層 1 中的所有幀被選中，在“屬性”面板中設(shè)置補間類型為動畫，“心動”影片剪輯元件制作完畢，“時間軸”面板如圖所示。“心動”影片剪輯元件的“時間軸”面板5. 將元件拖進舞臺（1）返回場景中，將圖層 1 重命名為“遮罩”，從“庫”面板中將“遮罩”元件拖動到舞臺中央。（2）新建圖層 2，重命名為“心動”，從“庫”面板中將“心動”元件拖動到舞臺中央。6. 輸入文字新建圖層 3，重命名為“文字”，設(shè)置字體大小為 40，字體為華文琥珀，顏色為紅色（#FF0000），

19、在舞臺底部輸入“心為你動”。至此，“心為你動”遮罩動畫制作完畢，效果如圖所示。心為你動最終效果圖7. 測試保存執(zhí)行【控制】【測試影片】命令，觀察動畫效果。如果滿意，執(zhí)行【文件】【保存】命令，將文件保存為“心為你動 .f la”。任務(wù) 4 飛流直下1. 掌握多層遮罩動畫相疊加的制作方法和技巧，能熟練制作多層遮罩動畫。2. 掌握調(diào)整遮罩層形狀與被遮罩物體之間關(guān)系的方法。本任務(wù)制作一個綜合的遮罩動畫，動畫中將瀑布和溪水分成兩部分，分別添加了遮罩動畫，生成水流動的動畫效果，再加上鴨子們在水上游動，組成“潺潺流水，鴨游溪上”的美好畫面，如圖所示。通過本任務(wù)的學(xué)習(xí)，進一步熟練掌握遮罩動畫的制作方法和技巧，

20、以及與其他形式動畫相融合的制作方法。 飛流直下效果圖在較為復(fù)雜的動畫實例中，遮罩動畫可與其他形式的動畫相結(jié)合使用，只要熟練掌握各種動畫的制作方法，再結(jié)合元件操作和圖層操作就可以制作出各種形象生動的動畫作品。應(yīng)用遮罩動畫要注意，并非所有的可顯示對象都可以在遮罩層中產(chǎn)生孔，并使被遮罩層中的對象透過來。1. 創(chuàng)建影片文檔新建一個 Flash 文檔，設(shè)置舞臺大小為 550 像素 400 像素，背景為白色。2. 導(dǎo)入背景（1）選中圖層 1，重命名為“背景”，在第 1 幀處將素材庫中名為“瀑布背景 .jpg”的圖片導(dǎo)入舞臺中，如圖所示。（2）在第 90 幀處，單擊鼠標(biāo)右鍵選擇“插入幀”選項。導(dǎo)入背景圖片3

21、. 制作被遮罩區(qū)域（1）選中“背景”圖層第 1 幀，按【Ctrl+C】組合鍵復(fù)制，新建圖層 2，選擇第 1幀，按【Ctrl+Shift+V】組合鍵在當(dāng)前位置粘貼“瀑布背景 .jpg”圖片，鎖定“背景”圖層。（2）選中圖層 2 的“瀑布背景 .jpg”圖片，執(zhí)行【修改】【位圖】【轉(zhuǎn)換位圖為矢量圖】命令，在彈出的對話框中設(shè)置顏色閾值為 40，最小區(qū)域為 2 像素，曲線擬合為像素，角閾值為較多轉(zhuǎn)角，如圖所示，單擊“確定”按鈕后，“瀑布背景 .jpg”就轉(zhuǎn)換為矢量圖。“轉(zhuǎn)換位圖為矢量圖”對話框（3）使用橡皮擦工具 將瀑布和溪水以外的部分擦除掉，如圖所示。（4）新建圖層 3，復(fù)制圖層 2 的第 1 幀，

22、粘貼到圖層 3 的第 1 幀。將圖層 2 重命名為“溪水”，將圖層 3 重命名為“瀑布”。擦除瀑布和溪水以外的部分（5）使用橡皮擦工具 ，擦除“溪水”圖層中的瀑布部分，如圖所示，擦除“瀑布”圖層中的溪水部分，如圖所示?！捌俨肌眻D層“溪水”圖層4. 制作溪水遮罩動畫（1）新建圖層 4，重命名為“溪水遮罩”。選擇線條工具 ，設(shè)置筆觸顏色為紅色，筆觸高度為 8，繪制一條直線，使用選擇工具 將其調(diào)整成曲線，效果如圖所示。繪制曲線（2）選中曲線，按下【Alt】鍵的同時向右拖動鼠標(biāo)，復(fù)制多條曲線，并保持每條曲線相隔一定距離且不相交，效果如圖所示。復(fù)制曲線（3）選中所有曲線，分別單擊“對齊”面板中“對齊”項

23、的“垂直中齊”按鈕、“間隔”項的“水平平均間隔”按鈕，使每條曲線之間相距的距離一致，效果如圖所示。對齊曲線（4）選中所有曲線，執(zhí)行【修改】【形狀】【將線條轉(zhuǎn)換為填充】命令，使曲線變成具有遮罩作用的圖形。（5）選中第 90 幀，單擊鼠標(biāo)右鍵插入關(guān)鍵幀，向左拖動遮罩條，效果如圖所示。左拖動遮罩條（6）選中第 190 幀之間任意一幀，添加形狀補間動畫。（7）調(diào)整圖層順序，使“溪水遮罩”圖層在“溪水”圖層上方，單擊鼠標(biāo)右鍵選中“遮罩層”生成遮罩動畫，按【Enter】鍵播放動畫，可以看到溪水向左方流動，如圖所示。如果效果不明顯可以選擇“溪水”圖層第 1 幀，選中選擇工具 ，按動鍵盤上的【】鍵若干下，使被

24、遮罩內(nèi)容與背景層內(nèi)容有錯位，效果就更加明顯了。（8）鎖定并隱藏“溪水遮罩”圖層和“溪水”圖層。溪水遮罩動畫5. 制作瀑布遮罩動畫（1）新建圖層 5，重命名為“瀑布遮罩”。選擇線條工具 ，設(shè)置筆觸顏色為粉色，筆觸高度為 8，繪制一條直線，使用選擇工具 將其調(diào)整成曲線，效果如圖所示。 繪制曲線（2）選中曲線，按住【Alt】鍵的同時向上拖動鼠標(biāo)，復(fù)制多條曲線，并保持每條曲線相隔一定距離且不相交，效果如圖所示。 復(fù)制曲線（3）選中所有曲線，分別單擊“對齊”面板中“對齊”項的“水平中齊”按鈕、“間隔”項的“垂直平均間隔”按鈕，使每條曲線之間相距的距離一致，并用任意變形工具 調(diào)整曲線組方向，使之與瀑布水流

25、方向一致，效果如圖所示。對齊曲線（4）選中所有曲線，執(zhí)行【修改】【形狀】【將線條轉(zhuǎn)換為填充】命令，使曲線變成具有遮罩作用的圖形。（5）選中第 90 幀，單擊鼠標(biāo)右鍵插入關(guān)鍵幀，向下拖動遮罩條，效果如圖所示。向下拖動遮罩條（6）選中第 190 幀之間任意一幀，添加形狀補間動畫。（7）調(diào)整圖層順序，使“瀑布遮罩”圖層在“瀑布”圖層上方，單擊鼠標(biāo)右鍵選中“遮罩層”生成遮罩動畫，按【Enter】鍵播放動畫，可以看到瀑布向下方流動，如圖所示。如果效果不明顯可以選擇“瀑布”圖層第 1 幀，選中選擇工具 ，按動鍵盤上的【】鍵若干下，使被遮罩內(nèi)容與背景層內(nèi)容有錯位，效果就更加明顯了。（8）鎖定并隱藏“瀑布遮罩”圖層和“瀑布”圖層。瀑布遮罩動畫6. 制作鴨子動畫（1）打開“飛流直下庫 .f la”文檔，將“庫”面板中的“鴨媽媽”“小鴨子”圖形元件復(fù)制到本文檔“庫”面板中。（2）新建圖層 6，重命名為“鴨媽媽”， 選 中 第 1 幀，