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

Question

I want to communicate between two animated canvas elements. 我想在两个动画画布元素之间进行通信。

I've made two html5 canvas js animations with Adobe Animate CC. 我用Adobe Animate CC制作了两个html5 canvas js动画。 I've put both of these elements into one html page. 我把这两个元素放在一个html页面中。 I can successfully call functions from within those animations – the alerts are triggered successfully in the code below. 我可以在这些动画中成功调用函数 - 在下面的代码中成功触发警报。

I want to call functions from one animation to control the other animation. 我想调用一个动画中的函数来控制另一个动画。 I need help knowing how to correctly call/name/address the animations. 我需要帮助知道如何正确调用/命名/寻址动画。 So far I get no response with the canvas_ship.gotoAndPlay(12); 到目前为止，我没有得到canvas_ship.gotoAndPlay(12);的canvas_ship.gotoAndPlay(12); and canvas_car.gotoAndPlay(7); 和canvas_car.gotoAndPlay(7); , and I've spent hours trying different references. ，我花了几个小时尝试不同的参考。 I'm not a big coder, but I'm sure this is a simple matter. 我不是一个大编码器，但我确信这是一件简单的事情。 Any help is appreciated! 任何帮助表示赞赏！

<!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>

Answer 1

I've received help and will now share the answer. 我已经收到了帮助，现在将分享答案。 You are welcome. 别客气。 Just invite me over for dinner sometime. 只是邀请我去吃晚餐。

In Adobe Animate, you'll need to change the library namespace (in the Publish settings in the Advanced tab I think) to lib_jerry or whatever custom name you come up with... so long as it's different than the other animation. 在Adobe Animate中，您需要将库命名空间（在我认为的“高级”选项卡中的“发布”设置中）更改为lib_jerry或您提出的任何自定义名称...只要它与其他动画不同即可。 Then just follow the setup in this code. 然后按照此代码中的设置进行操作。 You can call the functions from within the Animate animations. 您可以在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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-03 13:18:07

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-03 13:18:07

解决方案1
1 已采纳 2016-05-03 13:18:07