1

第九課 動態時間軸效果

時間軸面板簡介 時間軸動畫設計

時間軸的管理 動畫原理剖析

2

時間軸面板簡介 9-1 時間軸面板簡介

1

部份名稱 功能1.時間軸名稱 可用來選擇要設定效果的時間軸名稱。2.行為設定軸 用於設定行為指令的地方 (參考第 16課 )。3.播放磁頭 顯示目前播放的位置。4.播放控制 設定動畫是否自動及重覆播放。5.影格播放速度 顯示及設定動畫的播放速度。6.影格控制按鈕 用於調整影格位置。

2

3

4 5 6

3

建立動畫效果 (1)

將 AP 元素放入到時間軸

9-2 時間軸動畫設計

先點取此位置後再拖曳到時間軸面板中

4

9-2 時間軸動畫設計

按此鈕確定

拖曳到時間軸中的 AP 元素（會顯示 AP元素名稱）

此時的「自動播放」與「重覆」才能使用

5

建立動畫效果 (2)

建立移動動畫

9-2 時間軸動畫設計

2. 拖曳移動 AP 元素到動畫中的起始位置

1. 先點取左側的圓點（關鍵點）

6

9-2 時間軸動畫設計 2. 拖曳 AP 元素到動畫中的結束位置

3. 勾選「自動播放」與「重覆」

1. 再點取右側的圓點（關鍵點）

7

當勾選時間軸面板上的「自動播放」與「重覆」時，會出現如下圖的視窗畫面，在此點取確定鈕即可。

9-2 時間軸動畫設計

關鍵點的正確名稱是關鍵影格（ key frame ）。

8

建立轉彎動畫 (1)

增加關鍵影格

9-2 時間軸動畫設計

2. 執行此指令

1. 先點取此位置後再按下滑鼠右鍵

新增完成的關鍵影格

9

建立轉彎動畫 (2)

調整動畫效果

9-2 時間軸動畫設計

1

1. 先點取此關鍵影格

2. 拖曳移動 AP 元素的位置

10

9-2 時間軸動畫設計

1. 可再繼續新增其他關鍵影格

2. 調整 AP 元素位罝

11

調整動畫內容 (1)

關鍵影格的移動及刪除 1. 移動關鍵影格

9-2 時間軸動畫設計

先點取此關鍵影格

按住拖曳可移動關鍵影格的位置

12

2. 刪除關鍵影格

9-2 時間軸動畫設計 1

關鍵影格被移除了

2. 執行此指令

1. 點取此關鍵影格後再按滑鼠右鍵

13

調整動畫內容 (2)

圖層物件的增加與移除 一個時間軸最多可以管理 32 個 AP 元素動畫。 所以要建立第二個 AP 元素時，只要將欲建立

動畫的 AP 元素再次拖曳到目前動畫的下方位置即可，這裡的上下順序只是不同的動畫編號，並不會影響到頁面上的 AP 元素重疊效果。

9-2 時間軸動畫設計

14

9-2 時間軸動畫設計

點取 Layer2 後再按下滑鼠右鍵，執行此指令。

Layer2 被移除了

15

調整動畫內容 (3)

「重覆」控制項的作用

9-2 時間軸動畫設計

先勾選「重覆」項目

16

9-2 時間軸動畫設計

此控制項可以讓動畫在控制項之前的範圍內持續播放

「重覆」項目被勾選後，會同時在時間軸上方出現一個控制項。

17

調整動畫內容 (4)

調整動畫播放的時間長短 在預設的情況下，當我們將 AP 元素拖曳到時間

軸上時，會產生一個 15 個影格的影格長度，動畫中的影格數愈多其動畫的播放時間也就愈長。

9-2 時間軸動畫設計

此數字就是影格數而非秒數，同時也是動畫所播放的長度

18

9-2 時間軸動畫設計

再將此關鍵影格按住往右拖曳

19

9-2 時間軸動畫設計

因為「重覆」控制項在整個動畫的左側，所以會產生動畫還未播放完成就會重覆。

如果「重覆」控制項在整個動畫的右側，則會產生動畫播放結束後一段時間才重覆。

20

而這個問題只要在動畫長度的調整過程中，同時變更「重覆播放」控制項在時間軸上的位置就可以獲得解決。

9-2 時間軸動畫設計

先點取此重覆控制項

按住拖曳調整重覆控制項的位置

21

調整動畫內容 (5)

調整動畫開始播放的時間 利用拖曳方式不只可以變更動畫的播放長度，

也能調整動畫開始播放的時間。 但不論是調整動畫長度還是開始播放時間都，

請別忘了同時調整「重覆播放」控制項在時間軸上的位置。

9-2 時間軸動畫設計

先點取 Layer1 的位置

22

9-2 時間軸動畫設計

Layer1 拖曳移動後，也要記得調整重覆控制項的位置，免得動畫產生錯誤。

按住拖曳可調整 Layer1 在時間軸上的位置

23

調整動畫內容 (6)

變更動畫速度

一樣的移動距離之下，左邊這組只有 15 個影格可以播放動畫，相較於右側的 40 個影格來說，速度顯然會快上許多，所以當各位想要設計出不同速度的動畫效果時，影格數的調整就是控制方式。

9-2 時間軸動畫設計

24

錄製動畫內容 9-2 時間軸動畫設計

3. 再點取此位置

1. 先點取第 1 個影格的位置

2. 再點取此 AP Div

4. 執行此指令

25

9-2 時間軸動畫設計

錄製完成的圖層動畫

開始在畫面上拖曳 AP 元素位置（畫面上的曲線就是移動過後的路徑）

26

增加時間軸 9-3 時間軸的管理

在清單中會看到第 2個時間軸 Timeline2

1. 先點取此位置

2. 執行此指令

27

刪除時間軸 9-3 時間軸的管理

1

2. 執行此指令

只剩下一個時間軸了

1. 先從清單中點取要刪除的時間軸

28

時間軸重新命名 9-3 時間軸的管理

2. 執行此指令

1. 先點取要重新命名的時間軸

重新命名完成的時間軸

29

動畫播放速度 9-4 動畫原理剖析

1. 先點取第 1 個影格

2. 第 1 個影格的 AP 元素位置

30

9-4 動畫原理剖析

2.AP 元素的位置也隨之改變了

1. 點取第 3 個影格

2. 新的 AP 元素位置

1. 先點取之後影格

31

動畫影格類型 記得在調整動畫時我們都是先點取時間軸上的

圓點，然後再去變更 AP 元素位置。 位於圓點上的影格就稱為「關鍵影格」，可以

讓我們自由調整 AP 元素在頁面上的位置。 其他的影格則稱為「一般影格」，其內容會根

據前後二個關鍵影格上的 AP 元素位置而自動產生，利用這個特性，當我們在設計移動動畫時，只要調整位於關鍵影格上的 AP 元素位置即可。

9-4 動畫原理剖析

32

第九課習題

33

34

3. 請劃一條線表示地面，兩朵雲彩表示天空，作動畫顯示鳥和蝴蝶在空中飛，青蛙在跳，狗在跑。 ( 四個主角 ) 。

4. 請至科學人雜誌網站作頁框，版面，三個超連結 ( 仿照左側超連結 ) ，及三個時間軸動畫及三個行為設計 ( 置於右側 ) 。

http://sa.ylib.com/about/about03.asp