https://images.vocus.cc/b272ee7a-0b1f-4b2a-8686-a0938cef91a4.jpg" data-width="650" data-height="400" data-position="center">【https://d32mcm3hkdm8smd1hmeyyq-on.drv.tw/animate/ani034/ani034-ok.html" target="_blank" class="draft--a">檢視範例】【https://drive.google.com/open?id=1aSA-0TneaPtwHWqzC12Had_A1A9GsLz3" target="_blank" class="draft--a">下載範例】可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。Step1.範例檔元件庫中的馬元件,除了頭之外其餘四隻腳與尾巴,同樣在繪製時就已經在與身體連接面留下框線的缺口,讓填色與身體元件自然接合,就不會因為不同姿勢安排而破壞角色完整性,而為了表現可愛版的走路,因此馬腳並不包含彎曲動作。https://images.vocus.cc/eaddbc8a-7e20-43c8-ac6a-b32ea2a57848.jpg" data-width="1182" data-height="445" data-position="center">首先進入到馬動作元件內,元件內的二條水平導引參考線將是動作設定時的參考,請依序修正每個元件的變形中心位置,腳與尾巴均是在與身體銜接處,頭的中心點請更正為與脖子銜接處。https://images.vocus.cc/2bff7038-4079-4641-9370-8cba00d7d5f4.jpg" data-width="1138" data-height="580" data-position="center">Step2.於影格7、13、19、23插入關鍵影格,準備來設定馬跑步時需要的動作:https://images.vocus.cc/6ee38b2c-b3b6-4321-961d-9746e68e49bb.jpg" data-width="1186" data-height="225" data-position="center">https://images.vocus.cc/f3e92401-1aa0-4fd9-bb59-6e2a0195994f.jpg" data-width="1034" data-height="734" data-position="center">https://images.vocus.cc/2ffb46c3-f9dc-4493-856c-74807887d43c.jpg" data-width="1188" data-height="224" data-position="center">https://images.vocus.cc/443ff1e0-3b11-4521-91cc-80380067fc70.jpg" data-width="1042" data-height="752" data-position="center">Step3.建立傳統補間動畫,完成馬可愛版走路動作。最後回到場景上新增馬圖層於前景圖層之下,置入馬動作元件於右側場景之外,於影格240處插入關鍵影格,移動馬元件至左側場景之外並縮小,建立傳統補間動畫,前景與背景圖層於影格240處插入影格,完成此範例。https://images.vocus.cc/d8a714a8-d05e-4282-a548-0e072ae748fd.jpg" data-width="1254" data-height="362" data-position="center">相關課程 : 優勢多媒體 - https://www.uuu.com.tw/Course/Show/1198/Adobe-Animate-CC%E8%A3%BD%E4%BD%9CHTML5%E5%8B%95%E7%95%AB%E8%88%87%E4%BA%92%E5%8B%95%E6%95%88%E6%9E%9C" target="_blank" class="draft--a">Adobe Animate CC製作HTML5動畫與互動效果