4 Replies Latest reply on Mar 26, 2017 5:19 PM by arthurb65311981

    easing of gotoandstop (flash-js migration)

    arthurb65311981

      hi

      sos! (designer searching for help from coders).

      i'm trying to build an animation, that interacts with user input: mousewheel, keyboard and touch. the idea disscussed previously in this thread:

      https://forums.adobe.com/thread/2190958

      now. i have a movieclip with animation on main stage, everything works fine(forward/backward etc.), but instead of straight motion, i want to implement some easing to scroll. every time, when i swipe, when i press key, or when i move mousewheel, i want my (stopped) animation move some frames forward/backward respectively with easing. i found some code, based on robert penner equations, but my knowlege isn't enough for implement it. any help will be appreciated.

      yay.

       

       

      document.addEventListener('mousewheel',f.bind(this));
      document.addEventListener('DOMMouseScroll',f.bind(this));
      document.addEventListener('keydown',k.bind(this));
      
      
      var time = 0;
      var diff = 30;
      var minTime = 0;
      var maxTime = 1000;
      
      
      function easeInOutQuad(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t + b;
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
      }
      
      
      function easing(){
      for (var i = 0, len = diff; i <= len; i++) {
        (function(s) {setTimeout(function() {console.log(s);}, time);})(i);
        time = easeInOutQuad(i, minTime, maxTime, diff);
        console.log(time);
      }
      }
      
      
      function f(e){
      if (e.wheelDelta > 0||e.detail>0){
        easing();
        this.mymc.gotoAndStop(this.mymc.currentFrame+s);
        } else if(e.wheelDelta < 0||e.detail<0){
        easing();
        this.mymc.gotoAndStop(this.mymc.currentFrame-s)
      }
      
      
      }
      function k(event){
      if (event.which===37){this.mymc.gotoAndStop(this.mymc.currentFrame-1);}
      if (event.which===39){this.mymc.gotoAndStop(this.mymc.currentFrame+1);}
      }
      

       

      **gives me .s from easing function "undefined".

        • 1. Re: easing of gotoandstop (flash-js migration)
          ClayUUID Adobe Community Professional

          I believe that even if you could get this to work, it wouldn't look very good. When you're easing an object the easing formula can create infinitely many positions between the start and stop points. But a timeline only has a finite number of discrete positions, so a slow ease would result in coarse, jumpy animation.

          • 2. Re: easing of gotoandstop (flash-js migration)
            arthurb65311981 Level 1

            thank you for your response.

            you think even in high fps it will cause problems? i mean, easing is very short here - 30 positions in one second, and that's all. and i can make movie even more faster, let's say, 60 fps?

             

            *this example of code give acceptable results (amount of events per second), imho.

            but, again, unfortunately, i am not coder.

             

            var time = 0;

            var diff = 30;

            var minTime = 0;

            var maxTime = 1000;

             

            function easeInOutQuad(t, b, c, d) {

              if ((t /= d / 2) < 1) return c / 2 * t * t + b;

              return -c / 2 * ((--t) * (t - 2) - 1) + b;

            }

             

            for (var i = 0, len = diff; i <= len; i++) {

              (function(s) {setTimeout(function() {console.log(s);}, time);})(i);

              time = easeInOutQuad(i, minTime, maxTime, diff);

              console.log(time);

            }

             

             

            **btw, can you help me with coding?

            • 3. Re: easing of gotoandstop (flash-js migration)
              ClayUUID Adobe Community Professional

              Smoothness will be a function of both frame rate and number of frames. The higher the number of frames the better.

               

              Now, it's kind of pointless to try rolling your own easing when Animate has a perfectly good Tween library built in. However, the tween library can't make function calls, it can only set property values. So what you can do every time the mouse wheel moves is start a new tween of a variable value, then attach an event listener to the tween that takes that variable's changed values and translates it into a gotoAndStop() call.

               

              Something like this:

               

              this.stop();

               

              if (!this.init) {

                  this.init = true; // ensure this only runs once

                  document.addEventListener("mousewheel", scrollHandler.bind(this));

                  document.addEventListener("DOMMouseScroll", scrollHandler.bind(this));

                  document.addEventListener("keydown", keyHandler.bind(this));

               

                  var conClip = this; // clip being controlled

                  var wheelInc = 10; // frames

                  var tweenDuration = 500; // milliseconds

                  var wheelTween; // wheel tween handle

              }

               

              function scrollHandler(evt) {

                  var delta, newFrame;

                  if (evt.wheelDelta > 0 || evt.detail > 0) {

                      delta = wheelInc;

                  }

                  else if (evt.wheelDelta < 0 || evt.detail < 0) {

                      delta = -wheelInc;

                  }

                  newFrame = calcNewFrame(delta);

                  // initialize virtual frame counter

                  conClip.wheelFrame = conClip.currentFrame;

                  // tween virtual counter from current value to new value

                  if (wheelTween) {

                      wheelTween.removeAllEventListeners();

                  }

                  wheelTween = createjs.Tween.get(conClip, {override:true}).to({wheelFrame: newFrame}, tweenDuration, createjs.Ease.quintOut);

                  // every time tween updates, move controlled clip frame to value of virtual frame counter

                  wheelTween.addEventListener("change", updateFrame.bind(conClip));

              }

               

              function keyHandler(evt) {

                  var delta;

                  if (evt.keyCode === 37) { // left arrow

                      delta = -1;

                  }

                  else if (evt.keyCode === 39) { // right arrow

                      delta = 1;

                  }

                  conClip.gotoAndStop(calcNewFrame(delta));

              }

               

              function calcNewFrame(delta) {

                  var newFrame = conClip.currentFrame + delta;

                  if (newFrame < 0) {

                      newFrame = 0;   

                  }

                  if (newFrame > conClip.totalFrames - 1) {

                      newFrame = conClip.totalFrames - 1;

                  }

                  return newFrame;

              }

               

              function updateFrame() {

                  this.gotoAndStop(Math.floor(this.wheelFrame));

              }

               

              Note the use of createjs.Ease.quintOut as the ease equation. You can use any of the built-in eases that are listed here: CreateJS Ease Equations

              • 4. Re: easing of gotoandstop (flash-js migration)
                arthurb65311981 Level 1

                wow! kinda magic! thank you, it works!