Animate CC 加上互動控制與程式碼片段

在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成。Canvas 是 HTML5 的新元素，其中提供的 API 可讓您動態產生並顯示圖形、圖表、影像和動畫。有了適用於 HTML5 的 Canvas API，就可以透過提供二維繪圖功能來強化 HTML5 平台。最新的作業系統和瀏覽器均支援這些功能。

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

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

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

CreateJS(https://createjs.com/)是一套間單好用的 HTML5 Canvas Library，因為有Animate CC幫助建立ui與動畫，不要用再去處理其他繁瑣的程式碼工作。

【檢視範例】【下載範例】

首先對於要以程式設定為互動內容的元件，需為【影片片段元件】 (不可圖像元件) 或【按鈕元件】且須為元件命名，命名方式為加上『實體名稱』設定，點取要命名的元件由屬性控制版上即可加上『實體名稱』的設定。

※ 實體名稱命名原則
（1） 需為英文與數字的組合，唯第一個字元不可以是數字，第二個字元後才可以使用數字。

（2） 中間不可有空格，可使用底線或減號符號。
影片片段元件請以『_mc』（MovieClip）結尾，按鈕元件請以『_btn』（Button）結尾，方便管理與程式撰寫時會出現程式相關功能。

接著點取該元件，由程式碼片段 > HTML5 Canvas > 事件處理常式內按下【滑鼠按鍵事件】即可產生元件互動控制的設定內容:

自訂函數名稱可以想像為該次事件（動作）的指定任務內容代號

以『函數（Function）』來安排指定的任務內容，搭配設定的自訂函數名稱，即是所謂的 XXX 工作。

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果