by Josh Hatwich

Created

May 15, 2012

Multi-Composition Support?

One of the most frequently asked questions is how one can integrate multiple Animate compositions in the same page.  Perhaps you have a series of compositions that you want to play one after another, or a composition that sends data to another composition.  The solution is the API AdobeEdge.bootstrapCallback, which allows you to register a callback function from the context of your HTML page that will be called when your Animate composition is loaded and ready to play. This provides a hook to register event listeners for Symbol and Timeline events.

This post has been updated with sample files created in Adobe Edge Animate 1.5.

An Example: Play 3 Compositions in Sequence

Let’s look at an example that plays a series of compositions in sequence.  In this example we will avoid editing the Edge compositions themselves; instead we will be focused on editing the wrapper.html that combines them.  The compositions we’ll use are very simple.

You can download a zip of the sample files here. (Updated to Animate 1.5.)

Project Setup

Edge does not support editing multiple compositions in the same file, but you still might want to make edits to a composition after integrating it into a larger site. An emerging practice is to edit the compositions separately via composition-specific .html files and then combine then in a single “wrapper.html” file that is just used to preview the combined work.

The wrapper and each of the pages can be placed in the same directory so they can share resources.

 

Include 3 compositions

First the wrapper.html needs to include each of the compositions:

Add HTML markup for each stage

Each Edge composition is associated with a “stage” DIV that has a class name identical to the Edge composition’s ID.

Add CSS to position 3 stages

Each Edge Composition lives inside a “stage” DIV element. Without a little help from CSS the 3 stages would flow and appear one after another. They would also all appear when the page loads. In this case we want to hide the 2nd and 3rd stage until the right time in the sequence.

Bootstrapping with JavaScript

Since Edge is loaded using a preloader script, very few JS APIs are reliably available from the wrapper HTML page. The preloader downloads Edge and jQuery libraries dynamically, so the page needs a hard signal when it is safe to call into them. The following code can be added to establish callback when it is safe to call jQuery and Edge APIs:

AdobeEdge.bootstrapCallback(function (compId) {
//your function will be called when the composition is ready to play

});

Coordinating multiple compositions

Our bootstrap function is going to coordinate 3 compositions. It will be called 3 times as each composition loads and is ready.  Since we want to coordinate the compositions we are going to keep track of loading using the loadedComps variable.

Registering Animate-specific callbacks

Since the Animate composition is ready when the bootstrap callback is issued, we can safely bind to Edge callback APIs.  The same syntax that is used in the xyz_edgeActions.js can be used here.  The following code listens for the timeline to complete.  When one timeline completes, it hides the related composition and then shows and plays the next one in the sequence.

 

It is pretty simple!  Here is the finished result (more for you to inspect than for your viewing pleasure).

 

COMMENTS

  • By Corey - 8:19 PM on June 26, 2013  

    Hi, thanks for the tutorial. I’d like to suggest bootstrapCallback take another parameter: a scope. In the Edge API then you’d do callback.call(scope, …). As it is, integrating this into a proper loader is more difficult than it should be.

  • By John H - 12:21 PM on August 28, 2012  

    Josh, I’ve upgraded to the 0.2 version of Muse and the latest Edge Animate version. Does bootstrapping still work with these two upgrades and do you still add multiple Edge animations (I have 4 separate animations that follow one-after-another) to Muse the same way as this blog indicates?

  • By John H - 2:37 PM on July 10, 2012  

    Josh, thank you for this! I want to add 4 rotating Edge-animated panels to the home page on the site listed above. I’ve already been able to add a single Edge file in the Philanthropic Travel page (listed under the About menu) by using an iFrame, but the home page is proving more difficult. I tried the same thing I did on Philanthropic Travel–using iFrames, with “wrapper.html” for the title of the iFrame, but it doesn’t seem to be working. I created the code for wrapper.html by copying the code you created for your blog piece and adding code for a 4th panel. What’s happening now is that the second panel is showing first, instead of the first one. You can see the first one briefly when you refresh the browser. There are only two of the four panels uploaded until I get this worked out. Thanks for any help.

    • By Josh Hatwich - 1:52 PM on July 12, 2012  

      Just adding a link – we ended up solving the problem John faced over a forum thread: http://forums.adobe.com/message/4554042#4554042

      • By John H - 12:32 PM on June 28, 2013  

        Hi Josh,
        I can’t acces this link. When I click on it it says I’ve entered a restricted area.
        Thanks, John

  • By aa_lique - 11:52 AM on May 27, 2012  

    Hi Josh
    Thanks for this tutorial. This may be a dumb question, but is the wrapper.html file created in a text editor first or in Edge?
    This will be very helpful.

    • By Josh Hatwich - 4:58 AM on May 29, 2012  

      Hi. The wrapper.html was created in an editor outside of Edge.