Adobe Edge Animate CC 2014
JavaScript API 5.0

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 5.0 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 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/5.0.1/edge.5.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="edge_includes/edge.5.0.1.min.js"></script>
					  <style>
					    .edgeLoad-EDGE-1689000495 { visibility:hidden; }
					  </style>
					  <script>
					  AdobeEdge.loadComposition('project-name', 'EDGE-1689000495', {
					  		scaleToFit: "none",
					  		centerStage: "none",
					  		minW: "0",
					  		maxW: "undefined",
					  		width: "550px",
					  		height: "400px"
					  	}, {dom: [ ]}, {dom: [ ]});                    
                      </script>
					<!--Adobe Edge Runtime End-->

The last two parameters are the preloader and downlevel stage DOM respectively.

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

JavaScript files

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.

Edge Animate Runtime & jQuery

Earlier versions of Edge Animate Runtime used to depend on jQuery. This dependency has been removed in version 5.0.1. However, Edge Animate runtime provides a basic implementation of $, exposed as AdobeEdge.$, with support of basic jQuery selectors and some of the commonly used jQuery APIs as listed below:

List of jQuery equivalent APIs available directly in Edge Animate runtime

addClass
append
attr
bind
css
each
empty
eq
get
hasClass
height
hide
html
is
offset (Only getter, no setter)
parent
parents
remove
removeClass
show
text
trigger
unbind
width

If you include jQuery as an external script in your composition, then Edge Animate Runtime redefines AdobeEdge.$ to jQuery and starts using the same internally. Thus any of the Edge Animate APIs which returns a wrapper, will now return a wrapper of type AdobeEdge.$. However, if jQuery is included in the composition as an external script, or is loaded before the edge runtime in the html page then the APIs will return a jQuery wrapper.

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

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.

Change from earlier versions:

There is a change in the element selector format. Earlier, we used to prepend an '_' before the element name, in the new format that is not required. For eg, for an element with name = “RoundRect”,

Old selector format: ${_RoundRect}
New selector format: ${RoundRect}

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 AdobeEdge.$ handle for the element. However, if jQuery was added as an external script in the composition or is loaded before Edge Animate Runtime then it returns a jQuery handle. You can use any of the APIs documented above which are available on AdobeEdge.$ without using jQuery on the result. For example:

sym.getSymbolElement().hide();

Note: If you have added jQuery as an external dependency in the Edge Composition, then sym.getSymbolElement() will return a jQuery wrapper, as AdobeEdge.$ gets redefined to jQuery in such cases. You can use any of the jQuery APIs on the result in this case.

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();
					// Hide the element
					kitten_sym.hide();

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 with a class name 'container'.
				sym.getComposition().createSymbolChild("kitten_paw", "div.container");

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, play.
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 AdobeEdge.$ handle is returned. If jQuery is included in the composition as an external script, or is loaded before the edge runtime in the html page then the APIs will return a jQuery wrapper.

Description: Returns the AdobeEdge.$ 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();
                  // Hide the element
                  kitten_sym.hide();

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 AdobeEdge.$ handle to the DOM element for this symbol instance object. If jQuery is included in the composition as an external script, or is loaded before the edge runtime in the html page then the APIs will return a jQuery wrapper.

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();
                  // Hide the element
                  kitten_sym.hide();

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);
                      AdobeEdge.$(stage.lookupSelector("stage")).append("<input type='text' name='date' id='date' />");
                      var sel = stage.lookupSelector("date");
                      AdobeEdge.$("#date").css({"position":"absolute", "top":0, "left":200});
                      AdobeEdge.$("#date").datepicker();
                   }

Edge.loadComposition


					  AdobeEdge.loadComposition('project-name', 'EDGE-8338338', {
					  		scaleToFit: "none",
					  		centerStage: "none",
					  		minW: "0",
					  		maxW: "undefined",
					  		width: "550px",
					  		height: "400px"
					  	}, {dom: [ ]}, {dom: [ ]});                    
                      </script>

Description:Initiates the loading of an Edge.Composition object for the given project name(provided one exists). The other parameters are the composition id, options, preloader DOM and the downlevel stage DOM.

new Edge.Composition (deprecated)

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

Edge.bootstrapCallback

Edge.bootstrapCallback( handlerFn)

Description: Registers a function that is invoked when the Composition with the given compId has been loaded and initialized. Please note that we will need to call AdobeEdge.loadComposition to start the loading of a composition and get the bootstrapCallback for the same.

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 a 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) {
   sym.$(video.play();
} else {
   sym.$(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 AdobeEdge.loadComposition call causes the definition for a single composition to be included in the page. You can include multiple compositions by multiple calls to AdobeEdge.loadComposition for multiple compositions. Remember to move any images, CSS or other resources any of the compositions might need. The example below is loading the edge runtime from the CDN, please change it to an appropriate local URL if you need to.

<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/5.0.1/edge.5.0.1.min.js"></script>
<!--Adobe Edge Runtime End-->

We need to call AdobeEdge.loadComposition for each composition which we want to be loaded.


                      <script>
					  AdobeEdge.loadComposition('composition_one', 'EDGE-1010101', {
					  		scaleToFit: "none",
					  		centerStage: "none",
					  		minW: "0",
					  		maxW: "undefined",
					  		width: "550px",
					  		height: "400px"
					  	}, {dom: [ ]}, {dom: [ ]});                    
					  
					  AdobeEdge.loadComposition('composition_two', 'EDGE-8338338', {
					  		scaleToFit: "none",
					  		centerStage: "none",
					  		minW: "0",
					  		maxW: "undefined",
					  		width: "550px",
					  		height: "400px"
					  	}, {dom: [ ]}, {dom: [ ]});                    
                      </script>

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_edge.js has the composition ID set to EDGE-1010101 at the end of the file:

})("EDGE-1010101");

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

})("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 Bootstrapping Edge Compositions blog post.

Adobe Edge Animate CC 2014 JavaScript API 5.0

Anatomy of an Edge Animate Composition

Edge Animate Runtime

CDN Hosting

The HTML page

JavaScript files

project-name_edge.js

project-name_edgeActions.js

Edge Animate Runtime & jQuery

List of jQuery equivalent APIs available directly in Edge Animate runtime

Work with elements directly

Edge Animate Triggers, Events and Actions

Triggers

Events

Page-level DOM events

Composition-level DOM events

Element DOM events

Element touch events

jQuery events

Prevent Default Behavior on element events

Timeline events

Symbol events

Actions

Work with symbols

Edge Animate symbols

Symbol closures

Access a symbol timeline from the main stage

Access a symbol timeline from within another symbol

Access a nested symbol timeline from the main stage

Access a nested symbol timeline from another symbol

Use symbol elements

Get symbol children

Get symbol parents

Create symbols dynamically

JavaScript API

Extend symbols and compositions

bindElementAction

bindTriggerAction

bindTimelineAction

bindSymbolAction

Composition Instance Functions

getStage

getSymbols

createSymbolChild

Symbol Instance functions

$

lookupSelector

getComposition

getSymbol

createChildSymbol

getChildSymbols

getParentSymbol

getSymbolElement

setVariable

getVariable

play

playReverse

stop

getPosition

getDuration

isPlaying

isPlayDirectionReverse

getLabelPosition

deleteSymbol

playAll

stopAll

Edge

Edge.getComposition

Edge.loadComposition

new Edge.Composition (deprecated)

Edge.bootstrapCallback

Audio

play

pause

Toggle Pause

currentTime

Replay Audio

muted

Toggle Mute

playbackRate

Adobe Edge Animate CC 2014
JavaScript API 5.0