Animate CC 漸層光束刻字動畫
更新於 發佈於 閱讀時間約 2 分鐘
以漸層繪製的光束來表現移動的同時，出現文字框內容，表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動，同時以遮色片逐格動畫方式控制文字外框內容的顯示，只要搭配得宜即可完成漸層光束刻字。
目標動畫效果:導引線控制光束移動，搭配遮色片控制文字外框的顯示，時間點搭配得宜即有光束刻畫文字框的效果。
使用動畫技巧:影片片段元件、傳統補間動畫、逐格動畫、遮色片、導引線。
使用動畫技巧:影片片段元件、傳統補間動畫、逐格動畫、遮色片、導引線。
Step1.
範例檔之中文字框、光束、文字框導引線均已分散至各圖層上，當作導引線的文字框需要處理出缺口（非封閉）。首先僅顯示背景、光束F、導引線F三圖層，光束F的中心點已移動至光束尖端處，請於光束F圖層影格30插入關鍵影格，建立傳統補間動畫。
範例檔之中文字框、光束、文字框導引線均已分散至各圖層上，當作導引線的文字框需要處理出缺口（非封閉）。首先僅顯示背景、光束F、導引線F三圖層，光束F的中心點已移動至光束尖端處，請於光束F圖層影格30插入關鍵影格，建立傳統補間動畫。
導引線與背景圖層於影格30插入影格，在導引線圖層上按下滑鼠右鍵選擇執行『導引線』啟動導引線功能( 並將光束F圖層移至導引線圖層下方組合好)，移動光束圖層吸附上導引線圖層，最後分別移動關鍵影格1與影格30上的光束尖端中心點吸附於文字框導引線缺口的二側，完成光束的導引線動畫。
Step2.
顯示文字框F圖層並於影格30插入影格，於文字框F上新增遮色片F，在遮色片F圖層上，搭配移動播放磁頭，使用筆刷工具參照光束移動位置，來繪製覆蓋文字框的填色，並依序逐格移動播放磁頭插入關鍵影格，繪製當下足以覆蓋文字框的填色。
顯示文字框F圖層並於影格30插入影格，於文字框F上新增遮色片F，在遮色片F圖層上，搭配移動播放磁頭，使用筆刷工具參照光束移動位置，來繪製覆蓋文字框的填色，並依序逐格移動播放磁頭插入關鍵影格，繪製當下足以覆蓋文字框的填色。
完成逐格插入關鍵影格繪製覆蓋外框的填色內容後，啟動遮色片圖層的遮色片功能，即完成光束刻畫文字框的動畫。
Step3.
顯示導引線L、文字框L與光束L三圖層，並移動三圖層關鍵影格至影格31處，光束L至影格60處插入關鍵影格並建立傳統補間動畫，其餘圖層除了導引線F與光束F外，均至影格30插入影格。
顯示導引線L、文字框L與光束L三圖層，並移動三圖層關鍵影格至影格31處，光束L至影格60處插入關鍵影格並建立傳統補間動畫，其餘圖層除了導引線F與光束F外，均至影格30插入影格。
在導引線L圖層上按下滑鼠右鍵選擇執行『導引線』啟動導引線功能，移動光束L層吸附上導引線L圖層，最後分別移動關鍵影格31與影格60上的光束L尖端中心點吸附於文字框導引線L缺口的二側，完成光束L的導引線動畫。
Step4.
顯示文字框L圖層，於文字框L上新增遮色片L，在遮色片L圖層上，搭配移動播放磁頭，使用筆刷工具參照光束移動位置，來繪製覆蓋文字框的填色，並依序逐格移動播放磁頭插入關鍵影格，繪製當下足以覆蓋文字框的填色。
顯示文字框L圖層，於文字框L上新增遮色片L，在遮色片L圖層上，搭配移動播放磁頭，使用筆刷工具參照光束移動位置，來繪製覆蓋文字框的填色，並依序逐格移動播放磁頭插入關鍵影格，繪製當下足以覆蓋文字框的填色。
完成逐格插入關鍵影格繪製覆蓋外框的填色內容後，啟動遮色片圖層的遮色片功能，即完成光束刻畫文字框L的動畫。最後為二遮色片與文字框圖層，以及背景圖層於影格100處插入影格，完成此範例練習。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
29會員
129內容數
多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用!
Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
Ae 小技巧：Mask path 轉成形狀路徑
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：宣紙噪點+抽幀效果
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：Adjustment Layer 調整圖層
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：Trim Paths 的應用
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：如何製作網格
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。
每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
這個影片是上一篇插畫的後半部，延續草圖的後續，進入到了對我而言的完稿階段。
通常這個階段也是比較瑣碎的，比較不會有突然大破大立的階段，相對來說也是比較花時間，卻可能從影片中看不出變化的階段，畫圖的時候總是苦惱快樂參雜在一起，選項一和選項二、三、四的選擇，從中選取適合的搭配。
最後呈現的有部分是進
閃電是由烏雲中堆積的高能量電子、形成雙向電離離子通道以及形成主引線和隻引線的過程中生成的。隻引線可能再連接至地表或雲朵下方的正電引線，進行回擊過程，使閃電能量提升。閃電的形成過程非常複雜，但這種自然現象在高能電場下得以實現。
在影像、圖像、構圖的藝術裡基本的視覺元素是由「點」、「線」、「面」所組成。本篇介紹的影像美學識別練習是「線條」，線條可以引導觀者觀看圖像的方向及位置。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
Ae 小技巧：Mask path 轉成形狀路徑
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：宣紙噪點+抽幀效果
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：Adjustment Layer 調整圖層
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：Trim Paths 的應用
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：如何製作網格
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。
每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
這個影片是上一篇插畫的後半部，延續草圖的後續，進入到了對我而言的完稿階段。
通常這個階段也是比較瑣碎的，比較不會有突然大破大立的階段，相對來說也是比較花時間，卻可能從影片中看不出變化的階段，畫圖的時候總是苦惱快樂參雜在一起，選項一和選項二、三、四的選擇，從中選取適合的搭配。
最後呈現的有部分是進
閃電是由烏雲中堆積的高能量電子、形成雙向電離離子通道以及形成主引線和隻引線的過程中生成的。隻引線可能再連接至地表或雲朵下方的正電引線，進行回擊過程，使閃電能量提升。閃電的形成過程非常複雜，但這種自然現象在高能電場下得以實現。
在影像、圖像、構圖的藝術裡基本的視覺元素是由「點」、「線」、「面」所組成。本篇介紹的影像美學識別練習是「線條」，線條可以引導觀者觀看圖像的方向及位置。