久等了，上集我們制作了一個(gè)具有行走動作的藍(lán)精靈動畫，本集我們來為藍(lán)精靈實(shí)現(xiàn)往返走動的效果。

Symbol，即元件，是動畫制作中常用的概念。通過Symbol我們可以封裝獨(dú)立的動畫元素，便于管理和重用。腳本，是動畫制作中另一個(gè)重要的概念。在HTML5動畫制作中，腳本即JavaScript腳本，通過腳本我們可以響應(yīng)動畫事件，實(shí)現(xiàn)交互，更自由的操控動畫元素,比如元件動畫的重復(fù)播放。

準(zhǔn)備工作

在教程《神器ANIMATE教程：使用SPRITESHEET創(chuàng)建HTML5動畫》中，我們制作了一個(gè)具有行走動作的藍(lán)精靈動畫。

在本教程中，我們來為藍(lán)精靈實(shí)現(xiàn)往返走動的效果。

下載Adobe Edge Animate制作工具

在本教程發(fā)布的時(shí)間，Edge Animate版本為1.5，可以在Adobe云創(chuàng)意平臺上免費(fèi)下載。 您只需要在注冊地址注冊即可登錄下載。

下載Edge Animate示例項(xiàng)目文件

本教程將在《神器ANIMATE教程：使用SPRITESHEET創(chuàng)建HTML5動畫》的基礎(chǔ)上繼續(xù)，您需要下載項(xiàng)目文件smurf+spriteSheet+Tutorial+1.zip。

資源文件

資源文件如下：

1. Smurf SpriteSheet

教程

1. 生成Symbol

啟動Edge Animate，打開/a>smurf+spriteSheet+Tutorial+1.zip解壓后其中的smurf.an文件。
在舞臺上選擇藍(lán)精靈元素（或者可以在右上角的Elements面板中選擇smurf_sprite），點(diǎn)擊右鍵，點(diǎn)擊“Convert to Symbol”命令，轉(zhuǎn)換元素為元件。轉(zhuǎn)換后的元件不僅包含原有元素的資源，而且包括其中設(shè)置的獨(dú)立時(shí)間線動畫和腳本。

Edge Animate 元件

在彈出的“Create Symbol”提示框中輸入新的元件名稱，比如“Smurf”。默認(rèn)選中Autoplay Timeline，點(diǎn)擊OK。此時(shí)，你可以在右邊Lirary面板的Symbols子面板中，看到生成的新的Smurf元件。此時(shí)，舞臺上的原有Smurf_Sprite元素也變?yōu)槊麨椤癝murf”的元素，時(shí)間軸上也對應(yīng)做出修改。如下圖：

Smurf Symbol

元件是一個(gè)可復(fù)用的對象，在舞臺上，你可以從Library的元件面板中，拖拽元件到舞臺上來創(chuàng)建多個(gè)新的元件實(shí)例。比如，我們可以把現(xiàn)在舞臺上的藍(lán)精靈刪除，然后在元件面板中拖拽Smurf元件到舞臺上。每當(dāng)你拖拽Smurf元件到舞臺上，Animate都會為你生成一個(gè)新的Smurf實(shí)例，并為新的實(shí)力元素自動命名。
如下圖：

Instance of Symbol

現(xiàn)在，在舞臺中只留下一個(gè)藍(lán)精靈元件實(shí)例，并在Elements面板中命名其為SmurfBoy（雙擊元素面板中名稱即可重新命名）。

2. 使用腳本控制元件動畫重復(fù)播放

在時(shí)間軸上，Animate自動在0-1秒中為SmurfBoy元素生成了“人字條軌跡”，即Chevron track。這意味著，SmurfBoy會自動播放Smurf元件中的時(shí)間線動畫。

Chevron Track

通過Ctrl+Enter/Cmd+Enter，可以調(diào)用瀏覽器查看動畫運(yùn)行狀態(tài)。藍(lán)精靈走了1秒就自動停止了。下面我們讓藍(lán)精靈的行走動作能夠不斷重復(fù)。

在元件面板中，選擇Smurf點(diǎn)擊右鍵，選擇“Edit”來編輯Smurf元件，進(jìn)入Smurf元件編輯狀態(tài)。此時(shí)，舞臺面板的標(biāo)簽顯示為“Stage/Smurf”。

Edge Animate允許設(shè)計(jì)師在時(shí)間線中嵌入JavaScript腳本，來提供更精確的動畫控制和交互能力。把鼠標(biāo)移至?xí)r間線“Actions”條目左側(cè)的大括號圖標(biāo)，會顯示“Open Timeline Actions”提示。如下圖：

Timeline Actions

點(diǎn)擊{}圖標(biāo)，并選擇“Complete”事件，來為Smurf元件的Complete事件添加動作腳本。Complete事件意味著時(shí)間線動畫播放完畢。我們通過添加腳本來讓Smurf元件在時(shí)間線動畫播放完畢時(shí)能夠從0秒開始重新播放，來實(shí)現(xiàn)動畫的反復(fù)播放。點(diǎn)擊動作腳本窗口右側(cè)的“PlayFrom”腳本按鈕，并修改插入的腳本為sym.play(0)。如下圖：

TImeline動作腳本

關(guān)閉腳本窗口，點(diǎn)擊“Stage/Smurf”舞臺標(biāo)題的“Stage”，回到舞臺時(shí)間線編輯狀態(tài)。通過ctrl+Enter/cmd+Enter運(yùn)行動畫，可以看到藍(lán)精靈的行走動作可以不斷播放。

3. 使用Pin生成前行動畫

下面，我們?yōu)樗{(lán)精靈加入行進(jìn)動畫效果。在Edge Animate中，提供了多種方式來生成關(guān)鍵幀和過渡。這里，我們來使用Pin按鈕生成關(guān)鍵幀和期間的過渡。激活“Auto-Keyframe Mode”。并把播放頭移至0:00秒。
“Pin”按鈕的作用是在時(shí)間軸上把當(dāng)前狀態(tài)（動畫的屬性值）“釘”在時(shí)間軸上當(dāng)前的播放頭位置?，F(xiàn)在，我們點(diǎn)擊Pin按鈕，可以看到在時(shí)間軸的播放頭所在位置0:00秒，生成了一個(gè)藍(lán)色的Pin標(biāo)志。如下圖：

Pin按鈕

接下來，把播放頭移到0:03秒，并在舞臺上水平移動藍(lán)精靈到舞臺最右側(cè)，比如X=418px?？梢钥吹?，在移動過程中，Edge Animate自動在0:03秒位置生成了新的關(guān)鍵幀，并在0:00和0:03秒兩個(gè)關(guān)鍵幀之間自動生成了補(bǔ)間動畫。如下圖：

Pin生成的動畫

后續(xù)

現(xiàn)在，藍(lán)精靈已經(jīng)實(shí)現(xiàn)了行進(jìn)。我們將在下面的教程中加入轉(zhuǎn)身行進(jìn)和背景等其他效果。
本教程完成后的項(xiàng)目可以在此下載：http://www.donglongfei.com/download/smurf+spriteSheet+Tutorial+2.zip