如何使用 createjs 定位 MovieClip

Question

我正在尝试导出在 Flash 中可以正常工作但在 html5 canvas 中导出时无法正常工作的合影动画。

诀窍是 "simple"：每张照片都是一个按钮，当您将鼠标悬停在某人的照片上时，他的职位就会出现。

我无法使用 createjs 实现它！

我的舞台上有一个名为 "jobs_cont" 的 MovieClip 实例，它的时间轴具有不同的关键帧和每个人的职位标签。

问题是我没有成功定位 "jobs_cont" 并在悬停按钮时在其时间轴中使用 gotoAndPlay 特定帧或标签。

只有 "alert instruction" 被识别，但 "jobs_cont.gotoAndPlay" 不被识别：

var frequency = 3;
stage.enableMouseOver(frequency);
this.mybutton.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler(){ 
    this.jobs_cont.gotoAndPlay("mylabel");
    alert("hovered by mouse");
    // end of your personalized code
}

我想我一定是在 createjs 中遗漏了一些针对 "jobs_cont" 的东西，但我是 javascript 中的新手，尽管我进行了一天的研究，但还是无法弄清楚。如果有人可以给出提示。谢谢。

Answer 1

您正在处理范围问题。如果您使用上述语法在时间轴上定义一个函数，则该函数没有作用域，因此 this 变为 Window。

您可以更改要在当前对象上定义的函数语法：

this.fl_MouseOverHandler = function(){ 
    this.jobs_cont.gotoAndPlay("mylabel");
    alert("hovered by mouse");
    // end of your personalized code
}

最后，JavaScript 不会自动为事件侦听器提供函数范围（目前！），因此您必须自己确定函数的范围。如果你有 0.7.0 或更高版本的 EaselJS，你可以使用 on 方法而不是 addEventListener (docs)。请注意，您还必须使用 this.fl_MouseOverHandler。

this.mybutton.on("mouseover", this.fl_MouseOverHandler, this);

您还可以使用诸如 Function.prototype.bind() (docs):

等实用方法来确定函数的范围

this.mybutton.addEventListener("mouseover", this.fl_MouseOverHandler.bind(this));

希望对您有所帮助！

如何使用 createjs 定位 MovieClip

how to target a MovieClip with createjs

html

javascript

html5-canvas

createjs

flash-cc