在 Animate 中建立及發佈 HTML5 Canvas 文件

Canvas 是 HTML5 的新元素，其中提供的 API 可讓您動態產生並顯示圖形、圖表、影像和動畫。有了適用於 HTML5 的 Canvas API，就可以透過提供二維繪圖功能來強化 HTML5 平台。最新的作業系統和瀏覽器均支援這些功能。

基本上，Canvas 是點陣圖顯示引擎，而繪圖是最後完稿，無法調整大小。再者，在 Canvas 上繪製的物件並不是網頁 DOM 的一部分。

在網頁中，您可以使用 <Canvas> 標籤來新增 Canvas 元素。接著，可以使用 JavaScript 來增強這些元素，以便建置互動功能。如需詳細資訊，請參閱這個連結。

新的 HTML5 Canvas 文件類型

Animate 可讓您建立具有豐富圖案、圖形、動畫等內容的 HTML5 Canvas 文件。Animate 已加入新的文件類型 (HTML5 Canvas)，為建立豐富且互動 HTML5 內容提供原生支援。也就是說，您可以使用傳統的 Animate 時間軸、工作區和工具來建立內容，卻能產生 HTML5 輸出。只要按幾下，您就可以建立 HTML5 Canvas 文件並產生功能完整的輸出。到了最後，Animate 內的文件和發佈選項會預設為產生 HTML5 輸出。

Animate 與 CreateJS 整合在一起，可以透過 HTML5 提供採用開放網頁技術、豐富互動的內容。Animate 會針對在舞台上建立的內容 (包括點陣圖、向量、形狀、聲音、補間動畫等) 產生 HTML 和 JavaScript。輸出可以在任何支援 HTML5 Canvas 的裝置或瀏覽器上執行。

Animate 和 Canvas API

Animate 運用 Canvas API 發佈至 HTML5。Animate 可以順暢地將舞台上建立的物件轉譯為其 Canvas 對應物。透過在 Canvas 內提供 Animate 功能與 API 的一對一對應，Animate 讓您可以將複雜內容發佈至 HTML5。

建立 HTML5 Canvas 文件

若要建立 HTML5 Canvas 文件，請執行下列動作：

1. 選取「檔案 > 新增」，以顯示「新增文件」對話方塊。從畫面頂端選取「進階」索引標籤並按一下「HTML5 Canvas」選項。這會開啟新的 FLA，其中的「發佈設定」已修改為產生 HTML5 輸出。

您現在可以使用 Animate 內的工具開始建立 HTML5 內容。當您開始使用 HTML5 Canvas 文件時，將會發現某些功能和工具不受支援且已經停用。這是因為，Animate 支援由 HTML5 內的 Canvas 元素所支援的功能。例如，3D 變形、虛線、斜角特效不受支援。

在 HTML5 Canvas 文件中增加互動功能

Animate 使用 CreateJS 元件庫來發佈 HTML5 內容。 CreateJS 是一套模組化的元件庫和工具，可以透過 HTML5 提供採用開放網頁技術、豐富互動的內容。CreateJS 套件包括：EaselJS、TweenJS、SoundJS 和 PreloadJS。CreateJS 會使用這些個別元件庫，將舞台上建立的內容轉換為 HTML5，以便產生 HTML 和 JavaScript 輸出檔案。此外，您也可以處理這個 JavaScript 檔案來加強您的內容。

不過，Animate 可讓您針對為 HTML5 Canvas 所建立的舞台上的物件增加互動功能。這表示，您可以在 Animate 中實際為舞台上的個別物件加入 JavaScript 程式碼，並在編寫階段進行預覽。然後，Animate 會在程式碼編輯器內為具有實用功能的 JavaScript 提供原生支援，以協助改善設計人員的工作流程效率。

您可以在「時間軸」中選擇個別影格和關鍵影格，以便為您的內容增加互動功能。若是 HTML5 Canvas 文件，您可以使用 JavaScript 來增加互動功能。如需有關撰寫 JavaScript 程式碼的詳細資訊，請參閱這個連結。

您可以直接在「動作」面板中撰寫 JavaScript 程式碼，而且撰寫 JavaScript 程式碼的同時，它還支援下列功能：

讓您可以快速插入並編輯 JavaScript 程式碼而不會出錯。當您在「動作」面板中輸入字元時，會出現一份候選項目清單，可協助您完成輸入內容。

此外，使用 HTML5 Canvas 時，Animate 還支援「動作」面板固有的一些功能。為舞台上的物件增加互動功能時，這些功能有助於改善工作流程的效率。其中包括：

根據語法以不同字體或顏色顯示程式碼。這個功能可讓您以結構化方式撰寫程式碼，協助您從外觀區別正確的程式碼和語法錯誤。

根據語法以不同顏色顯示程式碼。這讓您可以從外觀區別語法的各種部分。

自動加入右括號和開啟括號以供撰寫 JavaScript 程式碼。

您可以使用 JavaScript，為舞台上的形狀或物件增加互動功能。您可以將 JavaScript 加入個別影格和關鍵影格。

1. 選取您要將 JavaScript 加入其中的影格。
2. 選取「視窗 > 動作」以開啟「動作」面板。

使用 JavaScript 程式碼片段

您可以使用 Animate 中提供的 JavaScript 程式碼片段來增加互動功能。若要存取並使用「程式碼片段」，請選取「視窗 > 程式碼片段」。如需有關新增 JavaScript 程式碼片段的詳細資訊，請參閱這篇文章。

CreateJS 文件的參考

產生互動的程式碼

Javascript 提供您各種可讓動畫互動的選項。想要了解如何為您的角色增加互動動作嗎？請觀賞此範例結尾的教學課程並依照下列步驟執行。

如何運用 HTML5 使您的內容具互動性

將動畫發佈至 HTML5

若要將舞台上的內容發佈至 HTML5，請執行下列動作：

1. 選取「檔案 > 發佈設定」。
2. 在「發佈設定」對話方塊中，指定下列設定：

基本設定

FLA 將發佈至其中的目錄。這個選項預設為與 FLA 相同的目錄，但是按一下瀏覽按鈕「...」即可進行變更。

如果核取，時間軸就會重複播放，反之，則會在播放結尾時停止。

如果取消選取，隱藏圖層就不會包含在輸出中。

讓使用者可以選擇是否應將舞台以「水平、垂直或兩者」方式置中。HTML Canvas/舞台預設會顯示在瀏覽器視窗中央。

讓使用者可以選擇動畫是否應參照寬度、高度或兩者而回應，並且根據不同尺寸來調整已發佈輸出的大小。結果會是具有回應、鮮明且清晰的 HiDPI 相容輸出。

此外，輸出也會延伸覆蓋整個螢幕區域，不留邊框，但還是會維持原始比例，雖然部分畫布可能不符合視圖。

• 「寬度、高度或兩者」選項可確保整個內容縮小成畫布大小，而且即使在小型螢幕上檢視 (例如行動裝置或平板電腦) 也能看得到。如果螢幕大小大於製作的舞台大小，畫布就會以原始大小顯示。

讓使用者可以選擇動畫是否應符合能檢視全螢幕模式中的輸出的大小，或者應延伸以符合視圖。預設會停用這個選項。

符合視圖：以整個螢幕空間在全螢幕模式中顯示輸出，並且還能維持比例。

延伸以符合：延伸到輸出中沒有邊框空間。

讓使用者可以選擇要使用預設的預先載入程式，或是從文件元件庫中選取他們的預先載入程式。

預先載入程式是以 GIF 動畫形式呈現的視覺化指示器，會在載入顯示動畫所需的指令碼及資源時出現。載入資源之後，預先載入程式就會隱藏起來，並顯示實際的動畫。

根據預設，並未選取預先載入程式選項。

• 「預設」選項表示使用預設的預先載入程式。
• 「瀏覽」選項表示使用您所選的預先載入程式 GIF。預先載入程式 GIF 會複製到「匯出影像資源」中所設定的影像資料夾中。
• 使用「預覽」選項可以預覽所選的 GIF。

使用切換選項可以選擇在根資料夾或子資料夾層級發佈。這個按鈕預設切換成「開啟」。切換成「關閉」會停用資料夾欄位，並將資源匯出到與輸出檔案相同的資料夾。

將文件匯出為紋理 將向量動畫匯出為紋理，以增強動畫的表現形式。如需詳細資訊，請參閱紋理發佈。

這個功能僅在取消核取「將影像合併至 Sprite 工作表」選項時適用。

您可以選擇從畫布文件匯出所有已匯入的影像 (包括壓縮的影像)，以保持其大小。取消核取「基本」索引標籤中的「將文件匯出為紋理」和「將影像合併至 Sprite 工作表」選項。影像隨即匯出，而不會有任何大小變更。

將放入影像資源並從中參考的資料夾。

合併至 Sprite 工作表：選取這個選項可以將所有影像資源合併到 Sprite 工作表。如需更多 Sprite 工作表選項，請參閱將點陣圖匯出為 Sprite 工作表。

將放入文件中的聲音資源並從中參考的資料夾。

將放入 CreateJS 元件庫並從中參考的資料夾。

預設設定會繼續將隔離的檔案發佈到邏輯子資料夾。

進階設定

影像、聲音及支援的 CreateJS JavaScript 元件庫所匯出成的相對 URL。如果未核取右邊的核取方塊，則不會從 FLA 匯出那些資源，但是仍會使用指定的路徑來組成其 URL。這樣可以加快從具有許多媒體資源的 FLA 發佈的速度，或者避免覆寫修改過的 JavaScript 元件庫。

「將所有點陣圖匯出為 Sprite 工作表」選項可讓您將 Canvas 文件中的所有點陣圖封裝至 Sprite 工作表，以便減少伺服器要求數目並改善效能。您可以輸入高度和寬度值，藉此指定 Sprite 工作表的大小上限。

使用預設值：使用預設範本來發佈您的 HTML5 輸出。

匯入新的：為您的 HTML5 文件匯入新的範本。

匯出：以範本形式匯出您的 HTML5 文件。

如果核取，就會使用位於 code.createjs.com 之 CreateJS CDN 所裝載的元件庫副本。這讓元件庫可以在不同網站之間快取及共用。

如果取消選取，隱藏圖層就不會包含在輸出中。

如果核取，向量指示就會以壓縮格式輸出。若未選取，則會匯出可讀取的詳細指示 (適合做為學習之用)。

如果核取，時間軸元件就會包括 frameBounds 屬性，其中包含對應至時間軸中每個影格邊緣的矩形陣列。多影格邊緣會大幅增加發佈時間。

如果選取「將 JavaScript 包含在 HTML 中」，則會核取並停用「發佈時覆寫 HTML 檔案」核取方塊。 如果您取消核取「發佈時覆寫 HTML 檔案」核取方塊，則會取消核取並停用「將 JavaScript 包含在 HTML 中」。

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

使用巢狀時間軸所設計、具有單一影格的動畫無法循環。

HTML 範本變數

當您匯入新的自訂 HTML 範本時，發佈期間，預設變數會根據 FLA 檔案的組件取代為自訂的程式碼片段。 

下表列出 Animate 可辨識及取代的目前範本變數：

先前版本中的下列 Token 已在目前版本中被取代：

這些 Token 已模組化並由其他 Token 所取代。

JSAPI 支援匯入及匯出 HTML 範本做為 Canvas 文件使用

下列 JSAPI 支援匯入及匯出 HTML 範本做為 Canvas 文件使用：

• 將 HTML5 Canvas 發佈範本匯出在指定的位置，做為指定的文件：

bool document::exportCanvasPublishTemplate(pathURI)

• 範例：

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be exported”);

• 從指定位置路徑 URI 匯入及設定指定文件的 HTML5 Canvas 發佈範本：
  

bool document::importCanvasPublishTemplate(pathURI)

• 範例：

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be imported”);

將 JavaScript 嵌入 HTML

Animate 引進在畫布發佈期間在 HTML 檔案內納入 JS 檔案的功能。

1. 在「發佈設定」選單中切換至「進階」索引標籤，並選取「將 JavaScript 包含在 HTML 中」。
2. 選取「發佈時將 JavaScript 包含在 HTML 檔案中」對話方塊中的「確定」，重新發佈內容，以覆寫 HTML。
3. 這會停用「發佈時覆寫 HTML 檔案」核取方塊，並在任何發佈事件期間產生 HTML 而非加以覆寫。
4. 在「停止將 JavaScript 包含在 HTML 中」選取「確定」，以排除 JavaScript 並重新發佈 HTML 檔案。
5. 若未選取「發佈時覆寫 HTML 檔案」，則會自動停用「將 JavaScript 包含在 HTML 中」選項。

如果您不希望 HTML 遭到覆寫，「發佈時覆寫 HTML 檔案」和「將 JS 嵌入 HTML」選項不可同時存在。

增加全域及協力廠商指令碼

動畫人員通常會利用適用於整個動畫的 JavaScript 程式碼。透過這個功能，您可以增加非影格特定的全域及協力廠商指令碼，以便從 Animate 中套用到整個動畫。 

若要增加和使用全域指令碼：

增加協力廠商指令碼

動畫人員通常會整合協力廠商 JavaScript 資料庫，但必須手動修改 Animate 產生的程式碼。透過這個功能，動畫人員具有較大彈性，可以使用最新的 JavaScript 資料庫或程式碼來製作動畫。

若要增加協力廠商指令碼：

將 JSON 資料合併至 JS

根據客戶意見反應及 JSON 檔案本來就不安全的因素，我們已經將相關資料與 JS 檔案合併，因此，不會建立個別 JSON 檔案。

最佳化 HTML5 Canvas 輸出

Animate 會利用下列方式最佳化 HTML5 Canvas 輸出大小和效能：

• 使用「發佈設定」的「Sprite 工作表」標籤中的選項，將點陣圖匯出為 Sprite 工作表。
• 從發佈的輸出中排除隱藏的圖層 (方法是取消選取「包含隱藏圖層」核取方塊)。
• 排除所有未使用的資源，例如聲音和點陣圖，以及未使用的影格上的所有資源 (預設)。
• 取消選取影像、聲音的資源匯出選項，支援 CreateJS JavaScript 元件庫並使用相對 URL 來匯出，藉此指定不要從 FLA 匯出資源。
• 與 HiDPI 相容的 HTML5 Canvas 輸出：Animate 會根據您檢視內容所用的裝置的像素比例來縮放輸出。此相容性提供具有縮放功能且更鮮明的輸出，並且還能修正當您在 High DPI 機器上檢視 HTML Canvas 輸出時 Canvas 文件的像素問題。
  

設定透明的畫布背景

您可以將畫布自訂成各種顏色，也可以修改其顯示透明度。當您建立透明的畫布時，即可在發佈期間檢視基礎 HTML 內容。

注意：這個設定也會在 OAM 發佈期間將背景設定為透明。

1. 選取您要修改的畫布。
2. 在「屬性」窗格中選取「舞台」。
3. 在「舞台」中，設定「Alpha」的百分比值。

「無色」色票支援

此外，您也可以使用「無色色票」選項，將畫布背景設定為透明：

1. 選取「修改 > 文件 > 舞台顏色」，或者在「屬性」檢測器中選取「進階設定」。
2. 在「舞台顏色」色票中選取「無色」。

將點陣圖匯出為 Sprite 工作表

將您在 HTML5 Canvas 文件中使用的一些點陣圖匯出成單一 Sprite 工作表，可以減少伺服器要求的數目、縮小輸出大小並改善效能。您可以將 Sprite 工作表匯出為 PNG (預設)、JPEG 或兩種格式。

1. 在「Sprite 工作表」標籤中，選取「將影像資源合併至 Sprite 工作表」核取方塊。
2. 將「格式」選為「PNG」、「JPEG」或「兩者」。
   
3. 如果您已選取「PNG」或「兩者」，請在「PNG 設定」下方指定下列選項：
   • 品質：將 Sprite 工作表品質設定為「8 位元」(預設)、「24 位元」或「32 位元」。
   • 最大大小：以像素為單位，指定 Sprite 工作表的最大高度和寬度。
   • 背景：按一下即可設定 Sprite 工作表的背景顏色。
4. 如果您已選取「JPEG」或「兩者」，請在「JPEG 設定」下方指定下列選項：
   
   • 品質：設定 Sprite 工作表的品質。
   • 最大大小：以像素為單位，指定 Sprite 工作表的最大高度和寬度。
   • 背景：按一下即可設定 Sprite 工作表的背景顏色。

在 HTML5 Canvas 文件中使用文字

HTML 畫布支援靜態及動態文字。

靜態文字

靜態文字是更豐富的選項，發佈期間所有資源都會轉換為外框，並且提供絕佳的 WSYWIG 使用者體驗。由於文字會發佈為向量外框，因此，您無法在執行階段進行編輯。

注意：使用過多靜態文字可能會導致檔案大小膨脹。

動態文字

動態文字可讓您在執行階段修改文字，而且不會使檔案大小變得太大。但支援的選項比靜態文字少。此外，它也支援透過 Adobe Fonts 使用網頁字體。

如果您將動態文字與使用者電腦上未提供使用的字體搭配使用，輸出會使用預設字體來顯示，使用者因此看到傾斜的字體。這類問題可以透過網頁字體獲得解決。

將網頁字體增加到您的 HTML5 Canvas 文件

Animate 提供網頁字體，適用於 HTML5 Canvas 文件中的「動態文字」類型。Adobe Fonts 讓您可以直接取用主要字型合作夥伴所提供的數千種優質字體。您可以透過 Creative Cloud 會籍，順暢地取用 Adobe Fonts 並運用在您的 HTML5 輸出中，以供現代瀏覽器和行動裝置之用。

若要深入了解如何從 Animate 中的 Adobe Fonts 使用網頁字體，請參閱在 HTML5 Canvas 文件中使用網頁字體

Animate 2015.2 版本會加強 Canvas 文件中動態文字的視覺使用體驗，使舞台及已發佈的外觀保持同步。

注意：Adobe Fonts 不適用於靜態文字類型。

了解 HTML5 Canvas 輸出

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

包含 Canvas 元素內所有形狀、物件和圖案的定義。還會叫用 CreateJS 命名空間，以便將 Animate 轉換為 HTML5 和包含互動式元素的對應 JavaScript 檔案。 

包含動畫中所有互動式元素的專屬定義和程式碼。在 JavaScript 檔案內定義的還有所有補間動畫類型的程式碼。

這些檔案預設會複製到與 FLA 相同的位置。您可以在「發佈設定」對話方塊 (「檔案 > 發佈設定」) 提供輸出路徑來變更位置。

將現有內容移轉至 HTML5 Canvas

您可以在 Animate 內移轉現有內容，以便產生 HTML5 輸出。到了結尾，Animate 可讓您手動複製或匯入個別圖層、元件和其他元件庫項目，以便移轉內容。此外，您可以執行「將 AS3 轉換為 HTML5 Canvas 文件」命令，即可自動將現有 ActionScript 內容匯出為新的 HTML5 Canvas 文件。如需詳細資訊，請參閱這個連結。

不過，在 Animate 中使用 HTML5 文件類型時，您會發現某些 Animate 功能不受支援。這是因為 Animate 內的功能沒有 Canvas API 中的對應功能。因此，在 HTML5 Canvas 文件類型中，無法使用這些功能。當您嘗試執行下列動作時，這可能會在內容移轉期間造成影響：

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

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

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

例如，匯入已套用漸層斜角效果的 PSD 檔案。Animate 會移除該效果。

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

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

ActionScript 元件已移除，並且程式碼已標示註解。此外，如果您已在註解區塊中撰寫 JavaScript (適用於 Animate 13.0 的 Toolkit for CreateJS)，請務必手動取消註解程式碼。

例如，如果您複製了包含按鈕的圖層，按鈕會遭到移除。

移轉後套用至內容的變更

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

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

• 3D 變形已移除
• ActionScript 程式碼已標示註解
• 視訊已移除

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

• 覆蓋混合模式不受支援；已修改為「一般」。
• 「虛線」不受支援；已修改為「實線」。

如需移轉期間不受支援及其後援值之功能的完整清單，請參閱這篇文章。

將其他文件類型轉換為 HTML5 Canvas 文件

通用文件類型轉換器可以將您現有的 FLA 專案 (任何類型) 轉換為任何其他文件類型，例如 HTML5 Canvas、ActionScript/AIR、WebGL 或自訂文件類型。在轉換為格式時，您可以善加利用 Animate 針對該文件類型所提供的編寫功能。 

如需詳細資訊，請參閱轉換為其他文件格式

使用 JSFL 指令碼將 ActionScript 3 轉換為 HTML5 Canvas 文件

Animate 提供的 JSFL 指令碼可以將 AS3 文件轉換為 HTML5 Canvas 文件。執行時，JSFL 指令碼會執行下列動作：

• 建立新的 HTML5 Canvas 文件。
• 將所有圖層、元件和元件庫項目複製到新的 HTML5 Canvas 文件。
• 將預設值套用到不支援的功能、子功能或功能屬性。
• 為每個場景建立個別 FLA 檔案，因為 HTML5 Canvas 文件不支援多個場景。

1. 在 Animate 中開啟 ActionScript 3 文件。
2. 選取「命令 > 將 AS3 轉換為 HTML5 Canvas 文件」。

這個功能僅在取消核取「將影像合併至 Sprite 工作表」選項時適用。