Adobe Edge Preview 3初學者指南(1)

BKJIA專稿】自Adobe Edge的第一個預覽版於8月1日發布以來，此應用程式已被下載了超過150,000個副本。從這一事實看來，Edge不再是一個beta版本，它從那時 起已經曆了3個主要版本。它贏得了如此多的關注，我們完全可以想象，Edge一定會成為Web設計人員工具箱中不可缺少的一部分。

出於某種原因，本教程主要介紹預覽版3。預覽版1專註於使用者介面、圖形和動作。預覽版2是對預覽版1的反饋的直接結果，進行了諸多實用性增強和錯誤修複。 預覽版3是在Edge發展過程中引入互動版本，這使本文成為了介紹教程，示範如何應用和使用應用程式的各種動畫和互動式功能的不錯地方。事實上，本教 程的目的在於讓您在非常短的時間內快速上手使用Edge。開始之前：

·下載並安裝Edge免費，僅英文版）。

·下載並解壓範例檔案。

入門

下載並開啟範例檔案後，您將看到一個Exercise檔案夾，其中包含ramen_rahko_begin.edge檔案和其他許多檔案參見圖1）。這些檔案不應移動或更改，除非您被要求這麼做。原因在於，簡單來講，.edge檔案只是一個“shell”，指向並使用您在使用Edge時建立的各種JavaScript、HTML、CSS檔案。如果刪除其中一個檔案，您將遇到故障。

記住這一點後，您就可以深入使用Edge並獲得一定的樂趣了。

圖1. .edge檔案是在任何Edge項目的創作階段建立的一個檔案集合。

雙擊ramen_rahko_begin.edge檔案啟動Edge。當該檔案開啟時，您將看到Edge介面，2所示。介面的各個地區包括：

·舞台Stage）：這是動作發生的地方。如果一個項任何時候都在舞台上可見，那麼使用者會在瀏覽器中看到它。請注意，舞台現在是置中的這是預覽版2中添加的一個功能）。

·屬性Properties）面板：就像它的兄弟產品Flash Professional一樣，每個事物包括舞台）都有屬性。這些屬性包括基本的屬性舞台的寬度、高度和顏色），也包括複雜的屬性，比如圓角矩形、旋 轉和在舞台上操作的對象的比例值。此面板也是上下文敏感的。例如，如果您選擇一段文本，該面板將顯示文字屬性。如果選擇舞台，您將看到舞台屬性。

·時間軸Timeline）面板：如果您使用過Flash Professional或After Effects，您一定熟悉時間軸面板。左上方的按鈕確定主要畫面格、過渡以及甚至舞台元素如何顯示。時間代碼是“可拖拽的scrubbable）”，這意 味著您可以拖動時間代碼來在舞台上移動播放頭。時間軸基於時間，而不是基於幀，如果您滑動時間軸底部的縮放工具，會將您的視圖從1/4秒的增量放大到幾毫 秒。這意味著您可以嚴格地控制動畫的時間。

您也可以在時間軸上拖動播放頭一種稱為“拖拽Scrubbing）”的技術），以轉到特定的時間點或預覽動畫。

在緊挨著播放頭的下面是另一個有用的工具，稱為“標記Mark）”。如果您是Flash Professional或視頻製作者，最初很容易將標記視為時間軸上準確表示發生更改的位置的提示點。但標記稍有不同，因為它與播放頭關係緊密，可用於設定動畫的開始到結束點的期間。

·元素Elements）面板：此面板同時用於兩個用途。它公開文檔的DOM，並充當著您項目中的各項的“庫”。元素在此面板中顯示的順序就是它們在時間軸上出現的順序。如果您在圖層順序中上下移動時間軸圖層，這一更改會在元素麵板中迅速反映出來，反之亦然。

圖2. Edge工作區。