Adobe Edge—no preloader

Question

I would like to integrate a bunch of »edge animations« on my website/webapp but all the <edgeid>_edgePreload.jsare causing headache. All in all, what I really would like to do is:

1. include jquery and edge itself once,
2. load the <egde_id_egde.js files via Ajax and
3. finally create the compositions on the fly,

so that I can start/stop/pause them when required, without using the preloader script at all.

In short:

How can I »register« the composition definitions, as done in in the generated definition files here:

Edge.registerCompositionDefn(compId, symbols, fonts, resources, opts);

so that

Edge.getComposition(<id>) does return the composition, without using the preloader?

Btw.: I was stepping through the source code a bit and found that the composition definition did not have an okToPlay property, what made edge refuse to return the composition.

Answer 1

From my experience, you can't really do that, but you can use Coordinated Preloading to simulate the effect.

When you want to load a composition, first add this to your head:

<script>    window.AdobeEdge = window.AdobeEdge || {};    window.AdobeEdge.bootstrapLoading = true; </script>

Now that the bootstrapLoading is enabled, when you want to insert a certain comp, create a div with class you have set in Edge, for example say you have a my_comp1.html which has stage with class edge_my_comp1 (the default is something similar to EDGE-28326120)

<div id="Stage" class="edge_my_comp1"> </div>

Now use yepnope or other conditional JavaScript loader to load the compositions on demand:

var loadedComps = {};
yepnope({load: "my_comp1_edgePreload.js",
                    callback: function(url, result, key){     
                 //when the script is loaded, run these:      
                         AdobeEdge.loadResources();
                         AdobeEdge.playWhenReady();

                        AdobeEdge.bootstrapCallback(function(compID){
                            //then
                            loadedComps[compID] = (AdobeEdge.getComposition(compID)); 
                         });   
             }});

Now you can access your comp later with

 loadedComps["edge_my_comp1"].play()

From my experience, you still need to add one preloader to your < head > (for example, an empty dummy preloader) because otherwise the AdobeEdge.bootstrapCallback-callback never fires, thus leaving you with hidden stage that doesn't animate (reference).

After loading a composition, note that you cannot load it again: instead you need to stop and hide the composition, then show and play it again when you want to see it again.