Getting Adobe Edge Animations to work in WordPress (or any other CMS)

This post will show you how to make Adobe Edge Animation work in WordPress, or any other website that have to use absolute URL:s to access assets.

If you're reading this at a later date, I recommend you to check if they improved the script. Link to documentation; http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

I've also opened up an issue over at Github; https://github.com/wittnl/Edge-Animate-Runtime/issues/3

The problem

When EA (Edge Animate) is looking for assets they use relative paths. This becomes a problem when we're using WordPress, where we need to reference our theme folder, an absolute URL.

ERROR 1

The main file edge.x.x.x.js fails loading the right javascript file for the composition. Resulting in a 404, file not found.

ERROR 2

The composition specific javascript file that get's loaded by edge.x.x.x.js have relative paths to images etc. Resulting in that no images are loaded.

What we want

  1. Have all our assets stored in our theme folder
  2. Have all files load properly and enjoy our animations
  
├── assets
│   ├── edge
│   │   └── tools <-- the name of the composition
│   │       ├── images
│   │       │   ├── andlit.svg
│   │       │   ├── haus-utlina.svg
│   │       │   ├── haus.svg
│   │       │   ├── hjalmur-utlina.svg
│   │       │   ├── hjalmur.svg
│   │       │   ├── skegg-h.svg
│   │       │   └── skegg-v.svg
│   │       └── tools_edge.js
│   └── edge_includes
│       ├── edge.5.0.1-pudge.js <-- the on we edited
│       ├── edge.5.0.1.js


The solution

1) Modify the main javascript file

  1. Make your own version of the main javascript file, e.g; edge.5.0.1-edited.js
  2. Check for comp.load and change it so that it loads from our theme folder correctly.
  comp.load('/wp-content/themes/my-awesome-theme/assets/edge/' + projectPrefix + "/" + projectPrefix + "_edge.js");

2) Modify the "composition"-specific javascript file

  1. Change the variables you need to change (e.g images) inside tools_edge.js so that it points to your theme folder.
  var im='/wp-content/themes/my-awesome-theme/assets/edge/tools/images/'


4,523 3 2