Adobe Edge: HTML5、CSS3、JS的動畫特效整合開發工具
| 2011/08/02 | 6 則迴響
HTML5問世後帶給軟體開發者不少驚奇，尤其在相關產業的大力支持下，相關的應用工具也爭相出現。Adobe在日前推出Edge，就是為了要整合新一代的HTML5、CSS3及Javascript的動畫製作能力，提供給多媒體設計師一個便利的動畫製作工具，讓設計師不必額外學習相關程式碼的撰寫，可以將心力放在設計上。
Adobe Edge的第一個版本稱為 Preview 1 ，在昨天(8/1)推出了。目前 Adobe Edge下載使用是免費的，想玩玩看的話，必須先在Adobe註冊會員帳號，才可以下載。
你可以在這裡下載 Edge，而這裡有一些 Edge做出來的實例。
下載安裝時會發現有預留輸入序號的頁籤，不過Preview版的安裝會直接跳過這個頁籤，在同意規章後就直接進行下載了。
安裝後的Adobe Edge畫面如下。
Edge的UI十分簡單，最上方左邊是工具列，內有四個工具項目，分別是選取工具(Selection Tool)、矩形工具(Rectangle Tool)、圓角矩形工具(Rounded Rectangle Tool)、文字工具(Text Tool)。
正中央是動畫呈現的舞台(Stage)，我們可以從工具列裡點選矩形或文字，然後在舞台中拉出這些元素。
左方是元素們的屬性設定(Properties)，像是位置、大小、旋轉角度、縮放等；右方是所有在舞台裡的元素列表(Elements)，方便選定。
最下方的區塊是時間軸(Timeline)，就是用來賦于元素們動畫特效的地方。
目前看來，Edge的動畫製作方式與 Flash 的 Motion 動畫操作非常相似，也是以類似制定關鍵影格(key frame)的方式來定義每個階段元素改變的形式來生成動畫。例如，一開始時間軸的第1格key frame畫面，A元素位置在左上方，在時間軸第20格我們建立一個新的key frame (在Edge裡，只要點一下第20格就好)，然後改變A元素的位置，把它移動到右下方 (或甚至改變一下它的旋轉角度及透明度)，此時我們的時間軸裡就有兩個key frame了，而Edge會自動幫你完成第1格到第20格之間的動畫。
完成動畫後，Edge也沒什麼匯出功能，直接就是存成一個html檔、一個js檔，另外還生成了一個edge_includes目錄，裡頭放了一些js檔。
直接以瀏覽器打開此html檔，就可以觀看到動畫效果了。
當然不可能只透過html檔就能產生動畫，我們可以先觀察這個html檔的內容：
[html]
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<!–Adobe Edge Runtime–>
<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
<script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="mrmu_test_edge.js"></script>
<link rel="stylesheet" href="mrmu_test_edge.css"/>
<!–Adobe Edge Runtime End–>
</head><body>
<div id="stage" class="symbol_stage">
</div>
</body>
</html>
[/html]
可以發現html檔是html5的格式外，它還包進了jQuery及edge自身的javascript檔，而這些javascript檔，就是扮演著讓動畫實現的關鍵角色。
這裡是我做的一個DEMO，動畫效果在Chrome看起來非常流暢。
目前我使用 win7 安裝並測試 Adobe Edge，發現操作上好像沒有很順暢，尤其有一些畫面Refresh的問題，重繪的觸發時間點很怪。另外我比較想看到可以整合頁面互動的效果，目前也還沒有見到，但整體來說，這個工具還是一個蠻有前瞻性的應用，期待日後Adobe能好好發揮Edge的潛力。
標籤：adobe edge, css3, html5, javascript
本文作者是Audi Lu
6 則留言
good tool
Hi jian-lung,
好久不見，上回參加RGBA後我一直沒時間再參加XD，感謝你的留言。
我最近也要來試試這個東西 呵呵
我也是耶 最近也滿忙的 有機會在RGBA相見囉 XD
如果是以前，很難相信這樣動態的效果不需用到Flash就能做出來，
而我的感想就是…又有好多新的東西等著學阿~
Hi Mr.OPR 您好，
謝謝您的留言。
我想概念是長時間累積的，但是工具的學習卻是可以速成的。
我們都同意作家不會因為拿著好用的筆就寫出驚世巨作。
所以對於有sense的人來說，轉換上要付出的成本我想是不高的。 🙂
Adobe 出的軟體，至少要更新到第3版以上，才會勘用 !
而且每次更新都只有一點點變化!
目前在繪圖和網路軟體市場上，Adobe 已經沒有競爭對手了!
感覺整個Adobe 的發展重心都沒有放在上面了….