Javascript Adobe Animate CC-重复使用的按钮无法使用HTML5

我在HTML5画布中重复使用同一个按钮时遇到了问题。按钮需要在几个单独的帧中重复使用，以及在同一帧中重复使用多次

第一次使用时，按钮工作正常：

this.button_13.addEventListener("click", fl_ClickToGoToAndStopAtFrame_24.bind(this));

function fl_ClickToGoToAndStopAtFrame_24()
{
    this.gotoAndStop(72);
}

在第72帧，我将相同的按钮符号与新的实例名称一起重用。不幸的是，此按钮不起作用：

this.button_14.addEventListener("click", fl_ClickToGoToAndStopAtFrame_25.bind(this));

function fl_ClickToGoToAndStopAtFrame_25()
{
    this.gotoAndStop(78);
}

单击第二个按钮显示按钮状态，但不会将用户提前到第78帧

*如果第二个按钮仅存在于第72帧的时间线上，则它根本不存在于发布的结果中。如果第72-77帧上存在第二个按钮，则该按钮存在但不起作用

有什么想法吗？

试着这样做

this.button_13.removeEventListener("click", fl_ClickToGoToAndStopAtFrame_24.bind(this)); 

---

在创建第二个事件侦听器之前。

这里有两个选项

将单独的按钮实例放在不同的层上

在它自己的层上创建一个按钮实例，让脚本根据需要设置按钮的

可见属性（
true
/
false
），并修改单击处理程序以根据
this.currentFrame
的值作出反应

Animate CC（我在撰写本文时使用的是2015.2）似乎在生成HTML 5脚本输出时考虑了动画。如果在同一层的多个帧上有相似的对象实例，则不会创建该对象的新实例，而是重新使用前一帧中的实例

e、 我在第1帧上创建了一个名为“myText”的动态文本框。在第2帧上，我创建了另一个动态文本框，并将其命名为“myOtherText”。当我发布并查看脚本时，脚本首先调用Tween.to（）将“myText”对象放置在画布上并给出其外观和位置，然后链接另一个.to（）调用以使myText看起来像MyTherText。在引擎盖下，myOtherText根本不存在

创建另一层将强制Animate在CreateJS中显式创建实例。然而，如果你有很多按钮，最终可能会造成大量的图层，并使你的时间线看起来混乱不堪。如果您只有几个按钮实例，我建议您选择选项1，但对于后一种情况，选项2可能是最佳选择

创建一个新层。你可以随意命名，比如“按钮层”

该层将只有一个关键帧

将按钮实例放置在此层上。为了保持连续性，我们将其命名为

按钮\u 13

将

勾选

处理程序绑定到根MovieClip（即

此

）以处理按钮是否应出现

var tickHandler = function () {
    switch (this.currentFrame) {
    //Add case statements for each frame you want the button to appear on
    //Remember, frame indexes in CJS are 0-based!
    case 12: case 13:
        this.button_13.visible = true;
        break;
    default:
        this.button_13.visible = false;
    }
}.bind(this);
this.removeEventListener('tick', tickHandler); //Make sure not to double-bind
this.addEventListener('tick', tickHandler);

将

单击

处理程序绑定到按钮，该按钮将在依赖于当前帧的帧上

转到并停止

var clickHandler = function () {
    switch (this.currentFrame) {
    //Add case statements for each frame that should have a jump
    //Remember, frame indexes in CJS are 0-based!
    case 12:
        this.gotoAndStop(72);
        break;
    case 13:
        this.gotoAndStop(78);
        break;
    }
}.bind(this) //Proxy the handler, as done above.
this.button_13.removeEventListener('click', tickHandler); //Make sure not to double-bind
this.button_13.addEventListener('click', tickHandler);

将这两个脚本放在电影的第1帧上

---

我还没有像前面介绍的那样亲自测试过这个，但它应该可以完成您想要的功能。

解决方案是将实例移动到另一层上。这样，两个不同的实例可以在不同的图像中使用不同的脚本和名称。

不幸的是，按钮仍然不能正常工作。我在一个类似的项目中尝试了同样的想法。第一个按钮附带了事件侦听器和gotoandplay命令。第二个按钮应用了以下代码：this.button\u 1.removeEventListener（“单击”，fl\u clicktoto并从frame.bind播放（this））；此.button_2.添加了EventListener（“单击”，fl_ClickToTo并从Frame_2.bind（此））播放；函数fl_ClickToToAndPlayFromFrame_2（）{this.gotoAndPlay（345）；}第二个按钮将我移动到第165帧而不是第345帧。不能使用“绑定”删除事件侦听器。bind方法创建了另一个函数，因此它无法工作。您必须保存原始绑定，然后将其删除，或者只需

删除AlleventListeners

，这更简单。