如何在兩個動畫畫布元素之間進行通信？

我用Adobe Animate CC製作了兩個html5 canvas js動畫。我已將這兩個元素放到一個html頁面中。我可以在這些動畫中成功調用函數 - 警報在下面的代碼中成功觸發。

我想從一個動畫調用函數來控制其他動畫。我需要幫助，瞭解如何正確調用/命名/解決動畫。到目前爲止，我沒有得到任何迴應，canvas_ship.gotoAndPlay(12);和canvas_car.gotoAndPlay(7);，我花了幾個小時嘗試不同的參考。我不是一個大的編碼器，但我確信這是一件簡單的事情。任何幫助表示讚賞！

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Multiple Canvas Animations Talking 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_Ship_what_frame_to_go_to(){ 
    alert("tell_Ship_what_frame_to_go_to was triggered"); 
    canvas_ship.gotoAndPlay(12); //This line does not work. 
} 
function tell_Car_what_frame_to_go_to(){ 
    alert("tell_Car_what_frame_to_go_to was triggered"); 
    canvas_car.gotoAndPlay(7); //This line does not work. 
} 


</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/36856273/how-to-communicate-externally-between-adobe-animate-cc-animations – Lanny

我已經收到幫助，現在將分享答案。不用謝。請隨時邀請我參加晚宴。

在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:18:07 frogseatflies

如何在兩個動畫畫布元素之間進行通信？

回答

相關問題