Animate CC 花飄落水中動畫

更新於 發佈於 閱讀時間約 2 分鐘
若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成!
目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。
使用動畫技巧:影片片段元件、傳統補間動畫、移動補間動畫、導引線。
Step1.
範例檔元件庫中包含花朵與白圈二元件。新增影片片段元件『花朵旋轉』,置入花朵元件於中心並建立移動補間動畫,分別於影格10、20、30插入關鍵影格(全部),於影格20與30上使用『變形工具』略微旋轉花朵元件。
Step2.
回到場景上,新增花朵旋轉圖層並置入花朵旋轉元件於右上角樹枝上,於影格90插入關鍵影格移動花朵至水面上並建立傳統補間動畫,背景圖層於影格90插入影格。
新增花朵旋轉圖層的導引線圖層,使用鉛筆工具繪製花朵落下的軌跡,移動前後關鍵影格上的花朵元件使其中心點吸附導引線,完成花朵的導引線動畫。
Step3.
新增水面花朵圖層,於影格90處插入關鍵影格並置入『花朵』元件使其對齊花朵旋轉元件的位置,移動關鍵影格90至91處,再於影格120處插入關鍵影格,背景圖層於影格130處插入影格。向下移動影格130上的花朵並設定 Alpha:0,建立傳統補間動畫,設定訂加減速:100;
在影格100處於水面花朵圖層上插入關鍵影格,使用變形工具向左轉正花朵,完成花朵沈入水中。
Step4.
新增影片片段元件『水紋』,置入白圈元件並於影格5、20插入關鍵影格,設定影格1上的白圈Alpha:0、放大影格20上的白圈並設定Alpha:0,建立傳統補間動畫,設定影格5-20間加減速:100。向上新增四個圖層,反選圖層1上所有影格並移動複製至上方圖層上(按住Alt),成5個影格時間差的安排。
Step5.
回到場景上,新增水紋圖層於水面花朵圖層之下,並於影格91處插入關鍵影格,置入水紋元件於水面花朵下方,壓扁變形並設定Alpha:30%,完成此範例效果。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
avatar-img
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
【檢視範例】【下載範例】 自然現象效果煙的部分,尤其是在熱騰騰的食物上,包括火鍋、泡麵、溫泉等場景的煙,此種煙的特性是較為急促向上冒,也比較濃厚。 目標動畫效果:使用圓形漸層影片片段元件做為煙的構成內容,搭配在影片片段元件內製作多重的煙元件向上移動,只要安排得宜,即可完成頗具效果的熱騰騰煙霧。 使
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
【檢視範例】【下載範例】 自然現象效果煙的部分,尤其是在熱騰騰的食物上,包括火鍋、泡麵、溫泉等場景的煙,此種煙的特性是較為急促向上冒,也比較濃厚。 目標動畫效果:使用圓形漸層影片片段元件做為煙的構成內容,搭配在影片片段元件內製作多重的煙元件向上移動,只要安排得宜,即可完成頗具效果的熱騰騰煙霧。 使
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
花藝作為一種能量聚焦,今天作品要表達「放鬆」的能量。 既是放鬆,就想用最輕鬆的花型來製作,於是採用手綁花,完成後放置在澆水桶形狀的容器裡,增添漫步田園的舒心感受。
Thumbnail
這圖漂亮嗎? 製作過程剪剪貼貼, 詳細順序如何取得已經忘了!!    過程中曾用PowerPoint 中背景移除的功能 不過複製圖片時背景會是白色的....而其實我只是要那單獨的一團花 因為想把手中的那團花序貼到這片心葉上 後來用了Clip studio 取花後這才如願
Thumbnail
在 After Effects 中,彈跳效果(Bounce Expression)可以讓層看起來像是受到彈簧或重力的影響,常用於創建自然的運動效果。這些表達式可以應用於位置(Position)、比例(Scale)、透明度(Opacity)等屬性。
薰風吹揚起一朵朵花 腳步一朵朵踩上天空 雲氣狂亂 各色花朵瞬息萬變 步伐卻踏得平穩從容 大氣層隨著漫步而離開地球 一起深入幽暗宇宙 看見黑洞沉睡不醒 看見銀河澄澈潔淨 看不見地球如繪本闔上童年
Thumbnail
▪︎咒語描述: 水彩風格的花園中,飛舞的鳥兒與蝴蝶,添加微妙的陰影與光線效果。 ▪︎工具:Copilot
Thumbnail
在春日的清晨,一場細雨輕輕落下,如同天空的淚滴,撒在大地的每一寸土地上。雨滴跳躍著,為大地注入生命的活力,為花朵們帶來了盼望的訊息。 雨水滴落在花瓣上,彷彿在跟花朵們輕輕交談,訴說著大自然的神奇。花朵們在雨中搖曳,如同跳動的音符,為大地譜奏著一首美妙的樂章。雨水洗淨了塵世的煩憂…......
Thumbnail
插花藝術是一門令人著迷的藝術形式,結合了自然美感與人類創造力的絕妙結合。 美感與魅力 插花藝術之美感來自於多重因素: 自然之美的展現: 插花藝術展現了自然界各種植物和花卉的美麗,每一朵花、每一片葉子都是大自然的杰作,將這些元素結合在一起,創造出令人驚艷的視覺效果。 創作的無限可能性: 插花藝
Thumbnail
  《花愛詞》 花舞輕揚如夢幻,愛語低徊心湖畔。 嬌姿淡雅香滿徑,微風拂面情韻長。 生命美好時光促,愛之力量暖心房。 詩人執筆書華章,永恆經典傳四方。 《花之頌》 花間輕舞留餘香,愛的呼喚動心腸。 嬌顏綻放如詩畫,微風拂過意悠揚。 生命短暫情無價,愛如春風拂面涼。 詩人感懷書
Thumbnail
鐘型橘色花瓣,有紅紫色條紋的花朵,我誤以為是蝴蝶棲身在綠葉間。 手機靠近,卡嚓聲響起,「蝴蝶」聞風不動。 忍不住伸出食指觸碰「蝴蝶」,啊~這是花呀,那是蝴蝶,真相大白時刻,在心裡狂笑 按圖搜查這像蝴蝶花朵的芳名, 紋瓣懸鈴花 ,風鈴花,金鈴花,錦葵,宮燈花,吊燈花,猩猩花。 苘麻也寫作檾麻
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
花藝作為一種能量聚焦,今天作品要表達「放鬆」的能量。 既是放鬆,就想用最輕鬆的花型來製作,於是採用手綁花,完成後放置在澆水桶形狀的容器裡,增添漫步田園的舒心感受。
Thumbnail
這圖漂亮嗎? 製作過程剪剪貼貼, 詳細順序如何取得已經忘了!!    過程中曾用PowerPoint 中背景移除的功能 不過複製圖片時背景會是白色的....而其實我只是要那單獨的一團花 因為想把手中的那團花序貼到這片心葉上 後來用了Clip studio 取花後這才如願
Thumbnail
在 After Effects 中,彈跳效果(Bounce Expression)可以讓層看起來像是受到彈簧或重力的影響,常用於創建自然的運動效果。這些表達式可以應用於位置(Position)、比例(Scale)、透明度(Opacity)等屬性。
薰風吹揚起一朵朵花 腳步一朵朵踩上天空 雲氣狂亂 各色花朵瞬息萬變 步伐卻踏得平穩從容 大氣層隨著漫步而離開地球 一起深入幽暗宇宙 看見黑洞沉睡不醒 看見銀河澄澈潔淨 看不見地球如繪本闔上童年
Thumbnail
▪︎咒語描述: 水彩風格的花園中,飛舞的鳥兒與蝴蝶,添加微妙的陰影與光線效果。 ▪︎工具:Copilot
Thumbnail
在春日的清晨,一場細雨輕輕落下,如同天空的淚滴,撒在大地的每一寸土地上。雨滴跳躍著,為大地注入生命的活力,為花朵們帶來了盼望的訊息。 雨水滴落在花瓣上,彷彿在跟花朵們輕輕交談,訴說著大自然的神奇。花朵們在雨中搖曳,如同跳動的音符,為大地譜奏著一首美妙的樂章。雨水洗淨了塵世的煩憂…......
Thumbnail
插花藝術是一門令人著迷的藝術形式,結合了自然美感與人類創造力的絕妙結合。 美感與魅力 插花藝術之美感來自於多重因素: 自然之美的展現: 插花藝術展現了自然界各種植物和花卉的美麗,每一朵花、每一片葉子都是大自然的杰作,將這些元素結合在一起,創造出令人驚艷的視覺效果。 創作的無限可能性: 插花藝
Thumbnail
  《花愛詞》 花舞輕揚如夢幻,愛語低徊心湖畔。 嬌姿淡雅香滿徑,微風拂面情韻長。 生命美好時光促,愛之力量暖心房。 詩人執筆書華章,永恆經典傳四方。 《花之頌》 花間輕舞留餘香,愛的呼喚動心腸。 嬌顏綻放如詩畫,微風拂過意悠揚。 生命短暫情無價,愛如春風拂面涼。 詩人感懷書
Thumbnail
鐘型橘色花瓣,有紅紫色條紋的花朵,我誤以為是蝴蝶棲身在綠葉間。 手機靠近,卡嚓聲響起,「蝴蝶」聞風不動。 忍不住伸出食指觸碰「蝴蝶」,啊~這是花呀,那是蝴蝶,真相大白時刻,在心裡狂笑 按圖搜查這像蝴蝶花朵的芳名, 紋瓣懸鈴花 ,風鈴花,金鈴花,錦葵,宮燈花,吊燈花,猩猩花。 苘麻也寫作檾麻