Animate CC 書寫中文字動畫

更新 發佈閱讀 2 分鐘
vocus|新世代的創作平台

檢視範例】【下載範例

在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。

目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差的控制,就可以表現更好的書寫中文字動畫。
使用動畫技巧:形狀補間、逐格動畫、遮色片。

Step1.
範例中文字已經依筆畫分散至各圖層上。首先僅顯示筆畫1與背景二圖層,並均於影格15處插入影格;於筆畫1圖層上新增遮色片1,使用矩型工具繪製高度略比筆畫1高的矩型,於影格15插入關鍵影格使用變形工具拉寬矩型覆蓋筆畫1,並建立遮色片1上的形狀補間動畫,設定遮色片圖層的色片功能,完成單一筆畫繪製的動畫。

vocus|新世代的創作平台

Step2.
相同方式請繼續完成筆畫2與筆畫3的動畫。繼續顯示筆畫4同樣於影格15插入影格;新增遮色片4,使用筆刷工具繪製可覆蓋筆畫4上端的填色內容,繼續依序插入關鍵影格繪製填色覆蓋筆畫,直至全部覆蓋筆畫為止,並建立遮色片功能。

vocus|新世代的創作平台

Step3.
同筆畫4的方式繼續設定筆畫5的遮色片動畫。因此可以判斷文字筆畫內容,若是較不規則的形狀就使用以筆刷工具繪製遮色片內容的逐格動畫方式,若是比較規則的筆畫內容就以色塊形狀補間動畫做為遮色片,來呈現筆畫畫出的動畫。請繼續完成剩下的筆畫,筆畫6、8、9使用形狀補間動畫的方式,筆畫7使用筆刷工具繪製填色的方式,完成所有筆畫的繪製動畫。

vocus|新世代的創作平台

Step4.
最後顯示所有圖層與遮色片,依序選取每個筆畫圖層與遮色片圖層,移動影格安排時間順序,並於影格180處為所有圖層插入影格,完成此範例。

vocus|新世代的創作平台

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果

留言
avatar-img
哩老師的沙龍
30會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/13
Q版人物通常都是頭大、手短、腳短,因此在跑步時的動作步伐比較小,同樣需要注意手腳與身體元件的配合,搭配傳統補間動畫即可確保跑步動作的流暢。 目標動畫效果:應用影片片段元件表現可愛人物的跑步動作,除了元件的準備與安排來表現動作之外,以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
2020/02/13
Q版人物通常都是頭大、手短、腳短,因此在跑步時的動作步伐比較小,同樣需要注意手腳與身體元件的配合,搭配傳統補間動畫即可確保跑步動作的流暢。 目標動畫效果:應用影片片段元件表現可愛人物的跑步動作,除了元件的準備與安排來表現動作之外,以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
2020/02/13
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
2020/02/13
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
2020/02/13
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補
Thumbnail
2020/02/13
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補
Thumbnail
看更多
你可能也想看
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,表現金屬框與文字的光澤效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製,新增圖層,於圖層上原地貼上文字元件
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,表現金屬框與文字的光澤效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製,新增圖層,於圖層上原地貼上文字元件
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型,逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫,全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫    製作方式:依序在要設定內容的時間點上插入關鍵影格,設定更改內容即可。 (2)
Thumbnail
1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型,逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫,全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫    製作方式:依序在要設定內容的時間點上插入關鍵影格,設定更改內容即可。 (2)
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News