Adobe Edge Animate JavaScript API - Version 1.0.0

Companion to Adobe Edge Animate 1.0.0

Updated API Available

Anatomy of an Edge Animate Composition

Edge Runtime

Edge Animate animations depend on the Edge timeline and symbol JavaScript libraries. This documentation corresponds with version 1.0.0 of those libraries.

The HTML page

Edge Animate inserts a single JavaScript tag in the <head> of the HTML page, which causes the composition to be downloaded progressively.

Note: When debugging (especially in Chrome or Safari) you may need to refresh the browser in order to see all the files used by your composition.

<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8"
        src="project-name_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-1689000495 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

Important: You must leave the comments intact in order to use the file in Edge Animate.

JavaScript files

project-name_edgePreload.js

The project-name_edgePreload.js file imports other files needed to run the composition, but does not prevent the page from loading. Do not edit this file directly.

project-name_edge.js

The project-name_Edge.js file contains JSON-format symbol definitions (graphics and timelines). Edge Animate overwrites this files each time you save a composition. It's recommended that you not edit this file directly, as any information Edge Animate does not understand will be lost. Additionally, code-formatting changes you make to this file are not maintained when saved from Edge Animate.

project-name_edgeActions.js

Edge Animate uses anonymous functions to provide encapsulation and restriction of variable scope. The entire project-name_edgeActions.js file is contained in a single anonymous function scope. This provides a place where you can define composition-scoped variables or functions. Be sure to define variables using var and functions using a locally scoped syntax.

DO
var myVar = "This is scoped and should not conflict with other code.";
AVOID
myVar = "this is global and might conflict with other code in the page";
DO
function handleClick() { alert('This is scoped properly and should not conflict with other code.'); }
AVOID
window.handleClick=function() { alert('This might conflict with other code in the page.'); };

Work with elements directly

Often it is necessary to access the underlying HTML Elements. This is especially useful when handling a click event. For example, the code to access an underlying element with the name TextOne is sym.$("TextOne");

Edge Animate Triggers, Events and Actions

Triggers

In Adobe Edge Animate, you can create triggers that execute your code at a specific position on a Timeline. When Edge Animate plays the timeline and reaches the trigger, it executes the specified JavaScript code. You can also bind code to the document, Timeline and specific Elements. Your code is called in the context of a symbol even when handling Element actions. The current symbol is stored in the this variable as well as an argument, sym. You can call symbol APIs like this.play() or sym.play(). The sym variable is more durable when you use things like setTimeout.

Events

When calling your code, Edge Animate passes an Event object, e, which you can use to learn more about the context in which the handler is being called.

Page-level DOM events

Edge Animate exposes the following page level events:

  • scroll
  • keydown
  • keyup
  • resize
  • orientationChange

Composition-level DOM events

Edge Animate exposes the following composition level events:

  • compositionReady fires after the composition is ready to play, but before autoPlay occurs.
  • onError fires when an event handler causes a Javascript error. This event fires for any composition in the page, so in the case of multiple compositions on the page, all compositions' handlers are called. To distinguish between compositions, the compId field of the e argument to the handler is set to the composition ID that caused the error. You can compare this to the compId passed to the actions function closure. Additionally, the e.originalEvent field is set to the event whose handling caused the error.

Element DOM events

Edge Animate exposes the raw desktop browser element events. Only click is always generated on touch devices. Other mouse events will be simulated if the click event is bound. For touch devices, you can also listen for touch events in addition to the mouse events.

  • click
  • dblclick
  • mouseover
  • mousedown
  • mousemove
  • mouseup
  • mouseout

Element touch events

Edge Animate exposes the raw device touch events.

  • touchstart
  • touchmove
  • touchend

jQuery events

Edge exposes the following jQuery events.

  • mouseenter
  • mouseleave
  • focus

You can use mouseenter and mouseleave instead of mouseover and mouseout to avoid interference with other elements. For example, when using mouseover on a symbol, child elements of the symbol may interrupt the mouse event. Use mouseenter instead to avoid the conflict.

Prevent Default Behavior on element events

Some browsers, notably Android versions of WebKit, show highlighting around touched elements if you listen for mouse events. If you don't want this behavior, call preventDefault in your handler code, like this:

e.preventDefault();

Timeline events

  • update
  • play
  • complete
  • stop

Symbol events

  • creationComplete fires immediately after a symbol is created and initialized but before autoPlay occurs.
  • beforeDeletion fires just before a symbol is deleted.

Actions

Actions are JavaScript functions that execute in response to various types of Events. Binding an action to an Event, potentially for a given Element, can be done either in Edge Animate or in code within project-name_edgeActions.js. Binding actions in Edge Animate results in generated code in project-name_EdgeActions.js. As long as you maintain the structure of the generated code and comments, this code can be hand-edited and later edited in Edge Animate. One thing to note when adding hand-edited code is that it should not be in blocking calls, such as 'alert("Hello");' since this blocks the rest of the animation.

Work with symbols

Edge Animate symbols

The Edge Animate Runtime is organized around the concept of symbols. A symbol is a set of self-contained behaviors, timelines, and graphics. The stage is a Symbol and there is always a single root stage> in every Edge Animate composition.

The stage and other symbol instances are attached to an element in the DOM. The child elements of a symbol instance are owned by that symbol and are referred to as Actors.

Symbols are extensible. You can define Actions, bind events to Actions, and otherwise change symbols at runtime.

Symbol closures

The project-name_edgeActions.js file is a set of nested JavaScript closures. To see this, open Edge Animate, create a new project, save it, and open project-name_edgeActions.js in a text editor. It should be similar to the following:

(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes
   
   //Edge symbol: 'stage'
   (function(symbolName) {
   
   
   })("stage");
   //Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-110465113");

Each symbol's actions are contained in a JavaScript function closure. This provides encapsulation at the symbol level. To see this,add a symbol to the stage (for example, draw a rectangle), save the project, and reopen project-name_edgeActions.js.

Note: When using symbol instances and accessing symbol timelines, it’s important to remember that you are handling the element name of the symbol and not the symbol name itself. For example, if your symbol Library has a symbol named "kitten_sym" and in the elements panel there is an instance of that symbol called "kitten_1", you use the name "kitten_1" when accessing the symbol.

Access a symbol timeline from the main stage

To access the timeline of a symbol from the main stage, use the following in your event:

// Play the symbol timeline
sym.getSymbol("symbolName").play();

You can also control elements within a symbol from the main stage. For example:

// Hide the element "kitten_paw" within the symbol "kitten_1"
sym.getSymbol("kitten_1").$("kitten_paw").hide();

Access a symbol timeline from within another symbol

To access another symbol element from within a symbol, prefix the getSymbol call with sym.getComposition().getStage(), as the following example shows:

// Get the stage from the composition level, get the symbol, and play the timeline
sym.getComposition().getStage().getSymbol("symbolName").play();

To access a nested symbol timeline from within a symbol, nest the getSymbol call, as the following example shows:

// Get the stage from the composition level, get the parent symbol, then get the nested symbol timeline
sym.getComposition().getStage().getSymbol("symbolName1").getSymbol("symbolName2").play(0);

You can access elements from within a symbol timeline from within another symbol. For example:

// Get the symbol element "kitten_1" and hide the element "kitten_paw"
sym.getComposition().getStage().getSymbol("kitten_1").$("kitten_paw").hide();

Access a nested symbol timeline from the main stage

To access the timeline of a nested symbol, use the following in your event:

sym.getSymbol("symbolName").getSymbol("nestedElementName").play();

You can also access elements within a nested symbol from the stage. For example:

// Hide the element "paw" from within a nested symbol
sym.getSymbol("kitten_1").getSymbol("kitten_paw").$("paw").hide();

Access a nested symbol timeline from another symbol

To access the timeline of a nested symbol from another symbol, use the following in your event:

sym.getComposition().getStage().getSymbol("symbolName").getSymbol("nestedElementName").play();

You can also access elements within a nested symbol from the stage. For example:

// Hide the element "paw" from within a nested symbol
sym.getComposition().getStage().sym.getSymbol("kitten_1").getSymbol("kitten_paw").$("paw").hide();

Use symbol elements

To access an element associated with a symbol:

sym.getSymbolElement();

This returns the jQuery handle for the element. For example:

sym.getSymbolElement().hide();

Another example:

// Create a new symbol "kitten_paw" on the Stage
sym.createChildSymbol("kitten_paw", "Stage");
// Reference the symbol
var kitten_sym = kitten_paw.getSymbolElement();
// Animate the opacity to 0
kitten_sym.animate({opacity: 0}, 500);

Get symbol children

Use the following to target all direct child symbol instances of a parent:

sym.getChildSymbols();

For example, if you set the following in an event on stage level, all direct symbol children of the stage will be affected while grandchildren remain unaltered:

// Set the child symbols variable
var childSymbols = sym.getChildSymbols();
for(var i=0; i<childSymbols.length; i++) // Return the number of direct children
   childSymbols[i].stop(); // Stop all of the children

Get symbol parents

To control a parent symbol, use the following:

sym.getParentSymbol();

This will get the parent symbol of a child. For example:

I have a symbol hierarchy which looks like this: Stage > kitten_sym > kitten_paw. The below code is placed a click event in “kitten_paw”.

// Stop the parent symbol timeline of "kitten_sym"
sym.getParentSymbol().stop();

Create symbols dynamically

To create a child symbol, use the following:

sym.createChildSymbol();

This takes the parent element name and returns a single symbol object. For example:

// Create a child symbol instance of "kittenpaw_sym" inside the element "kitten".
// Note: "kitten_sym" is the name as it appears in the symbol library, not the elements panel.
sym.createChildSymbol("kittenpaw_sym", "kitten")

Another example:

// Create an instance of symbol kitten_paw under every div element that's a direct child of the body element.
sym.getComposition().createSymbolChild(("kitten_paw", "body > div");

JavaScript API

Symbol and Composition Extension

These APIs extend a symbol Definition by adding behaviors, which are inherited by all instances of that symbol.

Note that project-name_edgeActions.js defines aliases "Symbol" for Edge.Symbol and "Composition" for Edge.Composition. These aliases are used in this section for brevity.

Important: The action functions called when the event fires will have "this" set to the symbol instance. For DOM, timeline and trigger events, the action function takes arguments "sym", which is the symbol instance, and "e" which is a jQuery event. The jQuery event object will have fields set depending upon the actual event type.

bindElementAction

Symbol.bindElementAction ( compId, symbolName, elementSelector, eventName, actionFunction )

  • compId - The composition ID, passed through the project-level closure. For example, "EDGE-519469".
  • symbolName - The symbol ID, passed through the symbol closure.
  • elementSelector - The element selector. For example, "${_Rectangle}"
  • eventName - The event. For example, click.
  • actionFunction - The JavaScript function that executes when the event fires.

Description: Associates a function call with an action.

Example

AdobeEdge.Symbol.bindElementAction(compId, "stage", "document", "click", function(sym, e) { window.open("http://www.mysite.com", "_self"); });

bindTriggerAction

Symbol.bindTriggerAction ( compId, symbolName, timelineName, delay, actionFunction )

  • compId - The composition ID, passed through the project-level closure. For example, "EDGE-519469".
  • symbolName - The symbol ID, passed through the symbol closure.
  • timelineName - The timeline name.
  • delay - The delay.
  • actionFunction - The JavaScript function that executes when the trigger action fires.

Description: Dynamically creates a trigger for a specified symbol.

Example

var time = sym.getLabelPosition("myLabel");
Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", time, function(sym, e) {
   sym.stop();
});

bindTimelineAction

Symbol.bindTimelineAction ( compId, symbolName, timelineName, eventName,actionFunction )
  • compId - The composition ID, passed through the project-level closure. For example, "EDGE-519469".
  • symbolName - The symbol ID, passed through the symbol closure.
  • timelineName - The timeline name.
  • eventName - The event. For example, click.
  • actionFunction - The JavaScript function that executes when the trigger action fires. For stop, complete, and play events, the action function takes no arguments. For update events, the argument is elapsed. the milliseconds elapsed since the start of the timeline's playing.

Description: Defines a function that executes when the specified timeline event is triggered.

Example

Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "play", function(sym, e) {
   var adobesound=new Audio();
   adobesound.src="sound/SleepAway.mp3";
   sym.setVariable("adobesound", adobesound);
   this.getSymbol("volplus").stop(0);
   this.getSymbol("volminus").stop(0);
   adobesound.volume=0.1;

   $(adobesound).bind("ended",function(){
      adobesound.play();
   });
});

bindSymbolAction

Symbol.bindSymbolAction ( compId, symbolName, eventName, actionFunction )
  • compId - The composition ID, passed through the project-level closure. For example, "EDGE-519469".
  • symbolName - The symbol ID, passed through the symbol closure.
  • eventName - The event. For example, click.
  • actionFunction - The JavaScript function that executes when the trigger action fires.

Description: Dynamically create an event handler for a specified symbol.

Example

(function(symbolName) {
   Symbol.bindElementAction(compId, symbolName, "${_button}", "click", function(sym, e) {
   /* Set the creationComplete and then instantiate
      the symbol. If this works successfully, the symbol should have a green
      rectangle instead of a gray one. Note that the symbol's autoplay is
      set to false so that I don't get the green just by waiting. */
   // Need the composition ID in order for this to work
   var compId = sym.getComposition().getCompId();
   // Set up the creationComplete event
   Symbol.bindSymbolAction(compId, "mySymbol", "creationComplete", function(sym, e) {
      sym.stop("green");
   });
   // now instantiate the symbol
   var mySymbolObject = sym.createChildSymbol("mySymbol", "Stage");
});

Composition Instance Functions

These functions act on a particular Composition instance, not a Composition Definition.

getStage

comp.getStage()

Description: Returns the stage symbol instance for the composition. The stage is a symbol JavaScript object.

Example

// Get the stage from the composition level, get the symbol, and play the timeline
sym.getComposition().getStage().getSymbol("symbolName").play();

getSymbols

comp.getSymbols ( symbolName )
  • symbolName - The symbol ID, passed through the symbol closure. If symbolName is blank, null or undefined, returns all the symbol instances in the composition.

Description: Returns an array of all instances for the specified symbol name in the composition.

Example

var EdgeSym = function(selector){
   var list,cp = sym.getComposition();
   if(selector.substr(0,2)=="*="){
      selector = selector.substr(2);
      list = [];
      var syms = cp.getSymbols();
      for(var j=0;j<syms.length;j++){
         if(syms[j].getSymbolTypeName().indexOf(selector)>-1){
            list.push(syms[j]);
         }
      }
      }else{
   list = (selector=="*")?cp.getSymbols():cp.getSymbols(selector);
   }

createSymbolChild

comp.createSymbolChild ( symbolName, parentSelector, index )
  • symbolName - The symbol ID, passed through the symbol closure.
  • parentSelector - a global jQuery selector or handle for any html element(s) that can have child elements.
  • index - The index. If index is null or undefined, Edge Animate appends the symbol's element to the parent element's children.

Description: Creates a new symbol instance or instances as a child of the element(s) specified by parentSelector, at position index among its children.

Returns an array of the new symbol instances created under each of the element(s) specified by the parentSelector.

Example

// A simple symbol placed on the stage to use as a button. It contains a div with the id Rectangle01
var button_s = sym.getSymbol("Symbol01");
button_s.$("Rectangle01").bind("click", function() {
   // Symbol02 is another simple symbol that is stored in a library. This is the symbol dynamically added to the stage.
   // Store a reference to that symbol in the var symbol02_s.
   var symbol02_s = sym.composition.createSymbolChild("Symbol02", sym.$("stage"))[0];
   // Convert/store a reference to the symbol as a string representing the element name of the symbol instance.
   var symbol02_e = symbol02_s.getSymbolElementNode();

   // Now can use that element string and convert it to a DOM element to use with jQuery to call its css properties
   // and adjust whatever you'd like, including its position property
   sym.$(symbol02_e).css({"position":"absolute", "top":"100px", "left":"100px"});
});

Symbol Instance

$

sym.$(elementName)
  • elementName - Element for which the jQuery handle is returned.

Description: Returns the jQuery handle for the given Element name scoped to the symbol instance.

Example

sym.$("intro_Text1").hide();

lookupSelector

sym.lookupSelector(elementName)
  • elementName - The element for which the global DOM selector is returned.

Description: Returns the global DOM selector for the given composition-scoped Element.

Example

$(sym.lookupSelector("Text1")).html("Some new text");

getComposition

sym.getComposition()

Description: Returns the composition that owns this symbol instance.

Example

// Get the stage from the composition level, get the symbol, and play the timeline
sym.getComposition().getStage().getSymbol("symbolName").play();

getSymbol

sym.getSymbol(elementName)
  • elementName - The element for which the symbol instance object is returned.

Description: Returns the symbol Instance object for the given element if the element is a symbol instance.

Example

var eur_syvar = sym.getSymbol("aftxt_sym");
eur_sym.play();

createChildSymbol

sym.createChildSymbol(symbolName, parentElementName, index )
  • symbolName - The name of the symbol definition.
  • parentElementName - The name of the destination element for the instance of this symbol.
  • index - Z-index of the new instance among the children of parentElementName.

Description: Creates a new symbol instance as a child of the symbol-scoped element specified by parentElementName, at position index among its children. If index is null or undefined, the symbol is appended to the parent element's children.

Returns a symbol instance object created under parentElementName in symbol scope.

Example

// Create a new symbol "kitten_paw" on the Stage
sym.createChildSymbol("kitten_paw", "Stage");
// Reference the symbol
var kitten_sym = kitten_paw.getSymbolElement();
// Animate the opacity to 0
kitten_sym.animate({opacity: 0}, 500);

getChildSymbols

sym.getChildSymbols()

Description: Returns the immediate child symbol instance objects of this symbol instance.

Example

// Set the child symbol's variable
var childSymbols = sym.getChildSymbols();
for(var i=0; i<childSymbols.length; i++) // Return the number of direct children
childSymbols[i].stop(); // Stop all of the children

getParentSymbol

sym.getParentSymbol()

Description: Returns the immediate parent symbol instance object of this symbol instance.

Example

// Stop the parent symbol timeline of "kitten_sym"
sym.getParentSymbol().stop();

getSymbolElement

sym.getSymbolElement()

Description: Returns the jQuery handle to the DOM element for this symbol instance object.

Example

// Create a new symbol "kitten_paw" on the Stage
sym.createChildSymbol("kitten_paw", "Stage");
// Reference the symbol
var kitten_sym = kitten_paw.getSymbolElement();
// Animate the opacity to 0
kitten_sym.animate({opacity: 0}, 500);

setVariable

sym.setVariable ( varName, varValue )
  • varName String specifying he variable to be set.
  • varValue Value to be set. Can be of any type.

Description: Sets the given parameter to the value provided.

Formerly sym.setParameter();

Example

// can set a variable to any data type, including an array or a function
sym.setVariable("myNum", 0);
sym.setVariable("myBool", true);
var arr = new Array("foo","bar","baz");
sym.setVariable("myArr", arr);
function localFunction () {
   console.log("myFunction called");
}
sym.setVariable("myFunction", localFunction);

getVariable

sym.getVariable ( varName )

  • varName String specifying the variable to be retrieved.

Description: Returns the value of the given variable or undefined if the variable is not found.

Formerly sym.getParameter();

Example

mylocalVar = sym.getVariable("myVar");

play

sym.play ( position, executeTriggers )
  • position defaults to the current playhead position (which defaults to 0); If play is issued and the playhead is at the end of the timeline, play from 0.
  • executeTriggers can be true, false, or null and indicates whether triggers at the starting position are fired:
    • true - all triggers at the starting position are fired.
    • false - no triggers are fired at the start point.
    • null, undefined or omitted - triggers are fired at the starting position only if the timeline is being played for the first time, or if the starting position is different than the current playhead position as returned by getPosition().

Description: Play the default timeline from the given position given in ms (if the parameter is a number) or as a label (if the parameter is a string).

Example

sym.getSymbol("symbolName").getSymbol("nestedElementName").play();

playReverse

sym.playReverse ( position, executeTriggers )
  • position defaults to the current playhead position (which defaults to 0); If play is issued and the playhead is at the end of the timeline, play from the end.
  • executeTriggers can be true, false, or null and indicates whether triggers at the starting position are fired:
    • true - all triggers at the starting position are fired.
    • false - no triggers are fired at the start point.
    • null, undefined or omitted - triggers are fired at the starting position only if the timeline is being played for the first time, or if the starting position is different than the current playhead position as returned by getPosition().

Description: Play the default timeline in reverse from the given position given in milliseconds (if position is a number) or as a label (if position is a string).

Example

// Assumes the following trigger on the main timeline: sym.setParameter("played", "false");
var test1_play = sym.getSymbol("test1");
var foo = sym.getParameter("played");

if (foo == "false"){

   test1_play.play();
   sym.setParameter("played", "true");
}
else if (foo == "true") {
   test1_play.playReverse();
   sym.setParameter("played", "false");
}

stop

sym.stop ( position )
  • position (optional) Playhead position to stop at. Specify either milliseconds (if position is a number) or a label (if the parameter is a string). Defaults to the current playhead position.

Description: Stops the default timeline at the specified position.

Example

// Set the child symbol's variable
var childSymbols = sym.getChildSymbols();
for(var i=0; i<childSymbols.length; i++) // Return the number of direct children
childSymbols[i].stop(); // Stop all of the children

getPosition

sym.getPosition ()

Description: Returns the current playhead position of the default timeline. Returns -1 if the timeline has never been played.

Example

if (sym.getPosition() == 0) {
   sym.play(0);
}
else {
 sym.play(500);
}

getDuration

sym.getDuration ()

Description: Returns the duration of the default timeline.

Example

// is our main timeline longer than three seconds?
var timelineLength = sym.getDuration();
if (timelineLength > 3000) {
   console.log("yes, the timeline length is over three second long");
}
else {
   console.log("no, the timeline length is less than three seconds long");
}

isPlaying

sym.isPlaying ()

Description: Returns a boolean that indicates whether the default timeline is playing.

Example

if (sym.isPlaying()) {
   console.log("Timeline is currently playing.");
}

isPlayDirectionReverse

sym.isPlayDirectionReverse ()

Description: Returns a boolean that indicates whether the default timeline play direction is reverse.

Example

if (sym.isPlayDirectionReverse()) {
   console.log("playing backwards through the timeline");
}

getLabelPosition

sym.getLabelPosition (aLabel)

Description: Returns the position of the label aLabel in the default timeline, or undefined if aLabel is not a label on the timeline. Behavior is not guaranteed if aLabel is not a string.

Example

// For a label "myLabel," which is placed on the timeline at 2000ms:
var myLabelLocation = sym.getLabelPosition("myLabel");
console.log("my label location: " + myLabelLocation);

deleteSymbol

sym.deleteSymbol ( options )

Description: Delete this Symbol Instance as well all of its DOM elements.

Example

// For the symbol instance "myElement":
sym.getSymbol("myElement").deleteSymbol();

Edge

The Edge.* interface is available to use, but you should reference the global AdobeEdge variable if attempting to access the object from outside of the Edge Animate runtime.

Edge.getComposition

Edge.getComposition( compId )

Description: Return an Edge.Composition object for the given compId (provided one exists).

Example

function setDatepicker(){
   var comp = Edge.getComposition("EDGE-966604542");
   var stage = comp.getStage();
   console.log("Stage: " + stage);
   $(stage.lookupSelector("stage")).append("<input type='text' name='date' id='date' />");
   var sel = stage.lookupSelector("date");
   $("#date").css({"position":"absolute", "top":0, "left":200});
   $("#date").datepicker();
}

new Edge.Composition

new Edge.Composition ( compId, symbolData, attachments, options )

Edge.registerCompositionReadyHandler

Edge.registerCompositionReadyHandler( compId, handlerFn, options )

Description: Registers a function that is invoked when the Composition with the given compId has been loaded and initialized.


Advanced Topics

Multiple Compositions in a Page

Edge Animate support multiple compositions in a single HTML page. As of Edge Preview 4, opening a page with more than one composition in it is not supported, but pages can be hand-authored to use multiple compositions.

Each project-name_edgePreload.js file causes the definition for a single composition to be included in the page. You can include multiple compositions by including multiple composition preload JS files. Remember to move any images, CSS or other resources any of the compositions might need.

<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="composition_one_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" src="composition_two_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->

Each composition requires a stage Element to attach to:

<div id="stageOne" class="EDGE-1010101"></div>
<div id="stageTwo" class="EDGE-8338338"></div>

Note: It is important to rename the stage IDs in the HTML markup with a unique name to avoid conflicts.

In this example...

composition_one_edgePreload.js has the composition ID set to EDGE-1010101 at the end of the file:

})(jQuery, AdobeEdge, "EDGE-1010101");

composition_two_edgePreload.js has the composition ID set to EDGE-8338338 at the end of the file:

})(jQuery, AdobeEdge, "EDGE-8338338");

Position div elements

By default, Edge Animate makes sure that a stage div is positioned. If the div is not positioned either absolute or relative with CSS, Edge Animate makes it "position: relative" so all of its elements are animated relatively to the stage, rather than the page. You will need to use either flow-based or absolute position CSS to put your stages where you want them in your page.

Call Edge Animate APIs on a different composition

Edge Animate APIs can be called specifying the composition ID see Edge.getComposition(compId).

Use the bootstrapCallback function to manage multiple compositions

The Edge Animate runtime provides the AdobeEdge.bootstrapCallback function, which it calls when an Edge composition is loaded and ready to play. You can then code the AdobeEdge.bootstrapCallback function in your HTML page to perform the appropriate processing.

The following example rotates three Edge Animate compositions:

...
<script>
var wrapperCurrentPage = "PAGE_A";
var loadedComps = {};
AdobeEdge.bootstrapCallback(function(compId) {
   loadedComps[compId] = AdobeEdge.getComposition(compId);
   // now it is safe to call into the and bind to things like...
   AdobeEdge.Symbol.bindTimelineAction(compId, "stage", "Default Timeline", "complete", function(sym, e) {
      //loop
      if(compId == wrapperCurrentPage) {
         if (compId == "PAGE_A") {
            wrapperCurrentPage = "PAGE_B";
            $("#StageA").hide();
            $("#StageB").show();
         }
         else if (compId == "PAGE_B") {
            wrapperCurrentPage = "PAGE_C";
            $("#StageB").hide();
            $("#StageC").show();
         }
         else {
            wrapperCurrentPage = "PAGE_A";
            $("#StageC").hide();
            $("#StageA").show();
         }

         if(loadedComps[wrapperCurrentPage]) {
            loadedComps[wrapperCurrentPage].getStage().play(0);
         }
         else {
            //it will play itself when loaded
         }
      }
   });
}); </script> ...

For a complete example, see Adobe Principal Scientist Josh Hatwich's Bootstrapping Edge Compositions blog post.