建立移動補間動畫

  1. Adobe Animate 使用手冊
  2. Animate 簡介
    1. Animate 的新功能
    2. 視覺詞彙
    3. Animate 系統需求
    4. Animate 鍵盤快速鍵
    5. 在 Animate 中使用多個檔案類型
  3. 動畫
    1. Animate 中的動畫基本概念
    2. 如何在 Animate 中使用影格及關鍵影格
    3. Animate 中的逐格動畫
    4. 如何在 Animate 中使用傳統補間動畫
    5. 筆刷工具
    6. 移動導引線
    7. 移動補間動畫與 ActionScript 3.0
    8. 關於移動補間動畫
    9. 移動補間動畫
    10. 建立移動補間動畫
    11. 使用屬性關鍵影格
    12. 使用補間動畫將位置製成動畫
    13. 如何使用移動編輯器編輯移動補間動畫
    14. 編輯補間動畫的移動路徑
    15. 操作移動補間動畫
    16. 新增自訂加/減速
    17. 建立和套用移動預設效果
    18. 設定動畫補間動畫範圍
    19. 使用儲存為 XML 檔案的移動補間動畫
    20. 移動補間動畫與傳統補間動畫
    21. 形狀補間動畫
    22. 在 Animate 中使用骨塊工具動畫
    23. 在 Animate 進行角色製作
    24. 如何在 Adobe Animate 中使用遮色片圖層
    25. 如何在 Animate 中使用場景
  4. 互動
    1. 如何使用 Animate 建立按鈕
    2. 將 Animate 專案轉換成其他文件類型格式
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 在 Animate 中使用程式碼片段增加互動功能
    5. 建立自訂 HTML5 組件
    6. 在 HTML5 Canvas 中使用組件
    7. 建立自訂組件:範例
    8. 自訂組件的程式碼片段
    9. 最佳作法 - 使用 Animate 做廣告
    10. 虛擬實境編寫和發佈
  5. 工作區和工作流程
    1. 建立和管理繪圖筆刷
    2. 在 HTML5 Canvas 文件中使用 Google 字體
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作區
    6. 在 HTML5 Canvas 文件中使用網頁字體
    7. 時間軸與 ActionScript
    8. 使用多重時間軸
    9. 設定偏好設定
    10. 使用 Animate 編寫面板
    11. 使用 Animate 建立時間軸圖層
    12. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    13. 移動和複製物件
    14. 範本
    15. Animate 中的尋找和取代
    16. 還原、重做和操作記錄面板
    17. 鍵盤快速鍵
    18. 如何在 Animate 中使用時間軸
    19. 建立 HTML 擴充功能
    20. 影像和 GIF 動畫的最佳化選項
    21. 匯出影像和 GIF 的設定
    22. Animate 中的資源面板
  6. 多媒體和視訊
    1. 在 Animate 中變形及結合圖像物件
    2. 在 Animate 中建立並使用元件實體
    3. 影像描圖
    4. 如何在 Adobe Animate 中使用聲音
    5. 匯出 SVG 檔案
    6. 建立要在 Animate 中使用的視訊檔案
    7. 如何在 Animate 增加視訊
    8. 使用視訊提示點
    9. 使用 Animate 繪製及建立物件
    10. 調整線條和形狀
    11. 使用 Animate CC 中的筆畫、填色和漸層
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的色彩面板
    14. 使用 Animate 開啟 Flash CS6 檔案
    15. 在 Animate 中使用傳統文字
    16. 將圖案放入 Animate 中
    17. Animate 中匯入的點陣圖
    18. 3D 圖像
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 繪製線條和形狀
    21. 使用 Animate 中的元件庫
    22. 匯出聲音
    23. 在 Animate CC 中選取物件
    24. 在 Animate 中使用 Illustrator AI 檔案
    25. 使用噴刷工具套用圖樣
    26. 套用混合模式
    27. 排列物件
    28. 使用命令選單自動執行工作
    29. 多國語言文字
    30. 使用 Animate 中的攝影機
    31. 搭配使用 Animate 與 Adobe Scout
    32. 使用 Fireworks 檔案
    33. 圖像濾鏡
    34. 聲音和 ActionScript
    35. 繪圖偏好設定
    36. 使用鋼筆工具繪圖
  7. 平台
    1. 將 Animate 專案轉換成其他文件類型格式
    2. 自訂平台支援
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 建立並發佈 WebGL 文件
    5. 如何封裝 AIR for iOS 的應用程式
    6. 發佈 AIR for Android 應用程式
    7. Adobe AIR for Desktop 的發佈功能
    8. ActionScript 發佈設定
    9. 最佳作法 - 在應用程式中組織 ActionScript
    10. 如何搭配使用 ActionScript 與 Animate
    11. 最佳作法 - 輔助功能原則
    12. Animate 工作區中的輔助功能
    13. 撰寫和管理指令碼
    14. 啟用自訂平台的支援
    15. 自訂平台支援概觀
    16. 建立輔助功能內容
    17. 使用自訂平台支援外掛程式
    18. ActionScript 3.0 的除錯
    19. 啟用自訂平台的支援
  8. 匯出與發佈
    1. 如何從 Animate CC 匯出檔案
    2. OAM 發佈
    3. 匯出 SVG 檔案
    4. 使用 Animate 匯出圖像和視訊
    5. 發佈 AS3 文件
    6. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    7. 匯出聲音
    8. 匯出 QuickTime 視訊檔
    9. 使用 ActionScript 控制外部視訊播放
    10. 最佳作法 - 建立行動裝置內容的秘訣
    11. 最佳作法 - 視訊慣例
    12. 最佳作法 - SWF 應用程式編寫原則
    13. 最佳作法 - 建構 FLA 檔
    14. 最佳化 Animate 的 FLA 檔案的最佳作法
    15. ActionScript 發佈設定
    16. 指定 Animate 的發佈設定
    17. 匯出放映檔
    18. 匯出影像和 GIF 動畫
    19. HTML 發佈範本
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和發佈您的動畫

開始之前

在開始製作動畫之前,請先了解下列概念:

必要條件

說明

在使用移動補間動畫之前,請先了解「時間軸」的用法及如何編輯屬性。您可以在「舞台」上、「屬性」檢測器或重新設計的「移動編輯器」中編輯個別屬性關鍵影格。

Animate 只會將元件實體與文字欄位製成補間動畫。對它們套用補間動畫時,便會將所有的其他物件類型包覆在元件中。元件實體可以包含巢狀元件,而巢狀元件可以在本身的時間軸上製作補間動畫。

補間動畫圖層中最小的建構區塊即是補間動畫範圍。補間動畫圖層中的補間動畫範圍僅可以包含一個元件實體或文字欄位。元件實體為補間動畫範圍的目標。不過,單一元件可以包含許多物件。

將第二個元件或文字欄位加入至補間動畫範圍內會取代補間動畫中的原始元件。使用下列任何方法可以變更補間動畫的目標物件:

  • 從元件庫將不同元件拖曳到「時間軸」中的補間動畫範圍
  • 使用「修改 > 元件 > 替換元件」命令。

您可以從補間動畫圖層刪除元件,不需移除或打散補間動畫。稍後,您還能再將另一個元件實體加入至補間動畫。您也可以隨時變更目標元件的類型或是編輯元件。

補間動畫包含移動時,「舞台」上便會顯示移動路徑。移動路徑會顯示每個影格中補間動畫物件的位置。您可以拖曳移動路徑的控制點,以編輯「舞台」上的移動路徑。您不能將移動導引線加入至補間動畫/反向運動圖層。 

另請參閱

移動補間動畫的組件

補間動畫範圍:

  • 屬於「時間軸」中的一組影格,在這組影格中,物件含有一個或多個會隨時間改變的屬性。
  • 移動補間動畫範圍會在「時間軸」中顯示為一組影格,位於具有背景顏色的單一圖層中。
  • 您可以選取補間動畫範圍做為單一物件,然後將補間動畫範圍從「時間軸」中的某個位置拖曳到另一個位置,包括拖曳到其他圖層。
  • 您只能將「舞台」上每個補間動畫範圍的一個物件製成動畫。此物件稱為補間動畫範圍的「目標物件」。

屬性關鍵影格:

  • 屬於補間動畫範圍內的一個影格,在這個補間動畫範圍內,您可以為補間動畫的目標物件明確定義一個或多個屬性值。
  • 這些屬性可能包括位置、Alpha (透明度)、色調等。
  • 每個定義的屬性都有專屬的屬性關鍵影格。
  • 如果您在某一個影格中設定了多個屬性,則這些屬性的屬性關鍵影格都會位於該影格中。
  • 使用移動編輯器可以檢視補間動畫範圍及其屬性關鍵影格的每個屬性。
  • 若要選擇「時間軸」中的補間動畫範圍快顯選單要顯示哪種屬性關鍵影格,請以滑鼠右鍵按一下任何屬性關鍵影格,並選取「檢視關鍵影格」。 

補間動畫的目標物件

移動補間動畫在補間動畫範圍中具有單一物件,稱為補間動畫的目標物件。補間動畫中具有單一目標物件的幾個優點包括:

  • 您可以將補間動畫另存為預設效果,以供重複使用。
  • 您可以輕鬆地移動「時間軸」或「舞台」上的移動補間動畫 (到處拖曳補間動畫範圍)。
  • 若要將新實體套用到現有補間動畫:
    • 將實體貼到補間動畫上,將它換出
    • 從元件庫拖曳新的實體
    • 使用「替換元件」。 

可補間的物件與屬性

可套用移動補間動畫的物件類型包括影片片段、圖像和按鈕元件,以及文字欄位。這些可補間之物件的屬性包括:

  • 2D X 和 Y 位置
  • 3D Z 位置 (僅限影片片段)

  • 2D 旋轉 (圍繞 Z 軸)

  • 3D X、Y 和 Z 旋轉 (僅限影片片段):在發佈設定中,將 FLA 檔案目標設定為 ActionScript 3.0 和 Flash Player 10 或更新版本。Adobe AIR 也支援 3D 移動。

  • 傾斜 X 和 Y

  • 縮放 X 和 Y

  • 顏色特效:包括 Alpha (透明度)、亮度、色調和進階顏色設定。只能對元件和 TLF 文字進行顏色特效的補間動畫。透過將這些屬性製成補間動畫,您可以使物件呈現淡入或從一種顏色淡出至另一種顏色的效果。若要對傳統文字進行顏色特效的補間動畫,請將文字轉換為元件。

  • 濾鏡屬性 (濾鏡無法套用到圖像元件)

建立移動補間動畫

您可以使用下列三種方法之一來建立移動補間動畫:

  • 建立您要製成補間動畫的圖像或實體,然後以滑鼠右鍵按一下影格並選取「建立移動補間動畫」。
  • 選取您要製成補間動畫的圖像或實體,並從主選單中選取「插入 > 移動補間動畫」。
  • 建立您要製成補間動畫的圖像或實體,然後以滑鼠右鍵按一下「舞台」上的實體並選取「建立移動補間動畫」。
註解:

在動畫中使用 ActionScript 為選擇性。

建立移動補間動畫

使用屬性檢測器補間其他屬性

使用「建立移動補間動畫」命令可以將元件實體或文字欄位的屬性製作成動畫。屬性包括旋轉、縮放、透明度或色調 (僅限元件和 TLF 文字)。例如,您可以編輯元件實體的 Alpha (透明度) 屬性,使其淡入畫面。如需可使用移動補間動畫製成動畫的屬性清單,請參閱可補間的物件與屬性

  1. 選取「舞台」上的元件實體或文字欄位。

    若選取範圍包含其他物件,或包含一個圖層中的多個物件,Animate 可讓您將其轉換成影片片段元件。

  2. 選擇「插入 > 移動補間動畫」。

    若顯示「將選取項目轉換為元件以做為補間動畫」對話方塊,請按一下「確定」以將選取範圍轉換成影片片段元件。

    當您將補間動畫套用至只存在於一個關鍵影格中的物件時,播放磁頭就會移至新的補間動畫的最後一個影格。否則,播放磁頭就不會移動。

  3. 請將播放磁頭放置在補間動畫範圍內,您要指定屬性值的影格中。

    您也可以將播放磁頭放置在補間動畫範圍內的任何其他影格中。補間動畫會以補間動畫範圍第一個影格中的數值啟動,該影格一定會是屬性關鍵影格。

  4. 選取「舞台」上的物件,然後設定非位置屬性 (例如 Alpha (透明度)、旋轉或傾斜) 的值。請使用「屬性」檢測器或「工具」面板中的工具來設定值。

    範圍中目前的影格就會變成屬性關鍵影格。

    註解:

    您可在補間動畫範圍顯示不同類型的屬性關鍵影格。以滑鼠右鍵按一下 (Windows) 或 Command+按一下 (Macintosh) 補間動畫範圍,從快顯選單中選擇「檢視關鍵影格 > 屬性類型」。

  5. 拖曳「時間軸」中的播放磁頭,預覽「舞台」上的補間動畫。

  6. 若要加入更多屬性關鍵影格,請將播放磁頭移至範圍內所需的影格,然後在「屬性」檢測器中設定屬性值。

將補間動畫加入現有補間動畫圖層

您可以將更多補間動畫加入至現有的補間動畫圖層。使用動畫建立 Animate 內容時,加入更多補間動畫可以使用較少的圖層。

  1. 請執行下列其中一項:

    • 在圖層上加入空白關鍵影格 (「插入 > 時間軸 > 空白關鍵影格」)、將項目加入關鍵影格,然後將項目製作成補間動畫。
    • 在另一個圖層上建立補間動畫,然後再將範圍拖曳至所需的圖層。
    • 將靜態影格從另一個圖層拖曳至補間動畫圖層,然後再將補間動畫加入至靜態影格中的某個物件。
    • 按 Alt+拖曳 (Windows) 或按 Option+拖曳 (Macintosh) 可重製相同圖層或不同圖層中的現有範圍。
    • 從相同或不同圖層複製並貼上補間動畫範圍。
Adobe 標誌

登入您的帳戶