將多支 AnimateCC 匯出的 canvas 動畫發布檔整合在同一頁面Yuuyuutube5 min read·Aug 6, 2021--
Share
專案開發上常需要崁入使用 AnimateCC 匯出的動畫，
有時需要在同一頁面內崁入多支動畫，先前都是匯出成逐格 PNG 來處理。
但如果在 AnimateCC 裡不是使用場景時間軸、而是全部使用個別物件內的時間軸來拉動畫的話，有時會有無法匯出逐格影格 PNG 的問題，不得不將發布檔整合再匯入頁面裡...
網路上有其他關於整合多支發布檔的文章、但是範例裡的多支 canvas 都是同一尺寸，但因我的 canvas 每支都是不同尺寸，發現實際在開發時，所有的canvas 都會變形為最後一個載入的 canvas 尺寸，不得親身改動 adobe 匯出的 js 來解決，嘗試了很久終於試出解法，以下是從 fla 開始的所有步驟：
Step 1. 從 AnimateCC 發布檔案HTML/JS 設定
命名空間：完全不需修改，從這裡每隻改成不一樣名稱也是沒有用的選擇「不將 JavaScript 包含在 HTML 中」（也就是按鈕文字顯示為：將JavaScript 包含在 HTML 中）按下發布後，會得到一隻 js、一隻 html、跟一份圖包
Step 2. 從html發布檔，取用需要的dom部分，貼入要崁入動畫的頁面內匯出後每隻 HTML 的 div ID 皆相同，
這邊需將 #animation_container, #canvas, #dom_overlay_container 全部更名為唯一的 ID，再貼進自己的頁面內。
範例：若有兩支動畫 m1、m2，這邊更名為:
#animation_container_m1, #canvas_m1, #dom_overlay_container_m1
#animation_container_m2, #canvas_m2, #dom_overlay_container_m2
Step 3. 從html發布檔，取用script部分，貼入js發布檔內每個 HTML 發布檔裡的 script，都有一行 var、一個 function init()、一個 function handleComplete(evt,comp)，並且 body 有綁 onload=”init();”
以上內容我們要全部移植出去，
首先為了避免每個動畫的 script 衝突，所有 script 需要先包進 function 裡，之後再逐一載入。
這邊直接利用 adobe 匯出的 js 檔，在 js 最下方新增：
範例：
m2() {
// 這裡貼入HTML檔中內所有內容
init();
}
注意：每次發布，會產生不同 TOKEN，不能重複，因此一定要逐一貼，才最省時正確。
Step 4. 編輯貼入js發布檔內的script上一步驟，貼入 m2() 內的內容，
裡面的三個 CSS selector, 全部更改為 step2 更名的新 ID。
到這邊 HTML 發布檔的更改已經告一段落了，
之後我們會在 window onload 時調用這些我們新增的 function。
Step 5. 在 window.onload 時執行 script頁面載入 createjs.min.js頁面載入所有 js 發布檔在頁面讀取完成時，執行剛才新增的所有 function範例：若有兩支動畫m1、m2:
到這邊乍看好像可以了，但實際跑起來，會噴一個 找不到 stage 的 error，
真的不知道 adobe 是怎樣，總之進 js 發布檔裡面直接修改原始碼
Step 6. 編輯js發布檔內的script檔案內搜尋
an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {
找不到的 stage，是全域變數，直接給他帶進去，變成
an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers, stage) {
2022.2 update
新版的發布檔，stage是m1()、m2()內初始化的變數，需從m1()、m2()內的makeResponsive一併帶上stage，如下
AdobeAn.makeResponsive(false,’both’,false,1,[canvas,anim_container,dom_overlay_container], stage);
如果每隻 canvas 尺寸完全相同，現在可能可以動了，如果出現 canvas 變形的錯誤，就繼續往下做
Step 7. 繼續編輯js發布檔內的script上一步我們更改的
an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers, stage) {
an 是從 create js 調用進來，所有 canvas 共用，
makeResponsive 是這支 js 裡定義給 an、用來 RWD canvas 尺寸的 function，
因為每一支的這個函式命名重複了，所以最後才變成每一支動畫的尺寸都變形為最後一支的尺寸。
這邊我們也逐一更名為唯一的名字。
範例：若有兩支動畫 m1、m2，這邊更名為:
an.makeResponsive_m1
an.makeResponsive_m2
m1()、m2() 內有引用到 makeResponsive 的部分也要一併修改名稱唷
到這邊終於可以動了...存檔結案