Graphics Reference
In-Depth Information
Now that you understand all the important basics of Edge Animate, it's time
to take a closer look at the extensibility of your compositions. As already men-
tioned, Edge Animate runtime is largely based on the popular jQuery JavaScript
framework. Starting in 2012, my colleagues, Johannes Boyne and Timm Jansen,
and I used this knowledge as a starting point to explore the long-term potential
of Edge Animate, particularly in terms of integration into external systems and
extensibility with additional frameworks and custom components. The results
have been incorporated into my open source library, Edge Commons, and they
form the basis for additional functions such as logging, parallax, sound, and data
injection. However, before we look at the Edge Commons in detail, I want to
outline the basics on how to extend Edge Animate compositions so that you
can develop your own components.
7.1 External Components
Through the use of jQuery, we can load any external HTML and JavaScript com-
ponents, and place them in our composition. Let us first look at how to load
external libraries.
7.1.1 yepnope.js
Because an Edge Animate composition is made up of several components, the
library loader yepnope.js is used in Edge Animate runtime. This loader makes it
very easy to create conditions that can be used for loading different JavaScript or
CSS files. If you want to write your own instructions for loading external libraries
or style sheets, you can use yepnope.js.
Suppose you want to load an external JavaScript file at runtime. This can be
done with the following line of code:
yepnope({load: "http://URL/script.js"});
