速度變化─搖擺盪鞦韆
本章範例結合了更改變變形點的位置、實體旋轉角度的設定、移動補間動畫的旋轉效果,以及音效的應用。 現在我們就來回憶一下玩盪鞦韆的景象吧!
如果您無法看到範例檔案,請安裝「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 鍵瀏覽具有影音效果的動畫, 別忘記要接上喇叭或耳機喔!
留言列表