第 13 章 速度變化 ─ 我彈！我彈！我彈彈彈！ 著作權所有 © 旗標出版股份有限公司.

Presentation on theme: "第 13 章 速度變化 ─ 我彈！我彈！我彈彈彈！ 著作權所有 © 旗標出版股份有限公司."— Presentation transcript:

1 第 13 章 速度變化 ─ 我彈！我彈！我彈彈彈！ 著作權所有 © 旗標出版股份有限公司

2 本章提要 動畫元件與流程說明 建立元件 製作足球動畫 製作足球陰影動畫 加入足球咚咚聲 顏色效果大蒐密 舉一反三時間 － 驚險的飛行

3 速度變化 本範例結合了移動補間動畫的速度變化效果、點陣圖的應用、以及聲音的應用。請打開範例檔 ch13.swf , 我們來看看這個喜歡亂彈的足球：

4 動畫元件與流程說明 元件介紹 動畫製作流程 重點說明

5 元件介紹 本範例的成員包含 1 顆足球 、1 個陰影及 2 段聲音檔：

6 動畫製作流程

7 重點說明 本範例的目的是模擬出真實的足球彈跳情況, 所以除了利用移動補間動畫讓足球一路向右彈跳之外, 還要讓彈跳中的足球產生速度變化效果, 並發出碰撞聲。要注意的是, 足球的陰影不但要緊跟著足球移動, 且必須隨著足球高度改變大小、顏色濃淡, 同時也要加入和足球相同的速度變化；而音效也要隨足球落下高度降低而變小聲, 這樣才能讓動畫整體步伐一致。

8 建立元件 足球 足球的影子

9 足球 執行『檔案 / 匯入 / 匯入至舞台』命令, 從書附光碟的範例 \ ch13 資料夾中, 匯入足球圖片 .jpg 圖檔：

10 足球 由於這張足球圖片的四周含有白邊, 所以接著要進行「去背」工作, 把多餘的白色背景去掉, 只留下中央的足球圖案。請用選取工具選取足球圖片, 然後執 行『修改 / 打散』命令 來分離圖片成為填色區 域, 再按下 鍵取消選 取狀態：

11 足球 再來我們要將圖片中的白色區域選取起來：

12 足球 按下 鍵, 將選取的白色範圍刪除, 我們所要的足球就完成了。最後請選取足球圖案後按下 鍵, 將它 變成圖像元件：

13 足球的影子 請先調配陰影的色彩, 在調色盤面板中設定由黑到透明的 放射狀漸層：

14 足球的影子 用橢圓形工具畫出一個無框線的圓形物件, 由於圓形內部會填入放射狀的黑色漸層, 看起來就像是個陰影了：

15 足球的影子 以自由變形工具調整陰影, 將它稍微壓扁一點, 這樣 足球的影 子就大功 告成了： 4. 最後將陰影轉換成圖像元件。

16 製作足球動畫 設定動畫文件屬性 安排圖層 足球的動畫設定 利用格線來對齊位置 製作速度變化與旋轉效果 自動旋轉的運用

17 設定動畫文件屬性 此範例共使用了 35 格影格, 用 12 fps 速度播放的話, 可以有 2.8 秒的長度；其文件屬性設定如下：

18 安排圖層 請建立兩個圖 層, 按照右圖分 別命名；然後開啟元件庫面板, 將足球圖像元件拉曳到足球圖層, 而足球的影子圖像元件則拉曳到足球的影子圖層：

19 足球的動畫設定 首先設定影格 1 的足球位置, 請將足球移到舞台的左上角, 我們準備讓它往下掉, 並且一路往右邊彈跳過去。
另由於我們暫時用不到 足球的影子圖層, 所以請將該圖層 設為鎖定的狀態：

20 足球的動畫設定 接著是設定足球落下時的位置, 我們將落下過程設 定為 10 格影格 的長度：

21 足球的動畫設定 足球落到地面上後總會反彈幾下吧！所以我們要繼續插入幾個關鍵影格, 分別設定幾個反彈與落下時的位置；此範例要讓足球再彈跳兩次, 並且愈來愈向右邊移動, 最後滾出畫面之外。

22 足球的動畫設定

23 足球的動畫設定

24 足球的動畫設定 每個彈跳的起始與結束位置都設定完畢後, 再來就是要讓 Flash 自動產生動畫了；我們要加入的是移動補間動畫, 請用下述方式, 一次將所有關鍵影格間的動畫做好。

25 足球的動畫設定

26 利用格線來對齊位置 在設定落下位置時, 如果希望每次都能準確地落在同一個地平面, 可按下 鍵顯示格線, 並固定以其中某一條格線來做為虛擬的地面, 這樣足球每次掉到地面的位置就不會忽高忽低 了。再按一 次, 可取消 顯示格線。

27 製作速度變化與旋轉效果 請利用屬性面板中的加 / 減速功能來設定速度變化：

28 製作速度變化與旋轉效果

29 製作速度變化與旋轉效果 其它關鍵影格也請仿照上述方式來設定速度變化, 只要關鍵影格中的足球是在半空中 (準備落下), 就將加 / 減速滑動桿調低；而關鍵影格中的足球若是在地上 (準備彈起), 則將加 / 減速滑動桿調高。設定完畢後, 可按下 鍵預覽一下彈跳結果, 並視需要修改加 / 減速項目的數值。

30 製作速度變化與旋轉效果 足球在彈跳的過程中難免會轉個幾圈, 要製作這種效果, 只要在屬性面板中設定旋轉圈數即可：

31 製作速度變化與旋轉效果 接下來為每個關鍵影格設定旋轉圈數, 不過因為後面的彈跳過程比較短, 所以只要將每個關鍵影格都設定旋轉 1 圈即可；至此, 足球部份的動畫便告完工。

32 製作速度變化與旋轉效果

33 自動旋轉的運用 在設定旋轉方式時有一個自動項目, 可用來自訂旋轉效果；如果你想要旋轉的圈數不到 1 圈, 那麼可先在動畫的起始 或結尾影格中, 用自由變形工具自行將物件旋轉一個角度, 再套用自動旋轉方式, 則移動補間動畫就會自動產生旋轉 效果。

34 製作足球陰影動畫 製作陰影位移動畫 陰影的縮放動畫與速度變化

35 製作陰影位移動畫 請將足球的影子圖層解除鎖定並將足球圖層鎖起來, 在練習檔中此圖層影格 1 中已經有一個陰影了, 請將此 陰影移
動到足球正下方：

36 製作陰影位移動畫 在影格 35 處按下 鍵, 插入結尾關鍵影格：

37 製作陰影位移動畫 選取影格 1, 在屬性面板中設定移動補間動畫：

38 製作陰影位移動畫 接著選取影格 10, 並將陰影實體移動到適當位置：

39 製作陰影位移動畫 跟著足球圖層的關鍵影格來設定陰影的位置, 也就是分別在影格 15、20、23、26、35 移動陰影 實體, 讓兩
個圖層中的 關鍵影格位 置相同：

40 陰影的縮放動畫與速度變化 經過以上的設定後, 陰影實體已會跟著足球跑了, 但是當足球在半空中時,影子應該是又小又淡, 而當足球慢慢落
下時, 影子也會 逐漸變大、顏色 加深, 所以我們 再來修飾一下：

41 陰影的縮放動畫與速度變化

42 陰影的縮放動畫與速度變化 同樣地, 請調整影格 15 及影格 23 的陰影實體 (只有足球在半空中時的陰影需要改變大小與透明度), 而由於足球愈彈愈低, 所以我們也要配合足球的高度來給予適當的陰影實體設定。

43 陰影的縮放動畫與速度變化

44 陰影的縮放動畫與速度變化 若你按下 鍵預覽動畫, 會發現陰影實體怎麼有時跟不上足球實體的腳步？原來先前我們在足球實體上做了漸快及漸慢的速度變化, 所以每 1 格關鍵影格中的陰影實體也要有相同的速度變化才行, 請利用屬性面板中的加 / 減速功能來進行調整。

45 速度變化 陰影的縮放動畫與

46 加入足球咚咚聲 插入並調整足球碰撞地板音效 插入並調整足球滾動音效

47 插入並調整足球碰撞地板音效 音效最好放置在獨立的圖層, 以便編輯, 所以請新增 2 個圖層給 2 種音效使用, 你可以開啟 ch13-learn3.fla 進行以下練習：

48 插入並調整足球碰撞地板音效 在碰撞聲圖層中配合著足球的動畫, 在足球著地的影格處插入關鍵影格, 也就是在影格 10、20、26 處插入關鍵影格。接著再將足球碰撞到地板的碰撞聲從元件庫拉曳到這些影格的舞台中：

49 碰撞地板音效 插入並調整足球

50 插入並調整足球碰撞地板音效 接著利用屬性面板調整一下聲音元件的音量大小與聲音的同步類型。由於碰撞是簡短的聲音檔, 而且必須在足球碰撞到地面時立即播放, 所以使用事件同步類型最恰當；另外隨著足球落下的高度變小, 聲音檔的音量也要逐漸變小才適當。在本例中由於聲音檔預設就是事件同步類型, 所以不必修改；至於音量, 只要把第 2 次與第 3 次 (也就是 20 與 26 格) 的碰撞音量調低即可：

51 插入並調整足球碰撞地板音效

52 插入並調整足球碰撞地板音效

53 插入並調整足球碰撞地板音效 再點選第 3 次碰撞聲所在的影格 26, 把第 3 次的碰撞音 量調得更低：

54 插入並調整足球滾動音效 最後還要加上一段足球滾動音效, 讓動畫更完美。足球滾動音效要加在足球最後一次落地之後, 我們估算大約在影格 28 較適當, 所以在滾動聲圖層的影格 28 插入關鍵影格, 然後再利用屬性面板來插入音效, 並將滾動聲的音量調低, 還要修改聲音起始跟結束位置, 以及稍微製造出聲音淡出的效果：

55 插入並調整足球滾動音效

56 插入並調整足球滾動音效

57 顏色效果大蒐密 亮度 (Brightness) 色調 (Tint) Alpha － 透明度 進階 － 綜合設定

58 顏色效果大蒐密 欲使用顏色效果, 請點選欲使用效果的物件, 並開啟屬性面板, 在顏色列示窗中點選所要套用的效果：

59 亮度 (Brightness) 設定實體整體色彩的明暗度。 ch13-1.fla

60 色調 (Tint) 將實體所包含的色彩, 全部著上另一種顏色。

61 Alpha － 透明度 設定實體的透明度。 ch13-3.fla

62 進階 － 綜合設定 選擇進階項目再按下設定鈕, 我們可以細部調整實體的 RGB 值, 以及增減 RGB 色頻的色階數, 並且可以同時設定整體色彩的透明度。

63 進階 － 綜合設定

64 舉一反三時間 － 驚險的飛行 以下的範例運用了「速度變化」與「加入音效」的技巧, 讓原本即將撞在一起的兩架飛機, 在千鈞一髮之際錯身而過, 最後再讓飛機以淡出的方式消失在天際。 請播放 ch13-5.swf 檔來觀賞：

65 舉一反三時間 － 驚險的飛行 範例 ch13-5.fla 的圖層與關鍵影格配置如下：

66 舉一反三時間 － 驚險的飛行

67 舉一反三時間 － 驚險的飛行 經過這樣的設定後, 一架飛機會往右飛, 而一架飛機則往上飛, 但當它們飛到畫面中央時, 由於飛行的速度都相同, 所以鐵定會撞在一起。為了避免這種遺憾的結局, 我們將其中一架飛機設定由快到慢 (或由慢到快亦可) 的速度變化,這樣兩架飛機就會以些微的間隙錯身而過了。

68 舉一反三時間 － 驚險的飛行

69 舉一反三時間 － 驚險的飛行 在影格 7 新增關鍵影格, 再將元件庫中的引擎聲拉曳到舞台中：

70 舉一反三時間 － 驚險的飛行 完成聲音的設定後, 請如下圖設定飛機一 圖層, 由快到慢 的速度變化：

71 舉一反三時間 － 驚險的飛行 接著在影格 25 處, 由屬性面板設定飛機一的 Alpha 值為 0%, 使飛機一產生愈飛愈遠, 並漸漸消失在天際的感覺, 進行到此動畫就完成了！