Archive for May, 2012

May 15, 2012

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).

 

12:17 PM Permalink
May 10, 2012

Edge Preview 6 is here!

We’ve just released Edge preview 6, which has many significant updates:

  • Built-in lessons: First-timers and newbies, rejoice! We have six new tutorials built right into Edge, to help new users get familiar with the basics.
  • Coding: A new code panel gives you a complete view of the actions code in your project, and the code editor has a new full code mode.
  • Publishing: Easily import your projects into Adobe’s Digital Publishing Suite with InDesign CS6, or Apple iBooks author. We also have a new Static HTML Markup feature for SEO benefits, and Google Chrome Frame support for better fidelity on older browsers.
  • Symbols: You can now copy/paste and import/export symbols from one project to another.
  • Languages: Edge is now available in French, German, Japanese, Italian, and Spanish. Just go to the ‘Help’ menu to change it.
  • Other cool stuff: The Preview in Browser function is now compatible with Adobe Shadow, auto-keyframe mode has been improved, editable time codes are back, and so much more to make Edge more efficient.

Check out this video with Mark Anders, who covers the new features in preview 6.

Get the complimentary download here (you can also get Edge preview 6 as part of the Adobe Creative Cloud).

Also, our new microsite at edge.adobe.com is live!  This is our new “home” where people can learn about Edge, get helpful resources, download samples, and more. Please let us know what you think.

Cheers,
Rich

9:06 PM Permalink