HTML5+Animate CC 無痛上手網頁動畫與遊戲互動

    透過 Animate CC讓你快速製作HTML5網頁動畫與遊戲

    333
    5.0
    • 能夠熟練使用Animate CC 軟體

    • 瞭解Animate CC 與過去Flash的差異

    • 能夠在Animate CC轉出html5格式後,與網頁進行整合

    • 能夠獨立做出網頁banner、網頁動畫,及HTML5小遊戲式的互動

    • 能夠瞭解Google Ads廣告的素材設定與檢測方式

    US$80.11
    US$101.41

    按一下 进入设定

    00:00
    00:00
    00:00

    要怎樣才能輕鬆快速打造理想的網頁動畫呢?

    #從頭開始做動畫、整合網頁、製作網頁互動效果的時候......

    • 用純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呈現的骰子遊戲開獎畫面


    商業案上的品牌呈現動畫





    章节目录

    • 1-1
      範例下載
    • 1-2
      Animate CC 前後今生
    • 1-3
      版面配置
    • 1-4
      基本界面介紹

    试阅影片

    常见问答

    如果您購買的是募資課程,請在課程的【簡介】中查看開課時間,募資課程將於開課時間所述日期開放同學上課。

     

    若您購買的是一般課程(開放上課課程),則在購買完成後可以立即開始觀看。

     

    所有線上課程皆不受時間限制,享無限次永久觀看!

    猜你喜欢

    购买前问答

    OBO Ou
    OBO Ou

    您好,想請問如果想做出類似一般新成屋展示間在介紹的那種電子錶板,是該透過JAVASCRIPT可完成還是該課程呢?
    目前在這兩堂課程中不確定是哪種可以呈現出效果,畢竟據我了解,電子錶板之前都是透過Flash完成效果,後來Flash安全性問題消失後,轉由Animate取代之,但其結果最後還是轉成HTML,所以理當javascript應該也能完成其效果,但怕買錯課程,請協助解惑,或是是否想完成老師作品中,與P&G合作的那種靜態網頁,是否應該學習javascript即可完成?

    Mike
    Mike
    嚴格說起來兩個課程都需要,因為早期透過flash去製作但是也要寫actionscript,但是現在換到Animate一樣要寫Javascript,雖然動畫可以透過Animate完成,但是互動邏輯還是要透過程式來做,只是Animate內部寫js跟一般網頁寫js的方式又有點不太一樣,所以我沒辦法跟你說只能學哪一個可以完成,因為很多東西都是環環相扣的,要同學自己斟酌喔
    OBO Ou
    OBO Ou

    老師您好,那如果只是想要達到類似老師作品中的P&G案子這樣效果,是否只要透過javascript即可完成呢?
    https://cdn.hiskio.com/images/DXKb8zBOX4bH6GV

    Mike
    Mike
    當然還是要會html跟css然後切版
    這個效果是透過一個叫做aos的套件做的,你可以參考一下
    https://michalsnik.github.io/aos/
    OBO Ou
    OBO Ou

    感謝老師~html & css 切版算是熟悉,唯獨javascript不算熟悉,所以才有此疑問,感謝老師解答

    OBO Ou
    OBO Ou

    請問老師的javascript課程會包含AOS嗎?

    Mike
    Mike
    aos其實使用上很簡單,引入它的js後不用寫js,照它的設定就可以很快完成,所以建議你先看官網看看
    OBO Ou
    OBO Ou

    謝謝老師,確實,看了一下資料,並實作一下真的很快速就完成了,非常感謝

    mai mai
    mai mai

    1.我的問題跟版主提問的一樣,因為我也是用flash的,對於js也是不懂
    老師說的Animate內部寫js跟一般網頁寫js的方式又有點不太一樣
    那麼之後會有這類的教學嗎?

     

    不過是不是之前有學到AS.3.0就比較無痛接軌呢?雖然我是學as2.0

     

    2.此門課會有學到:

    按鈕與時間軸瀏覽控制

    1. 互動切換內容控制

    2. 互動切換內容廣告

    3. 切換內容應用

    4. 控制多層次影片片段元件

    這幾個教學嗎?

     

    3.因為本身flash 有player所以可以包成exe檔,那麼用an不就只能純網頁?

    销售方案