Adobe Edge: HTML5、CSS3、JS的動畫特效整合開發工具


作者: | 2011/08/02 12:57:47 | 6 則迴響


adobe edge

HTML5問世後帶給軟體開發者不少驚奇,尤其在相關產業的大力支持下,相關的應用工具也爭相出現。Adobe在日前推出Edge,就是為了要整合新一代的HTML5、CSS3及Javascript的動畫製作能力,提供給多媒體設計師一個便利的動畫製作工具,讓設計師不必額外學習相關程式碼的撰寫,可以將心力放在設計上。

Adobe Edge的第一個版本稱為 Preview 1 ,在昨天(8/1)推出了。目前 Adobe Edge下載使用是免費的,想玩玩看的話,必須先在Adobe註冊會員帳號,才可以下載。

你可以在這裡下載 Edge,而這裡有一些 Edge做出來的實例

下載安裝時會發現有預留輸入序號的頁籤,不過Preview版的安裝會直接跳過這個頁籤,在同意規章後就直接進行下載了。
adobe edge install
安裝後的Adobe Edge畫面如下。

adobe edge ui

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的潛力。


標籤:, , ,

分類:,

本文作者是Audi Lu

6 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料