Animate CC 直昇機動畫

閱讀時間約 3 分鐘
直昇機在飛行時,主螺旋槳與尾翼副螺旋槳是表現重點,此外還可以加上飛彈發射的安排,以及背景的移動,讓動畫更逼真與完整!
目標動畫效果:應用影片片段元件安排各元件的動畫,包括直昇機與飛彈,最後組合成完整直昇機與飛彈發射,表現特別的交通工具動畫。
使用動畫技巧:影片片段元件、傳統補間動畫、逐格動畫。
Step1.
範例檔元件庫內包含了雲、機身、螺旋槳、葉片、飛彈等元件。
為雲圖層在影格200處插入關鍵影格,背景圖層在影格200處插入影格。在影格200上向左移動雲元件,在滑鼠放開前請讓移動方塊殘影對齊原元件位置,確認對齊後才放開滑鼠,建立傳統補間完成循環雲背景。
Step 2.
新增影片片段『螺旋槳』,置入單片螺旋槳元件使用變形工具移動變形中心點至葉片轉軸上,於影格2插入關鍵影格,執行『修改 >變形 > 水平翻轉』,完成逐格的螺旋槳。
再新增影片片段『尾槳轉』,分二圖層置入尾槳元件,一為水平一為垂直,均於影格18處插入關鍵影格,建立傳統補間動畫,均設定順時針旋轉2圈。
Step 3.
新增影片片段『直昇機』,置入機身、螺旋槳、尾槳轉三元件。新增影片片段『發射飛彈』,置入飛彈元件,於影格5插入關鍵影格,垂直向下移動飛彈,設定傳統補間與加減速100,繼續於影格10與25插入關鍵影格,水平移動關鍵影格25上的飛彈至左側並設定Alpha=0,設定傳統補間與加減速-100。
Step 4.
新增影片片段『直昇機發射飛彈』,分圖層置入『直昇機』與『發射飛彈』元件,移動發射飛彈圖層得起始關鍵影格至影格15,並於影格40處插入影格。
回場景上拉入直昇機於獨立圖層並安排直昇機於右側場景外,於影格15處插入關鍵影格,移動直昇機成半台於場景右側入鏡,繼續於影格30插入關鍵影格,建立影格1-15的傳統補間;繼續於影格50處插入關鍵影格,移動直昇機完整進入場景,繼續於影格90插入關鍵影格,建立影格30-50的傳統補間。
Step 5.
繼續於影格110插入關鍵影格,移動直昇機至左側場景外,繼續於影格140插入關鍵影格,移動直昇機至場景內下方,建立影格90-140的傳統補間;繼續於影格180與200處插入關鍵影格,移動影格200上的直昇機至場景右側邊界外,建立影格180-200的傳統補間。
Step 6.
新增發射飛彈圖層,於影格51處插入關鍵影格並拉入『直昇機發射飛彈』元件,並對齊下方直昇機,於發射飛彈圖層的影格90處插入『空白關鍵影格』,同樣於直昇機圖層的影格51處插入『空白關鍵影格』。
繼續於發射飛彈圖層影格141處插入關鍵影格並拉入『直昇機發射飛彈』元件,並對齊下方直昇機,於發射飛彈圖層的影格180處插入『空白關鍵影格』,同樣於直昇機圖層的影格141處插入『空白關鍵影格』,完成直昇機發射飛彈的安排。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
在大自然的場景下,除了昆蟲與樹葉的動態表現外,樹葉上的露水滴落往往成為動畫的焦點,因此水滴滴落時的動態表現,不同於雨滴,需要更細膩的表現出來。  目標動畫效果:利用影片片段元件與導引線動畫,表現大自然之中的元素動態,包括昆蟲飛舞、葉子晃動、葉上水滴滴落等。 使用動畫技巧:
動畫裡最常需要的自然現象即是下雨,為了讓雨滴更寫實,因此使用雨滴元件而非一般的線段,搭配水面水紋漣漪與倒影的波動,來讓整個下雨場景更逼真! 目標動畫效果:利用影片片段元件安排大量的雨滴落下,加上以圓圈製作的水紋漣漪,以及以形狀補間動畫內容的遮色片表現倒影波動,完成逼真的
若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成! 目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。 使用動畫技巧:影片片段元件、
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
【檢視範例】【下載範例】 自然現象效果煙的部分,尤其是在熱騰騰的食物上,包括火鍋、泡麵、溫泉等場景的煙,此種煙的特性是較為急促向上冒,也比較濃厚。 目標動畫效果:使用圓形漸層影片片段元件做為煙的構成內容,搭配在影片片段元件內製作多重的煙元件向上移動,只要安排得宜,即可完成頗具效果的熱騰騰煙霧。 使
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
在大自然的場景下,除了昆蟲與樹葉的動態表現外,樹葉上的露水滴落往往成為動畫的焦點,因此水滴滴落時的動態表現,不同於雨滴,需要更細膩的表現出來。  目標動畫效果:利用影片片段元件與導引線動畫,表現大自然之中的元素動態,包括昆蟲飛舞、葉子晃動、葉上水滴滴落等。 使用動畫技巧:
動畫裡最常需要的自然現象即是下雨,為了讓雨滴更寫實,因此使用雨滴元件而非一般的線段,搭配水面水紋漣漪與倒影的波動,來讓整個下雨場景更逼真! 目標動畫效果:利用影片片段元件安排大量的雨滴落下,加上以圓圈製作的水紋漣漪,以及以形狀補間動畫內容的遮色片表現倒影波動,完成逼真的
若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成! 目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。 使用動畫技巧:影片片段元件、
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
【檢視範例】【下載範例】 自然現象效果煙的部分,尤其是在熱騰騰的食物上,包括火鍋、泡麵、溫泉等場景的煙,此種煙的特性是較為急促向上冒,也比較濃厚。 目標動畫效果:使用圓形漸層影片片段元件做為煙的構成內容,搭配在影片片段元件內製作多重的煙元件向上移動,只要安排得宜,即可完成頗具效果的熱騰騰煙霧。 使
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。