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

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

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

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

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

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

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

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

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

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

.圖8-4遮罩前的效果

圖8-5遮罩后的效果

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

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

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

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

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

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

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