Animate CC 網頁動畫與JS互動
49公開內容
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
全部內容
免費與付費
最新發佈優先
1. 基本四大類型
AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。
(1)逐格動畫
製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。
(2)
要構成動畫的二大元素『時間』與『動畫內容』，在Animate中都是仰賴時間軸控制版，動畫內容即是以圖層來構成，而動畫時間的控制就得仰賴時間軸上的『影格』，來進行動畫設計製作與記錄。
1.時間軸
Adobe Animate CC 中的「時間軸」會隨著時間的經過，在圖層與影格中組織並控制文件內容。就像影
建立文字打散後的漸層編輯應用，設定製作出文字倒影與陰影素材，進而隨後表現其動畫效果。
STEP1.
在深色背景上建立白色文字並打散二次成圖像，各向上、下複製出另二份文字圖像共三份。
首先選取第二份文字，使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層)，
使用橢圓、矩型、鋼筆工具建立物件基本造型，搭配物件重疊合併的編輯，以及漸層填色技巧，完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。
STEP1.
為方便編輯請先設定場景背景色為灰色，選擇填色為黑白放射狀漸層，繪製正圓形無邊框黑白漸層，再使用漸層變形工具調整漸層中心至圓內左上角，放大漸層範圍
使用鉛筆、鋼筆工具繪製線稿後，藉由完善的修整筆畫功能整理好所有需要的線稿，最後使用油漆桶、墨水瓶填色，搭配物件管理與編輯，完成漸層背景、石頭、水中魚與海草。
STEP1.
使用鋼筆工具與直接選取工具繪製調整出基本構成筆畫，使用『轉換錨點工具』轉換轉折角成平滑曲線，再使用鉛筆工具繪製其他黑線稿（選擇
在變形操作時若需要固定變形數值，就需要在變形浮動視窗上才能輸入固定變形數值，且可以搭配『重製選取範圍並變形』按鈕，進行多次的重複變形。
1.重複縮放
繪製矩形框(一般矩形工具繪製請群組)，選取並至【變形】控制板上(視窗>變形)按下限制鎖定按鈕(等寬高)，再輸入欲放大的寬度值，並直接按下變形控制版右下
無群組或是非基本矩形、非基本橢圓等繪圖物件，在物件重疊時隨即自動進行圖案間編輯處理，包括填色與外框筆畫間均會互相作用。
1.填色圖案之間相加
當繪製彼此重疊且無筆畫的填色相同形狀時，重疊的形狀將自動合併在一起。
2. 填色圖案之間上減下
當您繪製彼此重疊無筆畫的不同填色形狀時，最上層的形狀會截掉一
選取工具最主要是提供選取物件的方式，包括『選取工具』、『選取細部工具』、『套索工具』，均主要針對尚未群組或非基本工具所繪製圖案進行細部編輯，並有完整的局部編輯功能。若是基本矩形、基本橢圓、群組物件則均需打散才可進行局部編輯。
1. 選取工具-選取填色
(1)使用選取工具直接點取填色內容即可選取到填色
1.繪製線段
若要一次繪製一條直線線段，請使用「線段」工具，接著請設定呈現線段顏色的筆畫顏色，在場景上直接按下滑鼠左鍵拖曳後放開，即可完成線段繪製。
★操作技巧：
(1)在拖曳繪製線段的同時（未放開滑鼠前），若按住【Shift】鍵，即可繪製出水平、垂直或45 度角的直線線段。
(2)使用選取工具選
