this.stop() not working on html5 canvas

[FutureHope]

Hi,

I am fairly new to Animate so forgive me if i use the wrong lingo. However. I have been supplied a flash move which I am converting to html5 canvas. The problem I have is that movies which are on the main time line loop once when displaying for the first time. I don't know why this is happening, as I have a this.stop() in each frame.

To explain a little more, we have a popupbox animation (among many others), that in each frame has a new messsge (this is expected behaviour), contained in each frame is a this.stop() that is supposed to stop the animation so it only displays the current message. However this popup box when I call this.popup.gotoAndStop(0); plays both frame 0 and frame 1 even though there is a stop on frame 0.

I also have a problem with a flower animation among others which is set up as above. Many frames with this.stop() on each frame (intended to stop the animation on the given frame). But rather than stop the animation when it is loaded for the first time it plays through every frame (the entire animation) ignoring the stop call. Not sure why this is happening.

[kglad]

you probably have an error in your code.

upload your html,js and source folders and post a link to the html so we can help debug your code.

[FutureHope]

Hi I can't post the code because I am working for a government department and they have very strict rules about what we release. But I will have a look for any erros that may be breaking things.

[FutureHope]

Just a quick adittion to this question. The issue that I am having with the child animations looping seems to only happen when I go back to a frame. As an example:

In the primary code base I have the function:

var thethis = this;

thethis.AddClick = function(objectName, func){

    if(typeof thethis['current' + objectName] !== 'undefined'){

        thethis[objectName].off('click', thethis['current' + objectName]);

    }

    thethis['current' + objectName] = thethis[objectName].on('click', func)

}

Then in a particular frame:

thethis.AddClick('nextBtn', function(){

        thethis.stop();   

        thethis.gotoAndStop(293);

    });

When I use the nextBtn (next button) to go back to a frame I have been on before, it loops through all child animations.

[ClayUUID]

I'm curious why you have a stop() statement immediately before a gotoAndStop().

[kglad]

thethis isn't defined on another frame (unless you explicitly defined it).

[FutureHope]

As for:

I'm curious why you have a stop() statement immediately before a gotoAndStop().

Yeah ... I am fairly new to all of this. I thought may be the current frame needed to be stopped before moving on. I see now how silly that is.

As for:

thethis isn't defined on another frame (unless you explicitly defined it).

The variable thethis is defined in the other frame. But thanks for observing.

[FutureHope]

The problem that I seem to be having mainly is that every time an object is displayed for the second time it flashes through all of its animation stages.

[kglad]

you may need to use a delay (eg, 'tick' event) to reference child movieclips. eg,

instead of this.mc.stop();

use:

var F=stopF.bind(this);

this.addEventListener('tick',F);

function stopF(){

this.mc.stop();

this.removeEventListener('tick',F);

}

[ClayUUID]

Note that if you want an event to only fire once, CreateJS provides an .on() method (which also automatically performs function scope binding):

this.on("tick", stopMC, this, true);

function stopMC() {

    this.mc.stop();

}

But this by itself isn't enough. Animate's version of CreateJS is buggy when it comes to movieclips and rewinding the timeline. As you've discovered, returning to an earlier point will cause stopped clips to start playing... and the behavior subtly changes on even and odd attempts!

So far the only rock-solid way I've found to keep movieclips under control when jumping around the timeline is:

frame 0: this.stop();

frame 1: this.gotoAndStop(0);

frame 2 and beyond: actual content

So then you have to do this.mc.gotoAndPlay(2); to actually play the clip, but only after it's been back on the stage for 1 frame or more so it won't be overridden by the code within the clip.

I really hope Adobe fixes this. It's a mess.

[FutureHope]

Thanks guys you got me on the right track. I managed to create a function that would reset the movie clip so it no longer looped. For future readers be aware that this function uses core features which may change on new version numbers. It works for me on my version it may not work for you.

This function rewinds a movie clip to the start and prevents a bug from moving the clip forward. Note this is a hack and is likely to fail in future.

ResetMovieClip = function(clip){

         //set the attributes that say this clip is in the beginning state

        clip._prevPos = clip._previousPosition = -1,

        clip._t = clip.currentFrame = 0;

        //pause the clip so it does not progress

        clip.paused = !0;

        //we only want to do this once

        clip['preventMove'] = true;   

       //when the first tick occurs do the following   

        clip['remEvent'] = clip.on("tick", function(){

          //only if this is the first tick

           if(this.preventMove == true){

                //reset the movie

                this._prevPos = this._previousPosition = -1,

                this._t = this.currentFrame = 0;

               //pause the movie

                this.paused = !0;

              //remove this event handler

               this.preventMove = false;

               this.off('tick', this.remEvent);

           }

        });

}

[FutureHope]

Hi,

The above code had a bug ... this version seems to work better.

ResetMovieClip = function(clip){

        if(typeof clip.remEvent !== 'undefined'){

            clip.off('tick', clip.remEvent);

        }

        if(typeof clip['newFunctionsAttached'] == 'undefined'){

            var old_play_prototype = clip.gotoAndPlay.prototype;

            var old_play = clip.gotoAndPlay;

            clip.gotoAndPlay = function () {

                clip.preventMove = false;

                clip.off('tick', clip.remEvent);

                old_play.apply(this, arguments);

            };

            clip.gotoAndPlay.prototype = old_play_prototype;

            var old_stop_prototype = clip.gotoAndStop.prototype;

            var old_stop = clip.gotoAndStop;

            clip.gotoAndStop = function () {

                clip.preventMove = false;   

                clip.off('tick', clip.remEvent);

                old_stop.apply(this, arguments);

            };

            clip.gotoAndStop.prototype = old_stop_prototype;

            clip['newFunctionsAttached'] = true;

        }

        clip._prevPos = clip._previousPosition = -1,

        clip._t = clip.currentFrame = 0;

        clip.paused = !0;

        clip['preventMove'] = true;       

        clip['remEvent'] = clip.on("tick", function(){

           if(this.preventMove == true){              

               this._prevPos = this._previousPosition = -1,

                this._t = this.currentFrame = 0;

                this.paused = !0;

               this.preventMove = false;

           }

           this.off('tick', this.remEvent);

        });

}

There could be more revisions for this .... as I am currently testing.

[FutureHope]

Ok ... hopefully this is it. The following function seems to work for all cases that I was having issues with. However I don't use gotoAndPlay so it may not work in those instances. But the following function has fixed all the issues I was having.

ResetMovieClip = function(clip){

     if(typeof clip.remEvent !== 'undefined'){

         clip.off('tick', clip.remEvent);

  }

     if(typeof clip['newFunctionsAttached'] == 'undefined'){

   var old_play_prototype = clip.gotoAndPlay.prototype;

   var old_play = clip.gotoAndPlay;

   clip.gotoAndPlay = function () {

                clip.preventMove = false;

    clip.off('tick', clip.remEvent);

    clip.off('tick', clip.remStopEvent);

    old_play.apply(this, arguments);

   };

   clip.gotoAndPlay.prototype = old_play_prototype;

   var old_stop_prototype = clip.gotoAndStop.prototype;

   var old_stop = clip.gotoAndStop;

            clip['remStopEvent'] = null;

   clip['doStopEvent'] = null;

   clip.gotoAndStop = function () {             

    clip.off('tick', clip.remStopEvent);

                clip.doStopEvent = true;

    clip.preventMove = false;

    clip.off('tick', clip.remEvent);

    old_stop.apply(this, arguments);

    var args = arguments;

    clip.remStopEvent = clip.on('tick', function(){ 

     if(clip.doStopEvent){

      clip.doStopEvent =  false;       

      clip.gotoAndStop(args[0]);

     }

     clip.off('tick', clip.remStopEvent);

    });

   };

   clip.gotoAndStop.prototype = old_stop_prototype;

   clip['newFunctionsAttached'] = true;

  }

     clip._prevPos = clip._previousPosition = -1,

  clip._t = clip.currentFrame = 0;

  clip.paused = !0;

        clip['preventMove'] = true;

  clip['remEvent'] = clip.on("tick", function(){

     if(this.preventMove == true){    

      this._prevPos = this._previousPosition = -1,

    this._t = this.currentFrame = 0;

    this.paused = !0;

      this.preventMove = false;

     }

     this.off('tick', this.remEvent);

  });

}

[ClayUUID · Accepted solution]

clip['newFunctionsAttached'] = true;

clip['preventMove'] = true; 

clip['remEvent'] = clip.on("tick", function(){

You can just use dot syntax for all those:

clip.newFunctionsAttached = true;

clip.preventMove = true; 

clip.remEvent = clip.on("tick", function(){

Your approach got me thinking, so I did some more poking around in the source and found the autoReset property. Setting this false on a movieclip causes it to stay on the same frame even when jumping around the parent timeline.

I think I can use this.

[FutureHope]

I tried autoReset on my child animations and it solved the issues I was having, without all my verbose code. Thanks for that, will make it a lot simpler.

[FutureHope]

autoReset ... interesting .... could be useful