大學(xué)Flash遮罩層動(dòng)畫

大學(xué)Flash遮罩層動(dòng)畫第1頁(yè)/共39頁(yè)學(xué)習(xí)目標(biāo)了解遮罩層動(dòng)畫的基本功能熟練掌握繪制遮罩層動(dòng)畫的基本方法第2頁(yè)/共39頁(yè)知識(shí)要點(diǎn)掌握創(chuàng)建遮罩層的方法

能通過(guò)模仿完成遮罩層動(dòng)畫實(shí)例的制作第3頁(yè)/共39頁(yè)Flash動(dòng)畫制作遮罩動(dòng)畫

在Flash中，圖層有一種遮罩圖層。想象一下，我們現(xiàn)在正透過(guò)窗戶觀看窗外的美景，我們所看的只是窗戶這個(gè)范圍，其他的景物都被墻壁遮住了。Flash中的遮罩與此現(xiàn)象非常類似。遮罩動(dòng)畫是通過(guò)遮罩層來(lái)完成的。遮罩的原理就是將某層作為遮罩，遮罩層下的一層是被遮罩層，而只有遮罩層上的填充色塊下面的內(nèi)容可見，色塊本身是不可見的。作為遮罩層的對(duì)象可以是填充的形狀、文字對(duì)象、圖形元件和影片剪輯元件。第4頁(yè)/共39頁(yè)遮罩動(dòng)畫對(duì)于一些特殊的動(dòng)畫效果，如聚光燈、淡入淡出效果、水波等，都可以通過(guò)Flash的遮罩功能來(lái)實(shí)現(xiàn)。第5頁(yè)/共39頁(yè)第6頁(yè)/共39頁(yè)遮罩動(dòng)畫的概念遮罩層和引導(dǎo)層一樣，是Flash中特殊的圖層。合理地使用遮罩層可以創(chuàng)建出豐富多彩的動(dòng)畫效果。在現(xiàn)實(shí)中我們可以看到很多類似遮罩的情況，比如說(shuō)通過(guò)望遠(yuǎn)鏡我們只能看到一部分景物。在Flash中，可以通過(guò)遮罩層來(lái)定義其下面的圖層中對(duì)象的可見區(qū)域。遮罩層是一種很特殊的圖層，可以將下面的圖層屏蔽，而下方的被遮罩層只能顯示上方遮罩層圖形區(qū)域大小的內(nèi)容。

第7頁(yè)/共39頁(yè)制作如圖所示的動(dòng)態(tài)文字效果。第8頁(yè)/共39頁(yè)制作“動(dòng)感文字”本例將遮罩原理用于制作動(dòng)感文字，在文字的輪廓中將出現(xiàn)流云的運(yùn)動(dòng)效果，避免文字過(guò)于呆板和單調(diào)，增加其美感，最終設(shè)計(jì)效果如圖所示?！驹O(shè)計(jì)目標(biāo)】第9頁(yè)/共39頁(yè)使用一幅靜態(tài)圖片制作流水效果，參考圖片如圖所示。第10頁(yè)/共39頁(yè)“水中倒影效果”利用遮罩原理可以表達(dá)很多動(dòng)畫效果。例如，“水”是動(dòng)畫中常用的主題，波光粼粼的水面、水中美麗的倒影、流動(dòng)的小溪以及“飛流直下三千尺”的瀑布都是動(dòng)畫設(shè)計(jì)師寵愛(ài)的題材。本例將進(jìn)一步加深對(duì)遮罩效果的理解，掌握在影片剪輯中制作遮罩效果的方法?！驹O(shè)計(jì)目標(biāo)】第11頁(yè)/共39頁(yè)“瀑布效果”遮罩動(dòng)畫的原理就是透過(guò)遮罩層物體的形狀看到被遮罩層物體的內(nèi)容，因此要使圖片中靜止的瀑布“動(dòng)起來(lái)”，而其他區(qū)域的景色則保持不變，應(yīng)該分兩步來(lái)處理。首先分離瀑布流水。然后給流水添加遮罩效果。【設(shè)計(jì)思路】第12頁(yè)/共39頁(yè)利用遮罩制作放大鏡效果，如圖所示。

第13頁(yè)/共39頁(yè)遮罩動(dòng)畫的概念一個(gè)遮罩效果的實(shí)現(xiàn)至少需要兩個(gè)圖層，上面的圖層是遮罩層，下面的圖層是被遮罩層，如圖所示，其中“圖層2”是遮罩層，“圖層1”是被遮罩層。與普通層不同的是，在具有遮罩層的場(chǎng)景中，只能通過(guò)遮罩層上對(duì)象的形狀，才可以看到被遮罩層上的內(nèi)容。

第14頁(yè)/共39頁(yè)1.創(chuàng)建遮罩層動(dòng)畫的兩種方法在“時(shí)間軸”面板中，選擇要設(shè)置為遮罩層的圖層，單擊鼠標(biāo)右鍵，在彈出來(lái)的快捷菜單中選擇“遮罩層”命令，就可以添加遮罩，如圖所示：在“時(shí)間軸”面板中，雙擊要作為“遮罩層”的圖層的圖標(biāo)，會(huì)彈處“圖層屬性”對(duì)話框，在對(duì)話框中選擇類型為“遮罩層”，此時(shí)圖層圖標(biāo)會(huì)變?yōu)樾螤睢Ｈ缓箅p擊要作為“被遮罩層”的圖層的圖標(biāo)，會(huì)彈出“圖層屬性”對(duì)話框，在對(duì)話框的類型欄里面選擇“被遮罩”，然后單擊“確定”按鈕，即可以和“遮罩層”建立鏈接。

第15頁(yè)/共39頁(yè)8.1遮罩層動(dòng)畫原理8.1.1知識(shí)點(diǎn)講解在開始對(duì)遮罩層動(dòng)畫進(jìn)行典型案例分析之前，首先來(lái)學(xué)習(xí)遮罩層動(dòng)畫的創(chuàng)建方法及其原理，為后續(xù)的提高打下理論基礎(chǔ)。一、創(chuàng)建遮罩層。圖8-1兩個(gè)圖層的遮罩

圖8-2用鼠標(biāo)右鍵創(chuàng)建遮罩層圖8-3【圖層屬性】對(duì)話框

第16頁(yè)/共39頁(yè)取消遮罩層動(dòng)畫的三種方法在“時(shí)間軸”面板中，將“被遮罩層”拖動(dòng)到“遮罩層”的上方，就可以取消遮罩層動(dòng)畫。可以通過(guò)設(shè)置“遮罩層”的圖層屬性來(lái)取消遮罩層動(dòng)畫。在“時(shí)間軸”面板中，雙擊“遮罩層”的圖標(biāo)，會(huì)彈出“圖層屬性”對(duì)話框，在對(duì)話框的類型欄里面選擇“一般”，然后單擊“確定”按鈕，即可以斷開和“被遮罩層”建立的鏈接。在“時(shí)間軸”面板上，選擇“遮罩層”，單擊鼠標(biāo)右鍵，在彈出來(lái)的快捷菜單中選擇“√遮罩層”命令。第17頁(yè)/共39頁(yè)使用遮罩原理創(chuàng)建復(fù)雜動(dòng)畫遮罩層中有動(dòng)畫對(duì)象存在的地方都會(huì)產(chǎn)生一個(gè)孔，與其鏈接的被遮罩層相應(yīng)區(qū)域中的對(duì)象可以顯示出來(lái)；而沒(méi)有動(dòng)畫對(duì)象的地方會(huì)產(chǎn)生一個(gè)罩子，遮住鏈接層相應(yīng)區(qū)域中的對(duì)象。利用這個(gè)原理再輔之以其他動(dòng)畫設(shè)計(jì)方法，可以制作出更多富有創(chuàng)意的設(shè)計(jì)作品。本任務(wù)將創(chuàng)建兩個(gè)具有實(shí)用價(jià)值的動(dòng)畫作品。第18頁(yè)/共39頁(yè)遮罩原理（注意事項(xiàng)）遮罩層中的對(duì)象必須是色塊、文字、符號(hào)、影片剪輯元件（MovieClip）、按鈕或群組對(duì)象，而被遮層不受限制

.圖8-4遮罩前的效果

圖8-5遮罩后的效果

第19頁(yè)/共39頁(yè)“地球旋轉(zhuǎn)效果”首先制作藍(lán)色方格背景。然后制作半透明圓形球體作為遮罩層。接著利用勾勒出來(lái)的大陸版塊作為被遮罩層。圓形球體是不運(yùn)動(dòng)的，但如果讓被遮罩的大陸版塊運(yùn)動(dòng)起來(lái)，圓形球體看起來(lái)就是運(yùn)動(dòng)的。對(duì)大陸版塊要分正面和背面，因此需要使用多個(gè)被遮罩層。【設(shè)計(jì)思路】第20頁(yè)/共39頁(yè)案例：模擬“物體在管道中下落的效果”使用遮罩效果模擬現(xiàn)實(shí)生活中物體在管道中下落的運(yùn)動(dòng)效果，動(dòng)畫中使用簡(jiǎn)單的箭頭圖形來(lái)代表物體和管道，物體以不變的速度在管道中下落，在轉(zhuǎn)彎處自動(dòng)改變方向，最后的設(shè)計(jì)效果如圖所示?！驹O(shè)計(jì)效果】第21頁(yè)/共39頁(yè)【設(shè)計(jì)思路】箭頭物體在拐彎處轉(zhuǎn)折的流暢性。本例采用兩段無(wú)縫隙的遮罩動(dòng)畫來(lái)處理。箭頭物體在下落的過(guò)程中始終處于窗口的視野范圍內(nèi)。本例讓箭頭的下落和管道的上升處于同步狀態(tài)。第22頁(yè)/共39頁(yè)案例：制作“卷軸展開效果”本例利用了兩個(gè)遮罩。清晰圖片逐漸覆蓋模糊圖片的遮罩。卷軸移動(dòng)效果的遮罩。兩個(gè)遮罩始終保持同步?！驹O(shè)計(jì)思路】本例將創(chuàng)建一個(gè)卷軸慢慢展開的動(dòng)畫，設(shè)計(jì)中使用卷軸中圖畫的模糊效果圖作為背景，隨著卷軸慢慢展開，模糊的圖畫逐漸清晰，具有強(qiáng)烈的視覺(jué)沖擊效果，最后的設(shè)計(jì)效果如圖所示。【設(shè)計(jì)效果】第23頁(yè)/共39頁(yè)案例：制作“眼鏡反光”特效圖8-15最終效果

第24頁(yè)/共39頁(yè)案例：制作“海邊美景”第25頁(yè)/共39頁(yè)8.2多層遮罩動(dòng)畫通過(guò)前面一節(jié)課的學(xué)習(xí)，相信同學(xué)們已經(jīng)掌握了遮罩層動(dòng)畫的創(chuàng)建方法和設(shè)計(jì)原理，在本小節(jié)中，將使用多層遮罩層動(dòng)畫來(lái)制作復(fù)雜的Flash動(dòng)畫。8.2.1知識(shí)點(diǎn)講解將普通圖層拖動(dòng)到遮罩層或被遮罩層的下面，即可將普通圖層轉(zhuǎn)化為其被遮罩層，在一組遮罩中，遮罩層只能有一個(gè)，而被遮罩層可以有多個(gè)，那就是多層遮罩，如圖8-33所示，其中“圖層2”為遮罩層，其余的所有圖層都是被遮罩層。圖8-33多層遮罩

第26頁(yè)/共39頁(yè)多層遮罩的創(chuàng)建注意事項(xiàng)：要使用多層遮罩動(dòng)畫做出精美的動(dòng)畫作品應(yīng)該注意以下幾點(diǎn)。1、從現(xiàn)實(shí)生活中尋找創(chuàng)作靈感。2、使用遮罩層動(dòng)畫來(lái)模擬表達(dá)創(chuàng)意。3、多種動(dòng)畫技術(shù)結(jié)合使用。4、在制作過(guò)程中不斷完善自己的作品。第27頁(yè)/共39頁(yè)8.2.2范例解析──制作“鏡花水月”拼圖游戲曾一度風(fēng)靡全球，是老少皆宜的一種娛樂(lè)方式。本案例將通過(guò)多層遮罩動(dòng)畫，創(chuàng)造魔幻鏡子拼圖的效果，在充滿樂(lè)趣的輕松的氛圍下，帶領(lǐng)讀者感受唯美的遮罩動(dòng)畫的奧妙。其制作思路及效果如圖8-34所示。打開模板制作拼圖動(dòng)畫制作遮罩動(dòng)畫最終效果2最終效果1制作清晰圖片遮罩效果圖8-34制作思路及效果第28頁(yè)/共39頁(yè)8.2.3課堂練習(xí)──制作“斷橋遺夢(mèng)

”請(qǐng)同學(xué)們使用經(jīng)典案例“鏡花水月”中制作影片剪輯遮罩動(dòng)畫的類似方法，制作一個(gè)“斷橋遺夢(mèng)”的場(chǎng)景。在動(dòng)畫中，一面鏡子映出一座古橋流水的畫卷，被突然下落的石頭砸中，產(chǎn)生裂紋，最后散為碎片，只留下夢(mèng)境一般的一座古橋留在記憶的畫面中。其效果圖如圖8-61所示。1、打開教學(xué)資源中的“素材\第8講\斷橋遺夢(mèng)\斷橋遺夢(mèng)-模板.fla”文件，【庫(kù)】面板及場(chǎng)景效果如圖8-62所示。圖8-61效果圖第29頁(yè)/共39頁(yè)實(shí)例：“七彩文字”（p149-151）1、啟動(dòng)FlashCS3，建立一個(gè)Flash文檔。2、選擇“矩形”工具，在“屬性”面板中設(shè)置其筆觸顏色為無(wú)（），填充顏色為七彩的線性填充3、選擇繪制好的矩形，按Ctrl＋G鍵將其組合。4、選擇“時(shí)間軸”面板，將“圖層1”鎖定，在其上面新建一個(gè)圖層，圖層名稱為“圖層2”。5、選擇“文本”工具（），并在“屬性”面板中設(shè)置字體為“隸書”，字體大小為50，其他均為默認(rèn)值6、在舞臺(tái)上輸入文字“七彩文字”。7、在“時(shí)間軸”面板中，選擇“圖層2”，單擊鼠標(biāo)右鍵，在彈出來(lái)的快捷菜單中選擇“遮罩層”命令，將其設(shè)置為遮罩層。8、選擇“圖層2”的第30幀，按F5鍵，插入普通幀，設(shè)置動(dòng)畫的播放時(shí)間為30幀。9、解除“圖層1”的鎖定，選擇“圖層1”的第30幀，按F6鍵，插入關(guān)鍵幀。選擇第30幀處的矩形，將其向左移一定的位置。10、在“圖層1”圖層的第1幀和第30幀之間選擇任意一幀，在“屬性”面板中的“補(bǔ)間”下拉菜單中選擇“動(dòng)畫”選項(xiàng)。11、按Ctrl＋Enter鍵，對(duì)影片進(jìn)行測(cè)試。

第30頁(yè)/共39頁(yè)案例：“圖片瀏覽”（p149-151）遮罩動(dòng)畫是Flash中應(yīng)用比較多的動(dòng)畫形式，通過(guò)它可以制作出許多炫目的動(dòng)畫效果。我們可以利用遮罩層來(lái)制作一個(gè)“圖片瀏覽”的動(dòng)畫。

最終效果如圖所示：第31頁(yè)/共39頁(yè)8.3課后作業(yè)一、操作題1、請(qǐng)同學(xué)們根據(jù)典型案例──制作“眼鏡反光特效”的制作思路，制作一個(gè)汽車車窗的過(guò)光效果，如圖8-69所示。圖8-69車窗過(guò)光2、請(qǐng)同學(xué)們根據(jù)典型案例——制作“海邊美景”的制作思路，制作一個(gè)水中倒影的效果，如圖8-70所示。圖8-70水中倒影第32頁(yè)/共39頁(yè)二、思考題1、遮罩層動(dòng)畫的原理是什么？2、制作遮罩層動(dòng)畫至少需要幾個(gè)圖層？3、遮罩層動(dòng)畫還能應(yīng)用于哪些藝術(shù)表達(dá)方面？第33頁(yè)/共39頁(yè)場(chǎng)景的概念場(chǎng)景可以看成是一段相對(duì)獨(dú)立的動(dòng)畫，當(dāng)動(dòng)畫中有多個(gè)場(chǎng)景時(shí)，整個(gè)動(dòng)畫會(huì)按照?qǐng)鼍暗捻樞虿シ拧．?dāng)然，也可以用腳本程序來(lái)控制場(chǎng)景的播放順序。在Flash中，所有的動(dòng)畫制作都是在“場(chǎng)景”中實(shí)現(xiàn)。當(dāng)新建Flash文檔時(shí)，F(xiàn)lash就會(huì)自動(dòng)創(chuàng)建一個(gè)名稱為“場(chǎng)景1”的場(chǎng)景。如果設(shè)計(jì)的是一個(gè)簡(jiǎn)單的小動(dòng)畫，只需要使用一個(gè)場(chǎng)景就可以了，但是如果設(shè)計(jì)的是一個(gè)比較復(fù)雜的動(dòng)畫時(shí)，一個(gè)場(chǎng)景是不夠的，可能需要多個(gè)場(chǎng)景。例如網(wǎng)上的大部分Flash作品，在開始的時(shí)候都有一個(gè)Loading場(chǎng)景來(lái)現(xiàn)實(shí)下載的速度。第34頁(yè)/共39頁(yè)場(chǎng)景創(chuàng)建的兩種方法：?jiǎn)螕舨藛螜谥械摹安迦搿薄皥?chǎng)景”命令，可以創(chuàng)建一個(gè)新的場(chǎng)景。按Shift+F2鍵，或者單擊菜單欄中的“窗口”→“其他面板”→“場(chǎng)景”命令，打開“場(chǎng)景”面板，在“場(chǎng)景”面板中單擊“添加場(chǎng)景”按鈕，就可以創(chuàng)建一個(gè)新的場(chǎng)景，如圖所示：第35頁(yè)/共39頁(yè)編輯場(chǎng)景

復(fù)制場(chǎng)景：在“場(chǎng)景”面板中選擇要復(fù)制的場(chǎng)景，單擊面板上的“直接復(fù)制場(chǎng)景”按鈕，就可以將該場(chǎng)景上的所有元素都復(fù)制到新的場(chǎng)景中添加場(chǎng)景：?jiǎn)螕簟皥?chǎng)景”面板中的“添加場(chǎng)景”按鈕，就可以創(chuàng)建一個(gè)新的場(chǎng)景。刪除場(chǎng)景：在“場(chǎng)景”面板中選擇要?jiǎng)h除的場(chǎng)景，單擊面板上的“刪除場(chǎng)景”按鈕，在彈出來(lái)的警告對(duì)話框中單擊“確定”按鈕，就可以刪除該場(chǎng)景。重命名場(chǎng)景：只要在“場(chǎng)景”面板中雙擊要改名的場(chǎng)景，使場(chǎng)景名可編輯，然后