Need help centering different sized images being loaded from a container

[deborahbevilacqua]

stop();

mainArea_mc.visible = false;

home_btn.addEventListener(MouseEvent.CLICK, function () { gotoAndStop("Home Template")} );

var totalImages:int = 0;

var imageDirectory : String = "";

var currentImage:int = 1;

var filePrefix : String = "";

var loader1 : Loader = new Loader(); // 2 loaders so we can fade an image on top of the other

var loader2 : Loader = new Loader();

pic_mc.addChild(loader1);

pic_mc.addChild(loader2);

loader1.name = "loader1";

loader2.name = "loader2";

loader1.contentLoaderInfo.addEventListener(Event.COMPLETE , resizeFadeImage);

loader2.contentLoaderInfo.addEventListener(Event.COMPLETE , resizeFadeImage);

info_mc.title_txt.autoSize = TextFieldAutoSize.LEFT;

if (presModeSlides)  // Setup slide viewer vars

{

    totalImages = slides[currentSlideNumber].numSlides

    imageDirectory = "Data/slides/"+slides[currentSlideNumber].directory+"/";

    filePrefix = "slide";

    info_mc.title_txt.text = slides[currentSlideNumber].title

    info_mc.speaker_txt.text = slides[currentSlideNumber].speaker

    info_mc.university_txt.text = slides[currentSlideNumber].university

}

else  // Setup picture viewer vars

{

    totalImages = 233;

    imageDirectory = "Data/pictures/";

    filePrefix = "picture";

    info_mc.title_txt.text =  "3rd International BioPlex® 2200 User Meeting";

    info_mc.speaker_txt.text = "Pictures";

    info_mc.university_txt.text = "";

}

info_mc.speaker_txt.y += info_mc.title_txt.height;  // Position sublines so they are directly under title

info_mc.university_txt.y += info_mc.title_txt.height;

leftArrow_btn.addEventListener(MouseEvent.CLICK, prevImage);

rightArrow_btn.addEventListener(MouseEvent.CLICK, nextImage);

showImage(currentImage)

function showImage(num:int)

{

    if (pic_mc.getChildIndex(loader1) > pic_mc.getChildIndex(loader2))  // Place the jpg into which ever container is on top at the moment

    {

        loader1.load(new URLRequest(imageDirectory+filePrefix+currentImage+".jpg"));

    }

    else

    {

        loader2.load(new URLRequest(imageDirectory+filePrefix+currentImage+".jpg"));

    }

}

function resizeFadeImage(e:Event)

{

    e.currentTarget.loader.alpha = 0;

    Tweener.addTween(e.currentTarget.loader, {alpha:1, time:0.4, onComplete: removeOtherImage , onCompleteParams:[e.currentTarget.loader]});

    e.currentTarget.loader.scaleX = 0.75;

    e.currentTarget.loader.scaleY = 0.75;

    var bitMap : Bitmap = Bitmap(e.currentTarget.loader.content);

    bitMap.smoothing = true;

}

function removeOtherImage(l:Loader)

{

    if (l.name=="loader1")

    {

        pic_mc.setChildIndex(loader1,0);

        if (loader2.content != null)

        {

            if (loader2.content is Bitmap)

            {

                (loader2.content as Bitmap).bitmapData.dispose();

            }

        }

    }

    else

    {

        pic_mc.setChildIndex(loader2,0);

        if (loader1.content != null)

        {

            if (loader1.content is Bitmap)

            {

                (loader1.content as Bitmap).bitmapData.dispose();

            }

        }

    }

}

function nextImage(e:Event)

{

    if ((!Tweener.isTweening(loader1)) && (!Tweener.isTweening(loader2)))

    {

        if (currentImage < totalImages)

        {

            currentImage ++;

        }

        else

        {

            currentImage = 1;

        }

        showImage(currentImage);

    }

}

function prevImage(e:Event)

{

    if ((!Tweener.isTweening(loader1)) && (!Tweener.isTweening(loader2)))

    {

        if (currentImage > 1)

        {

            currentImage --;

        }

        else

        {

            currentImage = totalImages;

        }

        showImage(currentImage);

    }

}

[kglad · Accepted solution]

:

function resizeFadeImage(e:Event)

{

    e.currentTarget.loader.alpha = 0;

    Tweener.addTween(e.currentTarget.loader, {alpha:1, time:0.4, onComplete: removeOtherImage , onCompleteParams:[e.currentTarget.loader]});

    e.currentTarget.loader.scaleX = 0.75;

    e.currentTarget.loader.scaleY = 0.75;

e.currentTarget.loader.x = (stage.stageWidth-e.currentTarget.loader.width)/2;

e.currentTarget.loader.y = (stage.stageHeight-e.currentTarget.loader.height)/2;

    var bitMap : Bitmap = Bitmap(e.currentTarget.loader.content);

    bitMap.smoothing = true;

}

[deborahbevilacqua]

Thank you so much for the reply and help. That didn't quite do what I need it to do. Some of the images being loaded are narrow vertical pics and line up flush left while the rest of the images fill the space they are being loaded into. How do I tell the images to center at a specific point on the stage. I know it must have something to do with the x coordinate but everything I try to write doesn't work.

[kglad]

if pic_mc and all its ancestors are at 0,0 that will center the loaded image.  if it's not, fix that.

or, if you're not using your loader to display the loaded image but are using bitMap, center it.