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

【问题标题】：How to communicate 'externally' between Adobe Animate CC animations?如何在 Adobe Animate CC 动画之间进行“外部”通信？
【发布时间】：2016-08-19 18:30:00
【问题描述】：

通过 html 页面中的脚本，我试图控制在我创建的 Adobe Animate CC 动画中发生的情况。例如，在这里您会看到一个不起作用的脚本，它试图将船动画告诉 gotoAndPlay(5)。无论如何，船动画对此没有反应。我猜这是因为我没有正确寻址/命名它。帮我谈谈我的动画。请参阅下面的代码。

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

【问题讨论】：

我想通了，在这里回答了：Post with same question

标签： animation canvas adobe communicate

【解决方案1】：

看起来“canvas_ship”是您的实际画布元素的 ID。我认为你想要做的是控制你添加到其中的内容。

如果是这样，您可以在 exportRoot 上调用 gotoAndPlay，这是一个带有该 API 的 MovieClip 实例。

exportRoot.gotoAndPlay(5);

但是，您将遇到的问题是，一旦您创建了 canvas_ship 阶段和内容，您就会覆盖变量。我建议更改第二个画布的名称、exportRoot 和 stage。

您也可以将这两个元素添加到一个画布上。除了使用从 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 中的帧脚本吗？

【讨论】：

这实际上也回答了我的问题。谢谢兰尼！

【解决方案2】：

我已收到帮助，现在将分享答案。不客气。找个时间请我过来吃早餐吧。

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

【讨论】：