Edge运行时
Edge Animate动画依赖于Edge的时间线和元件、JavaScript库。该文档与这些库中的1.5.0版本相对应。
HTML页面
Edge动画在HTML页面中插入一个独立的JavaScript标签，这会让构成的动画合成在浏览器中渐进式下载。
注意：当调试时（尤其是在Chrome或者Safari浏览器中），为了看到你合成中使用的所有文件，可能需要刷新浏览器。
<!--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-->
重要：为了能在Edge动画中使用这些文件，你必须保持这些注释的完整性。
JavaScript文件
project-name_edgePreload.js
这个project-name_edgePreload.js导入运行合成时所需的其它文件，但是不会阻止页面的加载。不要直接编辑该文件。
project-name_edge.js
这个project-name_edge.js文件包含了JSON格式的元件定义（图形和时间线）。Edge动画在你每次使用应用程序保存合成时会覆盖这个文件。建议只有在理解了JavaScript语言的前提下编辑这个文件，因为任何Edge动画不理解的任何信息将会丢失。
project-name_edgeActions.js
Edge动画使用匿名函数来提供封装和结束变量的范围。整个的project-name_edgeActions.js文件包含在一个单独的匿名函数范围之内。这提供了一个你可以定义合成范围内变量或者函数的地方。确保使用var定义变量和在本地范围内语法来定义函数。
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.');
直接使用元素
通常需要访问底层的HTML元素。这在处理一个click事件时尤其有用。例如，访问一个底层元素名为TextOne的代码为 sym.$("TextOne");
通过使用sym.$("#myId");可以访问导入的HTML内容，并指向元素的ID或者class。你也可以使用这种方法指向Edge动画合成外的DOM元素。例如，sym.$("footer");
触发器，事件，和动作
触发器
在Adobe Edge Animate中，你可以在时间线的指定位置创建一个触发器来执行你的代码。当Edge动画播放时间线并到达触发器的位置时，它将会执行设定的JavaScript代码。你也可以把代码与文档、时间线和特定的元素进行绑定。你的代码甚至可以在处理元素动作时在元件的上下文中被调用。当前的元件存储在this变量中，也同时存储在sym.参数中。你可以像 this.play() or sym.play().一样调用元件的API。当使用像是 setTimeout方法时，sym变量更加持久。
事件
当调用你的代码时，Edge动画会传递一个Event事件对象：e，在处理这个事件调用时，你可以使用它来了解更多关于上下文的信息。例如，sym.$(e.target).hide();将会隐藏该元素，而不需要涉及到元素的名称。
页面级别的DOM事件
Edge动画揭示了如下的页面级别事件：
l scroll
l keydown
l keyup
l resize
l orientationChange
合成级别的DOM事件
Edge动画揭示了如下的合成级别的事件：
l compositionReady
在合成准备好播放，但是autoPlay发生之前触发。
l onError
当一个事件处理器引起了一个JavaScript错误的时候触发。该事件触发针对页面中的所有构成部分，所以对于页面中有多个合成时，所有合成的事件处理函数都会被调用。为了在合成之间作以区分，e参数域中的comId会被设为 合成ID，这将会导致出错。你可以对比this和传入到函数闭包中的comId。此外，e.originalEvent被设定为处理导致错误的事件。
元素DOM事件
Edge动画揭示了原生桌面浏览器元素事件。在触摸设备中，只生成click事件。如果绑定了click单击事件，其它的鼠标事件将会被模拟。对于触摸设备，除了鼠标事件，你也可以监听touch触摸事件。
l click
l dblclick
l mouseover
l mousedown
l mousemove
l mouseup
l mouseout
元素触摸事件
Edge动画揭示了原生设备中的touch触摸事件。在移动设备中，touch触摸事件相对于click单击事件，响应更快，并可以多点触摸（支持的前提下）。
l touchstart
l touchmove
l touchend
jQuery事件
Edge揭示了如下的jQuery事件。
l mouseenter
l mouseleave
l focus
你可以使用mouseenter和mouseleave来代替mouseover和mouseout，以避免干扰其它的元素。例如，当在一个元件上使用mouseover时，该元件的子元素可能会中断鼠标事件，使用mouseenter来代替可以避免这种冲突。
在元素事件上阻止默认的行为
一些浏览器，尤其是WebKit内核的Android版本，如果监听了鼠标事件，在触摸的元素周围会有高亮显示。如果你不想要这种行为，就在你的处理程序代码中调用preventDefault，像这样：
e.preventDefault();
时间线事件
l update
l play
l complete
l stop
元件事件
l creationComplete
在元件被创建并初始化，但是autoPlay发生之前立即触发。
l beforeDeletion
只在元件被删除前触发。
动作
Actions动作是在响应各种不同类型的事件时执行的JavaScript函数。可以绑定一个动作到Edge动画中的一个事件上，也可能是给定的元素，或者是project-name_edgeActions.js的代码里面。在Edge动画中绑定动作，结果会在project-name_EdgeActions.js中自动生成代码。只要你维护了生成的代码和注释的结构，就能够手动编辑这些代码或者稍后在Edge动画中编辑。当手动添加代码时需要注意的一件事是，它不应该是阻塞性调用，如 alert("Hello");，因为这会阻碍其它的动画的运行。
元件
Edge动画元件
Edge动画是围绕着元件的概念组织的。一个元件自身包含了一组行为、时间线，和图形。在每个Edge动画的合成中，stage（舞台）是一个元件，而且总是有一个单独的根舞台。
舞台和其它的元件实例被附加到DOM中的一个元素上。元件拥有元件实例的子元素，并作为Actors引用。
元件是可扩展的。你可以定义动作，绑定事件到动作上，或者在运行时改变元件。
元件闭包
project-name_edgeActions.js文件是一组嵌套的JavaScript闭包。要查看它，可以打开Edge Animate软件，创建一个新项目，保存，并在文本编辑器中打开project-name_edgeActions.js。它应该类似下面这组代码：
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol;
// aliases for commonly used Edge classes
//Edge symbol: 'stage'
(function(symbolName) {
})("stage");
//Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-110465113");
每个元件的动作都包含在一个JavaScript函数闭包里面。这在元件级别提供了封装。要查看它，可以在舞台上添加一个元件（例如，画一个矩形），保存项目，并重新打开project-name_edgeActions.js。
注意：当使用元件实例并访问元件时间线时，记住你是在处理元件内的元素名称而不是元件的名称，这点很重要。例如，如果你的元件库中有个名为“kitten_sym”的元件，而在元素面板中，那个元件的实例名为”kitten_1”，当访问这个元件的时候，你应该使用名称”kitten_1”。
从主舞台访问一个元件的时间线
要从主舞台上访问一个元件的时间，使用下面的方法：
// Play the symbol timeline
sym.getSymbol("symbolName").play();
你也可以从主舞台上控制元件内的元素。例如：
// Hide the element "kitten_paw" within the symbol "kitten_1"
sym.getSymbol("kitten_1").$("kitten_paw").hide();
从内部的其它元件访问一个元件的时间线
要从内部的一个元件访问另一个元件的元素，在调用getSymbol前使用sym.getComposition().getStage()前缀，如下所示：
// Get the stage from the composition level, get the symbol,
// and play the timeline
sym.getComposition().getStage().getSymbol("symbolName").play();
要从内部的一个元件访问一个嵌套的元件时间线，需要嵌套使用getSymbol方法，如下所示：
// 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);
你可以从一个元件访问另一个元件的内部元素，例如：
// Get the symbol element "kitten_1" and hide the element "kitten_paw"
sym.getComposition().getStage().getSymbol("kitten_1").$("kitten_paw").hide();
从主舞台访问一个嵌套的元件时间线
要访问一个嵌套元件的时间线，使用下面的方法：
sym.getSymbol("symbolName").getSymbol("nestedElementName").play();
你也可以从舞台上访问内部一个嵌套元件的元素。例如：
// Hide the element "paw" from within a nested symbol
sym.getSymbol("kitten_1").getSymbol("kitten_paw").$("paw").hide();
从另一个元件访问一个嵌套元件的时间线
要从另一个元件访问一个嵌套元件的时间线，使用下面的方法：
sym.getComposition().getStage().getSymbol("symbolName").getSymbol("nestedElementName").play();
你也可以从舞台上访问内部的一个嵌套元件的元素。例如：
// Hide the element "paw" from within a nested symbol
sym.getComposition().getStage().sym.getSymbol("kitten_1").getSymbol("kitten_paw").$("paw").hide();
使用元件的元素
要访问与元件相关联的一个元素：
sym.getSymbolElement();
返回元素的jQuery处理程序。例如：
sym.getSymbolElement().hide();
另外一个例子：
// Create a new symbol "kitten_paw" on the Stage
sym.createChildSymbol("kitten_paw", "Stage");
// Reference the symbol
var kitten_sym = kitten_paw.getSymbolElement();
// Animate the opacity to 0
kitten_sym.animate({opacity: 0}, 500);
获取元件的子对象
使用下面的方法来获取一个父对象中所有的直接子元件实例：
sym.getChildSymbols();
例如，如果你在舞台级别的事件上作如下设置，舞台上所有的直接子元件都会受影响，而更次级的子元件不作更改：
// 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
获取元件的父对象
要控制一个父元件，使用下面的方法：
sym.getParentSymbol();
这将会获取一个子对象的父元件。例如：
我有一个元件层级，看起来像这样：Stage > kiten_sym > kitten_paw。下面的代码位于”kitten_paw”元件的click事件中。
// Stop the parent symbol timeline of "kitten_sym"
sym.getParentSymbol().stop();
动态创建元件
要创建一个子元件，使用下面的方法：
sym.createChildSymbol();
下面代码使用父元素的名称并返回一个单独的元件对象。例如：
// 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")
另外一个例子：
// 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
扩展的元件和合成
这些APIs通过添加行为来扩展一个元件定义，并继承这个元件所有的实例。
注意，project-name_edgeActions.js定义了Edge.Symbol的别名为“Symbol”，定义Edge.Composition的别名为“Composition”。这些别名被用于代码片断中，更简洁。
重要：当调用动作函数，事件触发时“this”将设为元件实例。对于DOM、时间线，和触发器事件，动作函数中带有一个参数“sym”，代表元件实例，而“e”代表一个jQuery事件。jQuery事件对象将会有作用域设定，这取决于实际的事件类型。
bindElementAction
Symbol.bindElementAction ( compId, symbolName, elementSelector, eventName,actionFunction )
l compId
合成的ID，直接传递项目层级闭包。例如，“EDGE-519469”。
l symbolName
元件的ID，直接传递元件闭包。
l elementSelector
元素选择器。例如，“${_Rectangle}”
l eventName
事件的名称。例如，click。
l actionFunction
当触发动作时要执行的JavaScript函数。
说明：函数调用和动作一起使用。
示例
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 )
l compId
合成的ID，直接传递项目层级闭包。例如，“EDGE-519469”。
l symbolName
元件的ID，直接传递元件闭包。
l timelineName
时间线的名称。
l delay
延迟的时间。
l actionFunction
当触发动作时要执行的JavaScript函数。
说明：动态地为一个特定元件创建一个触发器。
示例
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 )
l compId
合成的ID，直接传递项目层级闭包。例如，“EDGE-519469”。
l symbolName
元件的ID，直接传递元件闭包。
l timelineName
时间线的名称。
l eventName
事件的名称。例如，click。
l actionFunction
当触发动作时要执行的JavaScript函数。如stop、complete，和play事件，动作函数不带参数。对于update事件，参数是elapsed，因为时间线播放的开始是以毫秒运行。
说明：当触发特定的时间线事件时，定义一个要执行的函数。
示例
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 )
l compId
合成的ID，直接传递项目层级闭包。例如，“EDGE-519469”。
l symbolName
元件的ID，直接传递元件闭包。
l eventName
事件名称。例如，click。
l actionFunction
当触发动作时要执行的JavaScript函数。
说明：动态地为特定元件创建一个事件处理程序。
示例
(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");
});
合成实例函数
这些函数对一个特定的合成实例起作用，而不是一个合成定义。
getStage
comp.getStage()
说明：返回合成的舞台元件实例。舞台是一个元件JavaScript对象。
示例
// Get the stage from the composition level, get the symbol, and play the timeline
sym.getComposition().getStage().getSymbol("symbolName").play();
getSymbols
comp.getSymbols ( symbolName )
l symbolName
元件的ID，直接传递元件闭包。如果symbolName（元件名称）为空白、空，或者未定义，则在合成中返回所有的元件实例。
说明：返回合成中特定元件名称的含有多个实例的数组。
示例
var EdgeSym = function(selector){
var list,cp = sym.getComposition();
if(selector.substr(0,2)=="*="){
selector = selector.substr(2);
list = [];
var syms = cp.getSymbols();
for(var j=0;j<syms.length;j++){
if(syms[j].getSymbolTypeName().indexOf(selector)>-1){
list.push(syms[j]);
}
}
}else{
list = (selector=="*")?cp.getSymbols():cp.getSymbols(selector);
}
createSymbolChild
comp.createSymbolChild ( symbolName, parentSelector, index )
l symbolName
元件的ID，直接传递元件闭包。
l parentSelector
针对任意的拥有子元素的HTML元素的一个全局jQuery选择器或者处理程序。
l index
索引。如果索引值为空或者未定义，Edge动画就把元件的元素附加到父元素的子对象上。
说明：创建一个新的元件或多个元件并作为元素的子对象，通过parentSelector指定在子对象中的索引位置。返回一个含有多个已创建的元件实例的数组。
示例
// 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"});
});
元件实例函数
$
sym.$(elementName)
elementName
要返回的jQuery处理的元素名称。
说明：返回给定的元素名称范围的jQuery，到元件实例上。
示例
sym.$("intro_Text1").hide();
lookupSelector
sym.lookupSelector(elementName)
elementName
返回的全局DOM选择器的元素。
说明：针对给定的合成范围元素，返回全局DOM选择器。
示例
$(sym.lookupSelector("Text1")).html("Some new text");
getComposition
sym.getComposition()
说明：返回拥有当前元件实例的合成。
示例
// 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
要返回的元件实例的元素名称。
说明：对于给定的元素，如果元素是一个元件实例，则返回这个元件实例对象。
示例
var eur_sym = sym.getSymbol("aftxt_sym");
eur_sym.play();
createChildSymbol
sym.createChildSymbol(symbolName, parentElementName, index )
symbolName
定义的元件的名称。
parentElementName
定义的该元件的实例的元素名称。
index
新的实例在parentElementName中所处的Z-index（z轴索引值）。
说明：创建一个新的元件实例，作为元件-范围元素的子对象，并指定其在所有的子对象中的索引值。如果索引值为空或者未定义，该元件则附加到父元素的子对象中。
返回一个已创建的元件实例对象，它位于parentElementName的元件范围内。
示例
// Create a new symbol "kitten_paw" on the Stage
sym.createChildSymbol("kitten_paw", "Stage");
// Reference the symbol
var kitten_sym = kitten_paw.getSymbolElement();
// Animate the opacity to 0
kitten_sym.animate({opacity: 0}, 500);
getChildSymbols
sym.getChildSymbols()
说明：返回当前元件实例的直接子元件实例对象。
示例
// 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()
说明：返回当前元件实例的直接父元件实例对象。
示例
// Stop the parent symbol timeline of "kitten_sym"
sym.getParentSymbol().stop();
getSymbolElement
sym.getSymbolElement()
说明：为当前的元件实例对象返回jQuery处理到DOM元素中。
示例
// Create a new symbol "kitten_paw" on the Stage
sym.createChildSymbol("kitten_paw", "Stage");
// Reference the symbol
var kitten_sym = kitten_paw.getSymbolElement();
// Animate the opacity to 0
kitten_sym.animate({opacity: 0}, 500);
setVariable
sym.setVariable ( varName, varValue )
varName
指定要设置的变量的名称。
varValue
变量的值。可以是任何类型。
说明：设置变量。
过去用法：sym.setParameter();
示例
// 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
获取变量。
说明：返回给定的变量的值，如果变量没有找到，则返回undefined（示定义）。
过去用法：sym.getParameter();
示例
mylocalVar = sym.getVariable("myVar");
play
sym.play ( position, executeTriggers )
position
默认为当前播放头的位置（默认为0）；如果动画已经播放并且播放头在时间线的结尾处，则从0开始播放。
executeTriggers
可以为true、false，或者null，表明是否触发位于开始位置的触发器：
true – 所有位于开始位置的触发器都触发。
false – 在开始点上没有触发器触发。
null, undefined, omitted – 如果时间线动画是首次将要播放，只有位于开始位置的触发器才触发，或者如果开始位置不是当前播放头的位置，则通过getPosition()返回。
说明：从给定的位置开始播放时间线动画，如果参数是数字，则指定毫秒，如果参数是字符串，则指定标签。
示例
sym.getSymbol("symbolName").getSymbol("nestedElementName").play();
playReversesym.playReverse ( position, executeTriggers )
position
默认为当前播放头的位置（默认为0）；如果动画已经播放并且播放头在时间线的结尾处，则从结尾处开始播放。
executeTriggers
可以为true、false，或者null，表明是否触发位于开始位置的触发器：
true – 所有位于开始位置的触发器都触发。
false – 在开始点上没有触发器触发。
null, undefined, omitted – 如果时间线动画是首次将要播放，只有位于开始位置的触发器才触发，或者如果开始位置不是当前播放头的位置，则通过getPosition()返回。
说明：从给定的位置开始播放时间线动画，如果参数是数字，则指定毫秒，如果参数是字符串，则指定标签。
示例
// 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(可选)
播放头要停止的位置，如果参数是数字，则指定毫秒，如果参数是字符串，则指定标签。默认是当前播放头的位置。
说明：让时间线动画停止在指定的位置。
示例
// 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 ()
说明：返回默认时间线动画中当前播放头的位置。如果时间线动画尚未播放，则返回-1。
示例
if (sym.getPosition() == 0) {
sym.play(0);
} else {
sym.play(500);
}
getDuration
sym.getDuration ()
说明：返回默认时间线动画的持续时间。
示例
// 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 ()
说明：返回一个布尔值，指明默认的时间线动画是否正在播放。
示例
if (sym.isPlaying()) {
console.log("Timeline is currently playing.");
}
isPlayDirectionReverse
sym.isPlayDirectionReverse ()
说明：返回一个布尔值，指明默认的时间线动画的播放方向是否反转。
示例
if (sym.isPlayDirectionReverse()) {
console.log("playing backwards through the timeline");
}
getLabelPosition
sym.getLabelPosition (aLabel)
说明：返回默认时间线动画中的标签aLabel的位置，如果aLabel在时间线中不是一个标签，则返回未定义。如果aLabel不是一个字符串，则行为不保证。
示例
// 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 )
说明：像所有的DOM元素一样删除该标签。
示例
// For the symbol instance "myElement":
sym.getSymbol("myElement").deleteSymbol();
Edge 接口
Edge.*接口是可以使用的，但是如果你想尝试着从Edge动画运行时的外部访问对象，就应该参考全局AdobeEdge变量。
Edge.getComposition
Edge.getComposition( compId )
说明：针对给定的comId返回一个Edge.Composition对象。
示例
function setDatepicker(){
var comp = Edge.getComposition("EDGE-966604542");
var stage = comp.getStage();
console.log("Stage: " + stage);
$(stage.lookupSelector("stage")).append("<input type='text' name='date' id='date' />");
var sel = stage.lookupSelector("date");
$("#date").css({"position":"absolute", "top":0, "left":200});
$("#date").datepicker();
}
new Edge.Composition
new Edge.Composition ( compId, symbolData, attachments, options )
Edge.registerCompositionReadyHandler
Edge.registerCompositionReadyHandler( compId, handlerFn, options )
说明：当带有给定的comId的合成已经加载并初始化时，注册一个可以引用的函数。
Advanced topics
页面中有多个合成
Edge动画支持在一个单独的HTML页面中有多个合成。自Edge Animate1.5版起，不支持打开一个带有多个合成的页面，但是页面可以被手动授权来使用多个合成。
每个project-name_edgePreload.js文件都定义了包含在页面中的一个单独的合成。你可以使用多个合成的preload.js文件。记住，可能需要移动合成中的一些图片、CSS或者其它的资源。
<!--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-->
每个合成都要求附加一个舞台元素：
<div id="stageOne" class="EDGE-1010101"></div>
<div id="stageTwo" class="EDGE-8338338"></div>
注意：重命名舞台的ID名称，使用一个独一无二的名称在HTML作为标记以避免冲突是很重要的。
示例
在文件的结尾处，composition_one_edgePreload.js有个合成ID被设置为EDGE-1010101：
})(jQuery, AdobeEdge, "EDGE-1010101");
在文件的结尾处，composition_two_edgePreload.js有个合成ID被设置为EDGE-8338338：
})(jQuery, AdobeEdge, "EDGE-8338338");
位置 div 元素
默认情况下，Edge动画要确保舞台的div已定位。如果这个div没有使用CSS定位成绝对或相对，Edge动画将变成“position:relative”，所以所有的元素都是相对于舞台作运动，而不是页面。你将必须要么使用基于流，要么使用CSS绝对位置来把舞台放置在你的页面中想要的位置上。
在不同的合成中调用Edge Animate APIs
Edge Animate APIs能够被调用说明合成ID识别Edge.getComposition(compId)。
使用bootstrapCallback函数来管理多个合成
Edge动画运行时提供AdobeEdge.bootstrapCallback函数，当一个Edge合成已经加载并准备播放时就会调用它。然后你就可以在HTML页面中编码AdobeEdge.bootstrapCallback函数，以执行适当的处理。
下面的示例旋转三个Edge动画合成：
...
<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>
...
要看完整的示例，参见Adobe Principal Scientist Josh Hatwich's blog post。
调整预加载器
Edge动画的预加载器是加载到浏览器里的第一内容。预加载器渲染自身然后加载运行合成所需要的脚本和其它资源。一旦每样事情都加载了，预加载器就隐藏自身并播放合成。在一定的情况下，例如，当在一个内嵌框架中运行时，你可能想用外部的组件调整预加载器。
为了触发器协调加载资源，你必须使用Edge Animate 1.5或者更高版本进行创作。在页面的头部添加如下代码：
...
<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>
一旦bootstrapLoading已选择，并且已经包含了预加载器，在显示合成之前，合成会等到你发出如下的调用命令：
l loadResources()
导致Edge动画预先加载，以开始下载合成所要求的脚本和资源。
l playWhenReady()
预加载器继续显示，直到所有要求的资源和脚本都已加载并且调用了playWhenReady。
...
AdobeEdge.loadResources();
...
AdobeEdge.playWhenReady();