Adobe Edge Animate CC 2014
JavaScript API 4.0.1

Anatomy of an Edge Animate Composition

Edge Animate Runtime

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

You can download an un-minified version of the Animate runtime and preloader for your reference here. It is provided under a BSD-type license (as-is) for debugging, advanced scripting, general curiosity, or however you choose to use it. Use and modification of these files are neither supported nor covered by any tier of Adobe support -- please exercise discretion and use at your own risk. The Animate runtime and preloader files are covered under this license.

Download the unminified Edge Animate runtime.

CDN Hosting

Using the Adobe Content Distribution Network (CDN) is a great way to speed up Animate composition delivery. Compositions using the Adobe CDN all share a single URL for jQuery and the Edge Runtime. The browser caches the runtime, so the user only downloads the library once no matter how may Animate compositions they view, even if compositions are on different sites and produced by different authors.

Don't use the CDN if your composition needs to run without an Internet connection or if you want to use your own hosting exclusively.

The Animate Runtime CDN uses the following URL:

<script type="text/javascript" charset="utf-8"   src="http://animate.adobe.com/runtime/4.0.1/edge.4.0.1.min.js"></script>

The HTML page

Edge Animate inserts a single JavaScript tag in the of the HTML page, which allows the composition to download 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 dependent files needed to run the composition (including JavaScript files, images,audio and video), 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 file each time you save a composition while using the application. It's recommended you only edit this file with an understanding of the Javascript language, as any information Edge Animate does not understand will be lost.

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"); 

Accessing imported HTML content through actions can be done by using sym.$("#myId"); to target the ID or class of your element. You can also use this method to target DOM elements which live outside of the Edge Animate composition. For example, sym.$("footer");

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. For example, sym.$(e.target).hide(); will hide the element on action without needing to refer to the element name.

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  comId  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. Touch events are quicker to respond on mobile devices as opposed to click events, and enable multi-touch (where supported).

  •  touchstart 
  •  touchmove 
  •  touchend 

Edge Animate exposes convenient swipe events. Avoid listening to swipe events for both parents and children, as it can lead to the event firing twice on the parent if not handled properly in by the child.

  •  swipeleft 
  •  swiperight 
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 Symbol = Edge.Symbol; // alias for commonly used Edge class        //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 var kitten_paw = 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

Extend symbols and compositions

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 the alias "Symbol" for Edge.Symbol. This alias is 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 name, as would be 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 symbol instances for the specified symbol name in the composition. Returns an empty list if no symbol instances are found for symbolName. If symbolName is blank, null or undefined, and the composition has loaded, this will always contain at least the symbol instance for the stage.

Example

// Get all the symbol instances in the composition, // then get just the instances of "Symbol_1" var list, listOfSymbol_1,cp = sym.getComposition(); list = cp.getSymbols(); listOfSymbol_1 = cp.getSymbols("Symbol_1");

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 functions

$

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_sym = 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 var kitten_paw = 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 var kitten_paw = 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.setVariable("played", "false"); var test1_play = sym.getSymbol("test1"); var foo = sym.getVariable("played"); if (foo == "false"){    test1_play.play();    sym.setVariable("played", "true"); } else if (foo == "true") {    test1_play.playReverse();    sym.setVariable("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();

playAll

sym.playAll()

Description: If playAll is issued to a symbol it will play the default timeline of the symbol and all its children.

Example

// For the symbol instance "myElement": sym.getSymbol("myElement").playAll();
// For playing all symbols on stage sym.playAll();

stopAll

sym.stopAll()

Description: If stopAll is issued to a symbol it will stop the default timeline of the symbol and all its children.

Example

// For the symbol instance "myElement": sym.getSymbol("myElement").stopAll();
// To stop playing all symbols on stage sym.stopAll();

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 (deprecated)

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

Edge.registerCompositionReadyHandler (deprecated, use Bootstrap Callbacks)

Edge.registerCompositionReadyHandler( compId, handlerFn, options )

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

Audio

Edge Animate uses the native audio properties defined by the HTML audio specification. Below is a reference on how to use these methods and properties to control your audio elements within Animate.

Audio elements use standard JavaScript calls on objects, requiring an array to be defined to access the base HTML element. This enables you to directly access the properties and methods for the audio element.

Example

sym.$("my_audio_element")[0].play();

Any HTML audio method or property can be used to control an audio element within Animate. The following is a description of the audio properties available from the code snippets in the actions popup. For a full list of properties, visit here.

play

sym.$("my_audio_element")[0].play();

Description: Plays the audio track whether it's paused or already playing.

pause

sym.$("my_audio_element")[0].pause();

Description: Pause the audio track.

Toggle Pause

var audio = sym.$("my_audio_element")[0]; if (audio.paused) {    audio.play(); } else {    audio.pause(); }

Description: Bind this to a user action to create a play/pause toggle. For example, on "click" this element will toggle the action state as play or pause.

currentTime

sym.$("my_audio_element")[0].currentTime = 2;

Description: Set or return the audio track to the specified time code (in seconds).

Replay Audio

var audio = sym.$("my_audio_element")[0]; audio.currentTime = 0; if (audio.paused) {    audio.play(); }

Description: Replays audio from the beginning, regardless of current playing state.

muted

sym.$("my_audio_element")[0].muted = true;

Description: Sets the audio muted property to true (boolean). Set to false to unmute.

Toggle Mute

var audio = sym.$("my_audio_element")[0]; audio.muted = !audio.muted;

Description: Bind this to a user action to create a mute toggle. For example, on "click" this element will toggle the mute as true or false.

playbackRate

sym.$("my_audio_element")[0].playbackRate = 0.5;

Description: Sets the playback speed of the audio track to 50%. 1.0 (100%) is normal speed.

volume

sym.$("my_audio_element")[0].volume = 0.2;

Description: Sets or returns the volume of the audio track. 1.0 is the highest volume, 0.0 is silent.

Video

Edge Animate uses the native video properties defined by the HTML video specification. Below is a reference on how to use these methods and properties to control your video elements within Animate.

Video elements use standard JavaScript calls on objects, requiring an array to be defined to access the base HTML element. This enables you to directly access the properties and methods for the video element.

Example

sym.$("my_video_element")[0].play();

Any HTML video method or property can be used to control an video element within Animate. The following is a description of the video properties available from the code snippets in the actions popup. For a full list of properties, visit here.

play

sym.$("my_video_element")[0].play();

Description: Plays the video track whether it's paused or already playing.

pause

sym.$("my_video_element")[0].pause();

Description: Pause the video track.

Toggle Pause

var video = sym.$("my_video_element")[0]; if (video.paused) {    video.play(); } else {    video.pause(); }

Description: Bind this to a user action to create a play/pause toggle. For example, on "click" this element will toggle the action state as play or pause.

currentTime

sym.$("my_video_element")[0].currentTime = 2;

Description: Set or return the video track to the specified time code (in seconds).

Replay Video

var video = sym.$("my_video_element")[0]; video.currentTime = 0; if (video.paused) {    video.play(); }

Description: Replays video from the beginning, regardless of current playing state.

muted

sym.$("my_video_element")[0].muted = true;

Description: Sets the video muted property to true (boolean). Set to false to unmute.

Toggle Mute

var video = sym.$("my_video_element")[0]; video.muted = !video.muted;

Description: Bind this to a user action to create a mute toggle. For example, on "click" this element will toggle the mute as true or false.

Mute All Video

$("video").prop("muted", true);

Description: Mute all the video tracks in the composition. Set muted to false to toggle off.

Skip Video Forward

var video = sym.$("my_video_element")[0]; video.currentTime = video.currentTime + ((10/100) * video.duration);

Description: Skip a video track forward by 10% of its total duration.

Skip Video Backward

var video = sym.$("my_video_element")[0]; video.currentTime = video.currentTime + ((-10/100) * video.duration);

Description: Skip a video track backward by 10% of its total duration.

Play Video FullScreen

var video = sym.$("my_video_element")[0]; if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.msRequestFullscreen) { video.msRequestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } video.play();

Description: Play the video track in FullScreen.

playbackRate

sym.$("my_video_element")[0].playbackRate = 0.5;

Description: Sets the playback speed of the video track to 50%. 1.0 (100%) is normal speed.

volume

sym.$("my_video_element")[0].volume = 0.2;

Description: Sets or returns the volume of the video track. 1.0 is the highest volume, 0.0 is silent.

Advanced Topics

Multiple Compositions in a Page

The Edge Runtime supports multiple compositions in a single HTML page, but as of Edge Animate 2.0, opening a page with more than one composition in Animate is not supported. To get multiple compositions in a page the .html file needs to be hand-edited per the following instructions.

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.

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.

Coordinated Preloading

The Edge Animate preloader is the first content that is loaded into the browser. The preloader renders itself and then loads the rest of the scripts and assets needed to run the composition. Once everything is loaded the preloader hides itself and plays the composition. In certain situations, for example, when running in an IFrame, you may want to coordinate preloader behavior with external components.

In order to trigger coordinated asset loading you must be working with content produced with Edge Animate 1.5 or later. Add the following code to the head of the page before the Animate preloader script include.

... <script>    window.AdobeEdge = window.AdobeEdge || {};    window.AdobeEdge.bootstrapLoading = true; </script> <!--Adobe Edge Runtime--> <script type="text/javascript" charset="utf-8" src="project-name_edgePreload.js"></script>

Once bootstrapLoading has been elected and the preloader script has been included, the composition waits for you to issues the following calls before displaying the composition:

  • loadResources() - Causes the Edge Animate preloader to begin downloading the scripts and assets the composition requires.
  • playWhenReady() - The preloader continues to display until all the required assets and scripts are loaded and playWhenReady has been called.
... AdobeEdge.loadResources(); ... AdobeEdge.playWhenReady();