Flash CC - HTML5 Canvas：幻灯片导航答案

【问题标题】：Flash CC - HTML5 Canvas: Slideshow NavigationFlash CC - HTML5 Canvas：幻灯片导航
【发布时间】：2015-03-04 11:01:24
【问题描述】：

我正在尝试使用 HTML5 Canvas 在 Flash CC 中创建一个带有下一步和后退按钮的简单 3 图像幻灯片。我是 javascript 新手，似乎在使用它时遇到了问题。

this.stop();

this.next_btn.addEventListener("click", playClickNext.bind(this));

function playClickNext() 
{
    this.gotoAndStop(this.currentFrame + 1);
}


this.back_btn.addEventListener("click", playClickBack.bind(this));

function playClickBack() 
{
    this.gotoAndStop(this.currentFrame - 1);
}

我正在发布它并且下一个按钮可以工作，但有时会转到错误的框架。后退按钮有时有效，有时无效。它做的最常见的事情也是点击时返回到随机帧。

感谢您的帮助！

【问题讨论】：

有机会分享 FLA 吗？
快速推荐：使用btn.on 而不是btn.addEventListener，因为on() 允许您提供范围。 createjs.com/Docs/EaselJS/classes/…

标签： javascript html flash canvas easeljs

【解决方案1】：

我整理了一个快速样本，得到了类似的结果。对我来说，问题是脚本所在的框架会在您进入该框架时触发。这意味着按钮上的监听器会堆积起来，并触发多次。

理想的解决方案是将代码从 FLA 中提取到您的 HTML/JS 应用程序中。您可以使用实例名称直接定位时间线。例如，在我的应用程序中，它都在主时间轴上，因此您可以使用：

exportRoot.next_btn.addEventListener("click", handler);

要在不重新架构的情况下解决它，您也可以确保：

永远不会导航到带有脚本的框架。你可以让你的“第一”帧长2帧，把代码放在第1帧上，把stop()放在第2帧上。然后确保你永远不要在1上gotoAndStop。你必须对上一个和下一个都施加限制，因为你可以在高于最大值的帧上 gotoAndStop，它会自动换行。
每帧删除所有事件侦听器。使用 bind 设置侦听器的方式对于删除是有问题的，因此我建议只删除所有侦听器。

我在这里上传了一个使用第二种方法的快速示例 [https://dl.dropboxusercontent.com/u/2224806/Nav.fla]，主要是因为它很容易修复。 抱歉，链接已过期

让我知道这是否解决了您的问题，或者是否与其他问题有关。

【讨论】：