Supporting Multiple Adobe Edge Animate Compositions on One HTML Page

While Adobe has announced that Adobe Edge Animate CC would "no longer be actively developed" (see article from Adobe.com), the Edge Animate JS library is still widely used.  We're using on a regular basis. Today I'm facing a unique challenge of having to support two Adobe Edge Animate compositions on one web page, and I think I've found a way to do it.

The Adobe Online Help resource has been a big help with this issue, even though there are no explicit code examples on the page the following statement gave me an idea.

"We need to call AdobeEdge.loadComposition for each composition which we want to be loaded. Each composition requires a stage Element to attach to [and so you must ensure that each] stage IDs in the HTML markup with a unique name to avoid conflicts." (3)

Editing the custom JavaScript (JS) code file need to be modified to check for the compId of the targeted composition before executing custom logic against it.

Inf your custom JS code file, you need to bootstrap your AEACC composition using the following boilerplate code.

// initialize composition variables
AdobeEdge.bootstrapCallback(function(compId){
    comp = AdobeEdge.getComposition(compId);
    stage = comp.getStage();
});

To make sure your targeting the correct composition on the page, check the compId or force the value of the compId variable. Here's an example of checking the compId from the bootstrap boilerplate code.

// initialize composition variables
AdobeEdge.bootstrapCallback(function(compId){
    if(compId === "EDGE-2895673"){
        comp = AdobeEdge.getComposition(compId);
        stage = comp.getStage();
    }
});

Here's an example the hard codes the compId variable to one of the compositions on a webpage.

 // initialize composition variables
AdobeEdge.bootstrapCallback(function(compId){
    comp = AdobeEdge.getComposition('EDGE-2895673');
    stage = comp.getStage();
});

When you combine your AEACC compositions onto one page, you'll notice the DIV containers for the compositions are each named "Stage". Consider changing the name of one of them to a unique name. If you have multiple compositions whose DIV ID are "Stage", the last instance of the above object notation will affect ALL compositions on the page. The reason I say that so confidently is that what happened when I placed my compositions on the page. The first comp (the smaller one) was resized to the same dimensions as the second comp which was the last one on the page.


References

1. Adobe. (n/d). New Features Summary : Adobe Edge Animate CC (2015 Release). Adobe Online Help. Referenced from https://helpx.adobe.com/edge-animate/using/whats-new.html
2. Adobe. (n/d). Adobe Edge Animate CC 2014 JavaScript API 5.0. Adobe Online Help. Referenced from http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html
3. Adobe. (n/d). Adobe Edge Animate JSAPI: Multiple Compositions in a Page. Adobe Online Help. Referenced from http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html#multiplecompositions