如何在两个动画画布元素之间进行通信？

我用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

如何在两个动画画布元素之间进行通信？

回答

相关问题