Centering images in a movieclip

[photex]

Hi,

I'm trying to center different size images in a movieclip named "picture". The images load fine but they are not centered. Flash's registration is very limited when it comes to setting this. All the images are different sizes. I may get one to load correctly but when another image loads of a different size the images is no longer centered. I need all images to load in the center of the clip no matter what the images size is. Here is the code that I'm using:

stop();

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images-webbanner.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
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;

}

}

};


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();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}

[Damaskal]

i cant see where u even tried to change the pic position.. i guess its as2 and it looks so messy.. try this: it will definitely center all yo pics..

picture.x -= picture.width/2;
picture.y -= picture.height/2

[ASWC]

Don't use LoadMovie, it's really hard to get anything good with that. Instead use a movieClipLoader, then I'll show you how to set properly the position of any size of picture.

[atomic]

Anything that can be done with the movieClipLoader can also be done with loadMovie...

How do you think it was done before the movieClipLoader was introduced?

[atomic]

@ photex...

Check this thread...

http://www.actionscript.org/forums/showthread.php3?t=158556

[photex]

i cant see where u even tried to change the pic position.. i guess its as2 and it looks so messy.. try this: it will definitely center all yo pics..

picture.x -= picture.width/2;
picture.y -= picture.height/2


Hey!.Sorry!for the late response. I tried the new code but all the images are aligning at the top left. I've been trying to figure it out for days but I am stumped. Any suggestions???? Here's the revised code and a screenshot of how it is aligning.I need the images to center inside of the gray box. Thanks!


Screenshot:

http://www.photex-media.com/portfolio-screenshot2.jpg




Code:

stop();

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images-webads.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {

filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();

picture.x -= picture.width/2;
picture.y -= picture.height/2;

preloader._visible = true;
if (loaded != filesize) {

preloader.preload_bar._xscale = 100*loaded/filesize;

} else {

preloader._visible = false;
if (picture._alpha<100) {

picture._alpha += 10;

}

}

};

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();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}

[atomic]

Are all pictures smaller that the grey display area, or do you have to resize them, so that they fit?

Better to attach a .fla.

[photex]

Nah! I don't need them resized just centered in the gray area. Thanks!

[atomic]

Use this...


p = 0;
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;
// Centering code...
picture._x = Stage.width/2 - picture._width/2;
picture._y = (Stage.height-56)/2 - picture._height/2;
// End of centering code...
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};

[photex]

Bingo!!!!!!!! It works. Atomic, you are the man.Everything loads perfectly. Thanks for all of your help and expertise.

[atomic]

Grrrrrrrrrrrrreat! ;)

[photex]

Awwww! I ran into one more snag. The webads.swf works great by itself but when I load it into my portfolio.swf. And, click the webads button. The alignment shifts for some reason.I suspect that its a levels issue.I've tried all day to figure it out but no dice. Here are the original files.Any clue what's going on????

FYI - Only the webads button will work with the attached files for testing.I did want to upload all the files.

[atomic]

Before I look into it, are you going to load this in yet another movie?

[atomic]

Have I known that you were loading this movie in yet another movie, I wouldn't of suggested the use of Stage, which when loaded in another movie, refers to the stage(dimensions) of the main movie, not the loaded movie itself...

In any case, use this one, and don't forget, once you've compiled it, to load in webads1.swf and not webads.swf in your portfolio.swf...

[photex]

Have I known that you were loading this movie in yet another movie, I wouldn't of suggested the use of Stage, which when loaded in another movie, refers to the stage(dimensions) of the main movie, not the loaded movie itself...

In any case, use this one, and don't forget, once you've compiled it, to load in webads1.swf and not webads.swf in your portfolio.swf...


Thanks!Dude. Sorry!I didn't mention the other movieclip earlier I completely forgot about.I was so focused on getting the immediate movieclip working.My bad! Thanks again I will try it and let you know later.

[atomic]

Grrrrrrrrrrreat! ;)

[photex]

Atomic, I really don't need to say it but I'm going to say it anyways.You are the man.It works beautiful.Everything load correctly and all centered.Thanks for all your help and time.You're a life-saver.

[atomic]

Grrrrrrrrrrreat! ;)