5 Replies Latest reply on Feb 16, 2017 11:13 AM by kglad

    Access main Timeline

    aewu Level 1

      Hello,

          I am trying to convert a scrubber I made in Edge to createjs in Animate and am having a terrible time doing something very simple. I am sure this is just my lack of experience with createjs.

       

      All I want to do is have the main timeline stop when the user stops dragging the scrubber, but I cannot get gotoAndStop to work inside the stopIt function below. I have tried every way I can think of to reference it: parent.gotoAndStop(), stage.gotoAndStop(), exportRoot.gotoAndStop()

       

      If I put this.gotoAndStop() outside of the pressup function, it works as expected, so I assume it's a scope thing that I am overlooking. Any help is GREATLY appreciated.

       

      scrubber.on("pressmove", function (evt) {// Enable the scrubber on mousedown

        // Make the scrubber move

              evt.currentTarget.x = Math.max(bounds.x + 8, Math.min(bounds.x + bounds.width - scrubberBounds.width + 8, evt.stageX));

              stage.update();

      });

       

      scrubber.on("pressup", function (evt) {// Go to frame on mouse up

              stopIt();

      });

         

      function stopIt(){

          var playTimeline = Math.ceil(((scrubber.x-255) / 455) * theTotalTime); // Make the scrubber scrub the timeline length of timelinePlay

          console.log(playTimeline);

          this.gotoAndStop(playTimeline);

          }

       

       

       

        • 1. Re: Access main Timeline
          kglad Adobe Community Professional & MVP

          you're losing scope in stopIt.  ie, 'this' isn't defined stopIt().

           

          you could use:

           


           

          scrubber.on("pressmove", function (evt) {// Enable the scrubber on mousedown

            // Make the scrubber move

                  evt.currentTarget.x = Math.max(bounds.x + 8, Math.min(bounds.x + bounds.width - scrubberBounds.width + 8, evt.stageX));

                  stage.update();

          });

           

          scrubber.on("pressup", function (evt) {// Go to frame on mouse up

                  stopIt();

          });

             

          function stopIt(){

              var playTimeline = Math.ceil(((scrubber.x-255) / 455) * theTotalTime); // Make the scrubber scrub the timeline length of timelinePlay

              console.log(playTimeline);

             tl.gotoAndStop(playTimeline);

              }

           

          or

           

          scrubber.on("pressmove", function (evt) {// Enable the scrubber on mousedown

            // Make the scrubber move

                  evt.currentTarget.x = Math.max(bounds.x + 8, Math.min(bounds.x + bounds.width - scrubberBounds.width + 8, evt.stageX));

                  stage.update();

          });

           

          scrubber.on("pressup", function (evt) {// Go to frame on mouse up

                  stopIt(this);

          });

             

          function stopIt(tl){

            
          var playTimeline = Math.ceil(((scrubber.x-255) / 455) * theTotalTime);
          // Make the scrubber scrub the timeline length of timelinePlay

              console.log(playTimeline);

             tl.gotoAndStop(playTimeline);

              }

          • 2. Re: Access main Timeline
            aewu Level 1

            Thank you! This works! Do you know why parent.gotoAndStop() doesn't work since scrubber is a child of the stage?

            • 3. Re: Access main Timeline
              kglad Adobe Community Professional & MVP

              there is no implicit 'this' in createjs, unlike as3.  ie, you must explicitly use:

               

              tl.parent.gotoAndStop();  // used with the first snippet

               

              or

               

              this.parent.gotoAndStop();  // used with the 2nd snippet

              • 4. Re: Access main Timeline
                ClayUUID Adobe Community Professional

                kglad  wrote

                 

                there is no implicit 'this' in createjs,

                That's not quite correct. CreateJS is written in JavaScript, and in JavaScript event handlers "this" is assigned to the global window object by default. When a function is called as an object method, "this" is assigned to the container object.

                 

                this - JavaScript | MDN

                 

                BTW, using "this" as an argument name to a function will cause a runtime error. It's a reserved word.

                1 person found this helpful
                • 5. Re: Access main Timeline
                  kglad Adobe Community Professional & MVP

                  i edited the code to remove that problem.