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 CC?

Adobe

一般 Animate 工作流程

若要建立 Animate CC 應用程式,通常您必須執行下列基本步驟:

規劃應用程式。

決定應用程式要執行的基本工作。

加入媒體元素。

建立並匯入媒體元素,如影像、視訊、聲音與文字。

安排元素。

在舞台上和時間軸中安排媒體元素,並定義這些元素在應用程式中出現的時間和方式。

應用特殊效果。

套用圖像濾鏡 (如模糊、光暈和斜角)、混合以及其他您認為合適的特殊效果。

使用 ActionScript 控制行為。

撰寫 ActionScript® 程式碼以控制媒體元素的行為,包含這些元素回應使用者互動的方式。

測試及發佈應用程式。

測試您的 FLA 檔案 (控制 > 測試影片),以確認應用程式是否依照預期方式運作,並且尋找並修復您遭遇的錯誤。在整個建立過程中均應測試應用程式。您可以在 Animate 和 AIR Debug Launcher 中測試檔案。

將您的 FLA 檔發佈為可在網頁中顯示且可利用 Flash® Player 播放的 SWF 檔案 (檔案 > 發佈)。

依照專案和工作習慣的不同,這些步驟的順序也可能不同。

工作區概覽

您可以使用各種不同的元素 (例如面板、控制列和視窗) 建立及操作文件和檔案。以任何方式排列這些元素的地方即稱為工作區。在 Adobe® Creative Suite® 5 中,不同應用程式的工作區具有相同的外觀,能讓您輕鬆地在應用程式之間移動。您也可以從預設集工作區選擇或建立自己的工作區,利用這種方式將每個應用程式修改成您習慣的工作方式。

雖然不同產品中的預設工作區版面各有不同,不過在所有這些版面中操作各種元素的方式則多半相同。

  • 橫跨頂部的「應用程式列」包含工作區切換器、選單 (僅限 Windows),以及其他應用程式控制項。在 Mac 上面使用特定產品時,可以使用「視窗」選單顯示或隱藏此項目。

  • 「工具面板」包含用於建立和編輯影像、圖案、頁面元素等的工具。相關的工具會群組在一起。

  • 「控制面板」會顯示目前所選取工具的選項。在 Illustrator 中,「控制」面板會顯示目前所選取物件的選項 (在 Adobe Photoshop® 中,這個面板稱為選項列。在 Adobe Animate®、Adobe Dreamweaver® 和 Adobe Fireworks® 中,這個面板稱為「屬性檢測器」,其中包括目前所選取元素的屬性)。

  • 「文件視窗」會顯示您正在處理的檔案。「文件」視窗可以加上索引標籤,而且可以在某些情況下加以群組和固定。

  • 「面板」可以協助您監看及修改您的工作。Animate 中的「時間軸」、Illustrator 中的「筆刷」面板、Adobe Photoshop® 中的「圖層」面板,以及 Dreamweaver 中的「CSS 樣式」都是面板的範例。面板可加以集合、堆疊或固定。

  • 「應用程式框架」會將所有的工作區元素集合至單一的整合視窗,讓您能夠集中一處操作應用程式。如果您移動或調整應用程式框架或當中任何元素的大小,框架中的所有元素會彼此協調,以避免發生重疊。當您切換應用程式,或不慎按到應用程式外面的區域時,面板並不會消失。如果您同時使用兩個以上的應用程式,則可將每個應用程式並排放置於螢幕或多部監視器上。

    如果您正在使用 Mac 而且偏好傳統的非固定式使用者介面,也可以將「應用程式」框架關閉。例如,在 Adobe Illustrator® 中選取「視窗 > 應用程式框架」,便可以切換框架的開/關狀態 (在 Mac 中使用 Animate 時,「應用程式」框架會永久保持開啟,而 Dreamweaver for Mac 則不使用「應用程式」框架)。

 

Illustrator 預設工作區

A. 加上索引標籤的文件視窗 B. 「應用程式」列 C. 工作區切換器 D. 面板標題列 E. 控制面板 F. 工具面板 G. 收合為圖示按鈕 H. 以垂直方向固定的 4 個面板群組 

隱藏或顯示所有面板

  • (Illustrator、Adobe InCopy®、Adobe InDesign®、Photoshop、Fireworks) 若要隱藏或顯示所有面板 (包括「工具」面板和「控制」面板),請按 Tab 鍵。

  • (Illustrator、InCopy、InDesign、Photoshop) 若要隱藏或顯示所有面板 (除「工具」面板和「控制」面板以外),請按 Shift+Tab。

    提示: 如果在使用者介面偏好設定中選取了「自動顯示隱藏的面板」,即可暫時顯示隱藏的面板。在 Illustrator 中,這項功能會永遠保持開啟狀態。請將滑鼠指標移到應用程式視窗邊緣 (Windows®) 或移到螢幕邊緣 (Mac OS®),並於面板長條出現時停駐在其上方。

  • (Animate、Dreamweaver、Fireworks) 若要隱藏或顯示所有面板,請按 F4。

顯示面板選項

  1. 按一下面板右上角的面板選單圖示

    提示: 即使面板已最小化,您仍然可以開啟面板選單。

    提示: 在 Photoshop 中,您可以變更面板和工具提示中的文字字體大小。請從「介面偏好設定」的「使用者介面字體大小」選單中,選擇字體大小。

(Illustrator) 調整面板亮度

  1. 請移動「使用者介面」偏好設定中的「亮度」滑桿。這個控制項會影響所有面板,包括「控制」面板。

重新設定工具面板

您可以將「工具」面板中的工具顯示成單一欄或並列的兩欄。(這項功能不適用於 Fireworks 和 Animate 中的「工具」面板)。

註解:

在 InDesign 和 InCopy 中,您還可以在「使用者介面」偏好設定中設定選項,從單一欄顯示切換為兩欄 (或單一列) 顯示。

  1. 請按一下「工具」面板頂端的雙箭頭。

管理視窗和面板

您可以移動和操作「文件」視窗和面板來建立自訂的工作區。您也可以儲存自訂工作區,並在工作區之間切換。對於 Fireworks 而言,重新命名自訂工作區可能會導致非預期的行為。

註解:

下列範例會使用 Photoshop 來進行示範。工作區的行為在所有產品中皆相同。

重新排列、固定或浮動文件視窗

當您開啟多個檔案時,「文件」視窗會加上標籤。

  • 如果要重新排列加上索引標籤的「文件」視窗,請將視窗的標籤拖曳到群組中的新位置。

  • 如果要從視窗群組取消固定 (浮動或取消索引標籤) 某個「文件」視窗,請將這個視窗的索引標籤拖曳到群組之外。

    注意:在 Photoshop 中,您可以選擇「視窗 > 排列順序 > 浮動於視窗」來浮動單一的「文件」視窗,或「視窗 > 排列順序 > 全部浮動於視窗」來一次浮動所有的「文件」視窗。如需詳細資訊,請參閱技術註解 kb405298

    注意:Dreamweaver 不支援固定及取消固定「文件」視窗。使用「文件」視窗的「最小化」按鈕建立浮動視窗 (Windows),或選擇「視窗 > 垂直並排」,以建立並排的「文件」視窗。如需有關此主題的詳細資訊,請在 Dreamweaver 說明中搜尋「垂直拼貼」。對於 Macintosh 的使用者,工作流程稍有不同。

  • 如果要將某個「文件」視窗固定到另一個「文件」視窗群組,請將這個視窗拖曳到該群組中。

  • 若要建立堆疊或拼貼文件群組,將視窗拖曳至沿著另一視窗頂端、底部或側邊的放置區域。您也可以使用「應用程式」列的「版面」按鈕來為群組選擇版面。

    注意:某些產品並不支援此功能。然而,您的產品在「視窗」選單中可能有「重疊顯示」與「拼貼」指令,可以讓您調整文件版面。

  • 拖曳選項時,若要在加上索引標籤的群組中切換文件,請將選項拖曳至文件的標籤上並停留一會。

    注意:某些產品並不支援此功能。

固定及解除固定面板

固定區域是指顯示在一起的面板集合或面板群組,通常會以垂直方向排列。如果要固定或卸除面板,請將面板移入或移出固定區域。

  • 若要固定面板,請將面板的標籤拖移到固定區域中,可放在頂端、底部或其他面板之間。

  • 若要固定面板群組,請將面板群組的標題列 (標籤上方的實心空白列) 拖移到固定區域中。

  • 若要移除面板或面板群組,請將面板的標籤或面板群組的標題列拖移出固定區域。您可以將面板拖移到另一個固定區域中,或是將其變成可自由浮動。

正在拖移到新固定區域的「導覽器」面板,以藍色垂直反白標示來表示

「導覽器」面板現在已停放在自己的固定區域中

註解:

您可以進行調整,讓面板不致於佔滿固定區域的全部空間。請將固定區域的底部邊緣向上拖曳,讓它不再碰觸到工作區的邊緣。

移動面板

在您移動面板時,會看見藍色反白標示的放置區域,那些就是您可以移動面板的區域。例如,您可以在固定區域中,將面板拖移到另一個面板上方或下方的狹窄藍色放置區域中,就可以將面板向上或向下移動。如果是拖移到非放置區域,面板就可以在工作區中自由浮動。

註解:

滑鼠的位置 (而非面板的位置) 會啟動放置區域,因此如果您看不到放置區域,請嘗試將滑鼠拖曳至放置區域應該存在的位置。

  • 若要移動面板,請拖曳面板的標籤。

  • 若要移動面板群組,請拖曳標題列。

狹窄的藍色放置區域代表「顏色」面板將會自行固定在「圖層」面板群組上方。

A. 標題列 B. 定位鍵 C. 放置區域 

註解:

按住 Ctrl 鍵 (Windows) 或 Command 鍵 (Mac OS) 並同時移動面板,就不會使面板固定。按住 Esc 並同時移動面板即可取消此作業。

新增和移除面板

如果移除固定區域中的所有面板,固定區域就會消失。您可以將面板移到工作區的右邊緣,直到放置區域出現為止,利用這種方式建立固定區域。

  • 如果要移除面板,請用滑鼠右鍵按一下 (Windows) 或按住 Control 並按一下 (Mac) 它的索引標籤,然後選取「關閉」,或從「視窗」選單將它取消選取。

  • 若要新增面板,請在「視窗」選單中選取面板,並將它固定在您想要的任何位置。

操作面板群組

  • 若要將面板移動到群組中,請將面板的標籤拖移到群組反白標示的放置區域中。

將面板新增到面板群組

  • 若要重新排列群組中的面板,請將面板的標籤拖移到群組中的新位置。

  • 若要移除群組中的面板,使其可自由浮動,請將面板的標籤拖移到群組外面。

  • 若要移動群組,請拖曳其標題列 (位於索引標籤上方的區域)。

堆疊浮動面板

如果您將面板拖移到固定區域外而未放入放置區域,該面板即可自由浮動。浮動面板讓您能夠將其定位於工作區中的任何地方。您可以將浮動面板或面板群組堆疊在一起,這樣當您拖曳最頂端的標題列時,就可以讓它們一起移動。

自由浮動的堆疊面板

  • 若要堆疊浮動面板,請將面板的索引標籤拖曳到另一個面板底部的放置區域。

  • 若要變更堆疊順序,請將面板的標籤向上或向下拖移。

    注意:請務必在面板之間的狹窄放置區域上方放開標籤,而不是在標題列中較寬的放置區域放開。

  • 若要移除堆疊中的面板或面板群組,使其可單獨自由浮動,請將面板的標籤或面板群組的標題列拖移到堆疊外面。

重新調整面板尺寸

  • 若要將某個面板、面板群組或一疊面板最大化或最小化,請按兩下索引標籤。您也可以按兩下索引標籤區域 (索引標籤旁的空白區域)。

  • 如果要調整面板的尺寸,請拖曳面板的任何一邊。有些面板無法用拖移方式重新調整尺寸,例如 Photoshop 中的「顏色」面板。

收合和展開面板圖示

您可以將面板收合為圖示,減少工作區的雜亂。在某些情況下,面板會在預設工作區中收合為圖示。

已收合為圖示的面板

已從圖示展開的面板

  • 若要收合或展開某一欄中的所有面板圖示,請按一下固定區域頂端的雙箭頭。

  • 若要展開單一面板圖示,請按一下該圖示。

  • 如果要調整面板圖示的尺寸,只要看到圖示而不看到索引標籤,請調整固定區域的寬度,直到文字出現為止。如果要再次顯示圖示文字請,將固定區域加寬一些。

  • 若要將已展開的面板重新收合為圖示,請按一下面板的標籤、圖示或面板標題列中的雙箭頭。

    秘訣:在某些產品中,如果在「介面」或「使用者介面選項」偏好設定中選取了「自動收合圖示面板」,則當您在圖示以外按一下時,就會自動收合已展開的面板圖示。

  • 如果要將浮動面板或面板群組新增到圖示固定區域中,請將它的索引標籤或標題列拖到固定區域中。(將面板新增到圖示固定區域後,就會自動將面板收合為圖示)。

  • 如果要移動面板圖示 (或面板圖示群組),請拖曳此圖示。您可以將固定區域中的面板圖示向上或向下拖曳到其他固定區域中 (此時會以該固定區域的面板樣式來顯示),或是拖曳到固定區域外面 (此時會顯示為浮動圖示)。

儲存和切換工作區

將面板的目前尺寸和位置儲存成已命名的工作區後,則即使您移動或關閉面板,仍然可以復原該工作區。儲存的工作區名稱會出現在「應用程式」列上的工作區切換器中。

儲存自訂工作區

  1. 請針對您要儲存的組態中的工作區,執行下列其中一個動作:

    • (Illustrator) 選擇「視窗 > 工作區 > 儲存工作區」。

    • (Photoshop、InDesign、InCopy) 選擇「視窗 > 工作區 > 新增工作區」。

    • (Dreamweaver) 選擇「視窗 > 工作區版面 > 儲存工作區」。

    • (Animate) 從「應用程式」列上的工作區切換器選擇「新增工作區」。

    • (Fireworks) 從「應用程式」列上的工作區切換器選擇「儲存目前版面」。

  2. 輸入工作區的名稱。

  3. (Photoshop、InDesign) 在「擷取」下,選取下列一或多個選項:

    面板位置

    儲存目前的面板位置 (僅限 InDesign)。

    鍵盤快速鍵

    儲存目前的鍵盤快速鍵組合 (僅限 Photoshop)。

    「選單」或「自訂選單」

    儲存目前的選單組合。

顯示或切換工作區

  1. 從「應用程式」列上的工作區切換器選取工作區。

註解:

在 Photoshop 中,您可以指定每個工作區的鍵盤快速鍵,以便能快速瀏覽這些工作區。

刪除自訂工作區

  • 從「應用程式」列上的工作區切換器選取「管理工作區」,選取工作區,然後按一下「刪除」(Fireworks 中未提供這個選項)。

  • (Photoshop、InDesign、InCopy) 從工作區切換器選取「刪除工作區」。

  • (Illustrator) 選擇「視窗 > 工作區 > 管理工作區」,然後選取工作區,再按一下「刪除」圖示。

  • (Photoshop、InDesign) 選擇「視窗 > 工作區 > 刪除工作區」,然後選取工作區,再按一下「刪除」。

復原預設工作區

  1. 從應用程式列上的工作區切換器選取「預設」或「基本」工作區。

    註解:

    在 Dreamweaver 中,「設計師」是預設的工作區。

  2. (Photoshop、InDesign、InCopy) 選取「Window > 工作區 > 重設 [工作區名稱]」。

(Photoshop) 復原已儲存的工作區排列

在 Photoshop 中,工作區會自動顯示成您上一次排列的方式,但您可以復原已儲存的原始面板排列。

  • 若要復原個別的工作區,請選擇「視窗 > 工作區 > 重設工作區名稱」。

  • 若要復原 Photoshop 安裝的所有工作區,請在「介面」偏好設定中按一下「復原預設工作區」。

註解:

若要在應用程式列中重新排列工作區的順序,請拖曳移動它們。

Adobe 標誌

登入您的帳戶