在Flash動畫制作中,使用SpriteSheet制作動畫元素是一個常見和普遍的方法。在Edge Animate中,我們也可以利用SpriteSheet來制作HTML5動畫。本文將從一個示例出發,介紹在Edge Animate中如何使用SpriteSheet。

準備工作

在文章《EDGE ANIMATE:ADOBE新推制作HTML5動畫可視化工具》中,可以看到一個簡單的藍精靈動畫,一個藍精靈從屏幕左側走到右側,又返回,然后不斷重復。

示例分析

在接下來的幾篇文章中,我們基于這個小例子來介紹Adobe Edge Animate的部分功能。
通過這個示例我們可以學到:

  1. 如何使用SpriteSheet在Edge Animate中制作動畫:用來實現smurf(藍精靈)的行走動作
  2. Edge Animate中元件(Symbol)的使用:用來復用藍精靈人物
  3. 如何通過腳本控制動畫的重復播映:用來實現藍精靈不間斷地行走動作和行進
  4. Edge Animate中的CSS Transform : 用來實現藍精靈的轉身

下載Adobe Edge Animate制作工具

在本文發布的時間,Edge Animate版本為1.5,可以在Adobe云創意平臺上免費下載。 您只需要在注冊地址注冊即可登錄下載。

教程

1. 創建新的Edge Animate作品

啟動Edge Animate,創建一個新項目。設定Stage(舞臺)寬度為550px, 高度為250px。Ctrl+S保存為smurf.html。一個標準的Edge Animate項目是由一系列html,css,js和相關資源文件組成的。如下圖所示:

  • Edge Animate的工程文件: .an 格式文件更像一個空殼文件或者索引文件,標明了項目的必要信息。你可以使用記事本打開.an文件了解其中具體內容。
  • edge_includes目錄:該目錄下是Edge制作的HTML5動畫所依賴的JS類庫:edge.1.5.0.min.js 和jquery-1.7.1.min.js 。
  • 其他.js文件:諸如smurf_edge.js等js文件是專門針對當前動畫所生成js文件。
  • .html文件:主html文件。

Edge Animate項目文件結構

Edge Animate項目文件結構

3. 導入Smurf SpriteSheet

點擊菜單“File->Import”,或者快捷鍵Ctrl+I / Command+I,來導入smurf_sprite.png到舞臺。在舞臺上選中導入的圖片,在左邊欄Position and Size欄目下,設定其X坐標值=0px,y坐標值為45px,保證第一個smurf的位置在舞臺最左側并垂直居中。如下圖:

Smurf+SpriteSheet+Sample1
Smurf+SpriteSheet+Sample1

4. 使用Clip切割Spritesheet,顯示單一Sprite元素

我們導入的藍精靈Spritesheet是256*256大小的透明背景png圖片,一共描繪了16個藍精靈行走的姿態。通過序列播放這16個行走姿態,就可以制作一個完整藍精靈行走動畫。
首先,要在舞臺上只顯示一個Sprite元素,比如最左上角的第一個藍精靈。在Edge Animate左側屬性面板中,倒數第二個欄目是clip子面板。顧名思義,clip功能區可以幫助我們“切割”舞臺上的元素,比如圖片。該功能區實際上利用了CSS的clip屬性。

點擊clip子面板的開關按鈕,可以激活clip功能。使用鼠標,可以在clip屬性設定面板上的上、下、左、右屬性值上滑動,你可以在舞臺上實時看到“切割”的圖片情況。如下圖。 在本例中,請設定clip的top,right,bottom,left屬性值分別為0, 128,128,0。

Smurf+SpriteSheet+Sample+Clip

Smurf+SpriteSheet+Sample+Clip

5. 創建16個Keyframe,實現行走動作

接下來,我們創建十六個幀來完成藍精靈行走的動作。

1) 調整幀間隔

在舞臺下方的時間軸上,Edge Animate用豎線網格標記了每幀間距。在Smurf行走動畫中,我們希望在1毫秒的時間左右完成一個行走動作,即16幀。因此,我們需要通過時間軸下方的Gird Size圖標調整時間軸為15幀/秒。如下圖:

Smurf+SpriteSheet+GridSize

Smurf+SpriteSheet+GridSize

2) 激活“Auto-Keyframe Mode (自動創建幀)”

Edge Animate有三個非常重要的按鈕分別開啟Auto-Keyframe Mode(自動創建關鍵幀)、Auto-Transition Mode和Toggle Pin(大頭針)。圖標如下圖:

Edge Animate Buttons

Edge Animate Buttons

本例中,我們將啟用Auto-Keyframe Mode,而關閉Auto-Transition Mode和Pin。在啟用Auto-Keyframe Mode的情況下,每當我們在新的一幀修改舞臺中元素的屬性,Edge Animate會自動在此創建關鍵幀。由于我們關閉了Auto-Transition Mode,因此Edge Animate將不會自動在關鍵幀之間創建過渡效果。設定的效果如下圖:

Smurf+SpriteSheet+Sample33) 創建第一個關鍵幀

在時間軸上,把播放頭移到0:00秒位置,選中舞臺中的藍精靈,在左邊屬性面板中的Image子面板下,確認Background Image的x和y屬性值為0,然后點擊x和y屬性邊上的小菱形符號(當鼠標移到該菱形符號時,其變為黃色,并顯示tips:“Add Keyframe for Background Position”),此時Edge Animate將在時間軸的0:00秒出創建第一個關鍵幀。如下圖:

Smurf+Spritesheet+Sample4

Smurf+Spritesheet+Sample4

4) 創建2-16個關鍵幀

在時間軸上,移動播放頭到第二幀(00:00:066),確認已經激活“Auto-Keyframe Mode”(小鐘圖標顯示為紅色),并已關閉Pin和Auto-Transition Mode。選中舞臺中的藍精靈,然后在左邊欄Image面板中,修改Background Image的x屬性為-128,y保持為0。實際上,我們把SpriteSheet圖片向左移動了128像素,來顯示第一排第二個Sprite。此時,你應該看到,在時間軸上,Edge Animate自動創建了第二個關鍵幀。如下圖:

Smurf+Spritesheet+Sample5

Smurf+Spritesheet+Sample5

依次類推,分別將播放頭移動到第三到第16幀,并通過設定background image的x和y屬性值,來順序顯示SpriteSheet中其他的Sprite。1到16幀的background image屬性值如下:

1-16關鍵幀屬性值

1-16關鍵幀屬性值

創建完成后,如下圖:

16個關鍵幀

16個關鍵幀

此時,你可以來回移動播放頭,看到舞臺上的藍精靈行走的動畫效果。

6.預覽

使用快捷鍵Ctrl+Enter/Command+Enter,可以啟動默認瀏覽器看起運行的效果.

后續

現在,藍精靈已經實現了行走動作,但是還沒有完成行進,還不能移動。而且,行走動作只播放1秒鐘(不能循環)即停止了。我們在將在下面的教程中逐步完善。

點贊
收藏

發表評論 已發布 7

還可以輸入 800 個字
 
 
載入中....
相關推薦
7 收藏