Question

我遇到了在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帧上存在第二个按钮，则该按钮存在但不起作用。

有什么想法吗？

Answer 1

尝试这样做

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

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

Answer 2

这里有两个选择。

将单独的按钮实例放在不同的图层上。
在自己的图层上创建一个按钮实例，让脚本根据需要设置按钮的visible属性（true / false），并修改您的点击处理程序以根据价值this.currentFrame。

Animate CC（在撰写本文时为我提供的2015.2）似乎生成了HTML 5脚本输出，并考虑了动画。如果您在同一图层上的多个框架上有相似的对象实例，而不是创建该对象的新实例，则会从先前的框架中重新实现该实例。

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

创建另一个图层会强制Animate在CreateJS中显式创建实例。但是，如果你有很多按钮，最终可能会产生大量的图层并使你的时间线看起来很乱。如果您只有几个按钮实例，我建议使用选项1，但对于后一种情况，选项2可能是要走的路。

创建一个新图层。将它命名为您想要的任何名称，例如“按钮层”。
此图层只有一个关键帧。
将您的按钮实例放在此图层上。为了连续性，我们将它命名为button_13。

将tick处理程序绑定到根MovieClip（即this）以处理该按钮是否应该出现。

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);

将click处理程序绑定到依赖于当前帧的gotoAndStop帧上的按钮。

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帧上。

我没有按照自己的要求对此进行测试，但应完成您正在寻找的内容。

Answer 3

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

Adobe Animate CC - 重用按钮不能正常工作HTML5

3 个答案: