How to get animations playing after one another in Adobe Edge?

Question

I have a main index.html page and have a number of animations in their div containers as shown:

<div style="height:100%;width:100%;">
   <div id="StageHelloWorld" class="Composition-HelloWorld"></div>
</div>
<div style="height:100%;width:100%;">
   <div id="StageHelloWorldAgain" class="Composition-HelloWorldAgain"></div>
</div>

I load the animations as follows:

yepnope({load: ["edgeTemplates/HelloWorldAgain/HelloWorldAgain_edgePreload.js",
                 "edgeTemplates/HelloWorld/HelloWorld_edgePreload.js"],
            callback: function(url, result, key){
                //when the script is loaded, run these:
                AdobeEdge.loadResources();
                AdobeEdge.playWhenReady();

                AdobeEdge.bootstrapCallback(function(compID){


                    console.log("Ready for : " + url);

                });
            }});
    }, 6000);  

And then in code, I trigger each animation to show (one at a time) via:

 $("#StageHelloWorldAgain").hide();
 $("#StageHelloWorld").show();
 AdobeEdge.getComposition("Composition-HelloWorld").getStage().getSymbol("stage").play(0, true);

or

 $("#StageHelloWorld").hide();
 $("#StageHelloWorldAgain").show();
 AdobeEdge.getComposition("Composition-HelloWorldAgain").getStage().getSymbol("stage").play(0, true);

So I would alternate between the above (after a fixed amount of time).

What I noticed is the order of the scripts that I am loading in the yepnope determine which animation is animated when shown. So for:

yepnope({load: ["edgeTemplates/HelloWorldAgain/HelloWorldAgain_edgePreload.js",
                 "edgeTemplates/HelloWorld/HelloWorld_edgePreload.js"],

edgeTemplates/HelloWorld/HelloWorld_edgePreload.js is animated however if I switch the order, then the last animation for the last script is shown.

So how do I load both animations correctly so that when I do show() on the animation it animates as expected?

Answer 1

As I had just started using Adobe Edge, I had created a number of projects each in their own folders. So each one had its own version of the adobe runtime js file.

Once I pointed all the projects to the same runtime file, the animations started playing in sequence.