Question

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

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

    }

这是jsFiddle链接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()方法的第3个参数可以解决这个问题。

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

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

干杯。

Answer 2

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

var createjs在小提琴中处于不利地位，导致一些问题。它本来适合你，而不是jsfiddle。这个“固定”版本显示您的初始问题。

剩下的问题是您的图片是跨域加载的，当您点击时会导致错误。这是因为EaselJS鼠标交互需要像素访问，但跨域图像使画布“脏”，这会阻止它。您可以在控制台中看到错误，看起来您甚至将错误复制到Flash时间轴中，因此您必须已经看过它。

未捕获发生错误。这很可能是出于安全考虑使用本地或跨域读取画布像素数据的限制图像。

你无法使用你指向的CDN来解决这个问题，因为它不会发送必要的跨源头文件。此外，旧版本的PreloadJS不支持跨源。

我快速修改了你的代码，从支持跨源请求（我的测试域）的源手动预加载图像，并使其正常工作。对CreateJS生成的代码进行了一些黑客攻击以使其正确预加载，但请注意，较新版本的库支持这一点没有问题。 https://jsfiddle.net/lannymcnie/sLbgrx08/22/

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

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

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

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

this.animateCall();

当您调用animateCall时，您将转到“animate”标签，即第0帧。这会导致第0帧脚本再次被调用（另一个原因是从Flash外部化您的JS）。我暂时评论了gotoAndPlay。

希望有所帮助。

Answer 3

我检查了你的按钮。它不适用于主.jpg。所以不要让你的.jpg位图到movieclip。你需要重新创建另一个0不透明度的矩形并命名为＆＃34; ReplayBtn＆＃34;

flash中的createjs按钮无效

3 个答案: