用 Adobe Animate CC 做劃直線這類動畫，主要都是採用 Masking (即係: 遮色片) 這方法。
所謂 Masking, 概念十分簡單，其實就是將舞台上唔想見到的地方預先遮蓋住。
很久以前都曾經用 Adobe Flash 做了幾個劃直線嘅動畫影片, 都是利用 Masking 這方法。影片內都介紹得好詳細, 有興趣的話，可以去看看。
我將影片放下面，方便大家參考。
其實, 如果用 Adobe Animate CC 做, 方法和步驟 基本都 同 Adobe Flash 差不多的。
*****
第一步：
首先在舞台上劃一條 4 pixels 闊嘅藍色直線。這便是稍後用來做 動畫嘅直線。
將這 Layer 改稱為 Line 。
這動畫需要大概兩秒，所以在 Line Layer 的 Frame 50 插入一個 Frame。
第二步：
新增一個 Layer。這個 Layer 稍後會用來做 Masking 的。
將這 Layer 改稱為 Mask。
第三步：
為了要做直線動畫，最重要嘅步驟是先將直線完全遮蓋。然後利用 Masking 做動畫。
要將直線完全遮蓋, 有幾個方法可以這樣做。
最方便當然是將做動畫嘅直線複製，然後蓋係上面。
首先選擇 Toolbox 嘅 Selection Tool,
選擇 Line Layer 的直線
Right Click, 選擇 Copy
再選擇 Mask Layer
然後複製直線
複製直線時記得選擇 Paste in Place
這樣, 在 Mask Layer 複製的直線剛好將下層準備做動畫的直線完全遮蓋。
為了更容易看和色別，我將 Mask Layer 的直線改為紅色。
選擇 Toolbox 嘅 Selection Tool
將顏色改為紅色。
接著將直線稍為放大一些, 這樣可以將下層的直線遮蓋得更多, 做動畫時更方便 及 更容易
將 Stroke 的闊度由 4 pixels 改大為 12 pixels。
選擇 Toolbox 嘅 Free Transform Tool
選擇 Mask Layer 的 直線
將直線稍為拉長一些。
這樣，在 Mask Layer 的直線就將下層準備做動畫的直線完全遮蓋。
在這裡再 Remind 一下:
用 Animate CC 做 Masking 的時候, Mask Layer 中有填色的區域是透明的，而沒有填色的區域則是不透明的。
換而言之，Mask Layer 中有填色的區域是可以看穿的，而沒有填色的區域則是被遮蓋的。
第四步：
不過，Mask Layer 的直線是 stroke, 不可以用來做 Masking 的。
還要做一些工作。
首先要將 Layer 2 的直線 Convert 成 Fill.
選擇直線,
Click on “Modify” Menu,
再 Click on “Shape”
再選擇 “Convert Lines to Fills”,
這樣, 直線便由 stroke 變成 Fill 了!
在 Mask Layer 的 Frame 50 插入一個 Keyframe。
到此，Masking 的準備工作已經完成，可以正式開始做動畫了。
*****
選擇 Mask Layer 的 第一個 Frame。
因為在動畫開始時，要隱藏整條直線。換而言之，Mask Layer 不要有顏色遮蓋下層整條直線。
最方便是使用 工具箱 內的 Eraser, 然後將遮蓋動畫直線的顏色清除，直至看到下層整條直線為止。
跟著, 我要直線慢慢的顯露出來，做成劃直線的動畫效果。
要達到這樣的動畫效果，Mask Layer 的直線 要慢慢伸展，直至遮蓋下面整條動畫直線為止。
要這樣做，最方便是將 Mask Layer 的直線製成 Shape Tween (形狀補間動畫) 。
在 Frame 1 和 Frame 50 之間隨便選擇一個影格,
Right Click,
選擇 Shape Tween
好容易就建立了 Shape Tween
接著，簡單地測試一下效果。
一切十分正常。
最後一步:
跟著是最後一步，就係要將這圖層轉為 Masking 圖層, 這樣才會有 Masking 效果的:
Right Click Mask 圖層，
選擇 “Mask” 選單，
就是那麼簡單, 這圖層就轉為 Masking 圖層了！
Okay! 所有工作都完成了！
*****
現在可以測試動畫。
就是那麼簡單, 一個劃直線的動畫就完成了!
*****
接著, 稍為再加工一下就可以做成一些有趣的動畫。
例如:
只要再新增一個 Layer, 做一個圓珠筆同步的 Motion Tween,
就完成一個圓珠筆劃直線的動畫。
完成檔案嘅鏈結放在本文章最後，需要的網友歡迎下載。
*****
謝謝收看!
如果喜歡, 請免費訂閱我的頻道, 按個 LIKE 和留下評論!
Leave a Reply