3 Replies Latest reply: Jun 9, 2014 1:20 PM by Rob Dillon RSS

    AS3 scroll animation horiziontally

    melaniesamazing Community Member

      I am currently making an Ad that has a calendar at the top.

      Screen Shot 2014-06-09 at 11.04.14 AM.png

      The arrows to the left and right currently only "tick" to the right and left. I would like it to glide/scroll through instead but I am lost on what to do...

      I was hoping maybe I could get some help from someone out there in Forum land... I appreciate any help I can get. Thank you in advance!

       

       

      //CURRENT CODE//

       

      leftScroll.addEventListener(MouseEvent.CLICK, RIGHT);

       

      function RIGHT(event:MouseEvent):void

      {

          if (scrollNumbers.x <= 28){

              scrollNumbers.x += 20;

          } else {

              scrollNumbers.stop();

          }

      }

       

      rightScroll.addEventListener(MouseEvent.CLICK, LEFT);

       

      function LEFT(event:MouseEvent):void

      {

          if (scrollNumbers.x >= -255){

              scrollNumbers.x -= 20;

          } else {

              scrollNumbers.stop();

          }

      }

        • 1. Re: AS3 scroll animation horiziontally
          Ned Murphy CommunityMVP

          What you need to do depends on what you mean when you say you would like it to glide/scroll thru.  You probably want to look into using the Tween class or one of the better 3rd party tweening classes to accomplish whatever that is.

          • 2. Re: AS3 scroll animation horiziontally
            dmennenoh Community Member

            I would suggest getting TweenMax/Lite from Greensock.com and then from there, you could just replace the line that jumps the x value by 20 with a tween command. Like so:

             

              if (scrollNumbers.x <= 28){

                    scrollNumbers.x += 20;

             

            to

             

              if (scrollNumbers.x <= 28){

                    TweenMax.to(scrollNumbers, 2, {x:"20"});

             

            In TweenMax you can use a string like shown, and it'll move the object relative to it's current position. If you just said 20, it would move it to an x pos of 20.

            • 3. Re: AS3 scroll animation horiziontally
              Rob Dillon CommunityMVP

              The code that you have is telling an object named "scrollNumbers" to move either to the left or to the right by 20 pixels every time one of those functions is called. I don't know what "scrollNumbers" is in your image, so I don't know what is supposed to move.

               

              Regardless, you want to change a single event movement to a continuous movement. To do that you need to change the way that the mouse event controls what is happening. One way to do that is to use a mouseDown event to start the movement and a mouseUp event to stop the movement.

               

              Here's a simple example:

              -------------------------------

              // these two variables control the movement...

              var movingLeft:Boolean = false;

              var movingRight:Boolean = false;

               

              leftScroll.addEventListener(MouseEvent.MOUSE_DOWN, RIGHT);

              leftScroll.addEventListener(MouseEvent.MOUSE_UP, stopMoving);

              stage.addEventListener(Event.ENTER_FRAME,moveMarker);

              rightScroll.addEventListener(MouseEvent.MOUSE_DOWN, LEFT);

              rightScroll.addEventListener(MouseEvent.MOUSE_UP,stopMoving);

               

              // the mouse down event changes the value of the variable

              function RIGHT(event:MouseEvent):void

              {

                  movingRight = true;  

              }

               

               

              function LEFT(event:MouseEvent):void

              {

                  movingLeft = true;

              }

               

              // the mouse up event changes the value of the variables back to false

              function stopMoving(event:MouseEvent):void {

                  movingLeft = false;

                  movingRight = false;

              }

               

              // this function does all the work, if the variable for left or right movement is true

              // then the scrollNumbers object will move one pixel at a time

              function moveMarker(event:Event):void {

                  if(movingLeft && scrollNumbers.x <= 28) {

                       scrollNumbers.x ++;

                  }

                  if(movingRight && scrollNumbers.x >= -255) {

                        scrollNumbers.x --;

                  }

              }

              -------------------------------

              You will probably need to adapt/change this to meet your needs.