?

遮罩動畫（1） ??

?

在 Flash的作品中，我們常常看到很多眩目神奇的效果，而 其中不少就是用最簡單的“遮罩”完成的，如水波、萬花筒、百頁窗、放大鏡、望遠鏡……等等。

?

那么，“遮罩”如何能產生這些效果呢？

在本節，我們除了給大家介紹“遮罩”的基本知識，還結合我們的實際經驗介紹一些“遮罩”的應用技巧， 最后，提供二個很實用的范例，以加深對“遮罩”原理的理解。

1 ．遮罩動 畫的概念

（ 1）什么是遮罩

?

遮罩動畫是 Flash中的一個很重要的動畫類型，很多效果豐 富的動畫都是通過遮罩動畫來完成的。在Flash的圖層中有一個遮罩圖層類型，為了得到特殊的顯示效果，可以在遮罩層上創建一個任意形狀的“視窗”，遮罩 層下方的對象可以通過該“視窗”顯示出來，而“視窗”之外的對象將不會顯示。

?

（ 2）遮罩有什么用

?

在 Flash動畫中，“遮罩”主要有2種用途，一個作用是用 在整個場景或一個特定區域，使場景外的對象或特定區域外的對象不可見，另一個作用是用來遮罩住某一元件的一部分，從而實現一些特殊的效果。

?

2 ．創建遮 罩的方法

（ 1）創建遮罩

?

在 Flash中沒有一個專門的按鈕來創建遮罩層，遮罩層其實 是由普通圖層轉化的。你只要在某個圖層上單擊右鍵，在彈出菜單中選擇【遮罩層】，使命令的左邊出現一個小勾，該圖層就會生成遮罩層，“層圖標”就會從普通 層圖標 變為遮罩層圖標 ，系統會自動把遮罩層下面的一層關聯為“被遮罩層”，在縮進的同時圖標變為 ，如果你想關聯更多層被遮罩，只要把這些層拖到被遮罩層下面就行了，如圖3-5-1所示。

?

圖 3-5-1 多層遮罩動畫

?

（ 2 ）構成遮罩和被遮罩層的元素

?

遮罩層中的圖形對象在播放時是看不到的， 遮罩層中的內容可以是按鈕、影片剪輯、圖形、位圖、文字等，但不能使用線條，如果一定要用線條，可以將線條轉化為“填充”。

?

被遮罩層中的對象只能透過遮罩層中的對象被看到。 在被遮罩層，可以使用按鈕，影片剪輯，圖形，位圖，文字，線條。

?

（ 3 ）遮罩中可以使用的動畫形式

?

可以在遮罩層、被遮罩層中分別或同時使用形狀補間動畫、動作補間動畫、引導線動畫等動畫手段，從而使 遮罩動畫變成一個可以施展無限想象力的創作空間。

?

3 ．應用遮 罩時的技巧

?

l ???????? 遮罩層的基本原理是：能夠透過該圖層中的對象看 到“被遮罩層”中的對象及其屬性（包括它們的變形效果），但是遮罩層中的對象中的許多屬性如漸變色、透明度、顏色和線條樣式等卻是被忽略的。比如，我們不 能通過遮罩層的漸變色來實現被遮罩層的漸變色變化。

?

l ???????? 要在場景中顯示遮罩效果，可以鎖定遮罩層和被遮 罩層。

?

l ???????? 可以用“ Actions ”動作語句建立遮罩，但這種情況下只能有一個“被 遮罩層”，同時，不能設置 _Alpha 屬性。

?

l ???????? 不能用一個遮罩層試圖遮蔽另一個遮罩層。

?

l ???????? 遮罩可以應用在 gif 動畫上。

?

l ???????? 在制作過程中，遮罩層經常擋住下層的元件，影響視 線，無法編輯，可以按下遮罩層時間軸面板的顯示圖層輪廓按鈕 ，使之變成 ，使遮罩層只顯示邊框形狀，在種情況下，你還可以拖動邊框調整遮罩圖形的外形和位置。

?

l ???????? 在被遮罩層中不能放置動態文本。或許你讀了上面的描述，還有點模糊，那么，通過一些范例，相信你會感受到遮罩動畫的神奇！

?

4 ．實例 1 ——紅星閃閃

?

實例簡介

?

你一定還記得，以前“八一電影制片廠”的片頭總有個紅五星加動態光芒的效果，如圖 3-5-2 所示。

本范例就是用遮罩來模仿這種效果 。

?

圖 3-5-2 紅星閃閃

?

遮罩動畫(2)

?

知識提要

?

l ???????? 將線條轉化為填充

l ???????? 創建遮罩動畫

l ???????? 使用變形面板

l ???????? 學習使用【橡皮擦工具】中的“水籠頭”工具和擦除線條

?

制作步驟

?

（ 1 ）創建影片文檔

?

?步驟1設置影片文檔屬性

?

執行 【文件】 |【新建】命令，在彈出的面板中選擇【常規】|【Flash文檔】選項后，單擊【確定】按 鈕，新建一個影片文檔，在【屬性】面板上設置文件大小為400×400像素，【背景色】為黑色（在教程中，我們為了更好地顯示場景中的內容，設置背景色 為#003333），如圖3-5-3所示。

?

圖 3-5-3 文檔【屬性】面板

?

步驟 2 設置背景圖層

?

選擇工具箱中的【矩形工具】，在場景中繪制出一個 400×400 像素的無邊正方形，用【放射狀】漸變色進行填充，如圖3-5-4所示。 ?

?

圖 3-5-4 無邊矩形及混色器設置

?

（ 2 ）創建元件

?

步驟 1 創建“閃光線條”元件，執行【插入】|【新建元件】命令，新建一個圖形元件，名稱為“閃光線條”。選擇工具箱中的【線條工具】 ，設置【筆觸顏色】為黃色，在場景中畫一條直線，具體參數設置如圖3-5-5所示。

?

圖 3-5-5 閃光線條的【屬性】面板參數設置

?

步驟 2 創建“閃光線條組合”元件

?

執行【插入】 |【新建元件】命令，新建一個圖形元件，名稱為 “閃光線條組合”，如圖3-5-6所示。

?

圖 3-5-6 創建閃光線條元件

?

從庫中將名為“閃光線條”的元件拖入新元件編輯場景中，在【屬性】面板 中，設置【 X】為-200，【Y】為20。單擊工具箱中的【任意變形工具】 ，此時元件實例的中心會出現一個小白點，它就是對象的“變形點”，用鼠標左鍵按住它，拖到場景的中心 “+”處松手。

?

圖 3-5-7中顯示的是“變形 點”在元件中心時的狀態，和“變形點”已拖到場景中心時的狀態。

?

圖 3-5-7 變形點所處的不同位置

?

遮罩 動畫(3)

執行【窗口】 |【設計面板】|【變 形】命令，打開【變形】面板，選中【旋轉】，角度為15度，連續單擊【復制并應用變形】按鈕 ，在場景中復制出的效果如圖3-5-8所示。

?

圖 3-5-8 【變形】面板及復制完后的效果

?

前面已經提到了，遮罩層中的內容可以是按鈕、影 片剪輯、圖形、位圖、文字等，但不能使用線條，如果一定要用線條，可以將線條轉化為“填充” ，所以我們應該將線條轉換為填充形狀。在時間軸的關鍵幀上單擊一下，選中全部圖形，執行【修改】 |【分離】命令，把線條打散，再執行【修改】|【形狀】|【將線條轉化為填充】命令，將線條轉變為形狀。

?

步驟 3 創建“閃光”元件

?

執行【插入】 |【新建元件】命 令，新建一個影片剪輯，名稱為“閃光”，如圖3-5-9所示。

?

圖 3-5-9 創建“閃光”元件

?

單擊【確定】后進入新元件編輯場景，接著把庫里名為“閃光線條組合”的元 件拖到場景中，使元件實例的中心點對齊場景中的“ +”符號。在第30幀處加關鍵幀，用鼠標右鍵單擊第1幀，在彈出 的菜單中選擇【創建補間動畫】，切換到【屬性】面板，設置【旋轉】為【順時針】，旋轉一周。

?

新增一個圖層，選中第 1幀，執行 【編輯】|【粘貼到當前位置】命令，使兩圖層中的“閃光線條組合”實例完全重合，執行【修改】|【變形】|【水平翻轉】命令，讓復制過來的線條和第一層中 的線條方向相反，在場景中形成交叉的圖形。

?

選中第 30幀，按F6鍵，新增一 個關鍵幀，用鼠標右鍵單擊第1幀，選擇【創建補間動畫】，建立動作補間動畫，在【屬性】面板中，設置【旋轉】為逆時針旋轉一周，最后將此層設為遮罩層，用 鼠標右鍵單擊靠上的圖層，選擇【遮罩層】，如圖3-5-10所示。圖中顯示的是“閃光”元件的時間軸面板和各圖層中的動畫設置。

?

（ a） 創建遮罩后的【時間軸】面板

?

(b) 被遮罩層中的圖形

?

（ c）遮罩圖層中的圖形

?

（ d）兩個圖層重合后的效果

?

圖 3-5-10“閃光”元件編輯界面

遮罩動畫(4)

步驟 4 創建“紅星”元件, 執行【插入】 |【新建元件】命令，新建一個圖形元件，名稱 為“紅星”。我們要在這個元件中畫一個漂亮的紅星，為了畫好紅星，我們分九步來敘述具體的畫法，圖3-5-11中的“1-9”的數字表示這九個步驟。

?

圖 3-5-11 紅星的九步畫法

?

第一步，按住 Shift鍵，從場景中心向上畫一根黃色的線 條，如圖3-5-11中的“1”所示。

?

第二步，選擇工具箱中的【任意變形工具】 ,在畫好的線條上單擊一下，這里，線條的中心出現一個白色的小圓點，我們叫它“變形點”，如圖 3-5-11中的“2”所示。

?

第三步，用鼠標左鍵按住變形點，拖到線條的最下端，這是因為我們要讓線條以下端為中心旋轉復制，如 圖 3-5-11中的“3”所示。

?

第四步，執行【窗口】 |【設計面板】|【變形】，打開【變 形】面板，各參數設置如圖3-5-12。

?

按下【復制并應用變形】按鈕 四次，就會在場景中每隔72度復制出一條線條，五條線條的頂端構成五角星的五個頂點，如圖3-5-11 中的“4”所示。

?

圖 3-5-12 【變形】面板

?

第五步，用綠色線條分別連接五條線條的頂端，五角星的模樣已經出來了，如 圖 3-5-11中的“5”所示。

?

第六步，用白色線條分別連接五角星中心和上一步連線的交叉點，如圖 3-5-11中的“6”所示。

?

第七步，選擇工具箱中的【橡皮擦工具】 ，在工具箱下面的【選項】中選擇【水龍頭】工具 ，在多余的線段上單擊一下，按Delete鍵，刪除線段，修整好的五角星如圖3-5-11中的“7”所 示。

?

第八步，選擇工具欄上的【填充色】，在打開的【調色器】面板中，用【拾色器】拾取由紅到黑的放射狀 漸變色，從左到右兩個填充色塊的顏色值分別為： #FF0000、#000000，如圖3-5-13所示。

?

圖 3-5-13 設置五角星的填充顏色 ?

?

用【顏料桶工具】給五角星上色，再用【填充變形工具】調整每個角的顏色范圍，使之略有區別，增加立 體感，如圖 3-5-11中的“8”所示。

?

第九步，再選擇【橡皮擦工具】 ，單擊【選項】下的 按鈕，選擇【擦除線條】項（選擇后，會在“擦除線條”的左邊出現一個小勾），如圖3-5-14所示。 ?

?

圖 3-5-14 擦除線條

?

用【橡皮擦工具】擦去紅星上的線條，一顆漂亮的紅星就繪制出來了，如圖 3-2-11中的“9”所示。

?

技巧：在 Flash MX 2004中，還可以用更簡單的方法繪制出紅星，單擊工具箱中【矩形工具】按鈕 下方的小黑三角形，在下拉菜單中選擇【多角星形工具】 。

?

在【屬性】面板上設置，單擊 按鈕，彈出【工具設置】對話框，參數設置 如圖 3-5-15所示。 ?

?

圖 3-5-15 多角星形工具選項設置面板-

?

設置完后，單擊【確定】按鈕，在場景中拖動鼠標，就會畫出一 個五角星的形狀來。

?

（ 3）創建動畫

?

回到主場景 1中，新增三個圖層，把“閃光”元件拖入第二層 中，“紅星”元件拖入到第三層中，在場景的下方輸入白色的“閃客啟航電影制片廠”文字，把聲音拖入到第四層中，完成后的時間軸面板與場景如圖3-5-16 所示。

?

?

圖 3-5-16 時間軸及場景

?

遮罩動畫(5)

?

按快捷鍵 Ctrl+Enter快捷鍵，測試動畫。此時，你欣 賞著自己親手做的“閃閃紅星”動畫，心中再回想一下“遮罩”在動畫中的作用，是否已經感受到“遮罩”這一功能的神奇？

?

?

好吧，趁著興致正濃，我們再用遮罩來做一個文字效果。

5. 實例 2 ——要學做閃客

?

實例簡介

?

“嗖”，伴著這聲音，一道白光迅速掠過一排文字，這是我們經常在廣告和電視中看到的效果，如圖 3-5-18 所示。

你想不想知道它們是怎么制作出來的呢？其實很簡單，利用前面學過的知識就可輕易地做出這個效果，下 面，讓我們動手試一試。

?

圖 3-5-18 本例運行效果

?

知識要點

● ? 字體的二次打散

● ? 將字體轉為形狀

● ? 創建遮罩動畫

?

（ 1 ）創建影片文檔

?

執行 【文件】 |【新建】命令，在彈出的對話框中選擇【常規】| 【Flash文檔】選項后，單擊【確定】按鈕，新建一個影片文檔，在【屬性】面板上設置文件大小為550×400像素，【背景色】為黑色（在教程中，我們 為了更好地顯示場景中的內容，背景色設為了深綠色）,如圖3-5-19所示。

?

圖 3-5-19 文檔屬性 ?

?

（ 2 ）創建元件

步驟 1 創建“我要學做閃客”元件 ， 執行【插入】 |【新建元件】命令，新建一個圖形元件，名稱 為“我要學做閃客”。單擊工具箱中的【文字工具】 ，在場景中輸入“我要學做閃客”六個字，在【屬性】面板中，設置文字參數如圖3-5-20所示。

?

圖 3-5-20 “我要學做閃客”文字

?

選中字體，執行【修改】 |【分離】命令二次，把字體打散，再 選擇【顏料桶工具】，把字體中心填充成紅色。各個步驟的文字效果如圖3-5-21所示。

?

?

圖 3-5-21 文字效果

?

遮罩動畫(6)

?

步驟 2 創建“輝光”元件

?

執行【插入】 | 【新建元件】命令，新建一個圖形元件，名稱為“輝光”。執行【窗口】 | 【設計面板】 | 【混色器】命令，打開【混色器】面板，設置 【填充樣式】為線性，將三個色標全部設置為白色，第一和第三個的【 Alpha 】值為零，中間的為 74% （你可按需設置），設置完后，在場景 中畫一個無邊矩形，大小為 40 × 230 ，如圖 3-5-22 所示。

?

圖 3-5-22 【混色器】面板和圖形

?

（ 4）創建動畫

?

單擊時間軸右上角的【場景 1】按鈕，切換到主場景。

?

本例的主場景 1中共有四個圖層，我們從下向上一層一層的做， 可參看圖3-5-25所示。

步驟 1 創建【底層文字】層

?

將【圖層 1】重新命名為【底層文字】。

?

從庫里把“我要學做閃客”的元件拖到場景中，在第 60幀處添 加普通幀，這一層起顯示文字的作用。

?

步驟 2 創建被遮罩層

?

新建一個【輝光】圖層，從庫里把“輝光”元件拖到場景中，放在“我要學做閃客”元件實例的左邊。選擇 工具欄上的【任意變形工具】，單擊【選項】中的【旋轉與傾斜】按鈕，將鼠標放在“輝光”元件實例的任意一個角，拖動鼠標旋轉一定有角度，使“輝光”元件實 例產生一定的傾斜度。在第 30、60幀處添加關鍵幀，在第30幀處把“輝光”元件實例拖到“我要學做閃客”元件實 例的右邊，在第1幀和第30幀處建立動作補間動畫，如圖3-5-23所示。 ?

?

圖 3-5-23 “輝光”元件在場景中的位置

?

步驟 3 創建遮罩層

?

新建一個【遮罩層】圖層，復制【底層文字】層的第一幀中的元件實例，選擇【遮罩層】的第 1幀，執行【編輯】|【粘貼到當前位置】命令，用鼠標右鍵單擊【遮罩層】，選擇【遮罩層】，設置此層為遮罩層，這一層的作用是 用字體做遮罩元素，用它來控制輝光在場景中出現的大小和位置。

?

至此，我們就已經創建好了“我要學做閃客”這個動畫，時間軸面板如圖 3-5-25所示。

?

圖 3-5-25 時間軸面板上的圖層

?

?

?

課堂練習：

利用素材制作水波紋

利用素材制作圖片切換的遮罩效果：

?

?

制作關鍵步驟：
1.新建一個圖形元件，制作出一個遮罩所需要的圖形。
2.利用圖形原件，用動作補間動畫制作出一個簡單的電影剪輯A。
3.將多個電影A排列在一起，組合成電影剪輯B。
4.將電影剪輯B做遮罩層、人物圖片做被遮罩層，建立電影剪輯C。
5.將電影剪輯C放置在舞臺上，如果有多個遮罩動畫，調整時間軸，已達到最佳效果。

?

?

?

?

?

?

?

?

?

?

?

?

遮罩動畫