How can I create a simple "slider" with Flash AS3 - actionscript-3

Question

I'm trying to create a jQuery-like slider in Flash. I'm currently using the tween class to move an object's x position, but it's slightly buggy. I have to use flash because it's being incorporated into a brochure software that works best with Flash.
When I click on the right arrow button, the object moves to a new x position. When I click on the button again, it moves, but sometimes it jumps back to the current position. When I click on the left button, it sometimes overshoots the destination.
I can create a simple "click to go to next frame" type of scroller, but it wouldn't provide the same tween/scrolling effect.
This is the code I'm using:
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var scrollTweenRight:Tween = new Tween(mc_scroll, "x", Strong.easeOut, mc_scroll.x, mc_scroll.x-1940, 3, true);
scrollTweenRight.stop();
var scrollTweenLeft:Tween = new Tween(mc_scroll, "x", Strong.easeOut, mc_scroll.x, mc_scroll.x+1940, 3, true);
scrollTweenLeft.stop();
// functions
function scrollRight(e:MouseEvent){
scrollTweenRight.start();
}
function scrollLeft(e:MouseEvent){
scrollTweenLeft.start();
}
// listeners
btn_right.addEventListener(MouseEvent.CLICK, scrollRight);
btn_left.addEventListener(MouseEvent.CLICK, scrollLeft);

Answer 1

Use some library like TweenLite/TweenMax/Tweener, the built in one is not too good (and pretty slow as well).
If you want to move in regular 'steps', do not use mc.x to determine the final position as that will be taken upon each click on the button. Always store the 'final' (desired) position in a var. Example:
var shouldMoveToX:Number = 0; //initial position value
var step:Number = 500;
function scrollLeft(e:MouseEvent):void {
shouldMoveToX += step;
//kill the tween if any - I dunno if this is necessary, I haven't used Tween class in ages
//start the tween, pass the final position as shouldMoveToX
}
EDIT:
Oh I see what the problem is now - you are passing the mc's X pos into the constructor of Tween and you actually never update it. The tween will always begin from this point. Put that into your scrollLeft/Right functions:
function scrollRight(e:MouseEvent){
scrollTweenRight.begin = mc_scroll.x;
scrollTweenRight.start();
}
What I wrote above still applies, always use the shouldMoveToX as final position, otherwise it will have irregular movement when fast clicking.
...so your full code should look something like this:
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var scrollTweenRight:Tween = new Tween(mc_scroll, "x", Strong.easeOut, mc_scroll.x, mc_scroll.x, 3, true);
scrollTweenRight.stop();
var scrollTweenLeft:Tween = new Tween(mc_scroll, "x", Strong.easeOut, mc_scroll.x, mc_scroll.x, 3, true);
scrollTweenLeft.stop();
var step:Number = 100;
var shouldMoveToX:Number = mc_scroll.x;
// functions
function scrollRight(e:MouseEvent){
scrollTweenRight.begin = mc_scroll.x;
shouldMoveToX -= step;
scrollTweenRight.finish = shouldMoveToX;
scrollTweenRight.start();
}
function scrollLeft(e:MouseEvent){
scrollTweenLeft.begin = mc_scroll.x;
shouldMoveToX += step;
scrollTweenLeft.finish = shouldMoveToX;
scrollTweenLeft.start();
}
// listeners
btn_right.addEventListener(MouseEvent.CLICK, scrollRight);
btn_left.addEventListener(MouseEvent.CLICK, scrollLeft);