Animate CC 加上互動控制與程式碼片段
閱讀時間約 3 分鐘
在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） 需為英文與數字的組合，唯第一個字元不可以是數字，第二個字元後才可以使用數字。
（1） 需為英文與數字的組合，唯第一個字元不可以是數字，第二個字元後才可以使用數字。
（2） 中間不可有空格，可使用底線或減號符號。
影片片段元件請以『_mc』（MovieClip）結尾，按鈕元件請以『_btn』（Button）結尾，方便管理與程式撰寫時會出現程式相關功能。
影片片段元件請以『_mc』（MovieClip）結尾，按鈕元件請以『_btn』（Button）結尾，方便管理與程式撰寫時會出現程式相關功能。
接著點取該元件，由程式碼片段 > HTML5 Canvas > 事件處理常式內按下【滑鼠按鍵事件】即可產生元件互動控制的設定內容:
■ 叫做 XXX 的工作 （自訂函數名稱）
自訂函數名稱可以想像為該次事件（動作）的指定任務內容代號
■ 所謂的 XXX 工作{ 就是…… }
以『函數（Function）』來安排指定的任務內容，搭配設定的自訂函數名稱，即是所謂的 XXX 工作。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
129內容數
多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用!
Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
插畫和動畫之間有著密切的關係，但並不是說一定要先有插畫才有動畫。插畫通常是靜態的圖像，用來表達一個概念、故事或角色，而動畫則是將這些靜態圖像連續播放，創造出動態效果。
在很多情況下，動畫的製作確實會從插畫開始。插畫可以用來設計角色、場景和故事板，這些都是動畫製作的重要步驟。例如，漫畫或插畫書經
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
這篇內容，將會講解什麼是函式，以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理，逐步解說了創建過程。通過這些建議，你將能夠創建一個既細緻又富有動畫效果的手繪風格場景，為你的動畫作品增添獨特的魅力和視覺吸引力。
我們最早就是在做動畫，從一般廣告開始，慢慢去擴展不同的類型，比如說遊戲、角色動畫、電視與電影的特效……等等，但是越做越專業的情況下，我們就想再去做一些延伸，像是虛擬攝影棚跟虛擬製作，我們找到這些工作項目的共通元素去發展，甚至到後面我們還去做互動設計、沉浸式多媒體展覽與現在時下最熱門的AI生成技術。
Ae 小技巧：CC Bend It 彎曲
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Canva近年來成為設計界的熱門工具，其新擴張功能讓設計人員可以快速將設計的logo、圖案套用在各種商品上，操作簡便實用。本文將介紹Canva的新擴張功能，如何套用在不同的商品上，以及如何使用細部編輯模式調整大小和位置。
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流，還可以幫線稿上色。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
插畫和動畫之間有著密切的關係，但並不是說一定要先有插畫才有動畫。插畫通常是靜態的圖像，用來表達一個概念、故事或角色，而動畫則是將這些靜態圖像連續播放，創造出動態效果。
在很多情況下，動畫的製作確實會從插畫開始。插畫可以用來設計角色、場景和故事板，這些都是動畫製作的重要步驟。例如，漫畫或插畫書經
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
這篇內容，將會講解什麼是函式，以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理，逐步解說了創建過程。通過這些建議，你將能夠創建一個既細緻又富有動畫效果的手繪風格場景，為你的動畫作品增添獨特的魅力和視覺吸引力。
我們最早就是在做動畫，從一般廣告開始，慢慢去擴展不同的類型，比如說遊戲、角色動畫、電視與電影的特效……等等，但是越做越專業的情況下，我們就想再去做一些延伸，像是虛擬攝影棚跟虛擬製作，我們找到這些工作項目的共通元素去發展，甚至到後面我們還去做互動設計、沉浸式多媒體展覽與現在時下最熱門的AI生成技術。
Ae 小技巧：CC Bend It 彎曲
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Canva近年來成為設計界的熱門工具，其新擴張功能讓設計人員可以快速將設計的logo、圖案套用在各種商品上，操作簡便實用。本文將介紹Canva的新擴張功能，如何套用在不同的商品上，以及如何使用細部編輯模式調整大小和位置。
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流，還可以幫線稿上色。