Insert an edgeanimateHTML5 animation into wordpress

EdgeAnimate is Adobe's latest visualization tool for making HTML5 animations. it can be simply understood as the HTML5 FlashPro version. In subsequent articles, I will introduce this new HTML5 animation artifact one by one. This article first describes how to embed HTML5 animations produced by EdgeAnimate into Wordpress. The following HTML5 animation uses A Edge Animate, which is Adobe's latest visualization tool for making HTML5 animations. it can be simply understood as the HTML5 FlashPro version. In subsequent articles, I will introduce this new HTML5 animation artifact one by one. This article first describes how to embed HTML5 animations produced by EdgeAnimate into Wordpress.
The following HTML5 animation is made using Adobe Edge Animate and embedded into the blog using the Wordpress plug-in EdgeSuite.

1. download Adobe Edge Animate production tool
At the time of this article, Edge Animate version 1.5 is available for free download on the Adobe cloud creative platform. You only need to register at the registration address to log on and download.

2. Download The Edge Animate sample file
Download the source file of this Edge file Project: spritesheet?symbol=loop.zip
The production of this HTML5 animation will be detailed in subsequent articles. This article only describes how to integrate it into Wordpress.

3. download and install the Wordpress plug-in: Edge Suite
Edge Suite is a Wordpress plug-in that can help you insert EdgeAnimate files published in. oam format into Wordpress blog posts. You can:

Install Plugin: Edge Suite
After installation and activation, you can view the "Edge Suite" menu on the sidebar of the Wordpress management background, for example:

Edge Suite menu
Through Edge Suite, you can upload Edge animation and reference it in Post.
4. create a new blog and embed the Edge Animate fileBefore continuing, you need to register CreativeCloud. after logging on, download the EdgeAnimate tool and download the example file spritesheet?symbol=loop.zip.
1. publish the. oam HTML5 animation in Edge Animate.Start EdgeAnimate and open the animation project file SpriteSheet + Symbol + Loop: Spritesheet + Loop.. For example:

Edge Animate SpriteSheet + Loop.
Edge Animate allows you to publish HTML5 animations in three ways: Web, Animation DeploymentPackage, and iBooks/OS X. You can call up the Publishing Settings through the File> PublishSettings menu, such:

Edge Animate Publish Settings
Select "Animation DeploymentPackage", specify the release directory and file name, and click "Publish" in the lower left corner. EdgeAnimate releases the html5 Animation to a. oam file .. The oamformat file is a zip file (you can change its suffix to .zip, and decompress it to check its internal structure ). Html 5 animations usually contain html, js, css, images, and other resource files, which are not easy to exchange and spread. Through. oam, you can easily integrate it into other environments, such as Adobe's digital publishing solution DPS and Wordpress.2. Upload to Wordpress through Edge SuiteGo to your Wordpress management background, and click Edge Suite in the sidebar menu to go to the EdgeSuite management interface. On this page, you can upload. oam files. For example, the uploaded. oam file will be automatically decompressed in the background. after the upload is successful, you can see the file extraction prompt.

Upload oam
3. create a Post and embed an animation.Create a new post in Wordpress. You will notice that the new EdgeSuite function appears at the bottom of the Post editing interface, as shown in. This entry provides a list of all EdgeAnimate animations you upload to WordPress. The first number of each entry is its id. By changing the id, we can insert the animation content into the post object. For example, if the displayed entry is "3-LoopAnimationEdge-69072481", 3 indicates its id.

Edge Suite functions
In post, we can embed the animation as follows:

Embed Edge animation code
Now, you have successfully embedded HTML5 animations in your blog.