Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

AS3 scroll animation horiziontally

New Here ,
Jun 09, 2014 Jun 09, 2014

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

    }

}

TOPICS
ActionScript
218
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 09, 2014 Jun 09, 2014

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 09, 2014 Jun 09, 2014

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 09, 2014 Jun 09, 2014
LATEST

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines