使用手冊 取消

建立並發佈 WebGL 文件

  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. 快速分享和發佈您的動畫

何謂 WebGL?

WebGL 是一種不需其他外掛程式就能在任何相容瀏覽器上顯示圖形的開放網頁標準。WebGL 已完全整合到瀏覽器的所有網站標準,可將影像處理和效果的 GPU 加速使用方式當做網頁畫布的一部分。WebGL 元素可以與其他 HTML 元素一起嵌入,並與頁面的其他部分複合。

雖然,大多數最新的瀏覽器都支援 WebGL,還請造訪這個連結,以了解支援之實際版本的詳細資料。

有些瀏覽器預設並未啟用 WebGL。若要在您的瀏覽器上啟用 WebGL,請參閱這篇文章

請確定您的瀏覽器已啟用 WebGL,因為有些瀏覽器預設停用 WebGL。

使用 WebGL-glTF (Beta) 文件類型

Animate 現在具有兩種 WebGL-glTF 文件類型。使用 WebGL-glTF 標準文件類型可以與任何標準 WebGL-glTF 套件整合,而且完全符合標準規範。

  1. 若要建立 WebGL-glTF 文件,請從主畫面的「進階」目的中選取「WebGL-glTF 標準」或「WebGL-glTF 延伸」。

    WebGL-glTF 文件類型
    WebGL-glTF 文件類型

  2. 根據您的需求指定「寬度」、「高度」和「單位」並按一下「建立」

發佈 WebGL-glTF 檔案

  1. 按一下「屬性」檢測器中的「發佈設定」

    發佈 WebGL-glTF 檔案
    發佈 WebGL-glTF 檔案

  2. 「輸出名稱」文字方塊中輸入名稱。

  3. 選取「格式」選項中的「GLB」「GLTF」

  4. 在「影像解析度」文字方塊中指定 1-3 範圍的十進位數字。

  5. 核取「移除 JSON 檔案中的空白字元」以減少檔案大小。

  6. 預設會核取標準選項「重複播放時間軸」「包含隱藏圖層」。您可以取消核取這兩個選項,以找出任何小錯誤。

  7. 按一下「發佈」按鈕,以發佈檔案。

將動畫轉換成 GLTF 和 GLB 格式

WebGL-glTF 和 GLB 會減少檔案大小和執行階段處理。在 Animate 中,您可以使用這兩種格式的文件。想要透過兩種格式使用您的視訊?請觀賞此範例結尾的教學課程並依照下列步驟執行。

  1. 在「屬性」中,按一下「發佈設定」。

  2. 在「輸出名稱」文字方塊中輸入名稱。

  3. 選取「格式」選項中的「GLB」或「GLTF」

  4. 在「影像解析度」文字方塊中指定 3 範圍的十進位數字。

  5. 核取「移除 JSON 檔案中的空白字元」以減少檔案大小。

如何使用 Animate 中的 WebGL GLTF 匯出來建立進階動畫

請觀看影片,以了解如何以 WebGL GLTF、GLB 格式呈現動畫。

Animate 18.0 和舊版

如果您使用 Animate 18.0 或任何 Animate 舊版,可以參考下列內容。

WebGL 文件類型

Animate 可讓您建立豐富互動的內容並發佈為 Web Graphics Library (WebGL) 格式。由於 WebGL 已完全整合到瀏覽器中,因此,它可讓 Animate 運用圖形處理和顯示的 GPU 加速使用方式,作為網頁畫布的一部分。

這個新文件類型讓您可以建立內容並快速發佈到 WebGL 輸出。您可以運用 Animate 內的強大工具來建立豐富的內容,但顯示成可在任何相容瀏覽器上執行的 WebGL 輸出。這表示,您可以使用傳統的 Animate 時間軸、工作區和繪圖工具,以原生方式編寫並產生 WebGL 內容。最常用的瀏覽器都支援 WebGL,因此,可讓 Animate 在大多數的網路平台上顯示內容。

對 WebGL 的支援僅以預覽形式提供。這個 Animate 更新包括對具有聲音和指令碼的基本動畫的支援,以及一組互動功能。在 Animate 未來版本中,您將會看到更多有關 WebGL 文件類型的功能。如需支援 WebGL 之 Animate 功能的完整清單,請參閱這篇知識庫文章

建立 WebGL 文件

在 Animate 中,WebGL 文件可讓您快速建立並發佈 WebGL 格式的內容。若要建立 WebGL 文件:

  1. 啟動 Animate。
  2. 在「歡迎螢幕」上,按一下「WebGL (預覽)」選項。或者,選取「檔案 > 新增」選單選項,以顯示「新增文件」對話方塊。按一下「WebGL (預覽)」選項。

在瀏覽器上預覽 WebGL 內容

您可以使用 Animate 的「測試影片」功能來預覽或測試您的內容。若要進行預覽,請執行下列動作:

  1. 在 Animate 中,若是 Windows,請按下 Ctrl+Enter,若是 MAC,請按下 CMD+Enter。隨即會啟動您的預設瀏覽器並顯示 WebGL 內容。
Animate 需要網站伺服器才能執行 WebGL 內容。Animate 的內建網站伺服器設定為在連接埠 #8090 執行 WebGL 內容。如果有伺服器已經在使用這個連接埠,Animate 會自動偵測並解決衝突。

將內容發佈為 WebGL 格式

Animate 可讓您在其中以原生方式建立並發佈 WebGL 內容。

若要發佈您的 WebGL 文件,請執行下列動作:

  1. 選取「檔案 > 發佈設定」以顯示「發佈設定」對話方塊。或者,選取「檔案 > 發佈」(如果您已經為 WebGL 指定「發佈設定」)。
  2. 在「發佈設定」對話方塊中,為下列項目指定值:

輸出檔案

為輸出提供有意義的名稱。同時,瀏覽到或輸入您要發佈 WebGL 輸出的所在位置。

覆寫 HTML

讓您指定每次發佈 WebGL 專案時是否要覆寫 HTML 包裝函式。如果您曾經對發佈的 HTML 檔案進行任何外部變更,並希望對 Animate 中的動畫或資源進行任何更新時能保留那些變更,可以取消核取這個選項。

包含隱藏圖層

在 WebGL 輸出中包含所有隱藏圖層。取消選取「包含隱藏圖層」可防止標記為隱藏的所有圖層 (包括以巢狀方式位於影片片段中的圖層) 匯出至產生的 WebGL。這個選項可讓您透過隱藏圖層,輕鬆地測試不同版本的 WebGL 文件。

重複播放時間軸

到達最後一個影格時,重複播放內容。若取消選取這個選項,則內容會在到達最後一個影格時停止。

  1. 按一下「發佈」,將 WebGL 內容發佈到指定的位置。

可針對 WebGL 內容指定以便在瀏覽器上執行的最大 FPS 為 60FPS。

了解 WebGL 輸出

發佈的 WebGL 輸出包含下列檔案:

HTML 包裝函式檔案

其中包括執行階段、對資源的呼叫,同時還能初始化 WebGL 輸出器。檔案預設命名為 <FLA_name>.html。您可以在「發佈設定」對話方塊 (「檔案 > 發佈設定」),為 HTML 檔案提供不同的名稱。

HTML 檔案預設會放置在與 FLA 相同的目錄。您可以在「發佈設定」對話方塊中提供不同的位置。

JavaScript 檔案 (WebGL 執行階段)

在 WebGL 上顯示已發佈的內容,並且發佈在 WebGL 文件的元件庫/資料夾中。檔案命名為:flwebgl-<version>.min.js

HTML 包裝函式會利用這個 JS 檔案來顯示 WebGL 內容。

紋理地圖集

儲存所有顏色值 (屬於形狀),包括舞台上的點陣圖實體。

在您的 WebGL 文件中加入音效

您可以將音效匯入及嵌入您的 WebGL 文件、使用同步設定 (事件、開始和停止) 控制播放,以及在執行階段播放時間軸音效。WebGL 目前僅支援 .wav 和 .mp3 格式。

如需有關使用音效的詳細資訊,請參閱在 Animate 中使用聲音

將現有內容移轉至 WebGL 文件

您可以在 Animate 內,將現有內容移轉至 WebGL 文件。到了結尾,Animate 可讓您透過手動複製或匯入內容的方式進行移轉。同時,在 Animate 內使用多個文件時,通常會將文件之間的內容複製為圖層或元件庫中的資源。雖然大多數的 Animate 功能都受到支援,但是有些內容類型會經過修改,以便更加配合 WebGL 格式。

Animate 包含數個強大的功能,有助於產生視覺效果豐富的內容。不過,考量到其中一些功能是 Animate 的原生功能,因此,在 WebGL 文件中將不會受到支援。Animate 已經過設計,可將這類內容修改為支援的格式,並且會在工具或功能不受支援時以視覺化方式表示。

複製

將傳統 Animate 文件類型 (例如 ActionScript 3.0、AIR for Android、AIR for Desktop 等) 中的內容 (圖層或元件庫元件) 複製到 WebGL 文件。在這個情況下,不支援的內容類型可能會遭到移除或轉換為支援的預設值。

例如,複製 3D 動畫將會移除舞台上的物件所套用的所有 3D 變形。

匯入

匯入包含不支援內容的 PSD 或 AI 檔案。在這個情況下,內容可能會遭到移除或轉換為支援的預設值。

例如,匯入已套用模糊效果的 PSD 檔案。Animate 會移除該效果。

使用

同時使用多個文件類型 (例如,ActionScript 3.0 和 WebGL),然後使用不支援的工具或選取的選項來切換文件。在這個情況下,Animate 會以視覺化方式表示功能不受支援。

例如,您在 ActionScript 3.0 文件中建立了虛線,然後在仍選取「線段」工具的情況下切換至 WebGL。觀察指標和「屬性檢測器」,這兩者會顯示指出 WebGL 內不支援虛線的圖示。

指令碼

您可以在「動作」面板撰寫 Javascript 程式碼,播放程式進入影格後將會執行該程式碼。影格指令碼內容中的「this」變數,是指其所屬 MovieClip 的實體。此外,影格指令碼還可以存取容器 HTML 檔案中宣告的 Javascript 功能和變數。當您複製 ActionScript 文件中的影格或圖層並貼入 WebGL 文件時,指令碼 if any 將會標示註解。

移轉後套用至內容的變更

下列是當您將舊版內容移轉至 WebGL 文件時所套用的變更類型。

內容已移除

HTML5 Canvas 中不支援的內容類型已移除。例如:

濾鏡

不受支援。效果將會移除,並且形狀將改為假設基本色填色。

模糊濾鏡效果已移除,並且由基本色填色所取代。

內容已修改成支援的預設值

內容類型或功能受支援,但是功能的屬性則否。例如:

 

放射性漸層

已修改成假設基本色填色使用主要色彩。

放射性漸層已修改成使用主要色彩的基本色填色。

使用點陣圖快取提高呈現效能

藉著指定靜態影片片段 (例如,背景影像) 或在執行階段時快取按鈕元件為點陣圖,執行階段點陣圖快取能讓您最佳化顯示效能。根據預設,每個影格會重繪向量項目。因為影像為點陣圖,且其位置不會變動,所以將影片片段或按鈕元件快取為點陣圖可避免瀏覽器必須連續重新繪製項目。這可顯著提升顯示 WebGL 內容的效能。

例如,在您建立背景複雜的動畫時,請建立一個影片片段,並在其背景包含所有項目。然後在「屬性」檢測器中為背景影片片段選取「快取為點陣圖」。在播放時,背景會呈現為儲存在現有螢幕深度位置的點陣圖。瀏覽器會在「舞台」上快速繪製點陣圖,而且僅會繪製一次,因此可加快動畫播放速度及提高播放的順暢程度。

點陣圖快取能讓您使用影片片段並且自動在原地「凍結」。如果區域有變化,向量資料便會更新點陣圖快取。如此可將瀏覽器必須執行的重新繪製次數減至最少,並提供更順暢、更快的顯示效能。

若要為 movieclip 元件啟用「快取為點陣圖」屬性,請選取 movieclip 實體,並從「屬性檢測器」(「視窗 > 屬性」) 的「顯示」下拉式清單中選取「快取為點陣圖」。

使用快取為點陣圖的考量事項

在 WebGL 內容上使用「快取為點陣圖」時,請考量下列事項:

  • movieclip 元件的大小上限為 2048x2048。請注意,影片片段實體可以快取的實際邊緣小於 2048x2048,因為 WebGL 保留部分像素。
  • 如果相同 movieclip 有一個以上的實體,Animate 就會以第一個遇到的實體大小來產生快取。不過,程式不會重新產生快取,也不會忽略「快取為點陣圖」屬性,即使影片片段的變形變成大範圍亦然。因此,如果動畫過程中已大幅縮放 movieclip 元件,動畫可能會呈現像素化。
Adobe 標誌

登入您的帳戶