Add an Adobe Edge Animate animation to a WordPress site

Add an Adobe Edge Animate animation to a WordPress site

with No Comments

Up until the release of Adobe Edge Animate 2015 adding an animation created in Adobe Edge Animate was a simple process of adding the Edge Suite plugin to your wordpress, uploading your .oam file through the plugin and adding your animation to your content body with a shortcode. Unfortunately the plugin only works with Adobe Edge Animate 2014 and below.

Adobe have also now discontinued the development of Adobe Edge Animate having rewritten and launched Adobe Flash as Adobe Animate CC. They have included a lot of the best features of Edge but primarily have given us the ability to output our animations to HTML5, which let’s face it, was the only reason we moved from Flash to Edge Animate in the first place.

If like me you are stuck with a shed load of Edge animations from past projects, you may not want to go through the mission of converting those animations to Adobe Animate CC so as to edit them for the occasional site change. There are two options available to you if you want to carry on using your Edge animations in a WordPress site.

    1. You can install a previous version of Adobe Edge Animate by following the instructions found on the Adobe blog post.
  1. You can save your animation as an HTML webpage, upload the page and add the animation to your content by inserting it as an Iframe, not ideal, but it does the job.

As Adobe Edge Animate is no longer being updated and I have previously installed the 2015 release, I chose not to go through the route of installing an older release onto my PC and chose instead to use an Iframe, an example of which can be seen below.

 

 

The steps I used to insert the animation into the body of this post are:

    1. Set your publish settings to ‘web’ and set the folder to where you want the files published to.
    1. Uncheck the three options; Publish preload DOM as a separate file, Host runtime files on Adobe CDN, Publish content as static HTML.
    1. Click ‘Publish’.Adobe Edge Animate Publish Dialogue Box
    1. Using an FTP client upload the entire published folder including all files and sub folders to your web hosting space, make note of the URL of your projects .html file as you’ll be adding that in the next stage.
    1. Test the URL by entering it into your browsers address bar and pressing return. If your animation loads into your browser then you can move on to the next stage, if not then double check the URL of your projects html file and try again.
    1. Add the iframe code into your content, make sure your editor is in text mode;
      <iframe src="http://www.yoursite.com/yourfolder/yourfile.html"
      width="800" height="400"></iframe>
      • Change the yoursite, yourfolder, yourfile, text to match your URL.
      • Change the width and height settings to match your projects sizes. You can also use percentages i.e.: width=100%
  1. Publish your post, load it up in your browser and check out your handiwork!