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

一、下載Adobe Edge Animate制作工具

在本文發(fā)布的時(shí)間，Edge Animate版本為1.5，可以在Adobe云創(chuàng)意平臺(tái)http://t.cn/zYQTdJB注冊(cè)即可登錄 (http://t.cn/zYHR0WT)下載。

二、下載Edge Animate示例文件

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

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

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

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

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

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

四、創(chuàng)建一篇新blog并嵌入Edge Animate作品

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

1. 在EDGE ANIMATE中發(fā)布.OAM格式HTML5動(dòng)畫

啟動(dòng)Edge Animate，并打開SpriteSheet+Symbol+Loop項(xiàng)目中的Animate項(xiàng)目文件：Spritesheet+Loop.an 。如下圖：

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

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

2. 通過EDGE SUITE上傳到WORDPRESS中

進(jìn)入你的Wordpress管理后臺(tái)，點(diǎn)擊邊欄菜單的Edge Suite，進(jìn)入Edge Suite管理界面。在該界面上，你可以上傳.oam文件。如下圖，上傳的.oam文件會(huì)在后臺(tái)自動(dòng)解壓，上傳成功后，你可以看到解壓的文件提示。

3. 創(chuàng)建POST，嵌入動(dòng)畫

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

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

至此，你已經(jīng)成功的在blog中嵌入了HTML5動(dòng)畫。