Bootstrapping Animate Compositions
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).
