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 追蹤
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
這篇內容，將會講解什麼是函式，以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理，逐步解說了創建過程。通過這些建議，你將能夠創建一個既細緻又富有動畫效果的手繪風格場景，為你的動畫作品增添獨特的魅力和視覺吸引力。
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
這篇內容，將會講解什麼是函式，以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理，逐步解說了創建過程。通過這些建議，你將能夠創建一個既細緻又富有動畫效果的手繪風格場景，為你的動畫作品增添獨特的魅力和視覺吸引力。