Copy link to clipboard
Copied
Hi,
I am new to the HTML5 Canvas, and I'm having an issue with object behavior. Specifically object behavior continuing after leaving a frame.
I have two frames in the canvas, the first labeled "Menu" and the second labeled "Animation".
In the Animation frame, I have the following code which moves a ball horizontally across the screen, then looping it back around after it leaves the stage.
var widthMax = stage.canvas.width;
var dx = 1;
this.ball.addEventListener("tick", fl_ballMove.bind(this));
function fl_ballMove(){
this.ball.x += dx;
if (this.ball.x > widthMax) {
this.ball.x = 0;
}
}
Whenever I go to the previous frame (Menu) then back to the Animation frame the ball begins moving faster. Is the behavior continuing and the dx variable being applied on top of the current behavior? Is there any way to cease the objects behavior upon leaving the frame?
Sorry for the newbie question, I'm very new to Animate and createJS. Any help is appreciated, thank you.
Something else, if you add a listener and then add it again, it will trigger twice. You could check to see if you've done that already. Something like this:
var listening;
if(!listening){
createjs.Ticker.addEventListener("tick", fl_ballMove.bind(this));
listening = true;
}
Copy link to clipboard
Copied
'tick' belongs to createjs. This might work:
createjs.Ticker.addEventListener("tick", fl_ballMove.bind(this));
Copy link to clipboard
Copied
Something else, if you add a listener and then add it again, it will trigger twice. You could check to see if you've done that already. Something like this:
var listening;
if(!listening){
createjs.Ticker.addEventListener("tick", fl_ballMove.bind(this));
listening = true;
}
Copy link to clipboard
Copied
Works perfectly! Thank you, Colin.
Copy link to clipboard
Copied
Related, and important to be aware of in Canvas mode, is that event listeners on clips don't just persist when they leave the stage, they keep running.
It would be nice if Animate didn't dispatch events to clips that aren't being rendered, but it does. It would be nice if there was some property on clips that event handlers could monitor to reliably determine if they're being rendered, but there isn't. So until Adobe improves this situation, it's something we have to manage ourselves.