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?

Chris Gannon Edge Animate Templates

 

 

 

 

 

My 3D Video Cube is particularly awesome!

14 thoughts on “Loading external JavaScript in Adobe Edge Animate the easy way

    1. Hi Adrian,

      I think Adobe Edge Animate was *mainly* designed for animation using the built-in timeline, eases, symbol structures and other similar encapsulated functionality.

      My guess is that Adobe use YepNope because they weren’t expecting users to need or want to load lots of external JS files – one or two maybe which YepNope handles well. I imagine that if your dependencies were closer to 10 or 20 then RequireJS would probably be better suited for the job.

      I’ve demonstrated the use of YepNope here mainly because it’s built-in, is simple to use and can handle most requirements for even the most complex animations.

      I think if I were building an entire site in Edge I might consider another library to deal with loading.

  1. nice.
    and how does it work with css?
    with yepnope you can use .css files.
    they will be integrated in the generated code.
    but they are not working and i don’t know the reason why.

  2. Hey Chris,

    Thanks so much for your amazing tutorials. I am currently trying to implement a function I saw on this site: http://ahrengot.com/tutorials/greensock-javascript-animation/

    I cant seem to figure out where I am going wrong. I am a complete beginner when it comes to all of this so I am trying to make ends meet with the little knowledge I have. See my example file below:

    http://dl.dropbox.com/u/9159616/numberanim.zip

    Thanks for your help!

    Adam

  3. Thank You for tutorials! It helped a lot to get in to Edge 🙂 But I use this JS loading method a bit differently. I’m loading JS before compositionReady (at the global state (upper from Adobe Edge Animate Composition Actions) ). And when JS are loaded I mark global variable jsLoaded = true. Meanwhile in symbol function I start interval which checks if jsLoaded is true and then I can use JS and go to labels in timeline. I do this way, because in global state I can not refer to label or symbol on timeline. Of course only if I passing ‘sym’ from symbol function to any global function, but not directly when yepnope complete in global state (or there is a way?).

    1. p.s. this way I can put on start of timeline my own preloader design (and stop there while JS are loaded), because there are limited ability to change built-in Edge preloader design (background etc);

  4. Just looking to use .js code only – no timeline usage.
    No symbols.
    How can I animate elements like rotate, scaleX / Y.
    These below work :
    sym.$(“item”).animate({left: “+=100px”},”slow”, “swing”)
    Or
    sym.$(“item”).css(“background-color”, “#FF0000”);

    But cannot figure out transform rotate, scaleX / Y

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s