10 Replies Latest reply on Aug 23, 2017 2:34 PM by keelym35886708

    Using createjs increments (-- / ++) doesn't work on first click?

    keelym35886708 Level 1

      Hi there,

       

      I'm working on an HTML5 canvas document in Adobe Animate CC and I'm curious about something happening with my functions. I have a few movieclips that I'd like to advance through their frames by pressing a button. I have a plus button and minus button to move the movieclips both forwards and backwards through their timelines.

       

      My movieclip names are: accelerator, lift, plane, and heli. (Plane and heli are nested inside lift).

       

      Here is how my code looks for the plus and minus buttons -

      var u = this.accelerator.currentFrame;
      var i = this.lift.plane.currentFrame;
      var o = this.lift.heli.currentFrame;
      
      
      this.plusbtn.addEventListener("click", advance.bind(this));
      function advance(){
      this.accelerator.gotoAndStop(u++);
      this.lift.plane.gotoAndStop(i++*2);
      this.lift.heli.gotoAndStop(o++*2);
      }
      
      
      this.minusbtn.addEventListener("click", rewind.bind(this));
      function rewind(){
      this.accelerator.gotoAndStop(u--);
      this.lift.plane.gotoAndStop(i--*2);
      this.lift.heli.gotoAndStop(o--*2);
      }
      

      What is weird to me is that when I use the plus and minus buttons to move along the timelines, when I first hit the minus button (after having clicked the plus button) it will still go forward one frame, before then starting to go backwards. Same thing if I go from clicking the minus button to clicking the plus button. On the first click, it will still go backwards one frame, before starting to move forwards.

       

      I'm not a coder, so I'm not sure why this is happening? Is there anything I can do to avoid this, so that it immediately moves forward/backwards upon first click of each button?

       

      Thanks!

        • 1. Re: Using createjs increments (-- / ++) doesn't work on first click?
          ClayUUID Adobe Community Professional

          There's no such thing as "createjs increments". The preincrement/postincrement operators are basic JavaScript syntax.

           

          So, when debugging these sort of problems, always ALWAYS examine your assumptions. You're assuming that u, i, o are getting correctly initialized, but have you actually verified it? Try sticking an alert(u); statement after where it's initialized, and in each function that changes it.

           

          And I notice you don't have any logic constraining the frame values. It looks like users could easily run into negative frame numbers.

          • 2. Re: Using createjs increments (-- / ++) doesn't work on first click?
            keelym35886708 Level 1

            Thank you for the correction. I still don't understand much about JavaScript (obviously)!

             

            I've added an alert(u); statement after I declare it as a variable, and after each button function is written. When I test the project, it alerts me that u is 0 three times. I know the frames start at 0 instead of 1 when working in EaselJS. I'm not sure how to set up the alert statement to tell me what u is after I've clicked the plus or minus button?

             

            I don't currently have anything constraining the frame values - since I'm quite new to JavaScript I've been taking my projects one step at a time. I did try to write a function that would disable the plus button once the accelerator movieclip reached it's max frame (it has 30 frames, so I guess it'd be 29), but I haven't had any luck with that. What I tried was -

             

            this.plustbtn.addEventListener("click", full.bind(this));
            function full(){
            if (this.accelerator.currentFrame==29){
            this.accelerator.gotoAndStop(29);
            }
            }
            

             

            My thought was once it hit frame 29 the button would just continually go to the frame - making it seem as if the button had stopped working and the user would have to then use the minus button to go backwards again. However, when I tried this it just continued cycling through all the frames, not stopping at frame 29.

            • 3. Re: Using createjs increments (-- / ++) doesn't work on first click?
              ClayUUID Adobe Community Professional

              if (this.accelerator.currentFrame==29){ 

                   this.accelerator.gotoAndStop(29); 

              }

               

              Why would you tell accelerator to go to where it already is?

              • 4. Re: Using createjs increments (-- / ++) doesn't work on first click?
                anton9800 Level 1

                do your increments/decrements before gotoAndStop, like that:

                 

                function rewind(){ 

                    u--;

                    i--*2;

                    o--*2;

                    this.accelerator.gotoAndStop(u); 

                    this.lift.plane.gotoAndStop(i); 

                    this.lift.heli.gotoAndStop(o);

                }

                 

                Also, what is that *2 for?

                • 5. Re: Using createjs increments (-- / ++) doesn't work on first click?
                  keelym35886708 Level 1

                  I told it to go to the same frame, because I don't know code to make the button 'stop' or to disable it. I figured making it go to the same frame would give it the illusion of the button 'stopping' working - since I don't want it to go any further than frame 29.

                  • 6. Re: Using createjs increments (-- / ++) doesn't work on first click?
                    keelym35886708 Level 1

                    Thanks anton, I tried doing as you suggested, but that didn't seem to change anything. I have the *2 because the 'plane' and 'heli' movie clips are 63 frames (around double of what accelerator is) and I wanted them to appear to reach their ends at the same time.

                    • 7. Re: Using createjs increments (-- / ++) doesn't work on first click?
                      anton9800 Level 1

                      try replacing your code with the following:

                       

                      this.stop();
                      var u = this.accelerator.currentFrame;  
                      var i = this.lift.plane.currentFrame;  
                      var o = this.lift.heli.currentFrame;  
                      //alternatively, since I'm assuming you're starting from the beginning of each clip, you can simply do something like var u = i = o = 0;
                        
                      this.plusbtn.addEventListener("click", advance.bind(this));  
                      this.minusbtn.addEventListener("click", rewind.bind(this));
                      function advance(){  
                       u++;
                       i = (i+2);
                       o = (o+2);
                       this.accelerator.gotoAndStop(u);  
                       this.lift.plane.gotoAndStop(i);  
                       this.lift.heli.gotoAndStop(o); 
                      }  
                      
                      function rewind(){  
                       u--;
                       i = (i - 2);
                       o = (o - 2);
                       this.accelerator.gotoAndStop(u);  
                       this.lift.plane.gotoAndStop(i);  
                       this.lift.heli.gotoAndStop(o);
                      } 
                      

                       

                      I recreated the scene, and it work nicely for me

                       

                      This would work well if your plane/heli timeline is exactly twice the length of accelerator.  Note, that using *2 would result in an exponential growth, probably not something you'd want here.

                      • 8. Re: Using createjs increments (-- / ++) doesn't work on first click?
                        ClayUUID Adobe Community Professional

                        If you want to increment something by twos, you just do i += 2;

                         

                        I now see the original code may have been getting tripped up on the difference between preincrementing and postincrementing.

                         

                        This is preincrementing:

                        var x = 1;

                        alert(++x);

                        alert(x);

                        Displays 2, 2.

                         

                        This is postincrementing:

                        var x = 1;

                        alert(x++);

                        alert(x);

                        Displays 1, 2.

                         

                        The difference is that preincrementing first increments the variable, then uses its value. Postincrementing, on the other hand, uses the variable's value, then increments it.

                         

                        So no wonder your code was acting the way it did. You were using postincrementing and postdecrementing.

                        1 person found this helpful
                        • 9. Re: Using createjs increments (-- / ++) doesn't work on first click?
                          keelym35886708 Level 1

                          Thanks Anton, I tried this code and my buttons stopped working entirely? I think Clay figured it out with his comment below!

                          • 10. Re: Using createjs increments (-- / ++) doesn't work on first click?
                            keelym35886708 Level 1

                            Thanks so much Clay! I didn't realize there was a difference between postincrementing and preincrementing, I changed my variables to preincrement/decrement and that fixed it!