建立並發佈 WebGL 文件

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

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

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

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

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

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

發佈 WebGL-glTF 檔案

將動畫轉換成 GLTF 和 GLB 格式

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

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

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 內容。

將內容發佈為 WebGL 格式

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

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

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

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

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

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

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

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

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

了解 WebGL 輸出

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

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

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

在 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 元件，動畫可能會呈現像素化。