0

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.

Ican't make it happen with createjs !

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

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.

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
}

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.

CactusZeus Chonch
  • 7
  • 6

1 Answers1

1

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
}

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);

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));

Hope that helps!

Lanny
  • 11,244
  • 1
  • 22
  • 30
  • Yes, it definitely does ! In a way you have to declare the function "in itself" and add an eventlistener to it afterwards. This was really tricky for me. Thanx for your quickly and comprehensive answer. It works like a charm now ;-) – CactusZeus Chonch Nov 11 '15 at 00:14