Make pictures slide in and out of view?

Question

Hello!  I have created an xml slide show and currently when one presses the next or back btns then the next or previous image will come on screen. I am trying to make it where when one presses next the next image will slide on the screen from the right side and stop at the center while the previous image slides off to the left side.  I am posting the code that I have currently but I am not sure where to take it from here.
I am fairly new to AS as a note.
var xmlRequest:URLRequest = new URLRequest("imageData.xml");
var xmlLoader:URLLoader = new URLLoader(xmlRequest);
var imgData:XML;
var imageLoader:Loader;
var rawImage:String;
var rawH:String;
var rawW:String;
var imgNum:Number = 0;
var checkSec:Timer = new Timer(100);
var numberOfChildren:Number;
var vx:Number = 0;
var ax:Number = 0;
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF);
btnNext.addEventListener(MouseEvent.CLICK, nextImgF);
btnNext.buttonMode = true;
btnBack.addEventListener(MouseEvent.CLICK, prevImgF);
btnBack.buttonMode = true;
function xmlLoadedF (event:Event):void{
     checkSec.start();
     checkSec.addEventListener(TimerEvent.TIMER, checkerF);
     imgData = new XML(event.target.data);
function packagedF():void{
     checkSec.removeEventListener(TimerEvent.TIMER, checkerF);
     rawImage = imgData.image[imgNum].imgURL;
     numberOfChildren = imgData.*.length();
     rawW = imgData.image[imgNum].imgW;
     rawH = imgData.image[imgNum].imgH;
     imageLoader = new Loader;
     imageLoader.load(new URLRequest(rawImage));
     master_mc.addChild(imageLoader);
     imageLoader.x = (stage.stageWidth - Number(rawW)) /2;
     imageLoader.y = (stage.stageHeight - Number(rawH)) /5;
function checkerF(event:TimerEvent):void {
     if (imgNum == 0) {
          packagedF();
     }else if(imgNum < numberOfChildren) {
          packagedF();
     }else{
          imgNum = 0;
          packagedF();
function nextImgF(event:MouseEvent):void {
     checkSec.addEventListener(TimerEvent.TIMER, checkerF);
     imgNum++;
function prevImgF(event:MouseEvent):void {
     checkSec.addEventListener(TimerEvent.TIMER, checkerF);
     imgNum--;
I was able to manage getting the image to come on screen and slide off to the right or left with onEnterFrame but not with the use of a btn. And then my code for the buttons did not work any more. Here is the basic code I used for that (just the basic added code not included in the above code). I also modified the above a little to fit this code but here it is so you get the idea:
private var vx:Number = 0;
private var ax:Number = .2;
//this was included at the end of the- function packageF():void {
        addEventListener(Event.ENTER_FRAME, onEnterFrame);
private function onEnterFrame(event:Event):void {
        vx += ax;
        imageLoader.x += vx;
I am probably doing this totally wrong and not going in the right direction.
Can you pls help me? Thanks in advance!

Answer 1

Hey thanks! Tween was just the tool and works well now. The first eases on stage from the left and when I press the btnNext the image on stage eases out to the left and the next image eases on from the right.
This leads to my next question.... When I add the btnBack it goes all funky.. the image that went off stage to the left comes back on stage from the left but then the next image on the right comes on stage at the same time! I am trying to get the image that went off stage to the left when I pressed next to come back on stage and the current picture that is on screen to go back off the the right.
Here is my code thats working with tween but not on the back btn:
import fl.transitions.Tween;
import fl.transitions.easing.*;
var xmlRequest:URLRequest = new URLRequest("imageData.xml");
var xmlLoader:URLLoader = new URLLoader(xmlRequest);
var imgData:XML;
var imageLoader:Loader;
var rawImage:String;
var rawH:String;
var rawW:String;
var inTween:Tween
var outTween:Tween
var imgNum:Number = 0;
var checkSec:Timer = new Timer(100);
var numberOfChildren:Number;
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF);
btnNext.addEventListener(MouseEvent.CLICK, nextImgF);
btnBack.addEventListener(MouseEvent.CLICK, prevImgF);
btnNext.buttonMode = true;
btnBack.buttonMode = true;
function xmlLoadedF (event:Event):void{
     checkSec.start();
     checkSec.addEventListener(TimerEvent.TIMER, checkerF);
     imgData = new XML(event.target.data);
function packagedF():void{
     checkSec.removeEventListener(TimerEvent.TIMER, checkerF);
     rawImage = imgData.image[imgNum].imgURL;
     numberOfChildren = imgData.*.length();
     rawW = imgData.image[imgNum].imgW;
     rawH = imgData.image[imgNum].imgH;
     imageLoader = new Loader;
     imageLoader.load(new URLRequest(rawImage));
     master_mc.addChild(imageLoader);
     imageLoader.x = (stage.stageWidth - Number(rawW)) /1.65;
     imageLoader.y = (stage.stageHeight - Number(rawH)) /5;
     inTween = new Tween(imageLoader, "x", Regular.easeInOut, 1500, (stage.stageWidth - Number(rawW)) /1.65, 1.5, true);
     imageLoader.scaleX = .8;
     imageLoader.scaleY = .8;
function checkerF(event:TimerEvent):void {
     if (imgNum == 0) {
          packagedF();
     }else if(imgNum < numberOfChildren) {
          packagedF();
     }else{
          imgNum = 0;
          packagedF();
function nextImgF(e:MouseEvent):void {
     checkSec.addEventListener(TimerEvent.TIMER, checkerF);
     outTween = new Tween(imageLoader, "x", Regular.easeInOut, (stage.stageWidth - Number(rawW)) /1.65, -1200, 1.5, true);
     imgNum++;
function prevImgF(e:MouseEvent):void {
     checkSec.addEventListener(TimerEvent.TIMER, checkerF);
     outTween = new Tween(imageLoader, "x", Regular.easeInOut, -1200, (stage.stageWidth - Number(rawW)) /1.65, 1.5, true);
     imgNum--;
So, whats the deal here? I must be missing something like a listener or something. Not sure what. Can you pls help?
Thanks!