如何使用 createjs 定位 MovieClip

2022-01-17 00:00:00 javascript html html5-canvas createjs flash-cc

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

Im trying to export an group photo animation that works fine in flash but not when exported in html5 canvas.

诀窍很简单":每张照片都是一个按钮，当您将鼠标悬停在某人的照片上时，他的职称就会出现.

The trick is "simple" : each photo is a button and when you roll your mouse over the picture of someone, his jobtitle appears.

我无法使用 createjs 实现它！

Ican't make it happen with createjs !

我的舞台上有一个名为jobs_cont"的 MovieClip 实例，它的时间线具有不同的关键帧和每个人的工作标题的标签.

I have a MovieClip instance on my stage named "jobs_cont" whose timeline has different keyframes and labels for everyone's jobtitles.

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

The thing is i'm not successfull with targeting "jobs_cont" and using gotoAndPlay a specific frame or label in its timeline when a button is hovered.

仅识别警报指令"，但不识别jobs_cont.gotoAndPlay":

the "alert instruction" alone is recognised but not the "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 的新手，尽管我进行了一天的研究，但还是无法弄清楚.如果有人可以给出提示.谢谢.

I think i must miss something targeting "jobs_cont" in createjs but i'm newbie in javascript and can't figure it out despite my day of researches. If someone could give a hint. Thank you.

推荐答案

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

You are dealing with scope issues. If you define a function on your timeline using the above syntax, the function doesn't have a scope, so this becomes Window.

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

You can change the function syntax to be defined on the current object:

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

最后，JavaScript 不会自动为事件侦听器提供函数范围(还没有！)，因此您必须自己设置函数范围.如果你有 EaselJS 0.7.0 或更高版本，你可以使用 on 方法代替 addEventListener (docs).请注意，您也必须使用 this.fl_MouseOverHandler.

Lastly, JavaScript doesn't automatically provide function scope for event listeners (yet!) so you have to scope the function yourself. If you have a version 0.7.0 or later of EaselJS, you can use the on method instead of addEventListener (docs). Note that you have to use this.fl_MouseOverHandler as well.

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

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

You can also scope the function using a utility method such as Function.prototype.bind() (docs):

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

希望有帮助！

相关文章