15 Replies Latest reply on Jun 1, 2017 4:51 PM by Hope this Helps

    this.stop() not working on html5 canvas

    Hope this Helps Level 1

      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.

        • 1. Re: this.stop() not working on html5 canvas
          kglad Adobe Community Professional & MVP

          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.

          • 2. Re: this.stop() not working on html5 canvas
            Hope this Helps Level 1

            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.

            • 3. Re: this.stop() not working on html5 canvas
              Hope this Helps Level 1

              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.

              • 4. Re: this.stop() not working on html5 canvas
                ClayUUID Adobe Community Professional

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

                • 5. Re: this.stop() not working on html5 canvas
                  kglad Adobe Community Professional & MVP

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

                  • 6. Re: this.stop() not working on html5 canvas
                    Hope this Helps Level 1

                    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.

                    • 7. Re: this.stop() not working on html5 canvas
                      Hope this Helps Level 1

                      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.

                      • 8. Re: this.stop() not working on html5 canvas
                        kglad Adobe Community Professional & MVP

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

                        }

                        • 9. Re: this.stop() not working on html5 canvas
                          ClayUUID Adobe Community Professional

                          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.

                          • 10. Re: this.stop() not working on html5 canvas
                            Hope this Helps Level 1

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

                                       }

                                    });

                            }

                            • 11. Re: this.stop() not working on html5 canvas
                              Hope this Helps Level 1

                              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.

                              • 12. Re: this.stop() not working on html5 canvas
                                Hope this Helps Level 1

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

                                  });

                                }

                                • 13. Re: this.stop() not working on html5 canvas
                                  ClayUUID Adobe Community Professional

                                  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.

                                  • 14. Re: this.stop() not working on html5 canvas
                                    Hope this Helps Level 1

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

                                    • 15. Re: this.stop() not working on html5 canvas
                                      Hope this Helps Level 1

                                      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.