XML Images - Resize & Center

[BrianStapleton]

I've tried a lot of online tutorials for photogalleries but can't find what I'm looking for.

I need to bring in my images from xml so that they will fill the thumbnails (if the width of the image is greater than its height then it will scale to the height of the thumbnail) and center within that thumbnail.

Then, when I click on a thumbnail, I need that image to fill the space allowed for the large photo (this time if the width of the image is greater than its height then it will scale to the width of the photo space) and center within that space again.

In terms if centering the image, I have created movie clips for both the thumbnail and the large photo space (let's call them "imageHolder") and within those movieclips there is an empty movie clip called "image" which is aligned to the centre of "imageHolder". I thought that this would work:

imageHolder.image._x = 0-(imageHolder.image._width/2);

imageHolder.image._y = 0-(imageHolder.image._height/2);

But no such luck.

As for resizing the images to fit the image holders, I'm clueless!

Any help would be greatly appreciated. Thanks for reading.

[Rothrock]

First want to make a subtle point. You aren't bringing in the images from XML (at least I doubt that you are.) What you are most likely bring in from XML is the names/URLs of where the image files can be found. I bring this up because I've seen in your other posts that you are trying to learn stuff. So try and separate all the image handling stuff from the XML and perhaps that can help to make things seem less complex.

Okay so the code you've shown for centering an image seems right to me. BTW you don't need the leading zero:

someNumber = 0 - (someValue/2)

is the same as:

someNumber = -someValue/2

And if you are loading external images they do always have their upper left corner at (0,0) so moving over negative half the width and up half the height should make it look centered. If it isn't working then there are a couple common reasons.

The most popular reason for this to not work is that you are trying to do the repositioning before the external file has finished loading. If that hasn't happened then there is no width or height and zero minus zero divided by 2 is zero and there will be no offset.

The other popular reason is that you have a scope problem. That from whatever scope you are in there is no object called imageHolder and its subsequent children. You can check that with trace statements such as:

trace("Current scope is: "+this);

trace("Is there and imageHolder? "+this.imageHolder);

[BrianStapleton]

Thanks Rothrock. I think that the problem in this situation is the image hasn't finished loading yet. I've tried restructuring the script but can't get it to work. Here is one approach I took:

imageXML = new XML();
imageXML.ignoreWhite = true;

imageXML.onLoad = function(success){
    if(success) {
        var root = this.firstChild;
        imageHolder.image.loadMovie("http://www.website.com/_images/upload/" + root.childNodes[0].childNodes[1].firstChild.nodeValue);
        setup();
    } else {
        trace ('Error reading XML');
    }
}

function setup() {
    imageHolder.image._x = -(imageHolder.image._width/2);
    imageHolder.image._y = -(imageHolder.image._height/2);
}

// load xml file
imageXML.load("http://www.website.com/gallery.asp");

But no succes. I then tried this instead of calling the setup function:

imageHolder.image.onLoad = function() {
     imageHolder.image._x = -(imageHolder.image._width/2);
     imageHolder.image._y = -(imageHolder.image._height/2);
}

And that didn't work either. I think what I need to do is load the .asp, then the image and then apply the image to imageHolder.image but

I'm not quite sure how to structure that.

[Rothrock]

You shouldn't use loadMovie. There is no onLoad event (at least not like you are thinking) for externally loaded jpegs. Loading files takes some amount of time (even when run locally) and so the setUp function called right after loadMovie doesn't wait until the file has loaded and as a result there are no properties to work with.

It is possible to make a preloader "old-school" style which keeps checking the  imageHolder.image.getBytesLoaded() and  imageHolder.image.getBytesTotal() and when they are equal and large then you've got the thing loaded and you can call a setUp function. But it is a lot of work. Instead...

Use the MovieClipLoader class. It has an onLoadInit event that will let you know when the jpeg has finished loading.

And of course since you are going to be moving to AS3 I recommend the Loader class.

[BrianStapleton]

Perfect!

Thanks, that really did the trick - I've got the images coming in centred and resized now!

However, I'm having a bit of trouble adapting the MovieClipLoader class to my thumbnails. I have a scrollpane which loads a movieclip with the following actionscript. This actionscript creates a series of thumbnails, the number of which varies depending on the amount of images referenced in the ASP document. I've tried a few different arrangements but can't seem to get the order of actions right. At the moment, I'm getting the correct amount of thumbnail movieclips in the correct positions but there are no images in them. Any idea where I'm going wrong?

var myMCL = new MovieClipLoader();

myMCL.onLoadInit = function (targetMC) {
    // scale image
    if (targetMC._width > targetMC._height) {
        targetMC._height = 75;
    }
    if (targetMC._height > targetMC._width) {
        targetMC._width = 75;
    }
    targetMC._xscale = targetMC._yscale = Math.max(targetMC._xscale, targetMC._yscale);
   // centre image
    targetMC._x = 0-(targetMC._width/2);
    targetMC._y = 0-(targetMC._height/2);
}

var myXML:XML = new XML();
myXML.ignoreWhite = true;

myXML.onLoad = function() {
    //parse XML data:
    var newsNode = myXML.firstChild;
    var totalArticles = myXML.firstChild.childNodes.length;
   
    for(i=0; i<totalArticles; i++){
       
        //attatch template clips to hold images & text
        var newClip = attachMovie("thumbClip", "thumbClip"+i, getNextHighestDepth());
       
        //Define the grid columns (in number of cells);
        var columns:Number = 3;
        //Define the item hSpacing;
        var hSpacing:Number = 25;
        //Define the item hSpacing;
        var vSpacing:Number = 25;
       
        //position clip
        newClip._x = 0;
        newClip._y = 0;
        newClip._x += ((i % columns)) * (newClip._width + hSpacing);
        newClip._y += Math.floor(i / columns) * (newClip._height + vSpacing);
   
        //populate template clip
        myMCL.loadClip("http://supermacs.ie/_images/upload/" + newsNode.childNodes.childNodes[1].firstChild.nodeValue,"newClip.imageClip");
       
        newClip.data = newsNode.childNodes.childNodes[0].firstChild.nodeValue;
       
       //button functions
        newClip.onRollOver  =  function(){
            this.gotoAndPlay("RollOver");
        }
        newClip.onRollOut = function(){
            this.gotoAndPlay("RollOut");
        }
        newClip.onRelease = function(){
            _root.moreGlobalData = this.data;
            _parent._parent.gotoAndPlay("newPhoto");
        }
    }
}

myXML.load("http://www.website.com/gallery.asp");

[Rothrock · Accepted solution]

Not exactly sure, I notice that in your loadClip() line you have the target in quotes. That isn't what you want. That would be a string, but you want to load into a MovieClip.

The other thing to do is to add some traces so that you can see if the onLoadInit event handler is being called.

[BrianStapleton]

Well, I took out the quotes and it worked fine! Thanks for all your help Rothrock, really appreciate it.