Adobe Creative Cloud

您可以免費注冊Adobe創意云服務。Creative Cloud上還提供了諸多HTML5開發工具，包括可以免費下載HTML5動畫制作工具Edge Animate，開發工具Edge Code，移動應用測試工具Edge Inspect等。
Creative Cloud的登錄地址在此：http://t.cn/zTbTLKT

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

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

(1)下載并安裝Edge（免費，僅英文版）。

(2)下載并解壓范例文件。

入門

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

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

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

雙擊ramen_rahko_begin.edge文件啟動Edge。當該文件打開時，您將看到Edge界面，如圖2所示。界面的各個區域包括：

(1)舞臺（Stage）：這是動作發生的地方。如果一個項任何時候都在舞臺上可見，那么用戶會在瀏覽器中看到它。請注意，舞臺現在是居中的（這是預覽版2中添加的一個功能）。

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

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

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

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

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

圖2. Edge工作區。

創建第一個動畫

現在您已熟悉了界面，可以開始在動作中添加內容了。首先將Airstream拖車從舞臺左側移動到它現在的位置。方法如下

1.    選擇Modify > Enable Smart Guides關閉智能參考線。智能參考線是在預覽版2中引入的，是一種確保相對舞臺和其他對象來準確放置對象的不錯方法。在本例中，不需要它們。

2.    打開Auto-keyframes，方法是選擇時間軸面板頂部的秒表圖標。當秒表變為紅色時，Auto-keyframing就會開啟（參見圖3）。

圖3. Auto-keyframes已開啟。

3.   放大時間軸，直到看到時間軸上的0標記和1秒標記之間出現0:00.500。

4.    按住Shift鍵，將拖車的兩部分都選中。

5.    將標記拖到時間軸上的0:00.500點，如圖4所示。將標記從一個位置移動到另一個位置的過程稱為“放置標記”。

圖4. 標記“放置”在時間軸上的半秒位置。

6.    按住Shift鍵，將拖車的兩部分都拖到舞臺的左側。當釋放鼠標時，您將立即看到時間軸上顯示了兩個過渡帶（參見圖5）。如果按空格鍵，拖車將移動到適當的位置。回顧一下您剛才的操作和所看到的情景。

圖5. 將拖車放在動作中。

Edge中的動畫與您過去在Flash Professional或After Effects中看到的稍有不同。第一個主要區別是標記的使用。首先，當標記是活動的時，所有動畫會從播放頭移動到標記。在本例中，您已將標記向前移動到時間軸中的半秒位置。這個位置確定了動畫的結束點。因此，可以恰當地假設標記保留在0點，播放頭移動到了半秒位置，此動畫就會將拖車移出舞臺。

第二，您可能已注意到，當打開Auto-keyframes時，標記會變為白色。這個可見的提示會告訴您標記已啟用。如果您希望將它關閉，可以單擊該標記并按Opton/Alt+K。標記將變為灰色并返回到它在播放頭下的正常位置。

您可能已經猜到，動畫模型中另一個基本區別是，只有動作中的對象會在時間軸上顯示，圖層條帶表示動作的類型——在本例中，同時在X和Y軸上。盡管并不總是如此，但它會將您的注意力集中在動畫中的對象上。

為什么不“總是這樣”呢？

7.    單擊秒表下類似馬丁尼杯的小圖標。所有圖層會立即變得可見（參見圖6）。當選擇時，此按鈕僅顯示動畫的圖層或者官方所稱的元素。再次單擊該按鈕，動作中的所有元素都會消失。這是一種減少時間軸雜亂的方便方式。

圖6. 單擊Only Show Animated Elements按鈕減少時間軸扎亂。

別走開，下頁內容更精彩~

#p#

刪除和延長過渡

兩個鉆石型圖標表示標記動畫開始和結束點的關鍵幀。如果您希望僅移動X軸并延長動畫，該怎么辦？執行以下步驟：

1.    單擊拖車的每一部分的平移（Y）圖層。關鍵幀將顏色更改為金色。按下Delete鍵，過渡就會刪除。對拖車的另一半重復此步驟。接下來看看如何延長動畫的持續時間。

2.    按住Shift鍵，選擇時間軸上關鍵幀上方的兩條實色線。這些實色區域稱為圖層帶，它們下方和關鍵幀之間的彩色區域稱為過渡帶。選擇多個過渡的另一種方式是簡單地簡單地選擇所有圖層和過渡帶。

3.    將光標移動到頂部圖層帶的末尾，光標將更改為一個剪刀圖標。

4.    單擊圖層帶并將它拖到時間軸上的3秒處，釋放鼠標。兩個圖層現在都已延長到3秒。

5.    單擊時間軸上的倒退按鈕，將播放頭返回到時間軸的起點。按下空格鍵預覽動作。

使用智能參考線準確放置

在本教程前面，您關閉了智能參考線，因為它們不是必要的。在此練習中，您將發現這個新功能對在舞臺上準確放置對象很有用。我們的計劃是將Airstream拖車分裂開，以顯示汽車背后的拉面攤。

1.    選擇Modify > Enable Smart Guides打開此功能。

2.    打開Auto-keyframes，將播放頭拖到時間軸上3.75秒的標記處。

3.    將標記拖回時間軸上3.00秒處。

4.    按住Shift鍵并將拖車的右半部分向拉面攤右邊拖動。只要一開始拖動，紫色的水平和垂直智能參考線就會出現（參見圖7）。當到達拉面攤右邊時，將在選擇區域和拉面攤的右邊上同時出現垂直參考線。釋放鼠標，選擇區域將與拉面攤的右邊吸附在一起。

5.    對拖車的左半部分重復此步驟。

6.    拖拽時間軸，拖車將分開，拉面攤將顯示出來。

圖7. 智能參考線大大簡化了對象的對齊。

創建“彈出”式過渡

拉面攤始終存在，無論拖車是否分裂開。拉面攤應該在拖車的各部分移動時顯示。方法如下：

1.    將播放頭移動到時間軸上的0:00.00點，取消選擇Generate Smooth Transitions（參見圖8，它看起來像一個彗星）。您剛才所做的事讓過渡突然出現——它“彈出”到空間中——而不是平滑地過渡。

圖8. 要使過渡突然出現，取消選擇Generate Smooth Transitions。

2.    單擊舞臺上的拉面攤將其選中。

3.    單擊屬性面板中的不透明度關鍵幀（參見圖9）。您應該注意的第一點是，拉面攤圖層現在已顯示在時間軸中，并且已向時間軸添加了一個不透明度關鍵幀。您還會發現，可以手動添加關鍵幀。

圖9. 關鍵幀可以手動添加，只需更改選定對象的屬性值。

4.    將此關鍵幀的不透明度值減少為0。為此，您可以在屬性面板上更改該值或直接在時間軸上更改該值。

5.    將播放頭拖到拖車各部分開始分離的地方。將拉面攤的不透明度值更改為100%。最終的空關鍵幀會告訴您，拉面攤將彈出到視圖中（參見圖10）。

圖10. 一個空關鍵幀告訴您存在一個突然的過渡。

6.    倒退影片并按下空格鍵預覽效果。請注意，拉面攤看起來像在兩個拖車部分分離時從中“長”出來一樣。

7.    取消選擇Generate Smooth Transitions，讓我們為拉面攤添加一些座位。

別走開，下頁內容更精彩~

#p#

使用原點創建過渡

如果查看時間軸和舞臺，您可能想知道，“椅子在哪里呢？”它們就在那里，只是不可見。您之前已經看到，這是一個具有大量圖層的復雜時間軸。一種良好的開發習慣是關閉圖層的可視性，直到您需要它。以下是讓椅子可見的方法：

1.    向下滾動元素面板，直到找到椅子元素。請注意，此元素的可視性已關閉。單擊這個點，將發生兩件事：可視性圖標打開，椅子元素出現在舞臺上（參見圖11）。但是它還不在時間軸上，因為您還未對它執行任何操作。

圖11：元素可視性可在您工作時減輕注意力的分散。

椅子的安排是在拖車各部分分離時，讓椅子從舞臺底部升起來。

2.    首先，關閉Auto-keyframes。

3.    單擊舞臺上的椅子。圖12中所示的藍點是轉換原點。滾動它，光標將從羅盤更改為指針。

圖12：圖形擁有一個可用于過渡和轉換的原點。

4.    將原點拖到包圍框底部中間的手柄。

5.    仍然選中椅子，打開Auto-keyframes，將播放頭拖到拖車分裂動畫的末尾。

6.    將標記拖到時間軸上0:04.5處。

7.    在屬性面板中，與比例區域中的寬度和高度不同，將高度值更改為0。椅子將變得扁平，如果您拖拽播放頭，會看到椅子在動畫期間內長高。如果您還未移動原點，椅子將看起來從圖形中間向上下伸展。

創建具有一定緩動效果的標題序列

現在，在項目中，您已創建了一個非常有趣的動畫，但還沒有東西可將此標識為Rahko’s Ramen拉面攤。執行以下步驟，添加一個企業ID：

1.    找到元素面板中的橫幅元素，打開它的可視性。

2.    將播放頭移動到時間軸的2.5秒標記處，將標記移動到開始椅子動畫的3.75秒處。

3.    選擇該橫幅并將它的不透明度值減少到0。

4.    在元素面板中，打開橫幅元素上方的所有元素的可視性。名稱中的字母（Rohko’s Ramen）將顯示在橫幅上。

5.    將播放頭移動回時間軸上的3秒處，將標記留在原處。

6.    選擇Rahko’s中的R，將它移動到舞臺上。如果在此動畫上拖拽時間軸，該字母將落到適當位置。讓我們為它增添更多“活力”。

7.    選擇該字母的過渡帶。打開屬性面板中的Easing（緩動）下拉列表，選擇easeOutBounce（參見圖13）。緩動是動畫制作器 的一種模仿重力或向動畫添加逼真效果的一種技巧。您可以從29種基于jQuery的不同緩動效果中選擇，對于緩動，最佳建議是僅在需要時使用它們。

圖13. 使用緩動向動畫添加一定的逼真性。

讓軟件為您工作

數字世界的一句著名的格言是：“讓軟件為您工作。”對于字母，您可以考慮喝一杯咖啡，因為還有11個字母需要像前面練習中的字母R一樣制作動畫。Edge 包含一種簡潔的功能，它使您能夠在到廚房泡一杯咖啡，然后返回到計算機之前，就完成剩余字符的動畫制作過程。以下是具體方法：

1.    關閉標記（按Command/Control+K）并將播放頭移動到R動畫開始處。

2.    單擊R圖層的過渡帶，選擇Edit > Copy。整個動畫現在都位于剪貼板上。

3.    按住Shift鍵，選擇舞臺上剩余的字母。

4.    選擇Edit > Paste Special > Paste Transitions to Location（參見圖14）。

圖14. 讓Edge執行普通的工作。

 

別走開，下頁內容更精彩~

#p#

向動畫添加“受控的隨機性”

如果您將播放頭移動到動畫開始處并按下空格鍵，字母將立即彈入到橫幅上。我們將修復該問題，延長字母出現的持續時間。我將介紹如何對一個字母這么做，剩余字母留給您完成。

1.    選擇Rahko’s中的A。

2.    將光標移動到過渡帶的左邊。光標將更改為剪刀形狀。

3.    單擊并將過渡帶的左邊向右拖動較短距離（參見圖15）。這會使所選的字母A在R之后出現，并且移動的稍微快一點。如果您將過渡帶的右邊移動到左邊，結果是，A進入視野的速度比R更快。這是在您的作品中創建戶受控的隨機性的不錯方式。

圖15. 將過渡帶延長或縮短到控制時長。

將圖形導入Edge

有4種適合Web的圖形格式可供Edge使用：JPEG、GIF、PNG和SVG。您的最佳指導就是用于此項目的目標瀏覽器和設備列表。例如，對 PNG和SVG的支持在一些瀏覽器和設備中會出現錯誤，這意味著您的選擇將是一種通用的格式。在此練習中，您將導入一個SVG圖形，它是Rahko’s的 徽標。

1.    選擇File > Import，當Import對話框打開時，導航到您的Exercise文件夾。打開圖形文件夾并選擇Logo.svg。

2.    單擊Open。該對話框將消失，如果您查看元素面板，將會看到徽標文件位于頂部。打開Logo元素的可視性。

3.    顯然，徽標對于橫幅而言太大了。關閉Auto-keyframes，在舞臺上選中徽標，重新連接比例（Scale）屬性并將該值更改為40%。

4.    將播放頭放在時間軸上的3.0秒標記處，將標記拖到時間軸上的3.75秒處。這里的計劃是讓徽標在該區域淡入、增大并旋轉兩次。

5.    選中徽標后，在屬性面板中使用以下值：

·       不透明度：0%

·       比例：20%

·       旋轉：720%（將此視為旋轉兩圈：360x2）

6.    將播放頭拖到動畫的開始處并按下空格鍵。您已創建了一個不斷增大、旋轉的徽標，它在3/4秒內淡入（參見圖16）。

圖16. 可向對象應用多種過渡。

遇見明星：她就是Rahko！

所有動作就緒后，還有最后一部分要添加：那就是拉面皇后本身Rahko。我們的計劃是讓她與椅子同時出現。

1.    在元素面板中打開Rahko元素的可視性。Rahko將會出現。

2.    圖形有點大。要準備顯示她的外貌，關閉Auto-keyframes。這樣做可以在制作動畫前將圖像調整到位。

3.    在舞臺上選擇Rohko，使用屬性面板，使用比例屬性將她的尺寸縮小到能放入窗口中。

4.    放置該角色，使她右側運動鞋的后邊接觸到地圖（參見圖17）。

圖17. Rahko已放在舞臺上。

我們的計劃是隨著椅子從舞臺底部升起，讓Rahko淡入。不使用Auto-Keyframes，我們將手動添加它們。將播放頭移動到時間軸上的3.75秒處。

5.    將播放頭移動到時間軸上的3.75秒處。

6.    選中該圖形，單擊屬性面板的不透明度區域旁邊的Keyframe鉆石圖標。這將點亮Rahko圖層并將在該圖層中顯示一個關鍵幀。

7.    將此關鍵幀的不透明度減少到0，方法是在屬性面板中輸入該值，或者雙擊過渡帶中的不透明度值并輸入0。

8.    將播放頭移動到時間軸上的4.5秒標記處。

9.    單擊不透明度帶中的關鍵幀圖標添加一個關鍵幀。將該值更改為100%（參見圖18）。拖拽時間軸。

圖18. 關鍵幀可手動添加。

重用動作來創建循環

在此練習前面，我們強調了兩點：“讓軟件為您工作”，以及過渡可復制并粘貼到時間軸中的不同位置。下面將更深入地分析這一點，創建此動畫的循環。

1.    關閉Auto-Keyframes，將播放頭移動到時間軸上的7秒標記處。

2.    選擇時間軸中的椅子過渡帶，將它復制到剪貼板。

3.    選擇Edit > Paste Special > Paste Inverted。該過渡帶將在7秒標記處出現，播放頭將移動到過渡帶的末尾。如果您拖拽時間軸，椅子將沉入舞臺底部。

4.    按住Shift鍵，選擇拖車兩邊的過渡帶。

5.    復制所選元素并使用Paste Inverted命令將它們添加到時間軸。如果拖拽時間軸，您將看到拖車關閉并移出舞臺。

注意：這里講解時有一個技巧。為什么不讓拖車在移出舞臺時完全消失？單擊粘貼板以顯示舞臺屬性。選擇從溢出彈出菜單中隱藏。此選擇會為舞臺添加一種蒙板。

6.    將播放頭移動到上一步中的動畫開始處。

7.    選擇拉面攤圖層，復制選擇元素并選擇Paste Inverted。這次僅會出現關鍵幀。

8.    如果倒退動畫并按空格鍵，您將看到已在非常短的時間內創建了一個循環（參見圖19）。動畫變得更加漂亮。

圖19. 循環很容易使用復制和粘貼功能創建。

9.    確保Auto-Keyframes已關閉，將播放頭移動到時間軸的13秒標記處。

10.   在時間軸區域，選擇您剛才創建的反轉動畫，確保拉面攤圖層中的兩個關鍵幀（它們將更改為金色）也已選中。

11.   復制并選擇Paste Inverted。拖車將回滾到舞臺上，打開，拉面攤出現，椅子增長到相應位置。

12.   倒退并播放影片。

別走開，下頁內容更精彩~

#p#

添加一個代碼段來循環動畫

預覽版3中新增的一項功能是添加代碼段。代碼段是一小段JavaScript代碼，它們可添加到您的影片中以執行常見任務，比如循環。在此練習中，您將這么做。當影片播放完成時，您希望循環回時間軸上的5秒處。以下是具體方法：

1.    確保播放頭位于時間軸末尾。

2.    滾動到時間軸面板頂部，單擊Actions旁邊類似一個小卷軸的小圖標。此圖標稱為Open Timeline Actions圖標。

3.    您將被提示添加一個事件。從彈出菜單選擇complete事件（參見圖20）。如果您沒有看到該彈出窗口，可單擊+按鈕。

圖20. 您可以從4個時間軸事件中進行選擇。

4.    Default Timeline對話框現在將更改為向您顯示一些可添加到時間軸的代碼段（參見圖21）。

5.    從列表中選擇Go To和Play。當進行此選擇時，將顯示圖21中所示的代碼段。

圖21. 代碼段可添加到時間軸，您可以使用您自己的值。

6.    將默認時間從1000（1秒）更改為5000（5秒）。您剛才所做的是編寫一個代碼段，它將播放頭向回到時間軸上的5秒標記處，并從該點開始動畫播放。

7.    關閉對話框，按Command/Ctrl+Return在瀏覽器中測試此項目。

8.    完成時，關閉瀏覽器并保存文件。

延伸閱讀

本教程為您提供了實際使用Edge預覽版3的每項主要功能的機會。您已了解了元素和時間軸面板之間的密切關系。我介紹了如何使用屬性面板影響選擇，如何延 長和縮短動畫的持續時間。您使用標記或手動創建方法創建了一些動畫。我還介紹了多個性能提升因素，我個人最喜歡的是將整個動畫序列復制并粘貼到時間軸中的 能力，以及兩種讓軟件為您所用的不錯技術！您可以結合使用本版本中引入的代碼段功能來學習此教程。

現在您已擁有使用Edge的一定經驗，下一站應該是Edge 實驗室上的示例頁面。下載一些示例。在Edge中打開它們。仔細分析它們，并開始學習如何使用Edge完成更多工作。