Remove/Restart Ticker

[aewu]

Hello,

    I am creating a canvas animation that I want to restart. I am using the ticker and have tried numerous was to remove/restart it, but it continues to increment no matter what I do.

Here is how I initialize it:

createjs.Ticker.addEventListener("tick", handleTick);

createjs.Ticker.setFPS(24);

console.log(createjs.Ticker.getTicks());

in my restart function, I do this, but have tried numerous ways:

createjs.Ticker.removeAllEventListeners();

createjs.Ticker.addEventListener("tick", handleTick);

console.log(createjs.Ticker.getTicks()); //When I output this, it just picks up where it left off even though I remove it.

Please note that I do not want to pause it. I would like it to start again from 0 when I restart.

As always, any insight is much appreciated!

[kglad]

what do you want to restart?

[aewu]

I want to go back to the first frame and I am checking to see if the current tick is greater than the total time of the animation to see whether to have my timeline scrubber continue to increment.

[kglad]

how can the current tick possibly be greater than the total time of your animation, unless by animation you mean something non-obvious.

[aewu]

The ticker does not stop when the animation reaches the final frame with a stop action it. It continues to tick so that when I output console.log(createjs.Ticker.getTicks()) this number continues even though my animation has reached the last frame in the timeline. I would expect it to restart at 0 if I replay the animation. Perhaps I am not understanding how it works.

[ClayUUID]

If you want a number that corresponds to the current frame, why are you not using currentFrame then?

[aewu]

I had problems with currentFrame in canvas. Didn't you write a post about that?

I basically have a timeline slider that worked perfectly in Edge and I just started re-writing it using createjs and Canvas a week ago and just keep hitting roadblacks (admittededly due to my lack of createjs knowledge). I want to have the slider go back to 0 and then increment with the ticker interval so that it appears to sync with the timeline. I decided to just set a var that restarts the count and increments with each tick. Now the issue that I'm having is that the ticker speed does not seem to run at a consistent 24FPS, so my slider speed is inconsistent.

[kglad]

your slider should have its position updates using settings in a ticker listener function.  if your timeline plays at an irregular rate (because your computer can't maintain the frame rate), your slider's speed will be inconsistent.

is that what you're seeing?

[AMULI]

the ticker speed does not seem to run at a consistent 24FPS

Look at the getMeasuredTickTime() doc entry for an explanation of possible time drift with a ticker :


http://www.createjs.com/docs/easeljs/classes/Ticker.html#method_getMeasuredTickTime

[AMULI]

Example of a 100 frames animation with number incremented from 0 to 9 each 10 frames.

Two dynamic text fields displaying the measured FPS and the elapsed time.

Code in frame 1 :

root = this;

createjs.Ticker.setFPS( 24);

createjs.Ticker.addEventListener( "tick", handleTick);

function handleTick( event)

{

    root.measuredFPS.text = Math.round( createjs.Ticker.getMeasuredFPS());

    root.time.text = Math.round( createjs.Ticker.getTime());

}

Code in last frame :

this.gotoAndPlay( 0);

createjs.Ticker.reset();

You can verify by running the following file that

• getMeasuredFPS() may give a value lower than 24 fps ;

• each execution stops displaying a slightly different time value.

Downloadable here : https://app.box.com/s/esbzkn6dlvpn5nifpuidjrcwiha199ck

But looks like your problem doesn't need a ticker. Could you please explain why you think you do need it ?

[aewu]

Thank you for this. The reason I am using a ticker is to increment the position of the slider by the slider.x + (width of the slider area/totalTime) on each tick. Does that make sense? I am going to do some experimenting with the information you provided and will post what worked. I appreciate your response!

[AMULI]

Ok. I understood "slider" as an image slider (a certain number of slides, plus interactive controls, may be simple "next" and "previous" buttons).

But it's horizontal scrolling (https://en.wikipedia.org/wiki/Scrolling), may be parallax scrolling (https://en.wikipedia.org/wiki/Parallax_scrolling) ?

[AMULI]

Is it that kind of automatic horizontal scrolling (here a 2560 x 380 image scrolling through a 550 x 380 window) ?

https://app.box.com/s/m4qb7zp3m0hl04vd5h7yov3cyt8ogliz

It's pure timeline tweening : no ticker needed

[ClayUUID]

aewu  wrote

The reason I am using a ticker is to increment the position of the slider by the slider.x + (width of the slider area/totalTime) on each tick.

You are Doing It Wrong. If you want a widget to display the current position within the movie, the simplest and most robust approach is to use currentFrame inside your Ticker listener.

[aewu]

Ok, so the key issue that I was having with the ticker speed is that it was basically getting re initialized every time I "rewind" using gotoAndPlay(0);

To remedy this problem, I put the ticker inside of this function so that the listener is only added when the window is initialized. My slider (or timeline scrubber) is now in sync with the animation on the timeline.

if (!window.iHaveBeenInitialized) {

     createjs.Ticker.addEventListener("tick", handleTick);

     createjs.Ticker.setFPS(24);

     useTicks = true;

}

function handleTick(event) {

       if(sliderBtn.x >= bounds.x && sliderBtn.x <= 700){

       sliderBtn.x = sliderBtn.x + (bounds.width/theTotalFrames);

  }

}

[ClayUUID · Accepted solution]

I'm going to say again that doing it that way is wrong. Incrementing the position of the slider every tick is an incredibly brittle solution that only works when the timeline is playing. Stopping, pausing, or rewinding the timeline completely breaks it. A proper solution that doesn't have any of those problems would look more like this:

function handleTick() {

    sliderBtn.x = bounds.x + bounds.width * (exportRoot.currentFrame / exportRoot.totalFrames);

}

The sort of thing you're trying to do is the very reason the currentFrame property exists, so people don't have to resort to ugly hacks to sync code-based animation with the timeline.

Also, there's no reason to include setFPS in your initialization function, since the FPS is already automatically set to the stage frame rate. And I'm pretty sure "useTicks = true" doesn't do anything. There is no global variable "useTicks".

[aewu]

This works well. Thank you! Also deleting the useTicks and setFPS resulted in no change, so you are right about that too. Thank you for your help and patience.

[kglad]

you're missing something.  i'm not sure what.

you need to explain exactly what you want

[ClayUUID]

30 seconds of Googling...

EaselJS v0.8.2 API Documentation : Ticker - reset

EaselJS v0.8.2 API Documentation : Ticker - init

I don't know why you'd think removing event listeners from the Ticker would stop it. Events happen regardless of whether they're being listened for.

That being said, I'm doubtful that resetting the ticker will accomplish what you think it will. I kind of hope it doesn't, because messing with the global ticker sounds like a horrible hack.

[aewu]

This did not work. I tried. Also, please keep in mind that you likely have a lot more experience than I do and I'm trying to feel this out. I am a big advocate of trying to figure things out myself and only post after trying several different ways of doing something. Pointing out the time it takes for you to Google something that didn't work for me is not helpful and not why I use these forums.