Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Animate
Webdesign

面向網頁設計師的 Adob​​e Animate CC 簡介

by
Difficulty:IntermediateLength:ShortLanguages:

Chinese (Traditional) (中文(繁體)) translation by Stypstive (you can also view the original English article)

什麼比靜態效果更好? 當然是動態效果,朋友們。 從簡單的界面交互,到更為複雜的場景和原型,動態效果在網頁中的應用日漸增多。 本文我們將介紹一下Adobe Animate,它是什麼,不是什麼,以及它能如何幫助網頁設計師工作。

什麼是 Adob​​e Animate?

Adobe Animate 被描述成Flash專業版 (Flash Professional) 的進化版本;當史蒂夫·喬布斯發表了一封有關Flash的公開信的同時,flash注定成為了歷史。

“為了更好的體現它在網頁及其他領域內作為一款主打動效工具的地位,Flash Professional 將被改名為 Adob​​e Animate CC” – , 2015年

時至變遷,Adobe已經改變了他們對待網絡的方式。

Adobe Animate feature timeline
Adobe Animate 功能發佈時間線

無論你是動效新手,還是正在考慮替換原型工具的老司機,Adobe Animate CC 或許正是你的選擇。 和所有工具一樣,它的目的是專人專用。 雖然它不是每個人的必備工具,但是它還是會讓你對它產生興趣。

使用 Adob​​e Animate 創建的卡通,廣告,遊戲以及其他交互內容可以發佈到我們熟悉的眾多平台,如 HTML5 Canvas, Flash Player & Air, WebGL, 甚至是 Snap SVG。

功能特性

為了幫助大家更好的了解 Adob​​e Animate 的性能,我認為最好是列出一些我個人認為非常有用的主要功能。 Adobe Animate最好的功能當然就是它已經完全擁抱了Web標準。 其次就是相當廣泛的導出和發布選項,還有矢量畫筆,HiDPI支持,第三方JavaScript整合以及更多。

時間軸及幀

發生在一定時間內的動作集合通常稱為時間軸。 Flash開發者對這些概念會非常熟悉。 發生在一定時間內的動作集合通常稱為時間軸。 這裡有一個Adobe對時間軸概念的簡單介紹。

時間軸用於組織和控制在一定時間內圖層和幀中的文檔內容。 也就是說藝術家們可以單獨創建動畫並且將這些孤立的運動集成到一個更大的主時間軸裡。

導出和發布

隨著開放網絡標準終於被Animate CC所接受,開發者還是必須要注意到導出格式的技術限制。 開發者仍然可以根據需要選擇導出到Flash播放器, SWF文件。 Animate CC還可以導出到不同解析度的bitmap格式文件。 你甚至可以根據幀和動效生成一個Sprite表在css中使用。

毫無疑問,導出和發布選項讓你的項目更加高效和先進化。 通過啟用 “scale content” 選項,你可以無需從頭創建源文件即可交付相同項目的不同版本。 在發佈設置窗口中使用正確的對象嵌入式標籤即可生成用於ActionsScript項目的HTML文件。

還有一個好消息就是,你還可以導出到SVG格式。

矢量畫筆

Animate CC 引入了新的矢量繪製工具,包括無需轉換成圖形再進行編輯的矢量畫筆。 所有你在Illustrator 中熟知的畫筆和繪製功能在 Animate CC 同樣適用。 你可以通過設置畫筆的參數,比如形狀甚至斜度,來自定義畫筆。 如果你關心作品的質量和清晰度,那麼該項功能超級實用。

骨骼工具

Flash開發人員將會在家中使用骨骼工具對對象進行動畫處理,這些骨骼按父子關係鏈接成線性或枝狀的骨架;想像一下彎曲的手臂,蛇行或踢腿這些運動。 這些類型的動效如果使用代碼實現將會花費大量的時間,但是如果使用Animate CC製作就會非常快速,降低壞想法的成本,加速孕育好點子。

基於電樞的運動序列也可以包括在元件中,也就是我們熟知的“實例”,可以在你的項目中反複使用。

骨骼工具還有其他一些隱藏的小技巧。 通過將動態物理學整合到骨骼中來獲得逼真的物理運動,如彈性,讓運動對物理世界來說更加逼真。

支持第三方JavaScript腳本

你創造了一件偉大的作品讓他動起來,但是希望使用第三方幫助如 GreenSock,可以嗎? 好消息! 你完全可以。 現在開發者可以從全新的Animate界面獲取他們想要的靈活性,而不用感覺住在一個砌了圍牆的花園內無法獲得外部世界的幫助。 使用最新的JavaScript庫為你動畫中的幀獲得所需的靈活性。

攝像頭定位和舞台控制

動畫師對舞台(例如畫布)定位有著完全的控制權。 有可用的選項可以設置以任何方式旋轉舞台,選擇你想要的任何起始點,例如舞台的正中央甚至角落。 你的動畫還可以包括更多的動態,例如添加相機效果,例如平移,放大或者旋轉,讓你的項目更加逼真;小心不要讓詹姆斯·卡梅倫盯上你。

Animates virtual camera
Animate的虛擬攝像機

總結

工具很酷,但是它們不能主宰世界。 工具選擇不僅要明智,還要選擇適合你的。 工具是來幫助你的而不是來限定你的工流程的。 如果你正在你的項目中使用Animate,請留言或者分享你的實例鏈接,告訴我們你的使用經驗。祝你創作動畫快樂! 祝你創作動畫快樂!

延伸閱讀以及有用的鏈接

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.