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

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

準備工作

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

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

下載Adobe Edge Animate制作工具

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

下載Edge Animate示例項目文件

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

資源文件

資源文件如下：

1. Smurf SpriteSheet

教程

1. 生成Symbol

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

Edge Animate 元件

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

Smurf Symbol

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

Instance of Symbol

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

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

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

Chevron Track

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

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

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

Timeline Actions

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

TImeline動作腳本

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

3. 使用Pin生成前行動畫

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

Pin按鈕

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

Pin生成的動畫

后續(xù)

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