centering odd-sized images in flash/xml slideshow

[Syrtis_Major]

Simply put, I adapted the flash/xml slideshow w/ thumbnails from the Kirupa tutorial (found here http://www.kirupa.com/developer/mx2004/thumbnails.htm) to suit my needs. I've got no problem getting it to work (the changes I made are minimal) but the one issue I have it that the full size images I want to load in are all different sizes.

This will be eventually be part of a portfolio site for an artist friend of mine and all her pieces are various dimensions. For the thumbnails, I used identically sized cropped out details of the pieces for uniformity, but I can't do that for the full sized images and still show the entire piece.

I was wondering if anyone could show me if there's a way to automatically center the images in the viewing area when they load in (vertically and/or horizontally both depending on the dimensions of the image).

What I've done so far is at this URL: http://www.io.com/~dugless/jessie/new.htm

The light gray area behind the large images defines the dimensions of the area I want the images to be centered in. Currently the images are being loaded into an empty movieclip (with the instance name "picture).

Here's (what I'm pretty sure is) the pertinent code:


function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}

I can feel my way around actionscripting but I'm not particulary proficient so any help that anyone could give would be highly appreciated.

Thanks!

[rhamej]

Actually its this code:


this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};



Convert your gray background to a movieclip. Give it an instance name of background and make sure the registration point is top left.
Then replace the code above with this =)


this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
picture._x =(background._x+(background._width/2))-(picture._width/2);
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};

[Syrtis_Major]

Aha, so simple. I needed the background defined as a movie clip so I could reference its dimensions and then pass those on to the function by way of that formula (of course, it also helps to know where in the code that should go, heh). I added an extra line defining the y coord as well and now it works like a charm no matter which dimension of the image is larger.

Thanks a bunch!

[rhamej]

:thumb: