Loading external JavaScript in Adobe Edge Animate the easy way

YepNope code in the document.compositionReady pane

I’m just quickly posting this today because up until recently I’ve been using a fairly laborious method of loading libraries like Greensock and custom scripts by pasting several <script> lines of code into the main HTML file.

But no more!

With Edge Animate’s built in loading features you can use existing functionality called YepNope to load all external JS files. And it’s really simple and it means no more editing the main HTML file. Just paste this as the first code in your document.compositionReady pane.

So here it is.

yepnope(
{
nope:[
'greensock/TweenMax.js',
'greensock/easing/EasePack.js',
'greensock/plugins/CSSPlugin.js',
'greensock/plugins/ColorPropsPlugin.js',
'greensock/TimelineMax.js',
'Utils.js'
],
complete: init
}
);
//when yepnope has loaded everything execute init();
function init (){
//initialise your variables and Edge comp here
}

And here’s the break down.

We have the yepnope closure which is nothing more than a function:

yepnope()

Inside that we place curly braces to denote an object.

Then we use the nope property of that object and create an array, ready to pass in the names of the JS files we want to load.

yepnope(
{
nope:[//pass in your files here with commas between them]
}
);

Next pass in the JS file names – here’ I’m loading the Greensock libraries and also a custom set of utilities I’ve written to perform common tasks called Utils.js :

yepnope(
{
nope:[
'greensock/TweenMax.js', 
'greensock/easing/EasePack.js', 
'greensock/plugins/CSSPlugin.js', 
'greensock/plugins/ColorPropsPlugin.js', 
'greensock/TimelineMax.js', 
'Utils.js'
]
}
);

And finally yeopnope provides a complete method to let us know it’s all loaded successfully. Just put that in as another property of the object and assign any function you like to execute when it’s completed.

yepnope(
{
nope:[
'greensock/TweenMax.js',
'greensock/easing/EasePack.js',
'greensock/plugins/CSSPlugin.js',
'greensock/plugins/ColorPropsPlugin.js',
'greensock/TimelineMax.js',
'Utils.js'
] ,
complete: init
}
);

And that’s all there is to it. Now you don’t have to edit external HTML files and you can now easily disable or add in JavaScript files inside Edge and they will all get loaded at the start.

Check out the YepNopeJS site for more functionality – this is only a glimpse of what it can do.

Oh and why not check out my Adobe Edge Animate Templates on CodeCanyon?

 

 

 

 

 

My 3D Video Cube is particularly awesome!