?

遮罩動(dòng)畫（1） ??

?

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

?

那么，“遮罩”如何能產(chǎn)生這些效果呢？

在本節(jié)，我們除了給大家介紹“遮罩”的基本知識(shí)，還結(jié)合我們的實(shí)際經(jīng)驗(yàn)介紹一些“遮罩”的應(yīng)用技巧， 最后，提供二個(gè)很實(shí)用的范例，以加深對(duì)“遮罩”原理的理解。

1 ．遮罩動(dòng) 畫的概念

（ 1）什么是遮罩

?

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

?

（ 2）遮罩有什么用

?

在 Flash動(dòng)畫中，“遮罩”主要有2種用途，一個(gè)作用是用 在整個(gè)場(chǎng)景或一個(gè)特定區(qū)域，使場(chǎng)景外的對(duì)象或特定區(qū)域外的對(duì)象不可見，另一個(gè)作用是用來遮罩住某一元件的一部分，從而實(shí)現(xiàn)一些特殊的效果。

?

2 ．創(chuàng)建遮 罩的方法

（ 1）創(chuàng)建遮罩

?

在 Flash中沒有一個(gè)專門的按鈕來創(chuàng)建遮罩層，遮罩層其實(shí) 是由普通圖層轉(zhuǎn)化的。你只要在某個(gè)圖層上單擊右鍵，在彈出菜單中選擇【遮罩層】，使命令的左邊出現(xiàn)一個(gè)小勾，該圖層就會(huì)生成遮罩層，“層圖標(biāo)”就會(huì)從普通 層圖標(biāo) 變?yōu)檎谡謱訄D標(biāo) ，系統(tǒng)會(huì)自動(dòng)把遮罩層下面的一層關(guān)聯(lián)為“被遮罩層”，在縮進(jìn)的同時(shí)圖標(biāo)變?yōu)?，如果你想關(guān)聯(lián)更多層被遮罩，只要把這些層拖到被遮罩層下面就行了，如圖3-5-1所示。

?

圖 3-5-1 多層遮罩動(dòng)畫

?

（ 2 ）構(gòu)成遮罩和被遮罩層的元素

?

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

?

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

?

（ 3 ）遮罩中可以使用的動(dòng)畫形式

?

可以在遮罩層、被遮罩層中分別或同時(shí)使用形狀補(bǔ)間動(dòng)畫、動(dòng)作補(bǔ)間動(dòng)畫、引導(dǎo)線動(dòng)畫等動(dòng)畫手段，從而使 遮罩動(dòng)畫變成一個(gè)可以施展無限想象力的創(chuàng)作空間。

?

3 ．應(yīng)用遮 罩時(shí)的技巧

?

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

?

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

?

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

?

l ???????? 不能用一個(gè)遮罩層試圖遮蔽另一個(gè)遮罩層。

?

l ???????? 遮罩可以應(yīng)用在 gif 動(dòng)畫上。

?

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

?

l ???????? 在被遮罩層中不能放置動(dòng)態(tài)文本。或許你讀了上面的描述，還有點(diǎn)模糊，那么，通過一些范例，相信你會(huì)感受到遮罩動(dòng)畫的神奇！

?

4 ．實(shí)例 1 ——紅星閃閃

?

實(shí)例簡介

?

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

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

?

圖 3-5-2 紅星閃閃

?

遮罩動(dòng)畫(2)

?

知識(shí)提要

?

l ???????? 將線條轉(zhuǎn)化為填充

l ???????? 創(chuàng)建遮罩動(dòng)畫

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

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

?

制作步驟

?

（ 1 ）創(chuàng)建影片文檔

?

?步驟1設(shè)置影片文檔屬性

?

執(zhí)行 【文件】 |【新建】命令，在彈出的面板中選擇【常規(guī)】|【Flash文檔】選項(xiàng)后，單擊【確定】按 鈕，新建一個(gè)影片文檔，在【屬性】面板上設(shè)置文件大小為400×400像素，【背景色】為黑色（在教程中，我們?yōu)榱烁玫仫@示場(chǎng)景中的內(nèi)容，設(shè)置背景色 為#003333），如圖3-5-3所示。

?

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

?

步驟 2 設(shè)置背景圖層

?

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

?

圖 3-5-4 無邊矩形及混色器設(shè)置

?

（ 2 ）創(chuàng)建元件

?

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

?

圖 3-5-5 閃光線條的【屬性】面板參數(shù)設(shè)置

?

步驟 2 創(chuàng)建“閃光線條組合”元件

?

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

?

圖 3-5-6 創(chuàng)建閃光線條元件

?

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

?

圖 3-5-7中顯示的是“變形 點(diǎn)”在元件中心時(shí)的狀態(tài)，和“變形點(diǎn)”已拖到場(chǎng)景中心時(shí)的狀態(tài)。

?

圖 3-5-7 變形點(diǎn)所處的不同位置

?

遮罩 動(dòng)畫(3)

執(zhí)行【窗口】 |【設(shè)計(jì)面板】|【變 形】命令，打開【變形】面板，選中【旋轉(zhuǎn)】，角度為15度，連續(xù)單擊【復(fù)制并應(yīng)用變形】按鈕 ，在場(chǎng)景中復(fù)制出的效果如圖3-5-8所示。

?

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

?

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

?

步驟 3 創(chuàng)建“閃光”元件

?

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

?

圖 3-5-9 創(chuàng)建“閃光”元件

?

單擊【確定】后進(jìn)入新元件編輯場(chǎng)景，接著把庫里名為“閃光線條組合”的元 件拖到場(chǎng)景中，使元件實(shí)例的中心點(diǎn)對(duì)齊場(chǎng)景中的“ +”符號(hào)。在第30幀處加關(guān)鍵幀，用鼠標(biāo)右鍵單擊第1幀，在彈出 的菜單中選擇【創(chuàng)建補(bǔ)間動(dòng)畫】，切換到【屬性】面板，設(shè)置【旋轉(zhuǎn)】為【順時(shí)針】，旋轉(zhuǎn)一周。

?

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

?

選中第 30幀，按F6鍵，新增一 個(gè)關(guān)鍵幀，用鼠標(biāo)右鍵單擊第1幀，選擇【創(chuàng)建補(bǔ)間動(dòng)畫】，建立動(dòng)作補(bǔ)間動(dòng)畫，在【屬性】面板中，設(shè)置【旋轉(zhuǎn)】為逆時(shí)針旋轉(zhuǎn)一周，最后將此層設(shè)為遮罩層，用 鼠標(biāo)右鍵單擊靠上的圖層，選擇【遮罩層】，如圖3-5-10所示。圖中顯示的是“閃光”元件的時(shí)間軸面板和各圖層中的動(dòng)畫設(shè)置。

?

（ a） 創(chuàng)建遮罩后的【時(shí)間軸】面板

?

(b) 被遮罩層中的圖形

?

（ c）遮罩圖層中的圖形

?

（ d）兩個(gè)圖層重合后的效果

?

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

遮罩動(dòng)畫(4)

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

?

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

?

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

?

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

?

第三步，用鼠標(biāo)左鍵按住變形點(diǎn)，拖到線條的最下端，這是因?yàn)槲覀円尵€條以下端為中心旋轉(zhuǎn)復(fù)制，如 圖 3-5-11中的“3”所示。

?

第四步，執(zhí)行【窗口】 |【設(shè)計(jì)面板】|【變形】，打開【變 形】面板，各參數(shù)設(shè)置如圖3-5-12。

?

按下【復(fù)制并應(yīng)用變形】按鈕 四次，就會(huì)在場(chǎng)景中每隔72度復(fù)制出一條線條，五條線條的頂端構(gòu)成五角星的五個(gè)頂點(diǎn)，如圖3-5-11 中的“4”所示。

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

圖 3-5-14 擦除線條

?

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

?

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

?

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

?

圖 3-5-15 多角星形工具選項(xiàng)設(shè)置面板-

?

設(shè)置完后，單擊【確定】按鈕，在場(chǎng)景中拖動(dòng)鼠標(biāo)，就會(huì)畫出一 個(gè)五角星的形狀來。

?

（ 3）創(chuàng)建動(dòng)畫

?

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

?

?

圖 3-5-16 時(shí)間軸及場(chǎng)景

?

遮罩動(dòng)畫(5)

?

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

?

?

好吧，趁著興致正濃，我們?cè)儆谜谡謥碜鲆粋€(gè)文字效果。

5. 實(shí)例 2 ——要學(xué)做閃客

?

實(shí)例簡介

?

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

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

?

圖 3-5-18 本例運(yùn)行效果

?

知識(shí)要點(diǎn)

● ? 字體的二次打散

● ? 將字體轉(zhuǎn)為形狀

● ? 創(chuàng)建遮罩動(dòng)畫

?

（ 1 ）創(chuàng)建影片文檔

?

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

?

圖 3-5-19 文檔屬性 ?

?

（ 2 ）創(chuàng)建元件

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

?

圖 3-5-20 “我要學(xué)做閃客”文字

?

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

?

?

圖 3-5-21 文字效果

?

遮罩動(dòng)畫(6)

?

步驟 2 創(chuàng)建“輝光”元件

?

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

?

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

?

（ 4）創(chuàng)建動(dòng)畫

?

單擊時(shí)間軸右上角的【場(chǎng)景 1】按鈕，切換到主場(chǎng)景。

?

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

步驟 1 創(chuàng)建【底層文字】層

?

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

?

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

?

步驟 2 創(chuàng)建被遮罩層

?

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

?

圖 3-5-23 “輝光”元件在場(chǎng)景中的位置

?

步驟 3 創(chuàng)建遮罩層

?

新建一個(gè)【遮罩層】圖層，復(fù)制【底層文字】層的第一幀中的元件實(shí)例，選擇【遮罩層】的第 1幀，執(zhí)行【編輯】|【粘貼到當(dāng)前位置】命令，用鼠標(biāo)右鍵單擊【遮罩層】，選擇【遮罩層】，設(shè)置此層為遮罩層，這一層的作用是 用字體做遮罩元素，用它來控制輝光在場(chǎng)景中出現(xiàn)的大小和位置。

?

至此，我們就已經(jīng)創(chuàng)建好了“我要學(xué)做閃客”這個(gè)動(dòng)畫，時(shí)間軸面板如圖 3-5-25所示。

?

圖 3-5-25 時(shí)間軸面板上的圖層

?

?

?

課堂練習(xí)：

利用素材制作水波紋

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

?

?

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

?

?

?

?

?

?

?

?

?

?

?

?

遮罩動(dòng)畫