Flash HTML5 画布 fl_MouseOverHandler

Question

我对 Flash Actionscript 和 Javascript 还很陌生，但如果可能的话，我希望在这里能得到一些帮助。我正在使用画布元素创建一个网站，画布上有一个图像，当您滚动该图像的一部分时，会播放一个电影剪辑，当您单击它时，它会将您带到另一个页面。 我正在使用 flash 来创建它，但我很难弄清楚出了什么问题。我正在使用代码 sn-ps 添加事件处理程序，但我没有播放影片剪辑。页面链接有效，但鼠标悬停事件无效。

另外，我的影片剪辑包含许多层，这会有所不同吗？

任何帮助将不胜感激。

/* Stop a Movie Clip*/
this.movieClip_11.stop();

/* Mouse Over Event*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_11.addEventListener("mouseover", fl_MouseOverHandler_32);

function fl_MouseOverHandler_32()
{
this.movieClip_11.play();
}

/* Play a Movie Clip*/

/* Click to Go to Web Page*/
this.movieClip_11.addEventListener("click", fl_ClickToGoToWebPage_15);

function fl_ClickToGoToWebPage_15() {
window.open("___", "_self");
}

Answer 1

问题在于 javascript 处理作用域（即 this）的方式与 ActionScript 不同。在 AS3 中，您可以假设事件处理程序维护其包含对象的范围。在 JS 中，情况并非如此。这里有几个解决这个问题的方法：

1. 您可以使用bind method 将范围传递给事件处理程序。例如，该技术在 Flash 中的代码 sn-ps 中用于 HTML5 画布/时间线导航/单击以转到帧和播放。

   this.movieClip_11.stop();
   var frequency=3;
   stage.enableMouseOver(frequency);
   this.movieClip_11.addEventListener("mouseover",         
       fl_MouseOverHandler_32.bind(this));
   
   function fl_MouseOverHandler_32()
   {
       this.movieClip_11.play();
   }
   

2. easeljs（Flash 用于生成 HTML 画布内容的 javascript 库）中可用的替代解决方案是通过调用名为 on 而不是 addEventListener 的 EventDispatcher 方法来实现的。 easeljs docs 现在事件处理程序假定调度事件的对象的范围。

   this.movieClip_11.stop();
   var frequency=3;
   stage.enableMouseOver(frequency);
   this.movieClip_11.on("rollover",fl_MouseOverHandler_32);
   
   function fl_MouseOverHandler_32()
   {
       this.play();
   }