Skip to main content
F
FutureHope
Inspiring
May 30, 2017
Answered

this.stop() not working on html5 canvas

  • May 30, 2017
  • 8 replies
  • 5590 views

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.

    This topic has been closed for replies.
    Correct answer ClayUUID

    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.

    8 replies

    F
    FutureHopeAuthor
    Inspiring
    June 1, 2017

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

    F
    FutureHopeAuthor
    Inspiring
    June 1, 2017

    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);

      });

    }

    C
    ClayUUIDCorrect answer
    Legend
    June 1, 2017

    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.

    F
    FutureHopeAuthor
    Inspiring
    June 1, 2017

    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.

    F
    FutureHopeAuthor
    Inspiring
    June 1, 2017

    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.

    F
    FutureHopeAuthor
    Inspiring
    June 1, 2017

    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);

               }

            });

    }

    F
    FutureHopeAuthor
    Inspiring
    May 31, 2017

    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
    Community Expert
    kgladCommunity Expert
    Community Expert
    May 31, 2017

    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);

    }

    F
    FutureHopeAuthor
    Inspiring
    May 31, 2017

    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.

    F
    FutureHopeAuthor
    Inspiring
    May 31, 2017

    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.

    C
    ClayUUID
    Legend
    May 31, 2017

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

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    May 31, 2017

    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.

    F
    FutureHopeAuthor
    Inspiring
    May 31, 2017

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices