Flash 中的 createjs 按钮不起作用

Question

我正在尝试使用 createJs 将 flash 转换为 html5，但是，按钮没有被触发，请通过 downloading sample file here.

检查代码

    this.ReplayBtn = new lib.replayBtn();
    this.ReplayBtn.onClick = function() {
      console.log("clicked");
      this.gotoAndPlay("animate");

    }

这是 jsFiddle link jsfiddle.net/asimkh/sLbgrx08/1

Answer 1

onclick 和类似的事件在不久前已被弃用，因此根据它所针对的 CreateJS 版本，它们将不起作用。请改用 EventDispatcher 方法：

this.ReplayBtn = new lib.replayBtn();
this.ReplayBtn.on("click", handleClick, this);
function handleClick(event) {
  console.log("clicked");
  this.gotoAndPlay("animate");
}

请注意，您的初始代码的范围可能无法正常工作，因为 JavaScript 不维护函数范围 - 所以 this 将是 Window。使用 on() 方法的第三个参数将解决这个问题。

如果您有没有on()的旧版CreateJS，您可以使用：

this.ReplayBtn.addEventListener("click", handleClick.bind(this));

干杯。

Answer 2

进行了快速编辑以修复您在上一个答案的评论中发布的 fiddle。 https://jsfiddle.net/lannymcnie/sLbgrx08/20/

var createjs 在 fiddle 中的位置不佳，导致了一些问题。它本来可以在本地为您工作，而不是在 jsfiddle 上。此 "fixed" 版本显示了您的初始问题。

剩下的问题是您的图片正在加载 cross-domain，导致您点击时出错。这是因为 EaselJS 鼠标交互需要像素访问，但 cross-domain 图像使 canvas "dirty" 阻止了它。你可以在控制台看到这个错误，而且看起来你还把这个错误复制到了Flash时间轴中，所以你一定看到了。

Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

您无法使用您指向的 CDN 真正解决这个问题，因为它不发送 cross-origin headers，这是必需的。此外，旧版本的 PreloadJS 不支持cross-origin。

我对您的代码进行了快速修改，从支持 cross-origin 请求（我的测试域）的来源手动预加载图像，并使其正常运行。它对 CreateJS 生成的代码进行了一些修改以使其正确预加载，但请注意，该库的较新版本支持这个没问题。 https://jsfiddle.net/lannymcnie/sLbgrx08/22/

此外，我对您的框架脚本进行了一些更改：

不建议在您的 frame_0 中放入阶段滴答和设置等核心逻辑。阶段更新已经在 HTML 文件中，所以使用它。将您的 JavaScript 外部化到 FLA 之外也很好。
我绑定了您的点击处理程序，就像我在之前的回答中提到的那样。这将确保在正确的范围内调用函数：

this.ReplayBtn.onClick = clickHandler.bind(this);

您定义和调用 animateCall 函数的方式可能有效，但它确实很具体。由于您已经在该剪辑上定义了函数，因此只需在该范围内调用它即可。框架脚本的范围仅限于它们所在的剪辑：

this.animateCall();

当您调用 animateCall 时，您将转到 "animate" 标签，即第 0 帧。这会导致再次调用第 0 帧脚本（从 Flash 外部化您的 JS 的另一个原因).我暂时将 gotoAndPlay 注释掉了。

希望对您有所帮助。

Answer 3

我检查了你的按钮。它不适用于 main .jpg。所以不要将您的 .jpg 位图制作成影片剪辑。您需要重新创建另一个不透明度为 0 的矩形并将其命名为 "ReplayBtn"

Flash 中的 createjs 按钮不起作用

createjs button in flash is not working

flash

canvas

easeljs

createjs