javascripthtmlhtml5-canvascreatejsflash-cc

how to target a MovieClip with createjs


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.


Solution

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