如何在Adobe Animate CC動畫之間進行「外部」通信？

從html頁面中的腳本中，我試圖控制在我創建的Adobe Animate CC動畫中發生的事情。例如，在這裏你會看到一個腳本，它不會試圖將船舶動畫告訴gotoAndPlay（5）。無論如何，船動畫沒有迴應。我猜這是因爲我沒有正確處理/命名它。幫助我談談我的動畫。請參閱下面的代碼。如何在Adobe Animate CC動畫之間進行「外部」通信？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Lets talk to each other</title> 


<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script> 
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script> 
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script> 
<script src="ship.js"></script> 
<script src="car.js"></script> 

<script> 
function init() { 

    var canvas, stage, exportRoot; 

    canvas = document.getElementById("canvas_ship"); 
    exportRoot = new libs_ship.ship(); 

    stage = new createjs.Stage(canvas); 
    stage.addChild(exportRoot); 
    stage.update(); 

    createjs.Ticker.setFPS(libs_ship.properties.fps); 
    createjs.Ticker.addEventListener("tick", stage); 


    canvas = document.getElementById("canvas_car"); 
    exportRoot = new libs_car.car(); 

    stage = new createjs.Stage(canvas); 
    stage.addChild(exportRoot); 
    stage.update(); 

    createjs.Ticker.setFPS(libs_car.properties.fps); 
    createjs.Ticker.addEventListener("tick", stage); 
} 

function Tell_Canvas_Ship_to_gotoAndPlay5(){ 
    canvas_ship.gotoAndPlay(5); 
} 

</script> 
</head> 

<body onload="init();" style="background-color:#D4D4D4"> 
    <canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas> 
    <canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas> 
</body> 
</html>

來源

2016-04-26 frogseatflies

我想通了，在這裏的答案是： [發佈具有同樣的問題（http://stackoverflow.com/questions/36868648/how-to-communicate-between-two-animated-canvas-elements ） – frogseatflies

我已經收到幫助，現在將分享答案。不用謝。只是邀請我吃早餐的時間。

在Adobe Animate中，您需要將庫名稱空間（在我認爲的高級選項卡的「發佈」設置中）更改爲lib_jerry或任何自定義名稱，只要它與另一個不同動畫。然後只需按照此代碼中的設置。您可以從Animate動畫中調用這些功能。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Container</title> 

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
<script src="tommy.js"></script> 
<script src="jerry.js"></script> 
<script> 

var canvas, stage, tomtom, jerjer; 
function init() { 

    var exportRoot; 

    //Tommy 
    canvas = document.getElementById("canvas_tommy"); 

    tomtom = new lib_tommy.tommy(); 
    stage = new createjs.Stage(canvas); 
    stage.addChild(tomtom); 
    stage.update(); 

    createjs.Ticker.setFPS(lib_tommy.properties.fps); 
    createjs.Ticker.addEventListener("tick", stage); 


    //Jerry 
    canvas = document.getElementById("canvas_jerry"); 

    jerjer = new lib_jerry.jerry(); 

    stage = new createjs.Stage(canvas); 
    stage.addChild(jerjer); 
    stage.update(); 

    createjs.Ticker.setFPS(lib_jerry.properties.fps); 
    createjs.Ticker.addEventListener("tick", stage); 

} 

function button_from_tommy_was_clicked(){ 
    tomtom.gotoAndPlay(5); 
} 

function button_from_jerry_was_clicked(){ 
    jerjer.gotoAndPlay(5); 
} 

</script> 

</head> 
<body onload="init();" style="background-color:#D4D4D4;margin:0px;"> 
    <canvas id="canvas_tommy" width="970" height="90" style="background-color:#727272"></canvas> 
    <canvas id="canvas_jerry" width="970" height="90" style="background-color:#727272"></canvas> 
</body> 
</html>

來源

2016-05-03 13:23:49 frogseatflies

它看起來像「canvas_ship」是您的實際畫布元素的ID。我認爲你想要做的是控制你添加到它的內容。

如果是這樣，您可以在exportRoot上調用gotoAndPlay，它是具有該API的MovieClip實例。

exportRoot.gotoAndPlay(5);

你將不得不不過問題是，一旦你創建你canvas_ship階段和內容，要覆蓋的變量。我建議更改第二個畫布的名稱，exportRoot和舞臺。

您也可以將這兩個元素添加到一個畫布。除了您使用2 FLA的導出內容以外，是否有任何理由使用兩個畫布？

var stage = new createjs.Stage("canvas_ship"); 
var ship = new libs_ship.ship(); 
var car = new libs_car.car(); 
stage.addChild(ship, car); 
createjs.Ticker.addEventListener("tick", stage);

你的Tell_Canvas_Ship_to_gotoAndPlay5方法從哪裏調用？它是Animate/Flash中的框架腳本嗎？

來源

2016-04-27 17:15:06 Lanny

這實際上也回答了我的問題。謝謝Lanny！ –

如何在Adobe Animate CC動畫之間進行「外部」通信？

回答

相關問題