In Edge, you can create triggers that will execute your code at a specific position on a Timeline. 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.
When your code is called from Edge it is passed an Event object "e" that can be used to learn more about the context in which the handler is being called.
Often it is necessary to get at the underlying HTML Elements. This is especially useful when handling a click event. The code to access an underlying element with the name "TextOne" is sym.$("TextOne")[0];
Edge inserts a single JavaScript tag in the <head> of the HTML page that causes the composition to be downloaded progressively.
Note: when debugging (especially in Chrome or Safari) you may need to refresh the browser in other to see all the files used by your composition.
<!--Adobe Edge Runtime-->Important: You must leave the comments intact in order to use the file in Edge.
The xxx_edgePreload.js file pulls in other files needed to run the composition, but does not hold up the page from loading.
Edge animations depend on the Edge timeline and symbol JavaScript libraries. This documentation corresponds with version 0.1.4 of those libraries.
The Edge runtime depends on jQuery. Version 0.1.4 of the Edge Runtime depends on version 1.6.2 of jQuery.
Edge symbol definitions (graphics and timelines) are stored in these files. Edge overwrites these files each time the composition is saved. If you edit these files directly, any information that Edge does not understand may be lost. Formatting changes to these files will be not be maintained when saved from Edge.
Edge uses anonymous functions to provide encapsulation and restriction of variable scope. The entire xxxxxx_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 as "var" and functions using a locally scoped syntax.
The Edge Runtime is organized around the concept of Symbols. A symbol is a set of behaviors, timelines and graphics that are self contained. The stage is a Symbol and there is always a single root stage in every Edge 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 or otherwise change Symbols "on the fly".
//Edge symbol: 'stage'
(function(symbolName) {
//Symbol code
var mySymbolVariable = "hello";
})();
Each Symbol's actions are contained in a JS function closure. This provides encapsulation at the Symbol level.
Actions are bits of JavaScript code (functions) that are executed in response to various types of Events. The binding of an action to an Event, potentially for a given Element can be done either in Edge or in code within xxxx_edgeActions.js. Binding actions in Edge will result in generated code in xxxx_EdgeActions.js. As long as the structure of the generated code and comments is maintained, this code can be hand-edited and later edited in Edge. One thing to note when adding hand-edited code is that it should not be blocking calls like 'alert("Hello");' since this will block the rest of the animation.
Edge exposes the following page level events:
Edge exposes the following composition level events:
Edge 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.
Edge exposes the raw device touch 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 to happen, call preventDefault in your handler code, like this:
e.preventDefault(); These APIs extend a Symbol Definition by adding behaviors which will be inherited by all instances of that Symbol.
Note that xxx_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.
Symbol.bindElementAction ( compId, symbolName, eventName, elementSelector, actionFunction ) Symbol.bindTriggerAction ( compId, symbolName, timelineName, delay, triggerName, actionFunction ) Symbol.bindTimelineAction ( compId, symbolName, timelineName, eventName,actionFunction )
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
Symbol.bindAPI ( compId, symbolName, apiFunctionName, actionFunction ) These functions act on a particular Composition instance, not a Composition Definition.
comp.getStage()
Returns the stage symbol instance for the composition. The stage is a Symbol JavaScript object.
comp.getSymbols ( symbolName )
Returns an array of all instances for the specified Symbol name in the composition. If the symbolName is blank, null or undefined, returns all the symbol instances in the composition.
comp.createSymbolChild ( symbolName, parentSelector, index )
Creates a new symbolInstance or instances as a child of the element(s) specified by parentSelector, at position "index" among its children. If index is null or undefined, the symbol's element is appended to the parent element's children.
Returns the new Symbol instance object.
sym.$(elementName)
Returns the jQuery handle for the given Element name scoped to the Symbol instance
sym.lookupSelector(elementName)
Returns the global DOM selector for the given composition-scoped Element
sym.getComposition()
Return the composition that owns this symbol instance.
sym.getSymbol(elementName)
Returns the Symbol Instance object for the given element if the element is a symbol instance.
sym.getChildSymbols()
Returns the immediate child symbol instance objects of this symbol instance.
sym.setParameter ( paramName, paramValue )
Sets the given parameter to the value provided. paramName should be a string, but paramValue can be any type.
sym.getParameter ( paramName )
Returns the value of the given parameter or undefined if the parameter is not found. paramName should be a String.
sym.play ( position )
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). "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.
sym.playReverse ( position )
Play the default timeline in reverse from the given position given in ms (if the parameter is a number) or as a label (if the parameter is a string). "position" defaults to the current playhead position (which defaults to 0); If play is issued and the playhead is at 0, play from the end of the timeline.
sym.stop ( position )
Stops the default timeline at the position given in milliseconds (if the parameter is a number) or as a label (if the parameter is a string). "position" defaults to the current playhead position.
sym.getPosition ()
Returns the current playhead position of the default timeline.
sym.getDuration ()
Returns the duration of the default timeline.
sym.isPlaying ()
Returns whether the default timeline is playing.
sym.isPlayDirectionReverse ()
Returns whether the default timeline play direction is reverse.
sym.deleteSymbol ( options )
Delete this Symbol Instance as well all of its DOM elements.
The Edge interface is attached to the jQuery object. You can call jQuery.Edge.* or $.Edge if you are in a scope where $ is the same as jQuery.
jQuery.Edge.getComposition( compId )
Return an Edge.Composition object for the given compId (provided one exists).
new jQuery.Edge.Composition ( compId, symbolData, attachments, options ) jQuery.Edge.registerCompositionReadyHandler( compId, handlerFn, options )
Registers a function that is invoked when the Composition with the given compId has been loaded and initialized.
Edge now 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 xxxx_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>
composition_one_edgePreload.js has the composition ID set to EDGE-1010101 at the end of the file:
})(jQuery, jQuery.Edge, "EDGE-1010101");
composition_two_edgePreload.js has the composition ID set to EDGE-8338338 at the end of the file:
})(jQuery, jQuery.Edge, "EDGE-8338338");
By default, Edge makes sure that a stage div is positioned. If the div is not positioned either absolute or relative with CSS, Edge 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.
Edge APIs can be called specifying the composition ID see Edge.getComposition(compId).