如何使用 createjs 定位 MovieClip

问题描述

我正在尝试导出在 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));

希望有帮助！

这篇关于如何使用 createjs 定位 MovieClip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！