HTML5 遊戲開發與 Google Ads 廣告動畫 | 入門

想用更輕鬆的方式，做出專業又好維護的網頁動畫嗎？

#當你想把動畫、互動、網頁整合在一起時，是否也有這些挫折——

• 直接用純 JavaScript + HTML5 寫動畫，程式碼一多就像意麵一樣打結，之後要改一個小地方就得翻天覆地大搜查？
• 好不容易用動畫軟體做出帥氣的動畫，卻卡在「這要怎麼丟到網頁裡」這一步？
• Banner 上到頁面了，卻不知道要怎麼檢查它有沒有正常播放、到底有沒有達成廣告成效？

站在不同角色，你可能都有這些痛點...

#如果你是前端工程師：

• 設計師交來的動畫或 Banner，上到頁面後尺寸不跟版面一起自適應，結果只能含淚重刻一份。
• 為了配合 RWD、各種 breakpoint，動畫程式碼越補越多，維護成本一路飆升。

#如果你是網頁／視覺設計師：

• 明明自己做好的動畫很順很美，一交給工程師變成 code 版本，就覺得哪裡怪怪的、不夠精緻。
• 想自己掌握畫面節奏與細節，但每次都要仰賴工程師實作，溝通來回耗掉一堆時間。

#如果你是老闆或專案主管：

• 最想要的是「會設計的前端工程師」或「懂前端的設計師」，一次搞定設計＋實作，減少溝通成本與人力成本。
• 希望團隊有能力做出吸睛、具品牌感、又能快速修改與追蹤成效的網頁動畫。

讓複雜的網頁動畫從此變得簡單，這樣的效果也能做

與其靠工程師「通靈」動畫，不如自己用 Adobe Animate 快速做出來

#在真實專案中，設計師與工程師之間的溝通與來回修正，往往才是真正耗時的黑洞。

如果你能同時具備：

• 動畫設計的概念與美感
• 基礎的網頁與 JavaScript 能力

那麼你就可以把整個「設計 → 動畫 → 上線」的流程一手包辦，不再被卡在別人的時間表裡。

這堂課要帶你：

• 用 Adobe Animate 製作動畫與互動元件
• 搭配 CreateJS 流暢地整合到網頁當中
• 做出好看、可維護、可重用的網頁動畫與互動效果

讓 Mike 帶你把原本要花三倍時間的工作，濃縮成一套有流程、有方法的實戰技能。
改版、維護動畫時，不再從零開始重寫一堆 code！

教學範例搶先看！課程風格與實戰路線

控制卷軸操作與 Adobe Animate 動畫結合製作複雜人物切換呈現網頁

透過Animate CC製作遊戲人物與UI，搭配純JavaScript快速開發吃金幣遊戲

2D橫向捲軸遊戲人物移動與動作變化的動畫

動畫上面的動畫速率工具 - 加減速以及自定義動畫速率

隨筆觸顯示出字樣的效果

變化且多樣性的視覺效果

利用 Animate CC 製作出仿3D 骰子遊戲開獎畫面

商業案上的品牌呈現動畫

誰適合來上這堂課？

• 想讓網頁看起來更有「作品感」的前端工程師
• 想把動畫主導權抓在自己手上的網頁設計師／視覺設計師
• 想培養「前端＋動畫」跨能力，加強個人競爭力的創作者
• 團隊裡常被丟動畫需求、卻不知道從哪開始處理的你

只要你有基本的網頁概念（ HTML / CSS / 一點點 JS ），就可以跟得上節奏。

注意事項

本課程使用的 Adobe Animate CC 2018 與 CreateJS 1.0.0 版本，雖版本跟現在有落差，但課程重點在於：

• 動畫製作的流程與觀念
• 如何從動畫工具輸出，串接到網頁與 JavaScript
• 實務上建立一套自己可重複使用的工作流程

也就是說，就算未來版本更新、介面變動，你仍然可以把這套方法直接沿用到新的工具環境上。

如果你想要的，不只是「按幾個按鈕就吐出動畫」，
而是一套能讓你在專案裡真正派上用場的 網頁動畫工作流，
那這堂課會非常適合你。

Adobe 宣布目前 Animate 已進入維護模式，適用於個人、小型企業及企業用戶。維護模式下，Adobe 將持續提供技術支援，以及資安與錯誤修正，但不再新增功能。

我們並未停止或移除 Adobe Animate 的使用權限。Animate 將持續提供給現有及新客戶使用，我們也會確保您能繼續存取您的內容。Animate 不再有任何停止提供的截止日期或時間點。這些變更與我們最初電子郵件中所述有所不同。

Adobe Animate 現已進入維護模式，適用於所有客戶，包括個人、小型企業及企業客戶。

維護模式表示我們將繼續支援該應用程式，並提供持續的安全性和錯誤修正，但不再新增功能。Animate 將繼續對新用戶和現有用戶開放——我們不會終止或移除對 Adobe Animate 的存取權。

我們致力於確保 Animate 用戶無論開發狀態如何變化，都能存取他們的內容。

官方公告: https://helpx.adobe.com/animate/kb/maintenance-mode.html