Problem aligning images in slideshow

Question

I have a slide show in a site I'm building for a friend the slide show can be viewed by going to http://www.droolpigs.com/   and clicking the About Us button
the inages are supposed to be centered and 90% of the time they are.  I would like to see them centered 100% of the time.
here's the code:
        import com.greensock.*;
         import com.greensock.easing.*;
        import flash.display.*;
        import flash.utils.*;
        import flash.events.*;
        import flash.net.*;
        import flash.text.*;
        var myFont:Font3 = new Font3();
        var extReq:URLRequest = new URLRequest("bio.txt");
        var extLoader:URLLoader = new URLLoader();
        var myFormat:TextFormat = new TextFormat();
        var tf:TextField = new TextField();
        var tf3:TextField = new TextField();
        var msk:Sprite = new Sprite();
        var tl:TimelineMax = new TimelineMax({repeat:-1});   
//        var bio:Bio = new Bio();
         var bars:Bars = new Bars();
        var n:int = 0;
        var intCurrentSlide:int;
        var req:URLRequest;
           var holder:Sprite = new Sprite();
//        var holderBG:HolderBG = new HolderBG();
        var loader:Loader;
        var rand:int;
        var nxtNum:int;
        var picNum:String;
        var slideCount:int;
        var xmlLoader:URLLoader;   // slideshow xml loader
        var xmlSlideshow:XML;  // slideshow xml
        var strXMLPath:String = "bioPics-data.xml";
        var slideName:String;
       var history:Array = new Array();
         var duration:Number=.5;
        var prevSlide:String;
        var timeline:TimelineMax;
        xmlLoader = new URLLoader();  
        xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
        xmlLoader.load(new URLRequest(strXMLPath));
///////////// text setup ////////////////////
tf.x =-285;
//tf.y =655;
tf.y=700;
tf.width = 700;
tf.height = 800;
tf.multiline=true;
tf.wordWrap=true;
tf.condenseWhite=true;
//tf2
tf3.x =-285;
tf3.y =660;
tf3.width = 700;
tf3.height = 20;
tf3.htmlText = '<font color = "#dd8800" size = "14px">Contact links and Email:      <a href="http://www.droolpigs.com">droolpigs.com</a> | <a href="http://www.myspace.com/acousticshadowz">myspace site</a>      <a href="mailto://[email protected]//[email protected]">[email protected]</a> | <a href="mailto://[email protected]//[email protected]">[email protected]</a></font>';
addChild(tf);
addChild(tf3);
msk.graphics.beginFill(0x000000);
msk.graphics.drawRect(0, 0, 700, 165);
msk.x = -285;
msk.y = 485;
msk.graphics.endFill();
extLoader.addEventListener(Event.COMPLETE, textReady);
myFormat.font = myFont.fontName;
myFormat.color = "0xffaa00";
//0x77ffaa
myFormat.size = 18;
myFormat.leading = 2.5;
tf.defaultTextFormat=myFormat;
tf.embedFonts=true;
tf.alpha=1;
extLoader.load(extReq);
function textReady(e:Event):void {
    tf.cacheAsBitmap=true;
     msk.cacheAsBitmap=true;
    tf.mask=msk;
    addChild(msk);
    tf.htmlText=e.target.data;
tl.insert( new TweenLite(tf, 70, {y:"-940", ease:Linear.easeNone}) );
//////////////text setup////////////////////////   
            createTimeline();
        function onXMLLoadComplete(e:Event):void {
             xmlLoader.removeEventListener(Event.COMPLETE, onXMLLoadComplete);
             xmlSlideshow = new XML(e.target.data);     // create new xml with the received data
             slideCount = xmlSlideshow..image.length();   // get total slide count
             loadSlide();
         function loadSlide():void {
              prevSlide=history[history.length-1];
            rand = Math.ceil(Math.random()* slideCount - 1); 
             loader = new Loader();
             req = new URLRequest(xmlSlideshow..@src[rand]);
             loader.contentLoaderInfo.addEventListener(Event.COMPLETE, displaySlide);
             loader.load(req);
            slideName = xmlSlideshow..@src[rand].toString();
        if(slideName != prevSlide){
                 history.push(slideName);
                loader.load(new URLRequest(xmlSlideshow..@src[rand]));
            }else{
                loadSlide();
        function createTimeline():void{
        timeline =new TimelineMax({repeat:1,repeatDelay:5,yoyo:true,onComplete:loadSlide, paused:true});
        for (var count:int = 1; count <=10; count++) {
            var mc:MovieClip=bars["bar"+count];
            timeline.append(TweenMax.from(mc, duration, {x:"64", alpha:0, ease:Cubic.easeOut}), -.4);
        function displaySlide(e:Event = null):void {
            loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, displaySlide);
            if (holderBG.holder)
            holderBG.removeChild(holder);
            holderBG.holder = null;
//            trace ("holder.numChildren "+holder.numChildren);
             if(holder.numChildren > 0){holder.removeChildAt(0);}
              holder.addChild(loader.content);
            // center the pic
            holder.x=holderBG.width/2 - holder.width/2;
            holder.y=holderBG.height/2 - holder.height/2;
            // make the mask position over the pic
             bars.x=holder.x;
             bars.y=holder.y;
              bars.cacheAsBitmap=true;
              holder.cacheAsBitmap=true;
             holder.mask=bars;
             bars.width = holder.width;
              bars.height = holder.height;
             holderBG.addChild(holder);
              holderBG.addChild(bars);
            timeline.restart();        }

Answer 1

I resized them all in Photshop so neither the width or height would exceed the width or height of the background. I'm not sure what you mean by properly croped but their dimensions do fit.  I also noticed that if you see an image misaligned you'll notice later that the same image will be aligned.  One of the folks a greensock suggested that it might be a bug in the Adobe loader so I'll try their loader and see if it makes a differencs.