How to embed Edge Animate in WordPress

Edge Animate is Adobe's latest visualization tool for making HTML5 animations. It can be simply understood as the HTML5 Flash Pro. In subsequent articles, I will introduce this new HTML5 animation artifact one by one. This article first describes how to embed HTML5 animations created by Edge Animate into Wordpress.

1. Download Adobe Edge Animate production tool

At the time of this article, Edge Animate version 1.5 can be downloaded at Adobe cloud creative platform http://t.cn/zyqtdjbregistration can be logged on (http://t.cn/zYHR0WT.

2. Download the Edge Animate sample file

Source file of the Edge sample file can be downloaded from: spritesheet?symbol=loop.zip

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 Edge Animate files published in. oam format into Wordpress blog posts. You can download this plug-in at http://wordpress.org/extend/plugins/edge-suite/, and then search for edge Suite directly after wordpressmanagement and add new plug-ins, such:

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

Through Edge Suite, you can upload Edge animation and reference it in Post.

4. Create a new blog and embed the Edge Animate File

Before continuing, You need to register Creative Cloud. After logging on, download the Edge Animate tool and download the example file spritesheet?symbol=loop.zip.

1. Publish the. OAM HTML5 animation in edge animate.

Start Edge Animate and open the animation project file SpriteSheet + Symbol + Loop: Spritesheet + Loop.. For example:

Edge Animate provides three methods for you to publish HTML5 animations: Web and Animation Deployment Package Animation Deployment packages) and iBooks/OS X. You can call up the Publishing setting Publishing Settings through the File> Publish Settings menu, for example:

Select "Animation Deployment Package", specify the release directory and file name, and click "Publish" in the lower left corner. Edge Animate publishes the html5 Animation to A. oam file .. On the oam folder, you can change the ZIP file extension to. Zip and decompress it to view 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 SUITE

Go to your Wordpress management background, and click Edge Suite in the sidebar menu to go to the Edge Suite 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.

3. Create a POST and embed an animation.

Create a new post in Wordpress. You will notice that the new Edge Suite function appears at the bottom of the Post editing interface, as shown in. This entry provides a list of all Edge animation files uploaded to WordPress. The first number of each item 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-loopanimation Edge-69072481", 3 indicates its id.

In post, we can embed the animation as follows:

Now, you have successfully embedded HTML5 animations in your blog.