HTML5+Animate CC 無痛上手網頁動畫與遊戲互動
透過 Animate CC讓你快速製作HTML5網頁動畫與遊戲
能夠熟練使用Animate CC 軟體
瞭解Animate CC 與過去Flash的差異
能夠在Animate CC轉出html5格式後，與網頁進行整合
能夠獨立做出網頁banner、網頁動畫，及HTML5小遊戲式的互動
能夠瞭解Google Ads廣告的素材設定與檢測方式
Click for settings
要怎樣才能輕鬆快速打造理想的網頁動畫呢？
#從頭開始做動畫、整合網頁、製作網頁互動效果的時候......
- 用純JavaScript + HTML5直接寫出網頁動畫，code很複雜，又很難維護！
- 好不容易用動畫繪圖軟體做出動畫，卻不知道該怎麼整合到網頁上？
- Banner上了網頁後，有沒有辦法檢測它是否正常運作，達到廣告效果？
#或者，做為團隊的成員，你也可能有這些疑問......
- 網頁前端工程師：設計師給的動畫跟banner到了網頁上，無法隨著介面彈性變更大小，得重寫！
- 網頁設計師：工程師用code直接呈現的動畫banner不好看，怎麼修改？
- 老闆/ 主管：我想要找一個會設計的前端工程師/會前端工程的設計師，省下許多溝通與製作成本！
讓複雜的網頁動畫從此變得簡單，這樣的效果也能做
設計師與工程師之間的流程與分工很複雜，但如果你能夠一人包辦呢？
# 與其讓工程師花長時間通靈出一個動畫，不如就自己用Animate CC來快速製作吧！
在業界的流程中，設計師與工程師經常是互相搭配地工作，團隊溝通以及用code寫動畫絕對是最花時間的環節。
當你同時擁有動畫設計能力 + 網頁基礎功力，獨立製作並呈現想要的網頁效果絕對不難。
讓Mike帶著你節省三倍以上的工作時間，動畫維護再也不用從頭寫code！
也讓你更加瞭解，在學完本課程後，手上能跟老闆談的籌碼在哪裡！
也許你會問：我為什麼要學 Animate CC + HTML5 呢？
軟體面：
- 無痛轉用Animate CC，動畫師的福音
對於毫無基礎的軟體初學者/ 曾使用flash製作動畫者來說，Animate CC 是相當好上手，易學易懂的好軟體！它作為繼承flash的軟體，使用方式也讓有flash基礎的人相當熟悉，可以無痛轉用！
- 學會主流軟體技術，增加競爭力
HTML5 是 HTML最新的修訂版本，目前所有的網頁開發都以HTML5（含HTML、CSS、JavaScript）作為最基礎的技術組合。因此，它也是現今職場上相當必要的技能！
技術面：
- 培養四種專案實作能力，完美呈現自己想要的樣式
設計的初衷，在於傳達意念，而現在能夠最大量傳達自己的作品出去的，就屬網路了！也因此，在這堂課程中能夠學到的四種能力：動畫、banner、網頁整合、遊戲互動製作，絕對是相當實用的技術，它能夠讓你的商業動畫以最簡單的方式與網頁結合，同時又能夠兼顧後續修改時的方便，讓你能夠依照當下網頁呈現的效果快速修改作品。
職涯面：
- 成為多功能人才，老闆眼中的績優股
老闆們都需要具有多樣化能力與良好溝通能力的成員，但常常囿於人才的專業，而找了學習領域「在精不在多」的員工們。當然這些人在各自的崗位上都能有燦爛的光芒，但這時若出現一個會設計的前端工程師 / 會前端工程的設計師，雙方就能夠完整不失真地傳達自己的意思，節省許多的溝通成本。老闆們當然搶著留！
依照專案實際作業循序漸進，業界常用的動畫與互動效果都在這裡
這門課程，能夠讓你達到什麼效果呢？
講師介紹
Mike 成智遠 親身經歷設計師轉職前端工程師
『勤能補拙！我跟你們都是不斷的努力練習來向前邁進，快來與我一起推倒技術的高牆！』
對互動技術與網頁前端抱持者極大興趣的開發者，擅長處理前端用戶界面和數據之間的互動，提升用戶體驗，我熱愛分享和教學。我還在各個大專院校和機構擔任前端講師。
累積多年實務與教學經驗，熱愛分享自己所見所學的技術，與幫助學生解決觀念與工作上碰到的難解問題。
‧ 台北前端社群 版主
‧ 曾任職於 痞客邦PIXNET 資深前端工程師
‧ 曾任職於 致理科技大學數位媒體設計系 RWD網頁設計業師
‧ 曾任職於 AmazingTalker 線上教育平台 資深前端工程師
‧ 曾任職於 米蘭營銷策劃股份有限公司 前端工程師
‧ 曾擔任跨國知名企業公司專業技能內訓講師
‧ 受邀至各大專院校演講
教學範例搶先看，不怕買了之後才後悔！
透過第三方函式庫，如JQuery來控制卷軸操作與Animate CC動畫上的結合
製作複雜人物切換呈現網頁
透過Animate CC製作遊戲人物與UI，搭配純JavaScript快速開發吃金幣遊戲
人物移動與動作變化的動畫
Animate CC上面常見的效果即轉出規範與限制
動畫上面的動畫速率工具 - 加減速以及自定義動畫速率
隨筆觸顯示出字樣的效果，適合用在網頁開場
搭配不同圖片的呈現，製作出變化且多樣性的視覺效果
利用 Animate CC 製作出仿3D呈現的骰子遊戲開獎畫面
商業案上的品牌呈現動畫
Content
- 1-1範例下載
- 1-2Animate CC 前後今生
- 1-3版面配置
- 1-4基本界面介紹
Preview
FAQ
如果您購買的是募資課程，請在課程的【簡介】中查看開課時間，募資課程將於開課時間所述日期開放同學上課。
若您購買的是一般課程（開放上課課程），則在購買完成後可以立即開始觀看。
所有線上課程皆不受時間限制，享無限次永久觀看！
Recommendations
評價
評價
目前預計把Mike老師的課程依我程度依序購買
評價
評價
評價
評價
Reviews
Pre-Purchase Q&A
您好，想請問如果想做出類似一般新成屋展示間在介紹的那種電子錶板，是該透過JAVASCRIPT可完成還是該課程呢？
目前在這兩堂課程中不確定是哪種可以呈現出效果，畢竟據我了解，電子錶板之前都是透過Flash完成效果，後來Flash安全性問題消失後，轉由Animate取代之，但其結果最後還是轉成HTML，所以理當javascript應該也能完成其效果，但怕買錯課程，請協助解惑，或是是否想完成老師作品中，與Ｐ＆Ｇ合作的那種靜態網頁，是否應該學習javascript即可完成？
老師您好，那如果只是想要達到類似老師作品中的Ｐ＆Ｇ案子這樣效果，是否只要透過javascript即可完成呢？
https://cdn.hiskio.com/images/DXKb8zBOX4bH6GV
感謝老師～html ＆ css 切版算是熟悉，唯獨javascript不算熟悉，所以才有此疑問，感謝老師解答
請問老師的javascript課程會包含ＡＯＳ嗎？
謝謝老師，確實，看了一下資料，並實作一下真的很快速就完成了，非常感謝
1.我的問題跟版主提問的一樣，因為我也是用flash的，對於js也是不懂
老師說的Animate內部寫js跟一般網頁寫js的方式又有點不太一樣
那麼之後會有這類的教學嗎？
不過是不是之前有學到AS.3.0就比較無痛接軌呢？雖然我是學as2.0
2.此門課會有學到：
按鈕與時間軸瀏覽控制
1. 互動切換內容控制
2. 互動切換內容廣告
3. 切換內容應用
4. 控制多層次影片片段元件
這幾個教學嗎？
3.因為本身flash 有player所以可以包成exe檔，那麼用an不就只能純網頁？