close

速度變化─搖擺盪鞦韆

本章範例結合了更改變變形點的位置、實體旋轉角度的設定、移動補間動畫的旋轉效果,以及音效的應用。 現在我們就來回憶一下玩盪鞦韆的景象吧!

如果您無法看到範例檔案,請安裝「Macromedia Flash Player」最新版

動畫元件流程說明

元件介紹
本範例會使用到的元件包含 1 張背景、1 組鞦韆、1 支鞦韆桿、1 個陰影, 以及背景音效檔。

動畫製作流程

重點說明
  • 我們在範例中利用更改實體變形點位置的技巧, 配合移動補間動畫的功能製作出鞦韆左右 擺盪的效果。
  • 本範例是模擬真實的鞦韆擺盪速度, 所以還會加入鞦韆速度變化的效果, 我們將會設定鞦韆 由右邊最高點擺盪到左邊最高點時, 速度由最快遞減至無速度狀態;由左邊最高點擺盪到 右邊最高點也是設定相同的速度變化。
  • 鞦韆的陰影因為要緊跟著鞦韆擺盪左右水平移動, 所以也必須設定與鞦韆同步的速度變化。
  • 為了讓整支動畫有完整的視聽感受, 所以我們將會在動畫中加入背景音效, 並設定為循環播 放, 當動畫循環播放時, 音效也會不間斷的反覆播放。

調整鞦韆實體與製作陰影元件

文件屬性設定
本章範例的文件屬性如圖所示:
圖層的配置
我們已經在背景圖層中安排好背景實體, 鞦韆動畫圖層中安排好鞦韆實體的位置, 現在請開啟練習檔 12-learn.fla。

調整鞦韆實體的變形點
利用工具面板中的自由變形工具旋轉實體時, 你會發現實體會以變形點為基準點旋轉, 若能夠更改變形點位置, 那麼我們就能夠配合移動補間動畫, 製作出鞦韆擺盪效果 (有關實體變形點的詳細介紹, 請參考第 6 章)。

瞭解我們要製作的效果後, 接下來就可以開始來調整實體的變形點位置了:

Step1:首先選擇使用工具面板中的自由變形工具, 接著選取舞台中的鞦韆實體後, 你將看到實體的變形點會以空心圓表示。

Step2:拉曳變形點移動到 2 條鞦韆繩頂段中間的位置後, 當旋轉鞦韆實體時就會有鞦韆擺動的效果。

製作鞦韆陰影元件
本範例中製作陰影元件的方法相當簡單, 只要在鞦韆下面繪製出大概的陰影輪廓, 並填入深灰色後, 就可以製作出陰影的效果。

Step1:首先請在鞦韆動畫圖層下面新增陰影動畫圖層, 我們會將陰影繪製在此圖層。

Step2:利用工具面板中的鉛筆工具 在鞦韆下面繪製出陰影輪廓 (只要繪製出大概的形狀就可以了), 接著填入深灰色, 並刪除輪廓線後, 建立名稱為 "陰影" 的圖像元件後, 陰影元件就完成了。

繪製鞦韆陰影輪廓
填入深灰色,並刪除輪廓線
建立成陰影圖像元件

 

製作鞦韆擺動動畫

前面我們已經完成了鞦韆元件的變形點調整, 並製作好了陰影元件, 現在只要再加上鞦韆懸吊桿的鞦韆桿元件, 最後再加上移動補間動畫功能就可以製作出鞦韆動畫。

移動補間動畫說明
在製作鞦韆動畫前, 我們先來瞭解一下移動補間動畫的作用對象與作用條件:

作用對象
實體、群組物件、文字物件
作用條件
1. 移動補間動畫的頭尾影格中, 只能有一個實體、群組物件或是文字元件。
2. 移動補間動畫必須作用在相同的物件上, 才能夠創造出個體移動或縮放效果。
3. 移動補間動畫的頭尾影格中, 最好不要有圖像物件存在。


利用移動補間動畫製作鞦韆動畫
瞭解移動補間動畫的作用對象與作用條件後, 現在我們就可以開始製作鞦韆動畫了。我們已經在舞台中安排了調整過變形點的鞦韆實體, 以及繪製好的陰影元件, 請開啟練習檔 12-learn1.fla。

Step1:背景中我們已經安排了懸吊鞦韆的柱子, 現在請在鞦韆動畫圖層上, 新增一個鞦韆桿圖層, 然後由元件庫面板中, 拉曳鞦韆桿實體到柱子上面的位置, 做為鞦韆的懸吊桿。

Step2:拉曳鞦韆元件, 將鞦韆繩連接在鞦韆桿實體上的繩子上。

Step3:執行 『視窗/變形』 命令開啟變形面板, 設定影格 1 上的鞦韆實體旋轉角度(本例旋轉角度設定-60) 。

Step4:接下來我們將各圖層的時間軸長度增加為 40 影格, 然後分別在鞦韆動畫圖層的 20 影格以及 40 影格上設定關鍵影格。

Step5:選取第 20 影格的鞦韆元件後, 在變形面板中設定鞦韆左擺的角度。

Step6:選取鞦韆動畫圖層的所有影格後, 接著要加入移動補間動畫, 讓鞦韆產生擺動的動畫效果。

 

製作鞦韆陰影動畫

繪製出陰影圖形後, 關鍵影格只要設定與鞦韆同步, 加上移動補間動畫後, 那麼就可以製作出緊跟著鞦韆移動的陰影動畫了。

Step1:首先在鞦韆動畫圖層相同間隔處, 設定陰影動畫圖層的關鍵影格。

Step2:選取整個陰影動畫圖層, 並設定移動補間動畫。

Step3:分別選取陰影動畫圖層各關鍵影格的陰影實體, 水平拉曳在鞦韆實體的正下方。

影格 1 的陰影位置
影格 20 的陰影位置
影格 40 的陰影位置

 

調整陰影及鞦韆的速度變化

為了讓鞦韆擺盪效果更逼真, 我們還要再加入速度變化的效果, 也就是要讓鞦韆由左邊高處盪到右邊高處時, 速度會由最快逐漸遞減;而右邊盪到左邊也是以同樣方式設定, 如此一來鞦韆就會有擺盪的真實感。

Step1:因為陰影跟鞦韆必須如影隨行, 所以我們可以同時設定陰影跟鞦韆的速度變化, 請同時選取鞦韆動畫圖層以及陰影動畫圖層的影格 1, 然後再從自訂加/減速度交談窗中設定加速或減速曲線變化。

Step2:在自訂加/減速度交談窗的線段上點一下, 產生控制點後, 往上拉曳控制點增加動畫速度, 接著分別選取左下角及右上角的控制點後, 拉曳正切點改變曲線變化。

TIP:若想要刪除多餘的控制點, 只要選取控制點後, 按下Delete鍵即可刪除。

Step3:設定好曲線變化後, 先按下 預覽播放, 看看是否如同真實的鞦韆擺盪方式後, 再按下確定鈕完成設定。

Step4:同時選取鞦韆動畫圖層, 以及陰影動畫圖層的影格 20 , 然後在自訂加/減速度交談窗中, 設定與影格 1 相同的曲線變化後, 鞦韆的速度變化設定就完成了。

速度變化的曲線設定好後, 請按下Ctrl+Enter鍵瀏覽完成的鞦韆動畫。

TIP:在曲線中增加的控制點, 就如同在圖層的補間動畫中設定關鍵影格, 直接拉曳控制點, 就可以改變動畫的速度變化, 而且不會在圖層中產生關鍵影格。

單一項目的曲線變化設定

曲線預設的變化, 可以同時設定動畫的位置、旋轉、縮放、顏色、濾鏡變化。若想要控制單一項目中的曲線變化, 那麼你可以取消勾選全部屬性使用單一設定項目後, 再選擇你想要套用曲線變化的項目。

位置:設定動畫移動的加 / 減速度 (例如動畫由左向右移動的動畫效果)。
旋轉:設定動畫旋轉效果的加 / 減速度 (例如風扇旋轉的動畫效果)。
縮放:設定動畫縮放變化的加 / 減速度 (例如由小變大的動畫效果)。
顏色:設定動畫顏色轉換時的加 / 減速度 (例如顏色漸變的動畫效果)。
濾鏡:設定動畫套用濾鏡後的加 / 減速度 (例如套用模糊變清晰的動畫效果)。

 

加入音效

我們雖然已經完成鞦韆動畫的製作, 但是只有動畫卻沒有音效, 顯得有點太安靜了, 所以現在我們就要在動畫中加入背景音效。請開啟練習檔 12-learn2.fla。

Step1:首先請在鞦韆桿圖層上新增背景音效圖層, 接著由元件庫面板中, 拉曳我們準備好的音效到舞台中(音效插入圖層後,你可以看到聲音的音軌會顯示在圖層中)。

Step2:屬性面板中, 設定音效的同步類型為開始, 音效就不會被影格長度限制全部播放完, 然後再選擇重複播放, 讓音效循環播放。

完成音效變化設定後, 你可以按下Ctrl +Enter 鍵瀏覽具有影音效果的動畫, 別忘記要接上喇叭或耳機喔!

arrow
arrow
    全站熱搜

    ntua9761 發表在 痞客邦 留言(0) 人氣()