Adobe Creative Cloud

您可以免費(fèi)注冊(cè)Adobe創(chuàng)意云服務(wù)。Creative Cloud上還提供了諸多HTML5開(kāi)發(fā)工具，包括可以免費(fèi)下載HTML5動(dòng)畫(huà)制作工具Edge Animate，開(kāi)發(fā)工具Edge Code，移動(dòng)應(yīng)用測(cè)試工具Edge Inspect等。
Creative Cloud的登錄地址在此：http://t.cn/zTbTLKT

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

出于某種原因，本教程主要介紹預(yù)覽版3。預(yù)覽版1專(zhuān)注于用戶界面、圖形和動(dòng)作。預(yù)覽版2是對(duì)預(yù)覽版1的反饋的直接結(jié)果，進(jìn)行了諸多實(shí)用性增強(qiáng)和錯(cuò)誤修復(fù)。 預(yù)覽版3是在Edge發(fā)展過(guò)程中引入交互式的版本，這使本文成為了介紹教程，演示如何應(yīng)用和使用應(yīng)用程序的各種動(dòng)畫(huà)和交互式功能的不錯(cuò)地方。事實(shí)上，本教 程的目的在于讓您在非常短的時(shí)間內(nèi)快速上手使用Edge。開(kāi)始之前：

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

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

入門(mén)

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

記住這一點(diǎn)后，您就可以深入使用Edge并獲得一定的樂(lè)趣了。

圖1. .edge文件是在任何Edge項(xiàng)目的創(chuàng)作階段創(chuàng)建的一個(gè)文件集合。

雙擊ramen_rahko_begin.edge文件啟動(dòng)Edge。當(dāng)該文件打開(kāi)時(shí)，您將看到Edge界面，如圖2所示。界面的各個(gè)區(qū)域包括：

(1)舞臺(tái)（Stage）：這是動(dòng)作發(fā)生的地方。如果一個(gè)項(xiàng)任何時(shí)候都在舞臺(tái)上可見(jiàn)，那么用戶會(huì)在瀏覽器中看到它。請(qǐng)注意，舞臺(tái)現(xiàn)在是居中的（這是預(yù)覽版2中添加的一個(gè)功能）。

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

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

您也可以在時(shí)間軸上拖動(dòng)播放頭（一種稱(chēng)為“拖拽（Scrubbing）”的技術(shù)），以轉(zhuǎn)到特定的時(shí)間點(diǎn)或預(yù)覽動(dòng)畫(huà)。

在緊挨著播放頭的下面是另一個(gè)有用的工具，稱(chēng)為“標(biāo)記（Mark）”。如果您是Flash Professional或視頻制作者，最初很容易將標(biāo)記視為時(shí)間軸上準(zhǔn)確表示發(fā)生更改的位置的提示點(diǎn)。但標(biāo)記稍有不同，因?yàn)樗c播放頭關(guān)系緊密，可用于設(shè)置動(dòng)畫(huà)的開(kāi)始到結(jié)束點(diǎn)的持續(xù)時(shí)間。

(4)元素（Elements）面板：此面板同時(shí)用于兩個(gè)用途。它公開(kāi)文檔的DOM，并充當(dāng)著您項(xiàng)目中的各項(xiàng)的“庫(kù)”。元素在此面板中顯示的順序就是它們?cè)跁r(shí)間軸上出現(xiàn)的順序。如果您在圖層順序中上下移動(dòng)時(shí)間軸圖層，這一更改會(huì)在元素面板中迅速反映出來(lái)，反之亦然。

圖2. Edge工作區(qū)。

創(chuàng)建第一個(gè)動(dòng)畫(huà)

現(xiàn)在您已熟悉了界面，可以開(kāi)始在動(dòng)作中添加內(nèi)容了。首先將Airstream拖車(chē)從舞臺(tái)左側(cè)移動(dòng)到它現(xiàn)在的位置。方法如下

1.    選擇Modify > Enable Smart Guides關(guān)閉智能參考線。智能參考線是在預(yù)覽版2中引入的，是一種確保相對(duì)舞臺(tái)和其他對(duì)象來(lái)準(zhǔn)確放置對(duì)象的不錯(cuò)方法。在本例中，不需要它們。

2.    打開(kāi)Auto-keyframes，方法是選擇時(shí)間軸面板頂部的秒表圖標(biāo)。當(dāng)秒表變?yōu)榧t色時(shí)，Auto-keyframing就會(huì)開(kāi)啟（參見(jiàn)圖3）。

圖3. Auto-keyframes已開(kāi)啟。

3.   放大時(shí)間軸，直到看到時(shí)間軸上的0標(biāo)記和1秒標(biāo)記之間出現(xiàn)0:00.500。

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

5.    將標(biāo)記拖到時(shí)間軸上的0:00.500點(diǎn)，如圖4所示。將標(biāo)記從一個(gè)位置移動(dòng)到另一個(gè)位置的過(guò)程稱(chēng)為“放置標(biāo)記”。

圖4. 標(biāo)記“放置”在時(shí)間軸上的半秒位置。

6.    按住Shift鍵，將拖車(chē)的兩部分都拖到舞臺(tái)的左側(cè)。當(dāng)釋放鼠標(biāo)時(shí)，您將立即看到時(shí)間軸上顯示了兩個(gè)過(guò)渡帶（參見(jiàn)圖5）。如果按空格鍵，拖車(chē)將移動(dòng)到適當(dāng)?shù)奈恢?。回顧一下您剛才的操作和所看到的情景?/p>

圖5. 將拖車(chē)放在動(dòng)作中。

Edge中的動(dòng)畫(huà)與您過(guò)去在Flash Professional或After Effects中看到的稍有不同。第一個(gè)主要區(qū)別是標(biāo)記的使用。首先，當(dāng)標(biāo)記是活動(dòng)的時(shí)，所有動(dòng)畫(huà)會(huì)從播放頭移動(dòng)到標(biāo)記。在本例中，您已將標(biāo)記向前移動(dòng)到時(shí)間軸中的半秒位置。這個(gè)位置確定了動(dòng)畫(huà)的結(jié)束點(diǎn)。因此，可以恰當(dāng)?shù)丶僭O(shè)標(biāo)記保留在0點(diǎn)，播放頭移動(dòng)到了半秒位置，此動(dòng)畫(huà)就會(huì)將拖車(chē)移出舞臺(tái)。

第二，您可能已注意到，當(dāng)打開(kāi)Auto-keyframes時(shí)，標(biāo)記會(huì)變?yōu)榘咨?。這個(gè)可見(jiàn)的提示會(huì)告訴您標(biāo)記已啟用。如果您希望將它關(guān)閉，可以單擊該標(biāo)記并按Opton/Alt+K。標(biāo)記將變?yōu)榛疑⒎祷氐剿诓シ蓬^下的正常位置。

您可能已經(jīng)猜到，動(dòng)畫(huà)模型中另一個(gè)基本區(qū)別是，只有動(dòng)作中的對(duì)象會(huì)在時(shí)間軸上顯示，圖層條帶表示動(dòng)作的類(lèi)型——在本例中，同時(shí)在X和Y軸上。盡管并不總是如此，但它會(huì)將您的注意力集中在動(dòng)畫(huà)中的對(duì)象上。

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

7.    單擊秒表下類(lèi)似馬丁尼杯的小圖標(biāo)。所有圖層會(huì)立即變得可見(jiàn)（參見(jiàn)圖6）。當(dāng)選擇時(shí)，此按鈕僅顯示動(dòng)畫(huà)的圖層或者官方所稱(chēng)的元素。再次單擊該按鈕，動(dòng)作中的所有元素都會(huì)消失。這是一種減少時(shí)間軸雜亂的方便方式。

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

別走開(kāi)，下頁(yè)內(nèi)容更精彩~

#p#

刪除和延長(zhǎng)過(guò)渡

兩個(gè)鉆石型圖標(biāo)表示標(biāo)記動(dòng)畫(huà)開(kāi)始和結(jié)束點(diǎn)的關(guān)鍵幀。如果您希望僅移動(dòng)X軸并延長(zhǎng)動(dòng)畫(huà)，該怎么辦？執(zhí)行以下步驟：

1.    單擊拖車(chē)的每一部分的平移（Y）圖層。關(guān)鍵幀將顏色更改為金色。按下Delete鍵，過(guò)渡就會(huì)刪除。對(duì)拖車(chē)的另一半重復(fù)此步驟。接下來(lái)看看如何延長(zhǎng)動(dòng)畫(huà)的持續(xù)時(shí)間。

2.    按住Shift鍵，選擇時(shí)間軸上關(guān)鍵幀上方的兩條實(shí)色線。這些實(shí)色區(qū)域稱(chēng)為圖層帶，它們下方和關(guān)鍵幀之間的彩色區(qū)域稱(chēng)為過(guò)渡帶。選擇多個(gè)過(guò)渡的另一種方式是簡(jiǎn)單地簡(jiǎn)單地選擇所有圖層和過(guò)渡帶。

3.    將光標(biāo)移動(dòng)到頂部圖層帶的末尾，光標(biāo)將更改為一個(gè)剪刀圖標(biāo)。

4.    單擊圖層帶并將它拖到時(shí)間軸上的3秒處，釋放鼠標(biāo)。兩個(gè)圖層現(xiàn)在都已延長(zhǎng)到3秒。

5.    單擊時(shí)間軸上的倒退按鈕，將播放頭返回到時(shí)間軸的起點(diǎn)。按下空格鍵預(yù)覽動(dòng)作。

使用智能參考線準(zhǔn)確放置

在本教程前面，您關(guān)閉了智能參考線，因?yàn)樗鼈儾皇潜匾摹Ｔ诖司毩?xí)中，您將發(fā)現(xiàn)這個(gè)新功能對(duì)在舞臺(tái)上準(zhǔn)確放置對(duì)象很有用。我們的計(jì)劃是將Airstream拖車(chē)分裂開(kāi)，以顯示汽車(chē)背后的拉面攤。

1.    選擇Modify > Enable Smart Guides打開(kāi)此功能。

2.    打開(kāi)Auto-keyframes，將播放頭拖到時(shí)間軸上3.75秒的標(biāo)記處。

3.    將標(biāo)記拖回時(shí)間軸上3.00秒處。

4.    按住Shift鍵并將拖車(chē)的右半部分向拉面攤右邊拖動(dòng)。只要一開(kāi)始拖動(dòng)，紫色的水平和垂直智能參考線就會(huì)出現(xiàn)（參見(jiàn)圖7）。當(dāng)?shù)竭_(dá)拉面攤右邊時(shí)，將在選擇區(qū)域和拉面攤的右邊上同時(shí)出現(xiàn)垂直參考線。釋放鼠標(biāo)，選擇區(qū)域?qū)⑴c拉面攤的右邊吸附在一起。

5.    對(duì)拖車(chē)的左半部分重復(fù)此步驟。

6.    拖拽時(shí)間軸，拖車(chē)將分開(kāi)，拉面攤將顯示出來(lái)。

圖7. 智能參考線大大簡(jiǎn)化了對(duì)象的對(duì)齊。

創(chuàng)建“彈出”式過(guò)渡

拉面攤始終存在，無(wú)論拖車(chē)是否分裂開(kāi)。拉面攤應(yīng)該在拖車(chē)的各部分移動(dòng)時(shí)顯示。方法如下：

1.    將播放頭移動(dòng)到時(shí)間軸上的0:00.00點(diǎn)，取消選擇Generate Smooth Transitions（參見(jiàn)圖8，它看起來(lái)像一個(gè)彗星）。您剛才所做的事讓過(guò)渡突然出現(xiàn)——它“彈出”到空間中——而不是平滑地過(guò)渡。

圖8. 要使過(guò)渡突然出現(xiàn)，取消選擇Generate Smooth Transitions。

2.    單擊舞臺(tái)上的拉面攤將其選中。

3.    單擊屬性面板中的不透明度關(guān)鍵幀（參見(jiàn)圖9）。您應(yīng)該注意的第一點(diǎn)是，拉面攤圖層現(xiàn)在已顯示在時(shí)間軸中，并且已向時(shí)間軸添加了一個(gè)不透明度關(guān)鍵幀。您還會(huì)發(fā)現(xiàn)，可以手動(dòng)添加關(guān)鍵幀。

圖9. 關(guān)鍵幀可以手動(dòng)添加，只需更改選定對(duì)象的屬性值。

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

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

圖10. 一個(gè)空關(guān)鍵幀告訴您存在一個(gè)突然的過(guò)渡。

6.    倒退影片并按下空格鍵預(yù)覽效果。請(qǐng)注意，拉面攤看起來(lái)像在兩個(gè)拖車(chē)部分分離時(shí)從中“長(zhǎng)”出來(lái)一樣。

7.    取消選擇Generate Smooth Transitions，讓我們?yōu)槔鏀偺砑右恍┳弧?/p>

別走開(kāi)，下頁(yè)內(nèi)容更精彩~

#p#

使用原點(diǎn)創(chuàng)建過(guò)渡

如果查看時(shí)間軸和舞臺(tái)，您可能想知道，“椅子在哪里呢？”它們就在那里，只是不可見(jiàn)。您之前已經(jīng)看到，這是一個(gè)具有大量圖層的復(fù)雜時(shí)間軸。一種良好的開(kāi)發(fā)習(xí)慣是關(guān)閉圖層的可視性，直到您需要它。以下是讓椅子可見(jiàn)的方法：

1.    向下滾動(dòng)元素面板，直到找到椅子元素。請(qǐng)注意，此元素的可視性已關(guān)閉。單擊這個(gè)點(diǎn)，將發(fā)生兩件事：可視性圖標(biāo)打開(kāi)，椅子元素出現(xiàn)在舞臺(tái)上（參見(jiàn)圖11）。但是它還不在時(shí)間軸上，因?yàn)槟€未對(duì)它執(zhí)行任何操作。

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

椅子的安排是在拖車(chē)各部分分離時(shí)，讓椅子從舞臺(tái)底部升起來(lái)。

2.    首先，關(guān)閉Auto-keyframes。

3.    單擊舞臺(tái)上的椅子。圖12中所示的藍(lán)點(diǎn)是轉(zhuǎn)換原點(diǎn)。滾動(dòng)它，光標(biāo)將從羅盤(pán)更改為指針。

圖12：圖形擁有一個(gè)可用于過(guò)渡和轉(zhuǎn)換的原點(diǎn)。

4.    將原點(diǎn)拖到包圍框底部中間的手柄。

5.    仍然選中椅子，打開(kāi)Auto-keyframes，將播放頭拖到拖車(chē)分裂動(dòng)畫(huà)的末尾。

6.    將標(biāo)記拖到時(shí)間軸上0:04.5處。

7.    在屬性面板中，與比例區(qū)域中的寬度和高度不同，將高度值更改為0。椅子將變得扁平，如果您拖拽播放頭，會(huì)看到椅子在動(dòng)畫(huà)期間內(nèi)長(zhǎng)高。如果您還未移動(dòng)原點(diǎn)，椅子將看起來(lái)從圖形中間向上下伸展。

創(chuàng)建具有一定緩動(dòng)效果的標(biāo)題序列

現(xiàn)在，在項(xiàng)目中，您已創(chuàng)建了一個(gè)非常有趣的動(dòng)畫(huà)，但還沒(méi)有東西可將此標(biāo)識(shí)為Rahko’s Ramen拉面攤。執(zhí)行以下步驟，添加一個(gè)企業(yè)ID：

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

2.    將播放頭移動(dòng)到時(shí)間軸的2.5秒標(biāo)記處，將標(biāo)記移動(dòng)到開(kāi)始椅子動(dòng)畫(huà)的3.75秒處。

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

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

5.    將播放頭移動(dòng)回時(shí)間軸上的3秒處，將標(biāo)記留在原處。

6.    選擇Rahko’s中的R，將它移動(dòng)到舞臺(tái)上。如果在此動(dòng)畫(huà)上拖拽時(shí)間軸，該字母將落到適當(dāng)位置。讓我們?yōu)樗鎏砀?ldquo;活力”。

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

圖13. 使用緩動(dòng)向動(dòng)畫(huà)添加一定的逼真性。

讓軟件為您工作

數(shù)字世界的一句著名的格言是：“讓軟件為您工作。”對(duì)于字母，您可以考慮喝一杯咖啡，因?yàn)檫€有11個(gè)字母需要像前面練習(xí)中的字母R一樣制作動(dòng)畫(huà)。Edge 包含一種簡(jiǎn)潔的功能，它使您能夠在到廚房泡一杯咖啡，然后返回到計(jì)算機(jī)之前，就完成剩余字符的動(dòng)畫(huà)制作過(guò)程。以下是具體方法：

1.    關(guān)閉標(biāo)記（按Command/Control+K）并將播放頭移動(dòng)到R動(dòng)畫(huà)開(kāi)始處。

2.    單擊R圖層的過(guò)渡帶，選擇Edit > Copy。整個(gè)動(dòng)畫(huà)現(xiàn)在都位于剪貼板上。

3.    按住Shift鍵，選擇舞臺(tái)上剩余的字母。

4.    選擇Edit > Paste Special > Paste Transitions to Location（參見(jiàn)圖14）。

圖14. 讓Edge執(zhí)行普通的工作。

別走開(kāi)，下頁(yè)內(nèi)容更精彩~

#p#

向動(dòng)畫(huà)添加“受控的隨機(jī)性”

如果您將播放頭移動(dòng)到動(dòng)畫(huà)開(kāi)始處并按下空格鍵，字母將立即彈入到橫幅上。我們將修復(fù)該問(wèn)題，延長(zhǎng)字母出現(xiàn)的持續(xù)時(shí)間。我將介紹如何對(duì)一個(gè)字母這么做，剩余字母留給您完成。

1.    選擇Rahko’s中的A。

2.    將光標(biāo)移動(dòng)到過(guò)渡帶的左邊。光標(biāo)將更改為剪刀形狀。

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

圖15. 將過(guò)渡帶延長(zhǎng)或縮短到控制時(shí)長(zhǎng)。

將圖形導(dǎo)入Edge

有4種適合Web的圖形格式可供Edge使用：JPEG、GIF、PNG和SVG。您的最佳指導(dǎo)就是用于此項(xiàng)目的目標(biāo)瀏覽器和設(shè)備列表。例如，對(duì) PNG和SVG的支持在一些瀏覽器和設(shè)備中會(huì)出現(xiàn)錯(cuò)誤，這意味著您的選擇將是一種通用的格式。在此練習(xí)中，您將導(dǎo)入一個(gè)SVG圖形，它是Rahko’s的 徽標(biāo)。

1.    選擇File > Import，當(dāng)Import對(duì)話框打開(kāi)時(shí)，導(dǎo)航到您的Exercise文件夾。打開(kāi)圖形文件夾并選擇Logo.svg。

2.    單擊Open。該對(duì)話框?qū)⑾?，如果您查看元素面板，將?huì)看到徽標(biāo)文件位于頂部。打開(kāi)Logo元素的可視性。

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

4.    將播放頭放在時(shí)間軸上的3.0秒標(biāo)記處，將標(biāo)記拖到時(shí)間軸上的3.75秒處。這里的計(jì)劃是讓徽標(biāo)在該區(qū)域淡入、增大并旋轉(zhuǎn)兩次。

5.    選中徽標(biāo)后，在屬性面板中使用以下值：

·       不透明度：0%

·       比例：20%

·       旋轉(zhuǎn)：720%（將此視為旋轉(zhuǎn)兩圈：360x2）

6.    將播放頭拖到動(dòng)畫(huà)的開(kāi)始處并按下空格鍵。您已創(chuàng)建了一個(gè)不斷增大、旋轉(zhuǎn)的徽標(biāo)，它在3/4秒內(nèi)淡入（參見(jiàn)圖16）。

圖16. 可向?qū)ο髴?yīng)用多種過(guò)渡。

遇見(jiàn)明星：她就是Rahko！

所有動(dòng)作就緒后，還有最后一部分要添加：那就是拉面皇后本身Rahko。我們的計(jì)劃是讓她與椅子同時(shí)出現(xiàn)。

1.    在元素面板中打開(kāi)Rahko元素的可視性。Rahko將會(huì)出現(xiàn)。

2.    圖形有點(diǎn)大。要準(zhǔn)備顯示她的外貌，關(guān)閉Auto-keyframes。這樣做可以在制作動(dòng)畫(huà)前將圖像調(diào)整到位。

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

4.    放置該角色，使她右側(cè)運(yùn)動(dòng)鞋的后邊接觸到地圖（參見(jiàn)圖17）。

圖17. Rahko已放在舞臺(tái)上。

我們的計(jì)劃是隨著椅子從舞臺(tái)底部升起，讓Rahko淡入。不使用Auto-Keyframes，我們將手動(dòng)添加它們。將播放頭移動(dòng)到時(shí)間軸上的3.75秒處。

5.    將播放頭移動(dòng)到時(shí)間軸上的3.75秒處。

6.    選中該圖形，單擊屬性面板的不透明度區(qū)域旁邊的Keyframe鉆石圖標(biāo)。這將點(diǎn)亮Rahko圖層并將在該圖層中顯示一個(gè)關(guān)鍵幀。

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

8.    將播放頭移動(dòng)到時(shí)間軸上的4.5秒標(biāo)記處。

9.    單擊不透明度帶中的關(guān)鍵幀圖標(biāo)添加一個(gè)關(guān)鍵幀。將該值更改為100%（參見(jiàn)圖18）。拖拽時(shí)間軸。

圖18. 關(guān)鍵幀可手動(dòng)添加。

重用動(dòng)作來(lái)創(chuàng)建循環(huán)

在此練習(xí)前面，我們強(qiáng)調(diào)了兩點(diǎn)：“讓軟件為您工作”，以及過(guò)渡可復(fù)制并粘貼到時(shí)間軸中的不同位置。下面將更深入地分析這一點(diǎn)，創(chuàng)建此動(dòng)畫(huà)的循環(huán)。

1.    關(guān)閉Auto-Keyframes，將播放頭移動(dòng)到時(shí)間軸上的7秒標(biāo)記處。

2.    選擇時(shí)間軸中的椅子過(guò)渡帶，將它復(fù)制到剪貼板。

3.    選擇Edit > Paste Special > Paste Inverted。該過(guò)渡帶將在7秒標(biāo)記處出現(xiàn)，播放頭將移動(dòng)到過(guò)渡帶的末尾。如果您拖拽時(shí)間軸，椅子將沉入舞臺(tái)底部。

4.    按住Shift鍵，選擇拖車(chē)兩邊的過(guò)渡帶。

5.    復(fù)制所選元素并使用Paste Inverted命令將它們添加到時(shí)間軸。如果拖拽時(shí)間軸，您將看到拖車(chē)關(guān)閉并移出舞臺(tái)。

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

6.    將播放頭移動(dòng)到上一步中的動(dòng)畫(huà)開(kāi)始處。

7.    選擇拉面攤圖層，復(fù)制選擇元素并選擇Paste Inverted。這次僅會(huì)出現(xiàn)關(guān)鍵幀。

8.    如果倒退動(dòng)畫(huà)并按空格鍵，您將看到已在非常短的時(shí)間內(nèi)創(chuàng)建了一個(gè)循環(huán)（參見(jiàn)圖19）。動(dòng)畫(huà)變得更加漂亮。

圖19. 循環(huán)很容易使用復(fù)制和粘貼功能創(chuàng)建。

9.    確保Auto-Keyframes已關(guān)閉，將播放頭移動(dòng)到時(shí)間軸的13秒標(biāo)記處。

10.   在時(shí)間軸區(qū)域，選擇您剛才創(chuàng)建的反轉(zhuǎn)動(dòng)畫(huà)，確保拉面攤圖層中的兩個(gè)關(guān)鍵幀（它們將更改為金色）也已選中。

11.   復(fù)制并選擇Paste Inverted。拖車(chē)將回滾到舞臺(tái)上，打開(kāi)，拉面攤出現(xiàn)，椅子增長(zhǎng)到相應(yīng)位置。

12.   倒退并播放影片。

別走開(kāi)，下頁(yè)內(nèi)容更精彩~

#p#

添加一個(gè)代碼段來(lái)循環(huán)動(dòng)畫(huà)

預(yù)覽版3中新增的一項(xiàng)功能是添加代碼段。代碼段是一小段JavaScript代碼，它們可添加到您的影片中以執(zhí)行常見(jiàn)任務(wù)，比如循環(huán)。在此練習(xí)中，您將這么做。當(dāng)影片播放完成時(shí)，您希望循環(huán)回時(shí)間軸上的5秒處。以下是具體方法：

1.    確保播放頭位于時(shí)間軸末尾。

2.    滾動(dòng)到時(shí)間軸面板頂部，單擊Actions旁邊類(lèi)似一個(gè)小卷軸的小圖標(biāo)。此圖標(biāo)稱(chēng)為Open Timeline Actions圖標(biāo)。

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

圖20. 您可以從4個(gè)時(shí)間軸事件中進(jìn)行選擇。

4.    Default Timeline對(duì)話框現(xiàn)在將更改為向您顯示一些可添加到時(shí)間軸的代碼段（參見(jiàn)圖21）。

5.    從列表中選擇Go To和Play。當(dāng)進(jìn)行此選擇時(shí)，將顯示圖21中所示的代碼段。

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

6.    將默認(rèn)時(shí)間從1000（1秒）更改為5000（5秒）。您剛才所做的是編寫(xiě)一個(gè)代碼段，它將播放頭向回到時(shí)間軸上的5秒標(biāo)記處，并從該點(diǎn)開(kāi)始動(dòng)畫(huà)播放。

7.    關(guān)閉對(duì)話框，按Command/Ctrl+Return在瀏覽器中測(cè)試此項(xiàng)目。

8.    完成時(shí)，關(guān)閉瀏覽器并保存文件。

延伸閱讀

本教程為您提供了實(shí)際使用Edge預(yù)覽版3的每項(xiàng)主要功能的機(jī)會(huì)。您已了解了元素和時(shí)間軸面板之間的密切關(guān)系。我介紹了如何使用屬性面板影響選擇，如何延 長(zhǎng)和縮短動(dòng)畫(huà)的持續(xù)時(shí)間。您使用標(biāo)記或手動(dòng)創(chuàng)建方法創(chuàng)建了一些動(dòng)畫(huà)。我還介紹了多個(gè)性能提升因素，我個(gè)人最喜歡的是將整個(gè)動(dòng)畫(huà)序列復(fù)制并粘貼到時(shí)間軸中的 能力，以及兩種讓軟件為您所用的不錯(cuò)技術(shù)！您可以結(jié)合使用本版本中引入的代碼段功能來(lái)學(xué)習(xí)此教程。

現(xiàn)在您已擁有使用Edge的一定經(jīng)驗(yàn)，下一站應(yīng)該是Edge 實(shí)驗(yàn)室上的示例頁(yè)面。下載一些示例。在Edge中打開(kāi)它們。仔細(xì)分析它們，并開(kāi)始學(xué)習(xí)如何使用Edge完成更多工作。