使用 Animate 建立時間軸圖層

  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 文件時,文件中只會包含一個圖層。您可以增加更多圖層,組織文件中的圖案、動畫及其他元素。您也可以隱藏、鎖定或重新排列圖層。您所能建立的圖層數目只受限於電腦記憶體,圖層並不會增加發佈的 SWF 檔大小。只有當您將物件放置到圖層中時,才會增加檔案的大小。

若要組織和管理圖層,請建立圖層資料夾,然後將圖層放在裡面。您可以展開或收合時間軸中的圖層,而不影響到在舞台上所看到的內容。針對聲音檔案、ActionScript、影格標籤和影格註解,請分別使用不同的圖層或資料夾。使用不同圖層可協助您快速找到這些項目以進行編輯。

為了能夠建立複雜的效果,您可以使用特殊導引線圖層以方便繪圖和編輯,以及建立遮色片圖層。

在 Animate 中,共有五種類型的圖層可供您使用:

  • 一般圖層包含 fla 檔案中的大多數圖案。

  • 遮色片圖層包含了當做遮色片使用的物件,以隱藏其下方的選定圖層部分。如需詳細資訊,請參閱使用遮色片圖層

  • 被遮色的圖層是位於遮色片圖層下方,且與遮色片圖層相關聯的圖層。被遮色的圖層只有被遮色片顯露的部分才是可見部分。如需詳細資訊,請參閱使用遮色片圖層

  • 導引線圖層包含了可用來在其他圖層上引導排列物件的筆畫,這些筆畫也可以引導移動傳統補間動畫的筆畫。如需詳細資訊,請參閱導引線圖層沿著路徑建立傳統補間動畫

  • 已導引圖層是與導引線圖層相關聯的圖層。已導引圖層上的物件可以沿著導引線圖層上的筆畫來排列或製作成動畫。已導引圖層可以包含靜態圖案和傳統補間動畫,但是不包含移動補間動畫。

  • 「移動補間動畫」圖層包含以移動補間動畫加上動畫效果的物件。如需詳細資訊,請參閱關於補間動畫

  • 骨架圖層包含附有反向運動骨塊的物件。如需詳細資訊,請參閱使用骨塊工具建立反向運動動畫

「一般」、「遮色片」、「被遮色」和「導引線」圖層都可以包含移動補間動畫或反向運動骨塊。當前述任何一個圖層中有這些項目時,可加入至該圖層的內容類型就會有限制。如需詳細資訊,請參閱移動補間動畫使用骨塊工具建立反向運動動畫

建立圖層

當您建立新圖層時,它會在選定的圖層上方出現。新加入的圖層會成為作用中的圖層。

  1. 請執行下列其中一項:
    • 按一下「時間軸」底部的「新增圖層」按鈕

    • 選取「插入 > 時間軸 > 圖層」。

    • 在時間軸中的圖層名稱上按右鍵 (Windows) 或按 Control + 按一下(Macintosh) 圖層名稱,再從快顯選單中選取「插入圖層」。

建立圖層資料夾

  1. 請執行下列其中一項:
    • 選取「時間軸」中的圖層或資料夾,再選取「插入 > 時間軸 > 圖層資料夾」。

    • 在時間軸中的圖層名稱上按右鍵 (Windows) 或按 Control + 按一下(Macintosh) 圖層名稱,再從快顯選單中選取「插入資料夾」。新資料夾會出現在所選取圖層或資料夾的上方。

    • 按一下「時間軸」底部的「新增資料夾」圖示 。新資料夾會出現在所選取圖層或資料夾的上方。

組織圖層和圖層資料夾

若要組織文件,請重新安排「時間軸」中的圖層和資料夾。

圖層資料夾能讓您將圖層以樹狀結構放置,便於組織工作流程。若要查看資料夾中包含的圖層,而不影響「舞台」上顯示出來的圖層,請展開或收合資料夾。資料夾可以同時含有圖層和其他資料夾,讓您使用在電腦上組織檔案的方法組織圖層。

時間軸中的圖層控制項會影響資料夾內所有的圖層。例如,鎖定圖層資料夾會鎖定該資料夾中的所有圖層。

  • 若要將圖層或圖層資料夾移至圖層資料夾中,請將該圖層或圖層資料夾名稱拖曳到目標圖層資料夾名稱。
  • 若要變更圖層或資料夾的順序,請將「時間軸」中的一個或多個圖層或資料夾拖曳到想要放置的位置。
  • 若要展開或收合某個資料夾,請按一下該資料夾名稱左邊的三角形。
  • 若要展開或收合所有資料夾,請按一下右鍵 (Windows) 或按 Control + 按一下 (Macintosh),然後選取「展開所有資料夾」或「收合所有資料夾」。

重新命名圖層或資料夾

根據預設,Animate 會依照新圖層建立的順序指派名稱:圖層 1、圖層 2,以此類推。為了較有意義地反映其內容,請重新命名圖層。

  1. 請執行下列其中一項:
    • 按兩下時間軸中圖層或資料夾的名稱,再輸入新的名稱。

    • 在圖層或資料夾的名稱上按右鍵 (Windows) 或按 Control+按一下該圖層或資料夾名稱 (Macintosh),再從快顯選單中選取「屬性」。在「名稱」方塊中輸入新的名稱,再按一下「確定」。

    • 選取時間軸中的圖層或資料夾,再選取「修改 > 時間軸 > 圖層屬性」。在「名稱」方塊中輸入新的名稱,再按一下「確定」。

選取圖層或資料夾

  1. 請執行下列其中一項:
    • 按一下時間軸中的圖層或資料夾名稱。

    • 在圖層的「時間軸」中按一下要選取的影格。

    • 在「舞台」上選取位於所要選取之圖層中的物件。

    • 若要選取連續圖層或資料夾,請按 Shift + 按一下圖層或資料夾在時間軸中的名稱。

    • 若要選取不連續的圖層或資料夾,請按住 Control (Windows) 或按住 Command (Macintosh),然後在「時間軸」中按一下圖層或資料夾的名稱。

從單一圖層複製影格

  1. 在圖層中選取影格範圍。若要選取整個圖層,請按一下「時間軸」中的圖層名稱。
  2. 選取「編輯 > 時間軸 > 複製影格」。

  3. 按一下您要開始貼上的影格,然後選取「編輯 > 時間軸 > 貼上影格」。若要取代目標時間軸上所複製影格的確實數目,請使用「貼上並覆寫影格」選項。

    貼上並覆寫影格工作流程

    A. 選取並複製影格。 B. 以滑鼠右鍵按一下要貼上的影格,然後選取「貼上並覆寫影格」。 C. 貼上的影格會覆寫時間軸上確切的影格數目。 

從圖層資料夾複製影格

  1. 若要選取整個資料夾,收合資料夾 (按一下時間軸中資料夾名稱左邊的三角形),然後按一下資料夾名稱。 

  2. 選取「編輯 > 時間軸 > 複製影格」。

  3. 若要建立資料夾,請選取「插入 > 時間軸 > 圖層資料夾」。

  4. 按一下新的資料夾並選擇「編輯 > 時間軸 > 貼上影格」。

刪除圖層或資料夾

  1. 若要選取圖層或資料夾,請在「時間軸」或是圖層裡的任何影格中按一下它的名稱。
  2. 請執行下列其中一項:
    • 按一下時間軸中的「刪除圖層」按鈕。

    • 將該圖層或資料夾拖曳到「刪除圖層」按鈕。

    • 在圖層或資料夾名稱上按右鍵 (Windows) 或按 Control+按一下圖層或資料夾名稱 (Macintosh),再從快顯選單中選取「刪除圖層」。

    註解:

    當您刪除圖層資料夾時,它內含的所有圖層及其內容也會一併刪除。

鎖定或解除鎖定一個或多個圖層或資料夾

  • 若要鎖定圖層或資料夾,請在名稱右邊的「鎖定」欄中按一下。若要解除鎖定圖層或資料夾,請再於「鎖定」欄中按一下。

  • 若要鎖定所有圖層和資料夾,請按一下鎖定圖示。若要解除鎖定所有圖層和資料夾,請再按一下。

  • 若要鎖定或解除鎖定多個圖層或資料夾,請在「鎖定」欄內上下拖曳。

  • 若要鎖定所有其他圖層或資料夾,請在「鎖定」欄使用 Alt+按一下 (Windows) 或 Option+按一下 (Macintosh)。若要解除鎖定所有圖層或資料夾,請在「鎖定」欄再次使用 Alt+按一下或 Option+按一下 (Macintosh)。

複製並貼上圖層 (僅限 CS5.5)

您可以複製時間軸中的整個圖層和圖層資料夾,然後貼入同一個時間軸或不同時間軸中。您可以複製任何類型的圖層。

當您複製並貼上圖層時,所複製圖層的圖層資料夾結構將獲保留。

  1. 在時間軸中按一下圖層名稱以選取一或多個圖層。按住 Shift + 按一下可選取連續圖層。使用 Control+按一下 (Windows) 或 Command+按一下 (Macintosh) 可選取不連續的圖層。

  2. 選擇「編輯 > 時間軸 > 複製圖層」或「剪下圖層」。您也可以用滑鼠右鍵按一下圖層,然後從快顯選單中選擇「複製圖層」或「剪下圖層」。

  3. 在您要貼到的時間軸中,根據要在何處插入所貼上的圖層,選取該位置下方那一個圖層。

  4. 選擇「編輯 > 時間軸 > 貼上圖層」。

這些圖層隨即出現在時間軸中您所選取的圖層上方。如果您選取的是圖層資料夾,所貼上的圖層會出現在資料夾內。

若要將圖層放到遮色片或導引線圖層中,您必須先選取該遮色片或導引線圖層底下的圖層,然後再行貼上。您無法將遮色片、導引線或資料夾圖層貼到遮色片或導引線圖層底下。

您也可以選取圖層,再選擇「編輯 > 時間軸 > 重製圖層」,以重製圖層。新圖層的圖層名稱會附加「複製」字樣。

設定多個圖層的屬性

  1. 在 Animate 中,建立 FLA 檔案或開啟現有檔案。

  2. 選取您要修改之屬性的圖層,以滑鼠右鍵按一下並選取「屬性」。

  3. 在「圖層屬性」對話方塊中修改屬性。

  4. 按一下「確定」。

顯示或隱藏圖層或資料夾

「時間軸」的圖層或資料夾名稱旁的紅色 X 記號代表已隱藏圖層或資料夾。在發佈設定中,您可以選擇發佈 SWF 檔案時是否要包含隱藏的圖層。

  • 若要隱藏圖層或資料夾,請在「時間軸」之圖層或資料夾名稱右邊的「眼睛」欄中按一下。若要顯示圖層或資料夾,請再按一下。

  • 若要隱藏「時間軸」中的所有圖層和資料夾,請按一下「眼睛」圖示。若要顯示所有圖層和資料夾,請再按一下。

  • 若要顯示或隱藏多個圖層或資料夾,請在「眼睛」圖示欄內上下拖曳。

  • 若要隱藏目前圖層或資料夾以外的所有其他圖層和資料夾,在「眼睛」圖示蘭上按 Alt + 按一下 (Windows) 或 Option + 按一下 (Macintosh) 圖層或資料夾。若要顯示所有圖層和資料夾,請再次按 Alt + 按一下或 Option + 按一下。

使用外框模式檢視圖層內容

為了區別物件所屬的圖層,您可以將圖層上的所有物件顯示成有顏色的外框。

  • 若要將圖層上的所有物件顯示為外框,請按一下圖層名稱右邊的「外框」欄。若要關閉外框模式顯示,請再按一下。

  • 若要將所有圖層中的物件顯示為外框,請按一下外框圖示。若要關閉所有圖層的外框模式顯示,請再按一下。

  • 若要將目前圖層以外的所有「其他」圖層上的物件以外框模式顯示,在「外框」欄按 Alt + 按一下 (Windows) 或 Option + 按一下 (Macintosh) 圖層。若要關閉所有圖層的外框模式顯示,請再次按 Alt + 按一下或 Option + 按一下。

註解:

圖層上的移動路徑也使用圖層外框顏色。

變更圖層的外框顏色

  1. 請執行下列其中一項:
    • 按兩下「時間軸」中圖層的圖示 (圖層名稱左邊的圖示)。

    • 在圖層名稱上按右鍵 (Windows) 或按 Control + 按一下該圖層名稱 (Macintosh),再從快顯選單中選取「屬性」。

    • 選取「時間軸」中的圖層,再選取「修改 > 時間軸 > 圖層屬性」。

  2. 在「圖層屬性」對話方塊中,按一下「外框顏色」色盤、選取新的顏色然後按一下「確定」。

檢視圖層和圖層資料夾

顯示或隱藏圖層或資料夾

「時間軸」的圖層或資料夾名稱旁的紅色 X 記號代表已隱藏圖層或資料夾。在發佈設定中,您可以選擇發佈 SWF 檔案時是否要包含隱藏的圖層。

  • 若要隱藏圖層或資料夾,請在「時間軸」之圖層或資料夾名稱右邊的「眼睛」欄中按一下。若要顯示圖層或資料夾,請再按一下。

  • 若要隱藏「時間軸」中的所有圖層和資料夾,請按一下「眼睛」圖示。若要顯示所有圖層和資料夾,請再按一下。

  • 若要顯示或隱藏多個圖層或資料夾,請在「眼睛」圖示欄內上下拖曳。

  • 若要隱藏目前圖層或資料夾以外的所有其他圖層和資料夾,在「眼睛」欄按 Alt + 按一下 (Windows) 或 Option + 按一下 (Macintosh) 圖層或資料夾。若要顯示所有圖層和資料夾,請再次按 Alt + 按一下或 Option + 按一下。

使用外框模式檢視圖層內容

為了區別物件所屬的圖層,您可以將圖層上的所有物件顯示成有顏色的外框。

  • 若要將圖層上的所有物件顯示為外框,請按一下圖層名稱右邊的「外框」欄。若要關閉外框模式顯示,請再按一下。

  • 若要將所有圖層中的物件顯示為外框,請按一下外框圖示。若要關閉所有圖層的外框模式顯示,請再按一下。

  • 若要顯示目前圖層以外的所有其他圖層物件,在「外框」欄按 Alt + 按一下 (Windows) 或 Option + 按一下 (Macintosh) 圖層。若要關閉所有圖層的外框模式顯示,請再次按 Alt + 按一下或 Option + 按一下。

變更圖層的外框顏色

  1. 請執行下列其中一項:
    • 按兩下「時間軸」中圖層的圖示 (圖層名稱左邊的圖示)。

    • 在圖層名稱上按右鍵 (Windows) 或按 Control + 按一下 (Macintosh) 該圖層名稱,再從快顯選單中選取「屬性」。

    • 選取「時間軸」中的圖層,再選取「修改 > 時間軸 > 圖層屬性」。

  2. 在「圖層屬性」對話方塊中,按一下「外框顏色」色盤、選取新的顏色然後按一下「確定」。

註解:

圖層上的移動路徑也使用圖層外框顏色。

設定圖層透明度

  1. 在 Animate 中,建立 fla 檔案或開啟現有檔案。

  2. 在「時間軸」中按 Shift + 按一下「眼睛」圖示,將可見度設為透明。

    註解:

    按 Shift + 按一下隱藏的圖層,不會產生任何作用。

    設定圖層透明度
    設定圖層透明度

  3. 使用下列任何選項來設定圖層透明度:

    • 在任何圖層上按右鍵,並從快顯選單中選取「屬性」。在「圖層屬性」對話方塊中,選取「可見度 > 透明」。
    • 在任何圖層上按右鍵,並從快顯選單中選取「屬性」。
    圖層屬性
    圖層屬性

  4. 按一下「確定」

註解:

圖層透明度不會對隱藏的圖層產生任何作用。 

使用進階圖層

在 Animate 的「進階圖層」模式中,時間軸中的所有圖層都會發佈做為元件。進階圖層模式可讓您存取下列功能:

「進階圖層」模式預設為啟用。您可以使用「修改 > 文件」設定,啟用或停用「進階圖層」。套用變更之後,請按一下「設成預設」,為後續文件和 Animate 工作階段保留目前設定。

進階圖層模式
進階圖層模式

使用 Animate 中的指令碼來存取這些元件時,您必須將圖層當作物件來呼叫這些元件。例如,如果您沒有使用進階圖層,則可以使用與下列範例類似的指令碼來存取元件:

getchildbyname("symbol1");

不過,如果使用進階圖層,則只能使用與下列範例中類似的指令碼,透過圖層來存取元件:

Layer=getchildbyname("L1");

Layer.getchildbyname("symbol1");

使用適用於 AS3 文件類型的進階圖層來存取元件的範例程式碼:

Var Layer:MovieClip =MovieClip(getchildbyname("L1"));
Layer.getchildbyname("symbol1");

使用適用於 HTML5 Canvas 文件類型的進階圖層來存取元件的範例程式碼:

Layer=this.getchildbyname("L1");
Layer.getchildbyname("symbol1");

下圖描述如何在使用或不使用進階圖層時透過指令碼來存取元件。 

如何在使用或不使用進階圖層時存取元件的圖例
如何在使用或不使用進階圖層時存取元件的圖例

註解:

如果在 Animate 中使用進階圖層,則發佈的動畫專案的大小會增加。如果您在存取攝影機或圖層深度功能時發現任何問題,請確認進階圖層是否為「啟用」。如果為停用,請加以啟用,以取得預期的行為。 

套用圖層效果

過去使用的濾鏡和顏色效果僅適用於影片片段。透過進階圖層,濾鏡和顏色效果現在可以套用到選擇性影格,進而套用到所有內容,其中包括形狀、繪圖物件、圖像元件等。在影格間使用傳統、形狀和 IK 補間動畫,也可以將圖層效果製成補間動畫。

您可以選取所要的影格,在個別或多個影格上套用圖層效果,也可以選取整個圖層,在圖層的所有影格上套用圖層效果。此外,圖層效果也可以套用在元件的時間軸上,例如影片片段和圖像元件,以及所有場景間。

註解:

只有當「進階圖層」模式為「啟用」時,才能套用圖層效果。您可能必須明確地啟用「進階圖層」模式,才能讓檔案使用這個功能。

將濾鏡用於影格

若要在特定影格上新增濾鏡,請先選取影格。「屬性」檢測器面板隨即載入影格特定屬性。按一下「濾鏡」下拉式清單中的 + 圖示。

影格濾鏡
影格濾鏡

當您在影格上新增濾鏡時,將會出現「屬性」檢測器,如下面螢幕擷取畫面所示。 

您可以根據需求,為每個濾鏡設定屬性並在影格層級加以套用。補間動畫適用於所有影格濾鏡。 

「屬性」檢測器中的影格濾鏡屬性
「屬性」檢測器中的影格濾鏡屬性

註解:

只有 ActionScript 3 文件類型支援圖層效果。移動補間動畫和攝影機圖層則不支援圖層效果。 

使用顏色效果

若要在特定影格上新增顏色效果,請先選取影格。「屬性」檢測器面板隨即載入影格特定屬性。從「屬性」檢測器面板選擇任何想要的顏色屬性。

顏色效果
顏色效果

使用混合模式

要在特定影格上套用混合模式, 首先 選取影格,並選擇「影格屬性」面板的「顯示」下所列的混合模式。

在圖層或影格上套用 混合效果時, 會套用至所有內容,包括形狀、繪圖物件和圖像元件。一個圖層上的所有物件會根據套用至該影格的混合模式,與另一個圖層上的物件混合。

圖層混合模式

如需有關混合模式的詳細資訊,請參閱套用混合模式

套用圖層深度

動畫人員能夠將圖層放置在 2D 動畫的不同平面上,用以創造深度的幻覺。 

您可以從「圖層深度」面板動態變更圖層的深度。若要開啟圖層深度面板,請按一下「視窗 > 圖層深度」

圖層深度代表每個圖層
圖層深度代表每個圖層

註解:

您可以將圖層深度的最小值和最大值設定在 -5000 到 10000 的範圍內。

如上面螢幕快照所示,圖層深度的值會在每個指定影格的圖層名稱旁邊顯示。

  • 將滑鼠停留在每個值的上方,按一下並將滑桿向右或向左拖曳。
  • 若要降低深度,請將滑桿向左拖曳。若要增加深度,請將滑桿向右拖曳。 
  • 您可以使用較低的正值代表較靠近的物件,而較高的正值則代表較遠的物件。

您可以在動畫的任意補間動畫範圍之內,插入表示圖層深度值的補間動畫。 

在圖層深度面板中,每個圖層都有代表的獨特顏色線條。您可以在時間軸視窗中檢視每個圖層的代表顏色。 

您也可以透過上下移動顏色線條的方式,增加或降低每個圖層物件的深度。

  • 若要降低圖層中物件的深度,請按一下線條並向上拖曳。
  • 若要增加圖層中物件的深度,請按一下線條並向下拖曳。

描述使用或不使用圖層深度之動畫的圖例:

沒有圖層深度的內容
沒有圖層深度的內容

含有圖層深度的內容
含有圖層深度的內容

描述套用圖層深度之動畫的圖例

您可以在多個平面圖層上使用攝影機建立視差效果或放大平面的內容。此外,還可將攝影機鎖定在特定圖層,或使用互動式 API 在執行階段套用攝影機效果。如需詳細資訊,請參閱使用攝影機和圖層深度建立視差效果

註解:

圖層深度僅適用於主要時間軸。

維持圖層深度的大小

您可以變更物件的圖層深度,而不影響物件的大小和位置。若要啟用維持大小功能,請按一下「圖層深度」面板右上角的「維持大小」按鈕。

您能以兩種模式來使用維持大小選項:

  • 按一下「維持大小」按鈕並修改所要圖層的圖層深度。 「維持大小」按鈕會自動切換為啟用。
  • 按住 Alt 鍵以暫時啟用「維持大小」選項,同時拖曳圖層深度值。
維持圖層深度的大小
維持圖層深度的大小

在執行階段套用圖層深度

透過攝像機 API 也可以在執行階段將攝影機引進到物件上和套用效果。如需詳細資訊,請參閱在執行階段使用互動式攝影機

適用於 AS3 的圖層深度 API

您可以使用 API 在執行階段管理圖層。例如,在執行階段想要引入額外圖層到動畫或降低動畫中其中一個圖層的深度時。 

方法

原型製作

範例

說明

setLayerZDepth

fl.Layer.setLayerZDepth(timeline,
layerName,zDepth)

fl.Layer.setLayerZDepth("layerName", 100);

設定特定圖層的 Z 深度值。

getLayerZDepth

fl.Layer.getLayerZDepth(layerName) : zDepth

fl.Layer.getLayerZDepth("layerName");

傳回特定圖層的 Z 深度值。

addNewLayer

fl.Layer.addNewLayer(layerName,
zDepth=0)

fl.Layer.addNewLayer("layerName",-80);

在時間軸新增圖層並設定 Z 深度。

removeLayer

fl.Layer.removeLayer(layerName)

fl.Layer.removeLayer("layerName");

將圖層從時間軸中移除。

適用於 HTML Canvas 的圖層深度 API

方法

原型製作

範例

說明

setLayerZDepth

AdobeAn.Layer.setLayerZDepth(layerName,
zDepth)

console.log(fl.Layer.setLayerZDepth
("layerName", 100));

設定特定圖層的 Z 深度值。

getLayerZDepth

AdobeAn.Layer.getLayerZDepth(layerName)
:zDepth

console.log(fl.Layer.getLayerZDepth
("layerName"));

傳回特定圖層的 Z 深度值。

圖層上層

Animate 可讓您將一個圖層變成另一個圖層的上層。圖層上層是讓動畫的一個圖層/物件得以控制其他圖層/物件的簡單方式。身為動畫設計師或遊戲設計師,您可以加快動畫時間,同時更輕鬆地控制角色不同部分的動作。

若要使用圖層上層檢視,則必須啟用「進階圖層」。根據預設,新檔案的「進階圖層」是切換為「開啟」。您可以按一下時間軸右上角的階層架構元件圖示,以啟用圖層上層檢視。

顯示圖層上層
顯示圖層上層

註解:

只有在子圖層物件的變形點位於父圖層物件上時,才能使用彎曲物件的上層。

父子圖層

在上層檢視中,當您將圖層 1 移到圖層 2 上方時,圖層 1 就會變成父圖層 2 的子圖層。除了帶有本身的屬性以外,圖層上的物件也會承襲父圖層上物件的位置和旋轉。因此,當您移動或旋轉父圖層時,子圖層也會跟著父圖層移動或旋轉。您可以建立多個父子關係,以建立階層架構。

上層圖層

只要按一下圖層控制點 (色標) 並拖曳到其他圖層上方,就能將一個圖層連接到另一個圖層。或者,您可以在圖層名稱旁邊的水平矩形空白處按一下,並拖曳到其他圖層上方。您也可以按一下任何圖層,並從彈出式清單中為該圖層選擇父圖層。 

當您一按下並嘗試拖曳虛線,圖層的色標旁邊就會出現虛線。放開按下並拖曳的動作之後,兩個圖層之間就會立即建立父子連線。

設定父圖層
設定父圖層

圖層上層檢視階層架構中最左邊的色標,代表父圖層。父子階層架構從左移到右。

您可以按一下任何圖層的色標,拖曳虛線後再放開,藉此移除連線。或者,按一下水平空間並按一下「移除父圖層」,如下面螢幕擷取畫面所示。

移除父圖層
移除父圖層

在下面的螢幕擷取畫面中,您可以看到使用圖層上層時圖層階層架構和位置的之前及之後檢視畫面。

套用圖層上層之前及之後
套用圖層上層之前及之後

下面的範例插圖表示如何針對人類身體部位使用圖層上層。

身體部位與圖層上層的範例插圖
身體部位與圖層上層的範例插圖

在上面的插圖中,

  • Torso 是身體所有部位的父圖層。
  • Legs_thigh 是腿部不同其他部位 (例如 Sneaker、Leg_lower 和 Ankle) 的父圖層。
  • Head 是父圖層 Neck 的子圖層,而 Torso 是 Neck 的父圖層。因此,每當您從身體拖曳脖子時,頭部也會跟著移動。
註解:

上層是您用來設定子圖層上每個關鍵圖層時所需的影格屬性。在關鍵圖層上,您可以將子圖層移除或重設至其他父圖層。

關於圖層上層的教學課程

了解如何在圖層間建立父子階層及輕鬆地操控您的構圖。

更多類似項目

Adobe 標誌

登入您的帳戶