javascript - Flash HTML5 Canvas fl_MouseOverHandler

Question

我对 Flash Actionscript 和 Javascript 还很陌生，但如果可能的话，我希望在这里获得一些帮助。我正在使用 canvas 元素创建一个网站， 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/时间轴导航/单击转到帧并播放的代码片段中使用。

   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 Canvas 内容的 javascript 库)中提供的替代解决方案是通过调用名为 on 的 EventDispatcher 方法来实现的，而不是 addEventListener。 easeljs docs现在，事件处理程序假定分派(dispatch)事件的对象的范围。

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