1 / 34

第九課 動態時間軸效果

第九課 動態時間軸效果. 時間軸面板簡介 時間軸動畫設計 時間軸的管理 動畫原理剖析. 時間軸面板簡介. 9-1 時間軸面板簡介. 4. 5. 6. 1. 2. 3. 建立動畫效果 (1). 9-2 時間軸動畫設計. 將 AP 元素放入到時間軸. 先點取此位置後再拖曳到時間軸面板中. 9-2 時間軸動畫設計. 按此鈕確定. 此時的「自動播放」與「重覆」才能使用. 拖曳到時間軸中的 AP 元素（會顯示 AP 元素名稱）. 建立動畫效果 (2). 9-2 時間軸動畫設計. 建立移動動畫.

justina-perkins
Download Presentation

第九課 動態時間軸效果

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第九課 動態時間軸效果 時間軸面板簡介 時間軸動畫設計 時間軸的管理 動畫原理剖析

  2. 時間軸面板簡介 9-1 時間軸面板簡介 4 5 6 1 2 3

  3. 建立動畫效果(1) 9-2 時間軸動畫設計 • 將AP元素放入到時間軸 先點取此位置後再拖曳到時間軸面板中

  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 時間軸動畫設計 • 增加關鍵影格 1.先點取此位置後再按下滑鼠右鍵 2.執行此指令 新增完成的關鍵影格

  9. 建立轉彎動畫(2) 9-2 時間軸動畫設計 1 • 調整動畫效果 2.拖曳移動AP元素的位置 1.先點取此關鍵影格

  10. 9-2 時間軸動畫設計 2.調整AP元素位罝 1.可再繼續新增其他關鍵影格

  11. 調整動畫內容(1) 9-2 時間軸動畫設計 • 關鍵影格的移動及刪除 • 1.移動關鍵影格 先點取此關鍵影格 按住拖曳可移動關鍵影格的位置

  12. 1 9-2 時間軸動畫設計 • 2.刪除關鍵影格 1.點取此關鍵影格後再按滑鼠右鍵 關鍵影格被移除了 2.執行此指令

  13. 調整動畫內容(2) 9-2 時間軸動畫設計 • 圖層物件的增加與移除 • 一個時間軸最多可以管理32個AP元素動畫。 • 所以要建立第二個AP元素時，只要將欲建立動畫的AP元素再次拖曳到目前動畫的下方位置即可，這裡的上下順序只是不同的動畫編號，並不會影響到頁面上的AP元素重疊效果。

  14. 9-2 時間軸動畫設計 點取Layer2後再按下滑鼠右鍵，執行此指令。 Layer2被移除了

  15. 調整動畫內容(3) 9-2 時間軸動畫設計 • 「重覆」控制項的作用 先勾選「重覆」項目

  16. 9-2 時間軸動畫設計 「重覆」項目被勾選後，會同時在時間軸上方出現一個控制項。 此控制項可以讓動畫在控制項之前的範圍內持續播放

  17. 調整動畫內容(4) 9-2 時間軸動畫設計 • 調整動畫播放的時間長短 • 在預設的情況下，當我們將AP元素拖曳到時間軸上時，會產生一個15個影格的影格長度，動畫中的影格數愈多其動畫的播放時間也就愈長。 此數字就是影格數而非秒數，同時也是動畫所播放的長度

  18. 9-2 時間軸動畫設計 再將此關鍵影格按住往右拖曳

  19. 9-2 時間軸動畫設計 因為「重覆」控制項在整個動畫的左側，所以會產生動畫還未播放完成就會重覆。 如果「重覆」控制項在整個動畫的右側，則會產生動畫播放結束後一段時間才重覆。

  20. 9-2 時間軸動畫設計 • 而這個問題只要在動畫長度的調整過程中，同時變更「重覆播放」控制項在時間軸上的位置就可以獲得解決。 先點取此重覆控制項 按住拖曳調整重覆控制項的位置

  21. 調整動畫內容(5) 9-2 時間軸動畫設計 • 調整動畫開始播放的時間 • 利用拖曳方式不只可以變更動畫的播放長度，也能調整動畫開始播放的時間。 • 但不論是調整動畫長度還是開始播放時間都，請別忘了同時調整「重覆播放」控制項在時間軸上的位置。 先點取Layer1的位置

  22. 9-2 時間軸動畫設計 按住拖曳可調整Layer1在時間軸上的位置 Layer1拖曳移動後，也要記得調整重覆控制項的位置，免得動畫產生錯誤。

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

  24. 錄製動畫內容 9-2 時間軸動畫設計 2.再點取此AP Div 3.再點取此位置 4.執行此指令 1.先點取第1個影格的位置

  25. 9-2 時間軸動畫設計 開始在畫面上拖曳AP元素位置（畫面上的曲線就是移動過後的路徑） 錄製完成的圖層動畫

  26. 增加時間軸 9-3 時間軸的管理 1.先點取此位置 2.執行此指令 在清單中會看到第2個時間軸Timeline2

  27. 刪除時間軸 9-3 時間軸的管理 1 1.先從清單中點取要刪除的時間軸 2.執行此指令 只剩下一個時間軸了

  28. 時間軸重新命名 9-3 時間軸的管理 1.先點取要重新命名的時間軸 2.執行此指令 重新命名完成的時間軸

  29. 動畫播放速度 9-4 動畫原理剖析 2.第1個影格的AP元素位置 1.先點取第1個影格

  30. 9-4 動畫原理剖析 2.新的AP元素位置 2.AP元素的位置也隨之改變了 1.先點取之後影格 1.點取第3個影格

  31. 動畫影格類型 9-4 動畫原理剖析 • 記得在調整動畫時我們都是先點取時間軸上的圓點，然後再去變更AP元素位置。 • 位於圓點上的影格就稱為「關鍵影格」，可以讓我們自由調整AP元素在頁面上的位置。 • 其他的影格則稱為「一般影格」，其內容會根據前後二個關鍵影格上的AP元素位置而自動產生，利用這個特性，當我們在設計移動動畫時，只要調整位於關鍵影格上的AP元素位置即可。

  32. 第九課習題

  33. 3. 請劃一條線表示地面，兩朵雲彩表示天空，作動畫顯示鳥和蝴蝶在空中飛，青蛙在跳，狗在跑。(四個主角) 。 4. 請至科學人雜誌網站作頁框，版面，三個超連結(仿照左側超連結) ，及三個時間軸動畫及三個行為設計(置於右側) 。 http://sa.ylib.com/about/about03.asp

More Related