Adobe Edge Animate 1.5 JavaScript API 中文手冊

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

playReverse

sym.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 Bootstrapping Edge Compositions 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();