【51CTO專稿】Edge Animate是Adobe最新出品的制作HTML5動畫的可視化工具，簡單的可以理解為HTML5版本的Flash Pro。在之后的文章中，我會逐一的介紹這款新的HTML5動畫神器。這篇文章先說一說如何把Edge Animate制作的HTML5動畫作品嵌入到Wordpress中。

一、下載Adobe Edge Animate制作工具

在本文發布的時間，Edge Animate版本為1.5，可以在Adobe云創意平臺http://t.cn/zYQTdJB注冊即可登錄 (http://t.cn/zYHR0WT)下載。

二、下載Edge Animate示例文件

Edge示例作品項目源文件可從此下載：SpriteSheet+Symbol+Loop.zip

本文只介紹如何將其集成到Wordpress中。

三、下載并安裝Wordpress插件：Edge Suite

Edge Suite是Wordpress插件，可以幫助你把以.oam格式發布的Edge Animate作品插入到Wordpress博客文章中。你可以在http://wordpress.org/extend/plugins/edge-suite/下載該插件，或者直接在Wordpress管理后臺搜索Edge Suite然后添加新的插件，如下圖：

安裝并激活后你可以在Wordpress管理后臺的邊欄上看到“Edge Suite”菜單：如下圖：

通過“Edge Suite”，你可以上傳Edge Animate動畫，然后在Post中引用。

四、創建一篇新blog并嵌入Edge Animate作品

    在繼續之前，你需要注冊Creative Cloud，登錄后下載Edge Animate工具，并下載示例文件：SpriteSheet+Symbol+Loop.zip

1. 在EDGE ANIMATE中發布.OAM格式HTML5動畫

啟動Edge Animate，并打開SpriteSheet+Symbol+Loop項目中的Animate項目文件：Spritesheet+Loop.an 。如下圖：

Edge Animate提供了三種方式允許你發布HTML5動畫，分別是Web、Animation Deployment Package（動畫部署包）、iBooks/OS X。通過菜單File>Publish Settings,可以調出發布設置（Publishing Settings）,如下圖：

選擇“Animation Deployment Package”，指定發布目錄，以及文件名，點擊左下角的“Publish”按鈕，Edge Animate即把html5動畫發布成.oam格式文件。.oam格式文件實際上是zip格式文件（你可以把其后綴改為.zip，然后解壓看其內部結構）。通常的HTML5動畫要包含諸多html、js、css以及圖片等資源文件，不易交換和傳播。通過.oam，可以比較方便的集成在其他環境中，比如Adobe的數字出版方案DPS，以及Wordpress中。

2. 通過EDGE SUITE上傳到WORDPRESS中

進入你的Wordpress管理后臺，點擊邊欄菜單的Edge Suite，進入Edge Suite管理界面。在該界面上，你可以上傳.oam文件。如下圖，上傳的.oam文件會在后臺自動解壓，上傳成功后，你可以看到解壓的文件提示。

3. 創建POST，嵌入動畫

現在，在Wordpress中創建一篇新的post。你會注意到，在Post編輯界面的最下方出現新的Edge Suite功能，如下圖。該條目提供了你上傳到WordPress中所有Edge Animate動畫作品的列表，每個條目的第一個數字即其id。通過改id，我們即可把動畫內容插入到post中。比如下圖中顯示條目為“3-LoopAnimation Edge-69072481”，3即為其id。

在post中正文中，我們可以按照如下方式嵌入該動畫：

至此，你已經成功的在blog中嵌入了HTML5動畫。