生活語錄 - 遮色片與濾鏡效果

9-1 　動畫搶先看

本章作品先以最基礎的靜態遮色片：筆刷邊框，熟悉遮色片功能的操作方法，接著再利用遮色片物件設計成二種動態型式的影片片段元件：手繪效果及逐字顯示，並套用遮色片功能，組合出較為複雜的動態特效。

動態效果

元件角色

舞台佈置元件 影片片段相關元件

此範例元件庫內的元件主要是協助作品：美化設計、背景逐漸淡入與顏色漸變的效果、遮色片功能套用 ... 等動作，分為以下四大類：

聲音相關元件

圖像相關元件

製作流程

9-2 　筆刷邊框的靜態遮色片遮色片效果，就是透過上圖層所謂的遮色片項目，如：填色形狀、文字物件、圖像元件或影片片段來控制下圖層欲看到的範圍。只要記住一個特性：被遮住的部分才會顯示出來」，當遮色片項目呈現何種樣貌，顯示出來的範圍就為此一外觀。

請開啟本章練習檔 < 原始 \ 09.fla> ，以下便依循步驟，先利用最基礎的靜態遮色片，展現背景。

此練習檔已於 背景 圖層佈置上動畫底圖，音樂圖層放置搭配的背景音樂。而後續說明要加入的元件、遮色片將會一一設計在其他相關圖層中。

STEP 1 　延伸影格設計背景圖片漸漸淡入STEP 2 　的效果STEP 3 　套用濾鏡效果STEP 4 　套用遮色片

9-3 　繪製效果的動態遮色片除了靜態的遮色片效果，如果欲建立動態特效，可以將遮色片物件設計成動態的影片片段元件，讓作品的視覺效果更為豐富。以下我們將運用遮色片的特性，讓草地上的椅子在出現時，有筆刷繪製效果。

STEP 1 　關鍵影格的建置STEP 2 　佈置草地上的椅子STEP 3 　將靜態的筆畫圖像轉換成影片片段元件STEP 4 　佈置影片片段元件的筆畫位置STEP 5 　將筆畫停止在目前的影格中STEP 6 　將影片片段元件轉換成遮色片STEP 7 　 瀏覽動態遮色片的效果

9-4 　逐字顯示的動態遮色片

想要讓文字逐字出現，或許會覺得需要運用所謂的 ActionScript 才可達到，其實善用遮色片控制顯示範圍的特性，加上傳統補間動畫的技巧，一樣可以產生相同效果喔！

STEP 1 　關鍵影格的建置STEP 2 　佈置文字STEP 3 　將綠色色塊轉換成影片片段元件STEP 4 　新增圖層放置綠色色塊STEP 5 　透過關鍵影格佈置圖層內矩形色塊的位置STEP 6 　建立傳統補間動畫STEP 7 　搬移及延伸影格STEP 8 　將綠色色塊停止在目前的影格中STEP 9 　用遮色片達成逐字顯示的效果STEP 10 　測試作品完成結果完成靜態與動態遮色片的效果設定後，請儲存檔案再按 　+ 鍵，瀏覽整個作品的動態效果。會發現，背景在淡入進來後，從刷出來的椅子與逐字出現的文字，再搭配襯底的音樂，一氣呵成。

延伸應用 - 多圓形遮色片

運用本章學習到的技巧與特效一起來試試另一個動畫作品，讓學習更加有趣！請依照如下提示，完成 <ex09.fla> 。