第 15 章 遮色片(Mask) 效果應用─小偷越獄篇
本章提要 15-1 動畫元件與流程說明 15-2 設定文件屬性與圖層安排 15-3 設定探照燈圖層動畫及遮色片 15-4 延伸學習－FLASH 文字動畫
前言 所謂遮色片 (Mask)效果, 就好像是透過望遠鏡的鏡頭在看東西似的, 你所看到的景物, 就只限於望遠鏡圓圓的鏡頭, 而其他在鏡頭範圍之外的就看不見。 Flash 有一種稱為遮色片的圖層, 它會遮住在此圖層之下的被遮色圖層內容, 若你在遮色片圖層上繪製一個圓 (這個圓就好像是望遠鏡的鏡頭一樣), 那麼這個圓移動到哪裡, 其下的`圖層即會顯示出該位置的內容。
前言
前言 現在請開啟範例檔 15.swf 來播放看看, 感受一下遮色片動畫的效果。
15-1 動畫元件與流程說明 元件介紹 動畫流程 重點說明
元件介紹 本範例只需要 4 個圖像元件就可以完成。其中, 只有小偷元件和監獄背景元件的繪製比較複雜, 但只要參考第 2 篇的繪圖操作說明, 並發揮你的想像力來創作就可以了！ 至於小偷黑影和監獄背景黑影, 只需要在屬性面板中調暗小偷實體, 及監獄背景實體的亮度後即可產生。
元件介紹
動畫流程 在開始動手前, 我們先來看一下本章動畫的製作流程：
重點說明 若使用元件的實體 (Instance)、群組物件 (Group) 與文字物件做為遮色範圍時, Flash 會以最下層的物件做為遮色範圍。
15-2 設定文件屬性與圖層安排 建立好需要的元件之後, 就可以開始進行動畫的編輯；如果你還沒有繪製好元件, 那麼可以開啟練習檔 15-learn.fla , 利用現成的元件來練習。
設定文件屬性 本範例共使用了 38 格影格, 用 12 fps 的速度播放的話, 可以播放 3.1 秒；這個動畫的文件屬性設定如下：
設定文件屬性
安排圖層並設定內容 本範例的圖層分配如下：
安排圖層並設定內容 在本例中, 探照燈圖層將做為遮色片圖層, 而吐氣、小偷、監獄背景這 3 個圖層放的是要透過遮色範圍顯示的內容；而小偷黑影圖層和監獄背景圖層則放置小偷及尚未被探照燈照到的樣子, 故這 2 個圖層將不被遮色。接著請依下列步驟在各圖層中分別放入所需的元件：
安排圖層並設定內容
安排圖層並設定內容
安排圖層並設定內容
安排圖層並設定內容
設定動畫長度 由於小偷、監獄背景、小偷黑影、監獄背景黑影 4 個圖層都沒有動畫效果, 所以從第 1 格到最後 1 格都維持不變, 而吐氣圖層則是要從第 36 格才開始顯示。以下是這個部分的設定方法：
設定動畫長度
15-3 設定探照燈圖層動畫及遮色片 接下來我們要先設定探照燈圖層中的移動補間動畫, 讓探照燈光從左掃往右方, 再回到中間。最後再設定遮色片效果就完成了這個有趣的範例囉！ 首先設定探照燈圖層中, 探照燈由左向右移動的移動補間動畫：
設定探照燈圖層動畫及遮色片
設定探照燈圖層動畫及遮色片 接著再設定探照燈由右向左移動後, 再跳回中央的動畫：
設定探照燈圖層動畫及遮色片 最後把探照燈圖層設為遮色片圖層, 吐氣、小偷、監獄背景圖層都設為被遮色圖層, 將探照燈圖層設為遮色片圖層, 那麼其下的第一個圖層 (也就是吐氣圖層) 預設會變成被遮色片, 所以接著只要將小偷與監獄背景圖層, 也設為被遮色圖層。
設定探照燈圖層動畫及遮色片
設定探照燈圖層動畫及遮色片
修改遮色片圖層與被遮色圖層 設定遮色片效果後, 遮色片圖層與被遮色圖層就會被鎖定, 若要修改其內容, 必須先解除鎖定狀態再做編輯。 而遮色片效果只有在圖層鎖定的狀態下才會啟動, 因此在編輯、修改完圖層內容後, 記得要重新鎖定遮色片圖層與被遮色圖層, 或是點選圖層後按滑鼠右鈕執行『顯示遮色片』命令, 以再度啟動遮色片效果。
15-4 延伸學習－FLASH 文字動畫 文字遮色動畫 文字探照燈
文字遮色動畫 可以做為遮色片圖層中遮色範圍的物件有形狀、實體、群組及文字 4 種。上例的探照燈動畫是以「實體」做為遮色片範圍, 而在接下來的範例中, 我們則使用了 「文字」 做為遮色片範圍。 請雙按範例檔 15-a01.swf 來播放, 看看跟探照燈動畫有什麼不同吧！
文字遮色動畫
文字遮色動畫 你可開啟範例檔 15-a01.fla 來觀察製作方法。此範例的製作重點在於, 做為遮色範圍的文字不動, 而是被遮色的彩色底移動：
文字遮色動畫
文字遮色動畫
增加被遮色圖層 你可以增加遮色片圖層之下所連結的被遮色圖層, 讓遮色片效果的動畫設計更具彈性。 增加的被遮色圖層不會自動鎖定, 所以遮色片效果會暫時失效, 只要將該圖層鎖定, 便可重新啟動遮色片效果。
增加被遮色圖層
文字探照燈 看過了兩種不同的遮色片效果範例, 想必你已經知道如何應用了吧！這裡我們再提供一個靜態的文字配合動態探照燈的遮色片動畫範例, 供你參考。 你可以雙按範例檔 15-a02.swf 來播放看看效果後, 先試著自己製作一個同樣的動畫, 再開啟範例檔 15-a02.fla, 觀察你的做法是不是和我們一樣！
文字探照燈
文字探照燈