Flash HTML5 canvas fl_MouseOverHandler

Question

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

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

任何帮助将不胜感激。

/* 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中的代码片段，用于HTML5 Canvas / Timeline Navigation / Click to Go to Frame and Play。

   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. 可以通过调用调用的EventDispatcher方法而不是addEventListener来实现easeljs中可用的替代解决方案（Flash用于生成HTML画布内容的javascript库）。 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();
   }