如何在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>

我想通了，在这里的答案是： [发布具有同样的问题（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>

答

它看起来像“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中的框架脚本吗？

这实际上也回答了我的问题。谢谢Lanny！ –

如何在Adobe Animate CC动画之间进行“外部”通信？

相关推荐