I searched high and low for a quick and easy answer to “just put Edge Animate OAM files right into WordPress.” Lo and behold, nothing exists for the current version. In fact, nothing exists at all in its current iteration (even for OAM). There is no simple way to simply export an OAM to WordPress. And if you find one, PLEASE tell me in the comments! Anyway, here’s the steps for manually moving an Edge Animate file into a WordPress installation.
First off, the goal here is to put one animation into one page on a site or to integrate this into your theme files.
First off, you need to publish your files. The easiest way to do this is to:
- Name your project something websafe. If you name your project Bad Boys, Watcha Gonna Do it will look like this: Bad%20Boys%20Watcha%20Gonna%20Do
That isn’t pretty. So name it sensibly. In our case, it will be called edgetest. - If you like saving bandwidth and relying on the big boys cloud service like I do, you’ll check that “Host Runtime files on Adobe CDN” box. If you want to play it safe and not rely on versioning breaking your site, don’t check this box. Or live dangerously and check it. I’m not your mom.
- Click File -> Publish.
Now that you’ve got your files, they should be in the default folder of /publish/web/ right next to your save file.
Let’s decide where this Edge Animate folder full of goodness is going to live on your server. We’ll call this your EDGE LOCATION. If you’re putting this in a theme, you’ll want to put a folder in your theme called /edge and upload everything inside the /publish/web/ folder you published earlier into it. If you’re going to be adding loads of sweet animations to your site, you may have a folder inside your /wp-content/ folder like /wp-content/edge/. This is important for later because we need this location to type into the files.
Open up the HTML and JS file in your favorite editor and you’re going to change a few things.
In the HTML file, you’ve got a block of code that looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”/>
<title>Untitled</title>
<!–Adobe Edge Runtime–>
<script type=”text/javascript” charset=”utf-8″ src=”http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js”></script>
<style>
.edgeLoad-EDGE-2835989428 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition(‘edgetest‘, ‘EDGE-2835989428’, {
scaleToFit: “width”,
centerStage: “horizontal”,
minW: “0px”,
maxW: “undefined”,
width: “1280px”,
height: “720px”
}, {“dom”:{}}, {“dom”:{}});
</script>
<!–Adobe Edge Runtime End–></head>
<body style=”margin:0;padding:0;”>
<div id=”Stage” class=”EDGE-2835989428″>
</div>
</body>
</html>
Before we start copying things to places, you’re going to notice one big bolded word up there in that block of code: edgetest. This is the one string that tells all this code where your javascript file to load is located. That folder that we talked about earlier? We’re going to enter that here. so instead of:
AdobeEdge.loadComposition(‘edgetest‘, ‘EDGE-2835989428’, {
it’s going to look like:
AdobeEdge.loadComposition(‘/wp-content/edge/edgetest‘, ‘EDGE-2835989428’, {
Just put wherever your content is located on your server, your EDGE LOCATION from earlier. You can change it later if you need to.
Now let’s finish the HTML file.
You’re going to need two pieces from this file. The green section needs to go in your WordPress header.
If you’re putting this in your theme, this goes in your header.php file in the header section before the body starts. The purple section will go into your page template wherever you want your animation to be. If you’re editing your theme file, I presume you know how to do this.
If you’re putting this in a single page, make a new page to put your animation on. I’m calling mine Edge Test. Paste the purple section goes into your WordPress Page directly. Remember to put it in the “Text” section and not the “Visual” section.
Now download a WordPress plugin that lets you edit your javascript header or embed into it. For our purposes, I’m going to use the CSS & Javascript Toolbox plugin. If you have Thesis as your theme, you already have a javascript header section on the page to drop javascript. Click the New Code Block and put it in the Header as location. The defaults are fine.
Then copy and paste the green section into the new code block. It should look a little like this:
Okay, let’s tell this code which page to load on by checking the box next to the page we want it on (my page is called Edge Test in this example):
Then, the most important part:
We’re almost done. Now let’s edit the JS file.
Where it says at the bottom of this snapshot (I’m going to add some returns to make it easier to read):
var im=’images/’,
aud=’media/’,
vid=’media/’,
js=’js/’,
You’re going to add your EDGE LOCATION from earlier. Then it will look like this:
var im=’/wp-content/edge/images/’,
aud=’/wp-content/edge/media/’,
vid=’/wp-content/edge/media/’,
js=’/wp-content/edge/js/’,
Now save your JS file and upload it to your EDGE LOCATION, refresh your WordPress Page and enjoy your Edge Animation 2015 in WordPress.
Keep making the internet awesome.
