Adding an Adobe Edge Animation to Joomla

Once you’ve created your masterpiece in Adobe Edge Animate, you might want to use it with your Joomla site. The problem is that Joomla uses Mootools and it uses $ as a shortcut which jQuery (the JavaScript framework in Edge) uses as well.

The first option is modify all the shortcuts in the Edge animation and fix the links so that it will work. If you need to modify the animation at a later date in Edge, you will have to repeat this process again which is not a good use of your time.

An easier solution is to copy the Edge animation to your Joomla site (such as in the images folder) and use Joomla’s Wrapper module to display it. If you need to incorporate the animation in a module, embed it with an iframe:

<iframe width=”550” height=”400” frameborder=”0” src=””>

where animation is the folder containing your Edge Animation files.

How to Create a Loop in Adobe Edge Animate

There is no built-in function in Adobe Edge Animate (Preview 7) to create a loop to repeat an animation. This is useful for ads that need to repeat content.

You can create a loop using JavaScript with the following steps:

  1. Move the timeline marker to the end of the animation (see below).
  2. Insert a trigger (press Timeline on menu bar and select Insert Trigger).
  3. Enter (0); below function(sym, e).

Adding a loop to an animated in Adobe Edge Animate.

You can’t preview the looping in Edge Animate, but it does work in a web browser.