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.
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!