如何在WordPress中嵌入Edge Animate作品

BKJIA專稿】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動畫。