Adding Edge Animate to Your WordPress Site

There are two types of web folk. The ones that prefer to animate using pure code and the ones that don’t. I’ll be the first to admit that I’m a proud member of the latter.

Adobe Edge Animate is a powerful tool that allows designers to crank out interactive web animations without needing any knowledge of the Jquery back-bone that drives them. Of course, it always helps to know underlying programming language but it’s not required in this case to make text move across the screen in impressive fashion. Animations that would normally take hours to construct with endless lines of code, can now be done visually and intuitively in a matter of minutes. If you have any previous experience with Flash, you’ll feel right at home with its familiar user interface. Having spent extensive time with the software, I can say that it’s awesome (that’s an official review by the way.)

This particular article won’t be teaching you how to use the software although those tutorials may be forthcoming. Instead, in this post I’ll walking you through the process of manually integrating your custom Edge animation into the highly popular content management platform of WordPress.

I was actually surprised by how little was out there on the net concerning this topic. That’s probably because there’s an existing plugin that does this for you already. I’ve included the link here for those of you who’d rather skip this article and go that route. The plugin itself has great reviews but one thing they are upfront about is that it’s still in its developmental stages and that a full site backup is recommended. You can call me old fashion, but I favor the hands on approach at least once when integrating code.

With that said, onward to the good stuff. When you publish your animate file which in this case will be called “banner”, the program will pop out the following items:

1. Folder called edge_includes (Within this folder, you’ll find all the required Jquery core files. You won’t be editing these)
2. Folder called images ( surprisingly, this is where you’ll find your images)
3. banner_edge.js
4. banner_edgeActions.js
5. banner_edgePreload.js
6. banner.html (This is a standard html file that brings together the code needed to make the animation work. You’ll basically be picking out the various elements from this file and integrating them into the relevant WordPress files)

Step 1

Create a folder called “edge” in the root directory of your theme and upload all of your files to it. The files can technically go wherever you’d like them to, but for the sake of organization, I recommend keeping them in a separate folder.

Step 2

Whenever adding scripts to a WordPress site, it’s best to do so using the “enqueue” function so as to avoid any potential coding conflicts on the site. The following code has been updated to work with WordPress version 4.0 and Adobe Edge Animate 2014. Even though Edge has been around for a few years, it’s still considered new in that it’s a constant work in progress. Updates are particularly common with Edge and each iteration seems to carry significant changes in terms of how files are outputted. Adobe Edge 2014.1, which at the time of updating this article is the most recent version, exports its deployment files differently than Adobe Edge 2014. We’ll look to provide a tutorial for that in the near future.
Open up your functions.php file and insert the following code:

If you look at the code, you’ll see that the “my_scripts_method” function is referencing the server location of the “banner_edgePreload.js” file. This file will be loaded in the header of your WordPress page. Once you’ve uploaded your functions.php page, check your site to make sure the script has been loaded. You can do this by viewing the source code of the page and ensuring that the “banner_edgePreload.js” is referenced properly.

Step 3 

Open the banner.html file. In it, you’ll notice a style in the heading that looks something like the code below. What you see may not be identical to this, but it’ll be similar. You’ll need to include this in your stylesheet.

In the same file within the body tags, you’ll see a div reference.

Copy and paste this code into the area of the WordPress page where you want the animations to show.

Step 4

There are only two more files that need to be tweaked and we’ll have our animation WordPress-ready. Open up “banner_edge.js”. Don’t be taken aback by the wall of code that is before you. You won’t need to do too much with it.  Near the top, you’ll see

You will need to set the “im” variable to equal the absolute path of your where your Jquery images folder is.

This variable essentially points to the various images (gifs, jpgs, pngs) that are used in your animation.

Most of the time, setting this variable alone is enough. However, if your animation contains symbols that hold graphics, an extra step is needed (hopefully, future releases of Edge may not require this). Further down within the code, you’ll notice graphics that are referenced with something like “images/yourfile.jpg”. You need to replace this with the absolute path to the file or use something like this.

Scan the code for any similar references to image files and point them to the right path. If you publish your animation only to find out some key graphics are missing, then it’s likely you still need to update one of the graphic references.

This path will vary depending on the exact set up of your site. Once you’ve set the variable to the proper location, save the file and upload it to the server.

Next, open the banner_edgePreload.js file. If you thought the previous file had an impressive wall of text, you’ll be even more impressed with this one. Once again, you won’t need to know what all of this code means. Scroll to the bottom of the code and find something that looks like the code below. Another way to find it is to simply do a document search for “aLoader”.

Similar to what we did with the previous file, we need to use absolute paths to reference these four files that follow the load commands. Below is an example of what your end result might look like depending on the exact directory structure you’re using.

(note: if you have a fallback image set for your project for users who are unable to view your animations, you’ll need to change that image reference within this file as well. Near the very bottom of this file, you’ll see a reference to “images/yourfallbackimage.jpg”. This will need an absolute path.)

Save this file and upload it to the server.

Step 6

At this point, you’ve taken all of the necessary steps to add your designer-friendly Edge Animate production to your WordPress site. Open up your browser, fire up your site, and if everything was done properly, you’ll have your animation seamlessly nestled within your web page.

Sure, there are more steps required to this than just clicking a plugin, uploading an animation deployment package, and then sticking in some shortcode. However, as a good rule of thumb, it never hurts to learn how to do something manually before switching to the automated process. It allows for more control and most importantly, understanding 🙂