Animate CC 開心跳躍動畫

更新於 發佈於 閱讀時間約 3 分鐘
raw-image

檢視範例】【下載範例

角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。

目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。

Step1.
範例檔元件庫中的人物開心跳躍元件,包括頭、手與腳均是以獨立元件與圖層來組合起來。首先進入到開心跳躍影片片段元件內,即可看到所有的肢體元件均已分散至個別獨立圖層上,元件內的參考線位置即是依照場景尺寸所建立,也就是場景範圍。

raw-image

Step2.
使用自由變形工具來改變每個元件製作動畫時需要的變形中心點位置,頭於下巴處、二隻手與二隻腳均於與身體連接處。為所有圖層於影格13、15、17、30插入關鍵影格,準備開始調整跳躍時的各元件。

raw-image

Step3.
首先暫時鎖定影子圖層,再依序調整影格13、15、17三個位置上的動作,使用移動與旋轉來調整元件姿勢。

raw-image
raw-image

接著複製影格13上所有關鍵影格至影格1上,並全選所有元件一起移動至左上角參考線交叉處之外;複製影格17上所有關鍵影格至影格30上,並全選所有元件一起移動至右上角參考線交叉處之外。

raw-image

Step4.
解除影子圖層鎖定,繼續設定影子的位置、尺寸與半透明:

raw-image
raw-image
raw-image
raw-image

於影格40為所有圖層插入關鍵影格,選取所有影格17上的關鍵影格複製至影格53、選取所有15上的關鍵影格複製至影格55、選取所有13上的關鍵影格複製至影格57、選取所有1上的關鍵影格複製至影格70,均建立傳統補間動畫,設定影格1-13與影格40-53加減速:-50,設定影格17-30與影格57-70加減速:50,完成此範例。

raw-image

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

留言
avatar-img
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
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
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
前言 本篇要介紹一個流程,讓我們可以使用人偶姿勢生成網站或App來製作特意的姿勢與角度,並且經過一套流程之後,轉化成我們要的人物。 在使用Stable Diffusion生成圖片時,最常遇見的問題是人物的動作或位置不照我們的心意生成,尤其是一些高動態或不常見的姿勢與角度,或者手持物品,在某些模型上是
Thumbnail
前言 本篇要介紹一個流程,讓我們可以使用人偶姿勢生成網站或App來製作特意的姿勢與角度,並且經過一套流程之後,轉化成我們要的人物。 在使用Stable Diffusion生成圖片時,最常遇見的問題是人物的動作或位置不照我們的心意生成,尤其是一些高動態或不常見的姿勢與角度,或者手持物品,在某些模型上是
Thumbnail
CG人物也會跳肚皮舞? 看看她如何跳! 〈3d構圖渲染〉CG人物在空靈城前跳起了肚皮舞了… 以上內容如果喜歡的話,也可以點擊收看完整 短片動畫喔~ 好了以上就是今天分享的內容,作品全部屬於自己繪制後再制作成動畫的 ,純屬不易 ,請多多點贊支持喔,如果喜歡我的作品,請記得追蹤我~~
Thumbnail
CG人物也會跳肚皮舞? 看看她如何跳! 〈3d構圖渲染〉CG人物在空靈城前跳起了肚皮舞了… 以上內容如果喜歡的話,也可以點擊收看完整 短片動畫喔~ 好了以上就是今天分享的內容,作品全部屬於自己繪制後再制作成動畫的 ,純屬不易 ,請多多點贊支持喔,如果喜歡我的作品,請記得追蹤我~~
Thumbnail
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
Thumbnail
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
Thumbnail
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
對於動物跑步較複雜之處是在四隻腳的動作表現上,包括跑步時的腳彎曲,是不易以補間動畫表現的,因此需藉由預先準備的彎曲腳元件來替換,由於是不同的元件替換,因此僅能以逐格動畫來表現。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步,除了元件的準備與安排表現動作之外,
Thumbnail
對於動物跑步較複雜之處是在四隻腳的動作表現上,包括跑步時的腳彎曲,是不易以補間動畫表現的,因此需藉由預先準備的彎曲腳元件來替換,由於是不同的元件替換,因此僅能以逐格動畫來表現。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步,除了元件的準備與安排表現動作之外,
Thumbnail
在交通工具中,就屬腳踏車動畫的細節最多,因為除了輪子的轉動外,人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的,其中包括雙腳的動作與踏板的旋轉,雙腳動作需注意變形中心與補間動畫的應用,踏板的旋轉即是要依靠導引線來控制繞圈旋轉,最後搭配場景上場景元件的移動,即可完成騎腳
Thumbnail
在交通工具中,就屬腳踏車動畫的細節最多,因為除了輪子的轉動外,人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的,其中包括雙腳的動作與踏板的旋轉,雙腳動作需注意變形中心與補間動畫的應用,踏板的旋轉即是要依靠導引線來控制繞圈旋轉,最後搭配場景上場景元件的移動,即可完成騎腳
Thumbnail
若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成! 目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。 使用動畫技巧:影片片段元件、
Thumbnail
若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成! 目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。 使用動畫技巧:影片片段元件、
Thumbnail
【檢視範例】【範例下載】 關於逐格動畫最常使用的時機,其實就是當無法以補間動畫方式來呈現的動畫,就得退而求其次的以逐格動畫呈現,即是逐一安排關鍵影格的動畫內容來呈現出動畫,當然就需要搭配適當的變形編輯與動畫內容的準備。 目標動畫效果:由逐格動畫搭配變形編輯與傳統補間動畫導引線,製作蝴蝶循移動軌跡飛
Thumbnail
【檢視範例】【範例下載】 關於逐格動畫最常使用的時機,其實就是當無法以補間動畫方式來呈現的動畫,就得退而求其次的以逐格動畫呈現,即是逐一安排關鍵影格的動畫內容來呈現出動畫,當然就需要搭配適當的變形編輯與動畫內容的準備。 目標動畫效果:由逐格動畫搭配變形編輯與傳統補間動畫導引線,製作蝴蝶循移動軌跡飛
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News