目的：動畫設計師用Adobe Animate CC做好動畫素材，釋出好之後，交給程式設計師寫互動程式碼；在WebStorm之類的ide裡操縱 Animate 裡面的變數，class等。

前提環境：

①安裝好Adobe Animate CC

②安裝好WebStorm，或者Sublime Text 2，Visual Studio Code之類的程式設計ide

③有個HTML5 動畫（canvas 專案）

流程：

1、把動畫檔案從 Adobe Animate裡釋出出來，後有一堆檔案

2、然後把釋出後的檔案拷貝到你在WebStorm新建的web專案資料夾裡，就可以了，沒有像以前flash cs和flash builder搭配的複雜，不需要在Adobe Animate裡填寫類路徑。

主要有以下點要點：

一、如何讓庫中的MC動畫，在html中載入，顯示出來

1、新建一個view類，然後在這個類裡面建一個變數 back = animate 庫中的 page，然後把 back載入到view類裡，程式碼如下圖

2、把view類載入到舞臺上，程式碼如下圖

二、如何在js中控制，新建，獲取MC裡的變數等等

1、如下圖

三、animate裡發出事件，WebStorm裡如何接收

1、首先是 animate 裡發出事件，如圖

2、然後是 WebStorm 裡接收 事件並處理，如圖

四、自適應

1、animate cc 提供了自適應和舞臺居中的功能，具體設定如下圖紅框：

當然自適應，居中，縮放填充的功能，根據你自己專案需求選擇。

五、預載入設定

動畫較大，初始開啟的時候會白屏很久，這時候選擇預載入器，可以有個載入loading，當做過渡，具體如下圖紅框：

六、本例DEMO的完整程式碼

PS：目前用 adobe animate釋出的檔案中，mcTest.html這個檔案暫時就沒有作用了，現在用我新建的index.html 這個檔案來代替，

等我以後再摸索看看，是否可以直接用mcTest.html。