Want to relink AN project files on a CDN? It’s easier than you might think.

Created

November 4, 2013

It’s not uncommon to find yourself wanting to deploy an Animate project online and have control over where your scripts and images are linked from. There’s several situations where you might want to do this:

Managing multiple Animate projects across your server and you want to point to a single JS folder to save on load time

Content needs to be dynamically packaged and loaded from a single source due to CMS or other server-side requirements

Whatever environment you’re working in, you may want the option to control the source of Animate dependent files. This post will describe how to point to your own CDN source and the files to edit to do so. The below writing is fairly technical and assumes you have some fundamental knowledge about Edge Animate and JavaScript.

Overview of Required Files

An Animate composition has the following file dependancies for the composition to run:

edge.2.0.1.min.js – This is the Animate runtime and remains static. This file is hosted on our Akamai-powered CDN so you essentially get this for free. By default it is not included in a published project as it loads from the CDN.

jquery-1.7.1.min.js – We use jQuery to power bits and pieces of the Animate runtime. This file is hosted on Google via ajax.googleapis.com. By default it is not included in a published project as it loads from the CDN.

xxx_preload.js – This is the Animate preloader and is used to load all dependent project files. This file changes based on the content of your project.

xxx_edge.js – This file contains the DOM information for your animation. This file changes based on the content of your project.

xxx_edgeActions.js – This file contains all the actions and user-created code within your Animate file. This file changes based on the content of your project.

Changing the Source

Due to the way Animate project files are dependent on one another, we can’t simply change “mysite.com/myfile/preload.js” to “mysite.com/mydifferentfile/preload.js” in the HTML and call it a day since the links go deeper than the initial load of preload.js. The two files we need to edit are preload.js (to redirect the scripts) and edge.js (to redirect the images).

Note: This method is NOT roundtrippable. Animate will overwrite these changes when resaving a .an file. Only use this step when you’re ready to deploy your project online. Resaving the project will require you to re-edit the files.

Step 1 – preload.js

Editing preload.js will repoint the dependent Javascript files. This is necessary to ensure all dependent files get loaded via the preloader.

Open xx_preload.js in a text editor. Towards the bottom you’ll see the following lines:

We’ll be adding a new variable to point to the location we want to load these files from:

In the above example I’ve done two things:

Line 46 – Created a new variable called CDN_URL. This points to the URL I want my JS files to link from. Change this to your own domain; be sure to add the backslash at the end of the path!

Lines 50-52 – Added the CDN_URL var to the file path. This allows you to edit the URL at your leisure and have the new path apply recursively to the linked JS files. If you’ve just dumped your local files onto your server be sure to be aware of any changes you’ve made to subfolder directories.

Step 2 – edge.js

Editing edge.js will repoint the images folder. This is necessary to ensure all required images get loaded with the composition.

Open xx_edge.js in a text editor. At the top you’ll see the following lines:

We’ll be adding a new variable to point to the location we want the images folder to load from:

In the above example I’ve done two things:

Line 7 – Created a new variable called CDN_URL. This points to the URL you want the image folder to source from.

Line 8 – Added the CDN_URL var to the image path. This will link the “images” folder from “http://www.mysite.com/newsource/images”.

The last step is changing the URL for xx_preload.js in your HTML file (if you choose to do so).

In the above step, I’ve changed the source of xx_preload.js to point to a new directory.

(Optional) Step 3 – Changing Fonts

If you’ve linked to a local font source via CSS using the Custom Font feature, you may also want to change the reference of your fonts folder to reflect the new source.

In the above untouched example, this is what a local font reference looks like. In this example, my stylesheet points to “fonts/bebasneue.css”.

In the above step I’ve included the CDN_URL variable to in the href, so “bebasneue.css” is now sourced from “http://www.mysite.com/new_source/fonts/bebasneue.css”.

Save, close, and you’re done!

In the above examples I used unpublished versions for readability. This method can be applied to minimized published Animate output, however you may want to run it through a JS beautifier for readability. You can also use the above technique to redirect edge.min.js and jQuery if you choose to host these on your own servers. If at first you don’t succeed, double-check your file paths to make sure they align.

In the future we’ll be looking for ways to make this easier for Animate users, but if you’re in a pinch this method will get you started. Good luck!