建立並發佈WebGL 文件

WebGL 是一種不需其他外掛程式就能在任何相容瀏覽器上顯示圖形的開放網頁標準。

WebGL 已完全整合到瀏覽器的所有網站標準，可將影像處理和效果的GPU ... AdobeAnimate 新增功能 學習與支援 免費試用 立即購買 使用手冊 取消 建立並發佈WebGL文件 搜尋 上次更新時間 Feb11,202204:23:15AMGMT AdobeAnimate使用手冊 Animate簡介 Animate的新功能 視覺詞彙 Animate系統需求 Animate鍵盤快速鍵 在Animate中使用多個檔案類型 動畫 Animate中的動畫基本概念 如何在Animate中使用影格及關鍵影格 Animate中的逐格動畫 如何在Animate中使用傳統補間動畫 筆刷工具 移動導引線 移動補間動畫與ActionScript3.0 關於移動補間動畫 移動補間動畫 建立移動補間動畫 使用屬性關鍵影格 使用補間動畫將位置製成動畫 如何使用移動編輯器編輯移動補間動畫 編輯補間動畫的移動路徑 操作移動補間動畫 新增自訂加/減速 建立和套用移動預設效果 設定動畫補間動畫範圍 使用儲存為XML檔案的移動補間動畫 移動補間動畫與傳統補間動畫 形狀補間動畫 在Animate中使用骨塊工具動畫 在Animate進行角色製作 如何在AdobeAnimate中使用遮色片圖層 如何在Animate中使用場景 互動 如何使用Animate建立按鈕 將Animate專案轉換成其他文件類型格式 在Animate中建立及發佈HTML5Canvas文件 在Animate中使用程式碼片段增加互動功能 建立自訂HTML5組件 在HTML5Canvas中使用組件 建立自訂組件：範例 自訂組件的程式碼片段 最佳作法-使用Animate做廣告 虛擬實境編寫和發佈 工作區和工作流程 建立和管理繪圖筆刷 在HTML5Canvas文件中使用Google字體 使用CreativeCloudLibraries和AdobeAnimate 使用Animate的舞台和工具面板 Animate工作流程和工作區 在HTML5Canvas文件中使用網頁字體 時間軸與ActionScript 使用多重時間軸 設定偏好設定 使用Animate編寫面板 使用Animate建立時間軸圖層 匯出適用於行動裝置應用程式和遊戲引擎的動畫 移動和複製物件 範本 Animate中的尋找和取代 還原、重做和操作記錄面板 鍵盤快速鍵 如何在Animate中使用時間軸 建立HTML擴充功能 影像和GIF動畫的最佳化選項 匯出影像和GIF的設定 Animate中的資源面板 多媒體和視訊 在Animate中變形及結合圖像物件 在Animate中建立並使用元件實體 影像描圖 如何在AdobeAnimate中使用聲音 匯出SVG檔案 建立要在Animate中使用的視訊檔案 如何在Animate增加視訊 使用視訊提示點 使用Animate繪製及建立物件 調整線條和形狀 使用AnimateCC中的筆畫、填色和漸層 使用AdobePremierePro和AfterEffects AnimateCC中的色彩面板 使用Animate開啟FlashCS6檔案 在Animate中使用傳統文字 將圖案放入Animate中 Animate中匯入的點陣圖 3D圖像 在Animate中使用元件 使用AdobeAnimate繪製線條和形狀 使用Animate中的元件庫 匯出聲音 在AnimateCC中選取物件 在Animate中使用IllustratorAI檔案 使用噴刷工具套用圖樣 套用混合模式 排列物件 使用命令選單自動執行工作 多國語言文字 使用Animate中的攝影機 搭配使用Animate與AdobeScout 使用Fireworks檔案 圖像濾鏡 聲音和ActionScript 繪圖偏好設定 使用鋼筆工具繪圖 平台 將Animate專案轉換成其他文件類型格式 自訂平台支援 在Animate中建立及發佈HTML5Canvas文件 建立並發佈WebGL文件 如何封裝AIRforiOS的應用程式 發佈AIRforAndroid應用程式 AdobeAIRforDesktop的發佈功能 ActionScript發佈設定 最佳作法-在應用程式中組織ActionScript 如何搭配使用ActionScript與Animate 最佳作法-輔助功能原則 Animate工作區中的輔助功能 撰寫和管理指令碼 啟用自訂平台的支援 自訂平台支援概觀 建立輔助功能內容 使用自訂平台支援外掛程式 ActionScript3.0的除錯 啟用自訂平台的支援 匯出與發佈 如何從AnimateCC匯出檔案 OAM發佈 匯出SVG檔案 使用Animate匯出圖像和視訊 發佈AS3文件 匯出適用於行動裝置應用程式和遊戲引擎的動畫 匯出聲音 匯出QuickTime視訊檔 使用ActionScript控制外部視訊播放 最佳作法-建立行動裝置內容的秘訣 最佳作法-視訊慣例 最佳作法-SWF應用程式編寫原則 最佳作法-建構FLA檔 最佳化Animate的FLA檔案的最佳作法 ActionScript發佈設定 指定Animate的發佈設定 匯出放映檔 匯出影像和GIF動畫 HTML發佈範本 使用AdobePremierePro和AfterEffects 快速分享和發佈您的動畫 何謂WebGL？ WebGL是一種不需其他外掛程式就能在任何相容瀏覽器上顯示圖形的開放網頁標準。

WebGL已完全整合到瀏覽器的所有網站標準，可將影像處理和效果的GPU加速使用方式當做網頁畫布的一部分。

WebGL元素可以與其他HTML元素一起嵌入，並與頁面的其他部分複合。

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

有些瀏覽器預設並未啟用WebGL。

若要在您的瀏覽器上啟用WebGL，請參閱這篇文章。

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

使用WebGL-glTF(Beta)文件類型 Animate現在具有兩種WebGL-glTF文件類型。

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

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

WebGL-glTF文件類型 根據您的需求指定「寬度」、「高度」和「單位」並按一下「建立」。

發佈WebGL-glTF檔案 按一下「屬性」檢測器中的「發佈設定」。

發佈WebGL-glTF檔案 在「輸出名稱」文字方塊中輸入名稱。

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

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

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

預設會核取標準選項「重複播放時間軸」和「包含隱藏圖層」。

您可以取消核取這兩個選項，以找出任何小錯誤。

按一下「發佈」按鈕，以發佈檔案。

將動畫轉換成GLTF和GLB格式 WebGL-glTF和GLB會減少檔案大小和執行階段處理。

在Animate中，您可以使用這兩種格式的文件。

想要透過兩種格式使用您的視訊？請觀賞此範例結尾的教學課程並依照下列步驟執行。

在「屬性」中，按一下「發佈設定」。

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

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

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

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

如何使用Animate中的WebGLGLTF匯出來建立進階動畫 請觀看影片，以了解如何以WebGLGLTF、GLB格式呈現動畫。

Animate18.0和舊版 如果您使用Animate18.0或任何Animate舊版，可以參考下列內容。

WebGL文件類型 Animate可讓您建立豐富互動的內容並發佈為WebGraphicsLibrary(WebGL)格式。

由於WebGL已完全整合到瀏覽器中，因此，它可讓Animate運用圖形處理和顯示的GPU加速使用方式，作為網頁畫布的一部分。

這個新文件類型讓您可以建立內容並快速發佈到WebGL輸出。

您可以運用Animate內的強大工具來建立豐富的內容，但顯示成可在任何相容瀏覽器上執行的WebGL輸出。

這表示，您可以使用傳統的Animate時間軸、工作區和繪圖工具，以原生方式編寫並產生WebGL內容。

最常用的瀏覽器都支援WebGL，因此，可讓Animate在大多數的網路平台上顯示內容。

對WebGL的支援僅以預覽形式提供。

這個Animate更新包括對具有聲音和指令碼的基本動畫的支援，以及一組互動功能。

在Animate未來版本中，您將會看到更多有關WebGL文件類型的功能。

如需支援WebGL之Animate功能的完整清單，請參閱這篇知識庫文章。

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

若要建立WebGL文件： 啟動Animate。

在「歡迎螢幕」上，按一下「WebGL(預覽)」選項。

或者，選取「檔案>新增」選單選項，以顯示「新增文件」對話方塊。

按一下「WebGL(預覽)」選項。

在瀏覽器上預覽WebGL內容 您可以使用Animate的「測試影片」功能來預覽或測試您的內容。

若要進行預覽，請執行下列動作： 在Animate中，若是Windows，請按下Ctrl+Enter，若是MAC，請按下CMD+Enter。

隨即會啟動您的預設瀏覽器並顯示WebGL內容。

Animate需要網站伺服器才能執行WebGL內容。

Animate的內建網站伺服器設定為在連接埠#8090執行WebGL內容。

如果有伺服器已經在使用這個連接埠，Animate會自動偵測並解決衝突。

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

若要發佈您的WebGL文件，請執行下列動作： 選取「檔案>發佈設定」以顯示「發佈設定」對話方塊。

或者，選取「檔案>發佈」(如果您已經為WebGL指定「發佈設定」)。

在「發佈設定」對話方塊中，為下列項目指定值： 輸出檔案 為輸出提供有意義的名稱。

同時，瀏覽到或輸入您要發佈WebGL輸出的所在位置。

覆寫HTML 讓您指定每次發佈WebGL專案時是否要覆寫HTML包裝函式。

如果您曾經對發佈的HTML檔案進行任何外部變更，並希望對Animate中的動畫或資源進行任何更新時能保留那些變更，可以取消核取這個選項。

包含隱藏圖層 在WebGL輸出中包含所有隱藏圖層。

取消選取「包含隱藏圖層」可防止標記為隱藏的所有圖層(包括以巢狀方式位於影片片段中的圖層)匯出至產生的WebGL。

這個選項可讓您透過隱藏圖層，輕鬆地測試不同版本的WebGL文件。

重複播放時間軸 到達最後一個影格時，重複播放內容。

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

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

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

了解WebGL輸出 發佈的WebGL輸出包含下列檔案： HTML包裝函式檔案 其中包括執行階段、對資源的呼叫，同時還能初始化WebGL輸出器。

檔案預設命名為.html。

您可以在「發佈設定」對話方塊(「檔案>發佈設定」)，為HTML檔案提供不同的名稱。

HTML檔案預設會放置在與FLA相同的目錄。

您可以在「發佈設定」對話方塊中提供不同的位置。

JavaScript檔案(WebGL執行階段) 在WebGL上顯示已發佈的內容，並且發佈在WebGL文件的元件庫/資料夾中。

檔案命名為：flwebgl-.min.js HTML包裝函式會利用這個JS檔案來顯示WebGL內容。

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

在您的WebGL文件中加入音效 您可以將音效匯入及嵌入您的WebGL文件、使用同步設定(事件、開始和停止)控制播放，以及在執行階段播放時間軸音效。

WebGL目前僅支援.wav和.mp3格式。

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

將現有內容移轉至WebGL文件 您可以在Animate內，將現有內容移轉至WebGL文件。

到了結尾，Animate可讓您透過手動複製或匯入內容的方式進行移轉。

同時，在Animate內使用多個文件時，通常會將文件之間的內容複製為圖層或元件庫中的資源。

雖然大多數的Animate功能都受到支援，但是有些內容類型會經過修改，以便更加配合WebGL格式。

Animate包含數個強大的功能，有助於產生視覺效果豐富的內容。

不過，考量到其中一些功能是Animate的原生功能，因此，在WebGL文件中將不會受到支援。

Animate已經過設計，可將這類內容修改為支援的格式，並且會在工具或功能不受支援時以視覺化方式表示。

複製 將傳統Animate文件類型(例如ActionScript3.0、AIRforAndroid、AIRforDesktop等)中的內容(圖層或元件庫元件)複製到WebGL文件。

在這個情況下，不支援的內容類型可能會遭到移除或轉換為支援的預設值。

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

匯入 匯入包含不支援內容的PSD或AI檔案。

在這個情況下，內容可能會遭到移除或轉換為支援的預設值。

例如，匯入已套用模糊效果的PSD檔案。

Animate會移除該效果。

使用 同時使用多個文件類型(例如，ActionScript3.0和WebGL)，然後使用不支援的工具或選取的選項來切換文件。

在這個情況下，Animate會以視覺化方式表示功能不受支援。

例如，您在ActionScript3.0文件中建立了虛線，然後在仍選取「線段」工具的情況下切換至WebGL。

觀察指標和「屬性檢測器」，這兩者會顯示指出WebGL內不支援虛線的圖示。

指令碼 您可以在「動作」面板撰寫Javascript程式碼，播放程式進入影格後將會執行該程式碼。

影格指令碼內容中的「this」變數，是指其所屬MovieClip的實體。

此外，影格指令碼還可以存取容器HTML檔案中宣告的Javascript功能和變數。

當您複製ActionScript文件中的影格或圖層並貼入WebGL文件時，指令碼ifany將會標示註解。

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

內容已移除 HTML5Canvas中不支援的內容類型已移除。

例如： 濾鏡 不受支援。

效果將會移除，並且形狀將改為假設基本色填色。

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

內容已修改成支援的預設值 內容類型或功能受支援，但是功能的屬性則否。

例如：   放射性漸層 已修改成假設基本色填色使用主要色彩。

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

使用點陣圖快取提高呈現效能 藉著指定靜態影片片段(例如，背景影像)或在執行階段時快取按鈕元件為點陣圖，執行階段點陣圖快取能讓您最佳化顯示效能。

根據預設，每個影格會重繪向量項目。

因為影像為點陣圖，且其位置不會變動，所以將影片片段或按鈕元件快取為點陣圖可避免瀏覽器必須連續重新繪製項目。

這可顯著提升顯示WebGL內容的效能。

例如，在您建立背景複雜的動畫時，請建立一個影片片段，並在其背景包含所有項目。

然後在「屬性」檢測器中為背景影片片段選取「快取為點陣圖」。

在播放時，背景會呈現為儲存在現有螢幕深度位置的點陣圖。

瀏覽器會在「舞台」上快速繪製點陣圖，而且僅會繪製一次，因此可加快動畫播放速度及提高播放的順暢程度。

點陣圖快取能讓您使用影片片段並且自動在原地「凍結」。

如果區域有變化，向量資料便會更新點陣圖快取。

如此可將瀏覽器必須執行的重新繪製次數減至最少，並提供更順暢、更快的顯示效能。

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

使用快取為點陣圖的考量事項 在WebGL內容上使用「快取為點陣圖」時，請考量下列事項： movieclip元件的大小上限為2048x2048。

請注意，影片片段實體可以快取的實際邊緣小於2048x2048，因為WebGL保留部分像素。

如果相同movieclip有一個以上的實體，Animate就會以第一個遇到的實體大小來產生快取。

不過，程式不會重新產生快取，也不會忽略「快取為點陣圖」屬性，即使影片片段的變形變成大範圍亦然。

因此，如果動畫過程中已大幅縮放movieclip元件，動畫可能會呈現像素化。

登入您的帳戶 登入 管理帳戶 快速連結 檢視您的所有計劃 管理您的計劃 法律注意事項   |   線上隱私政策 LanguageNavigation LanguageNavigation 選擇您的地區 選取地區會變更Adobe.com上的語言及/或內容。

Americas Brasil Canada-English Canada-Français Latinoamérica México Chile UnitedStates AsiaPacific Australia HongKongS.A.R.ofChina India-English NewZealand SoutheastAsia(IncludesIndonesia,Malaysia,Philippines,Singapore,Thailand,andVietnam)-English 中国 中國香港特別行政區 台灣地區 日本 한국 Singapore Thailand-English ประเทศไทย Europe,MiddleEastandAfrica Africa-English België-Nederlands Belgique-Français Belgium-English Českárepublika Cyprus-English Danmark Deutschland Eesti España France Greece-English Ireland Israel-English Italia Latvija Lietuva Luxembourg-Deutsch Luxembourg-English Luxembourg-Français Magyarország Malta-English MiddleEastandNorthAfrica-English Nederland Norge Österreich Polska Portugal România Schweiz Slovenija Slovensko Suisse Suomi Svizzera Türkiye UnitedKingdom България Россия Україна الشرقالأوسطوشمالأفريقيا-اللغةالعربية ישראל-עברית Sverige SaudiArabia-English UnitedArabEmirates-English الإماراتالعربيةالمتحدة المملكةالعربيةالسعودية