• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Behavior of object persisting after leaving frame (HTML5 Canvas)

New Here ,
Apr 01, 2017 Apr 01, 2017

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.

Views

202

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Apr 01, 2017 Apr 01, 2017

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;

}

Votes

Translate

Translate
LEGEND ,
Apr 01, 2017 Apr 01, 2017

Copy link to clipboard

Copied

'tick' belongs to createjs. This might work:

createjs.Ticker.addEventListener("tick", fl_ballMove.bind(this));

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 01, 2017 Apr 01, 2017

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;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 02, 2017 Apr 02, 2017

Copy link to clipboard

Copied

Works perfectly! Thank you, Colin.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 03, 2017 Apr 03, 2017

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines