第三章動(dòng)畫(huà)基礎(chǔ)-5節(jié)(遮罩)

1、第三章 動(dòng)畫(huà)基礎(chǔ)第五節(jié) 遮罩動(dòng)畫(huà)(1)在Flash的作品中，我們常?？吹胶芏嘌Ｄ可衿娴男Ч?，而其中不少就是用最簡(jiǎn)單的“遮罩”完成的，如水波、萬(wàn)花筒、百頁(yè)窗、放大鏡、望遠(yuǎn)鏡等等。那么，“遮罩”如何能產(chǎn)生這些效果呢？在本節(jié)，我們除了給大家介紹“遮罩”的基本知識(shí)，還結(jié)合我們的實(shí)際經(jīng)驗(yàn)介紹一些“遮罩”的應(yīng)用技巧，最后，提供二個(gè)很實(shí)用的范例，以加深對(duì)“遮罩”原理的理解。1遮罩動(dòng)畫(huà)的概念（1）什么是遮罩遮罩動(dòng)畫(huà)是Flash中的一個(gè)很重要的動(dòng)畫(huà)類型，很多效果豐富的動(dòng)畫(huà)都是通過(guò)遮罩動(dòng)畫(huà)來(lái)完成的。在Flash的圖層中有一個(gè)遮罩圖層類型，為了得到特殊的顯示效果，可以在遮罩層上創(chuàng)建一個(gè)任意形狀的“視窗”，遮罩層下方

2、的對(duì)象可以通過(guò)該“視窗”顯示出來(lái)，而“視窗”之外的對(duì)象將不會(huì)顯示。（2）遮罩有什么用在Flash動(dòng)畫(huà)中，“遮罩”主要有2種用途，一個(gè)作用是用在整個(gè)場(chǎng)景或一個(gè)特定區(qū)域，使場(chǎng)景外的對(duì)象或特定區(qū)域外的對(duì)象不可見(jiàn)，另一個(gè)作用是用來(lái)遮罩住某一元件的一部分，從而實(shí)現(xiàn)一些特殊的效果。2創(chuàng)建遮罩的方法（1）創(chuàng)建遮罩在Flash中沒(méi)有一個(gè)專門的按鈕來(lái)創(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)?，如果你?/p>

3、關(guān)聯(lián)更多層被遮罩，只要把這些層拖到被遮罩層下面就行了，如圖3-5-1所示。圖3-5-1 多層遮罩動(dòng)畫(huà)（2）構(gòu)成遮罩和被遮罩層的元素遮罩層中的圖形對(duì)象在播放時(shí)是看不到的，遮罩層中的內(nèi)容可以是按鈕、影片剪輯、圖形、位圖、文字等，但不能使用線條，如果一定要用線條，可以將線條轉(zhuǎn)化為“填充”。被遮罩層中的對(duì)象只能透過(guò)遮罩層中的對(duì)象被看到。在被遮罩層，可以使用按鈕，影片剪輯，圖形，位圖，文字，線條。（3）遮罩中可以使用的動(dòng)畫(huà)形式可以在遮罩層、被遮罩層中分別或同時(shí)使用形狀補(bǔ)間動(dòng)畫(huà)、動(dòng)作補(bǔ)間動(dòng)畫(huà)、引導(dǎo)線動(dòng)畫(huà)等動(dòng)畫(huà)手段，從而使遮罩動(dòng)畫(huà)變成一個(gè)可以施展無(wú)限想象力的創(chuàng)作空間。3應(yīng)用遮罩時(shí)的技巧l 

4、0;       遮罩層的基本原理是：能夠透過(guò)該圖層中的對(duì)象看到“被遮罩層”中的對(duì)象及其屬性（包括它們的變形效果），但是遮罩層中的對(duì)象中的許多屬性如漸變色、透明度、顏色和線條樣式等卻是被忽略的。比如，我們不能通過(guò)遮罩層的漸變色來(lái)實(shí)現(xiàn)被遮罩層的漸變色變化。l         要在場(chǎng)景中顯示遮罩效果，可以鎖定遮罩層和被遮罩層。l         可以用“Actions”動(dòng)作語(yǔ)句建立

5、遮罩，但這種情況下只能有一個(gè)“被遮罩層”，同時(shí)，不能設(shè)置_Alpha屬性。l         不能用一個(gè)遮罩層試圖遮蔽另一個(gè)遮罩層。l         遮罩可以應(yīng)用在gif動(dòng)畫(huà)上。l         在制作過(guò)程中，遮罩層經(jīng)常擋住下層的元件，影響視線，無(wú)法編輯，可以按下遮罩層時(shí)間軸面板的顯示圖層輪廓按鈕，使之變成，使遮罩層只顯示邊框形狀，在種情況下，你還可以拖

6、動(dòng)邊框調(diào)整遮罩圖形的外形和位置。l         在被遮罩層中不能放置動(dòng)態(tài)文本。或許你讀了上面的描述，還有點(diǎn)模糊，那么，通過(guò)一些范例，相信你會(huì)感受到遮罩動(dòng)畫(huà)的神奇！4實(shí)例1紅星閃閃實(shí)例簡(jiǎn)介你一定還記得，以前“八一電影制片廠”的片頭總有個(gè)紅五星加動(dòng)態(tài)光芒的效果，如圖3-5-2所示。本范例就是用遮罩來(lái)模仿這種效果，本范例的源文件：“閃閃紅星.fla”在光盤的相關(guān)目錄中。圖3-5-2 紅星閃閃第三章 動(dòng)畫(huà)基礎(chǔ)第五節(jié) 遮罩動(dòng)畫(huà)(2)     知識(shí)提要l  

7、60;      將線條轉(zhuǎn)化為填充l         創(chuàng)建遮罩動(dòng)畫(huà)l         使用變形面板l         學(xué)習(xí)使用【橡皮擦工具】中的“水籠頭”工具和擦除線條制作步驟（1）創(chuàng)建影片文檔 步驟1設(shè)置影片文檔屬性執(zhí)行【文件】|【新建】命令，在彈出的面板中選擇【常規(guī)】|【Flash文檔】選項(xiàng)后，

8、單擊【確定】按鈕，新建一個(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像素的無(wú)邊正方形，用【放射狀】漸變色進(jìn)行填充，如圖3-5-4所示。 圖3-5-4 無(wú)邊矩形及混色器設(shè)置（2）創(chuàng)建元件步驟1 創(chuàng)建“閃光線條”元件  執(zhí)行【插入】|【新建元件】命令，新建一個(gè)圖形元件，名稱為“閃光線條”。選擇工具箱中的【線條工具】，設(shè)置【筆

9、觸顏色】為黃色，在場(chǎng)景中畫(huà)一條直線，具體參數(shù)設(shè)置如圖3-5-5所示。圖3-5-5 閃光線條的【屬性】面板參數(shù)設(shè)置步驟2 創(chuàng)建“閃光線條組合”元件執(zhí)行【插入】|【新建元件】命令，新建一個(gè)圖形元件，名稱為“閃光線條組合”，如圖3-5-6所示。圖3-5-6 創(chuàng)建閃光線條元件從庫(kù)中將名為“閃光線條”的元件拖入新元件編輯場(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)。

10、 圖3-5-7 變形點(diǎn)所處的不同位置第三章 動(dòng)畫(huà)基礎(chǔ)第五節(jié) 遮罩動(dòng)畫(huà)(3)     執(zhí)行【窗口】|【設(shè)計(jì)面板】|【變形】命令，打開(kāi)【變形】面板，選中【旋轉(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í)行【修改】|

11、【形狀】|【將線條轉(zhuǎn)化為填充】命令，將線條轉(zhuǎn)變?yōu)樾螤?。步驟3 創(chuàng)建“閃光”元件執(zhí)行【插入】|【新建元件】命令，新建一個(gè)影片剪輯，名稱為“閃光”，如圖3-5-9所示。圖3-5-9 創(chuàng)建“閃光”元件單擊【確定】后進(jìn)入新元件編輯場(chǎng)景，接著把庫(kù)里名為“閃光線條組合”的元件拖到場(chǎng)景中，使元件實(shí)例的中心點(diǎn)對(duì)齊場(chǎng)景中的“+”符號(hào)。在第30幀處加關(guān)鍵幀，用鼠標(biāo)右鍵單擊第1幀，在彈出的菜單中選擇【創(chuàng)建補(bǔ)間動(dòng)畫(huà)】，切換到【屬性】面板，設(shè)置【旋轉(zhuǎn)】為【順時(shí)針】，旋轉(zhuǎn)一周。新增一個(gè)圖層，選中第1幀，執(zhí)行【編輯】|【粘貼到當(dāng)前位置】命令，使兩圖層中的“閃光線條組合”實(shí)例完全重合，執(zhí)行【修改】|【變形】|【水平翻轉(zhuǎn)】命令

12、，讓復(fù)制過(guò)來(lái)的線條和第一層中的線條方向相反，在場(chǎng)景中形成交叉的圖形。選中第30幀，按F6鍵，新增一個(gè)關(guān)鍵幀，用鼠標(biāo)右鍵單擊第1幀，選擇【創(chuàng)建補(bǔ)間動(dòng)畫(huà)】，建立動(dòng)作補(bǔ)間動(dòng)畫(huà)，在【屬性】面板中，設(shè)置【旋轉(zhuǎn)】為逆時(shí)針旋轉(zhuǎn)一周，最后將此層設(shè)為遮罩層，用鼠標(biāo)右鍵單擊靠上的圖層，選擇【遮罩層】，如圖3-5-10所示。圖中顯示的是“閃光”元件的時(shí)間軸面板和各圖層中的動(dòng)畫(huà)設(shè)置。（a） 創(chuàng)建遮罩后的【時(shí)間軸】面板(b) 被遮罩層中的圖形（c）遮罩圖層中的圖形（d）兩個(gè)圖層重合后的效果圖3-5-10“閃光”元件編輯界面第三章 動(dòng)畫(huà)基礎(chǔ)第五節(jié) 遮罩動(dòng)畫(huà)(4)     步驟4 創(chuàng)

13、建“紅星”元件執(zhí)行【插入】|【新建元件】命令，新建一個(gè)圖形元件，名稱為“紅星”。我們要在這個(gè)元件中畫(huà)一個(gè)漂亮的紅星，為了畫(huà)好紅星，我們分九步來(lái)敘述具體的畫(huà)法，圖3-5-11中的“1-9”的數(shù)字表示這九個(gè)步驟。圖3-5-11 紅星的九步畫(huà)法第一步，按住Shift鍵，從場(chǎng)景中心向上畫(huà)一根黃色的線條，如圖3-5-11中的“1”所示。第二步，選擇工具箱中的【任意變形工具】,在畫(huà)好的線條上單擊一下，這里，線條的中心出現(xiàn)一個(gè)白色的小圓點(diǎn)，我們叫它“變形點(diǎn)”，如圖3-5-11中的“2”所示。第三步，用鼠標(biāo)左鍵按住變形點(diǎn)，拖到線條的最下端，這是因?yàn)槲覀円尵€條以下端為中心旋轉(zhuǎn)復(fù)制，如圖3-5-11中的“3”所

14、示。第四步，執(zhí)行【窗口】|【設(shè)計(jì)面板】|【變形】，打開(kāi)【變形】面板，各參數(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)出來(lái)了，如圖3-5-11中的“5”所示。第六步，用白色線條分別連接五角星中心和上一步連線的交叉點(diǎn)，如圖3-5-11中的“6”所示。第七步，選擇工具箱中的【橡皮擦工具】，在工具箱下面的【選項(xiàng)】中選擇【水龍頭】工具，在多余的線段上單擊一下，按Delete鍵，刪除線段，修整好的五角星如

15、圖3-5-11中的“7”所示。第八步，選擇工具欄上的【填充色】，在打開(kāi)的【調(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 擦除線條用【橡皮擦工具】擦去紅星上

16、的線條，一顆漂亮的紅星就繪制出來(lái)了，如圖3-2-11中的“9”所示。技巧：在Flash MX 2004中，還可以用更簡(jiǎn)單的方法繪制出紅星，單擊工具箱中【矩形工具】按鈕下方的小黑三角形，在下拉菜單中選擇【多角星形工具】。在【屬性】面板上設(shè)置，單擊按鈕，彈出【工具設(shè)置】對(duì)話框，參數(shù)設(shè)置如圖3-5-15所示。 圖3-5-15 多角星形工具選項(xiàng)設(shè)置面板-設(shè)置完后，單擊【確定】按鈕，在場(chǎng)景中拖動(dòng)鼠標(biāo)，就會(huì)畫(huà)出一個(gè)五角星的形狀來(lái)。步驟5 導(dǎo)入音樂(lè)文件新建一層，執(zhí)行【文件】|【導(dǎo)入】|【導(dǎo)入到庫(kù)】命令，將配套光盤中的名為“sound1.mp3”的音樂(lè)文件導(dǎo)入到庫(kù)中（“sound1.mp3”文件位置

17、：光盤examplepart3*音樂(lè)sound1.mp3）。（3）創(chuàng)建動(dòng)畫(huà)回到主場(chǎng)景1中，新增三個(gè)圖層，把“閃光”元件拖入第二層中，“紅星”元件拖入到第三層中，在場(chǎng)景的下方輸入白色的“閃客啟航電影制片廠”文字，把聲音拖入到第四層中，完成后的時(shí)間軸面板與場(chǎng)景如圖3-5-16所示。 圖3-5-16 時(shí)間軸及場(chǎng)景第三章 動(dòng)畫(huà)基礎(chǔ)第五節(jié) 遮罩動(dòng)畫(huà)(5)     選中第四層的第一幀，在【屬性】面板中，設(shè)置【同步】為【事件】，如圖3-5-17所示。圖3-5-17 聲音【屬性】面板按快捷鍵Ctrl+Enter快捷鍵，測(cè)試動(dòng)畫(huà)。此時(shí)，你欣賞著自己親手做的“閃閃

18、紅星”動(dòng)畫(huà)，心中再回想一下“遮罩”在動(dòng)畫(huà)中的作用，是否已經(jīng)感受到“遮罩”這一功能的神奇？好吧，趁著興致正濃，我們?cè)儆谜谡謥?lái)做一個(gè)文字效果。5. 實(shí)例2要學(xué)做閃客實(shí)例簡(jiǎn)介“嗖”，伴著這聲音，一道白光迅速掠過(guò)一排文字，這是我們經(jīng)常在廣告和電視中看到的效果，如圖3-5-18所示。你想不想知道它們是怎么制作出來(lái)的呢？其實(shí)很簡(jiǎn)單，利用前面學(xué)過(guò)的知識(shí)就可輕易地做出這個(gè)效果，下面，讓我們動(dòng)手試一試。本例源文件：“我要學(xué)做閃客.fla”，在光盤相關(guān)目錄下。 圖3-5-18 本例運(yùn)行效果知識(shí)要點(diǎn)  字體的二次打散  將字體轉(zhuǎn)為形狀  創(chuàng)建遮罩動(dòng)畫(huà)（1）創(chuàng)建影片文檔執(zhí)行【文

19、件】|【新建】命令，在彈出的對(duì)話框中選擇【常規(guī)】|【Flash文檔】選項(xiàng)后，單擊【確定】按鈕，新建一個(gè)影片文檔，在【屬性】面板上設(shè)置文件大小為550×400像素，【背景色】為黑色（在教程中，我們?yōu)榱烁玫仫@示場(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í)行【

20、修改】|【分離】命令二次，把字體打散，再選擇【顏料桶工具】，把字體中心填充成紅色。各個(gè)步驟的文字效果如圖3-5-21所示。 圖3-5-21 文字效果三章 動(dòng)畫(huà)基礎(chǔ)第五節(jié) 遮罩動(dòng)畫(huà)(6)     步驟2 創(chuàng)建“輝光”元件執(zhí)行【插入】|【新建元件】命令，新建一個(gè)圖形元件，名稱為“輝光”。執(zhí)行【窗口】|【設(shè)計(jì)面板】|【混色器】命令，打開(kāi)【混色器】面板，設(shè)置【填充樣式】為線性，將三個(gè)色標(biāo)全部設(shè)置為白色，第一和第三個(gè)的【Alpha】值為零，中間的為74%（你可按需設(shè)置），設(shè)置完后，在場(chǎng)景中畫(huà)一個(gè)無(wú)邊矩形，大小為40×230，如圖3-5-22所示。圖3-5-22 【混色器】面板和圖形步驟3 導(dǎo)入音樂(lè)文件執(zhí)行【文件】|【導(dǎo)入】|【導(dǎo)入到庫(kù)】命令，將配套光盤中的名為“sound2.mp3”的音樂(lè)文件導(dǎo)入到庫(kù)中（“sound2.mp3”文件位置：光盤examplepart3*音樂(lè)sound2.mp3）。（4）創(chuàng)建動(dòng)畫(huà)單擊時(shí)間軸右上角的【場(chǎng)景1】按鈕，切換到主場(chǎng)景。本例的主場(chǎng)景1中共