# Centering photos within movie clip

**URL:** <https://forum.kirupa.com/t/centering-photos-within-movie-clip/93855>\
**Category:** Uncategorized\
**Created:** [November 5, 2003, 4:55pm UTC](https://forum.kirupa.com/t/centering-photos-within-movie-clip/93855 "2003-11-05T16:55:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![riderchic88](https://avatars.discourse-cdn.com/v4/letter/r/77aa72/32.png) [@riderchic88](https://forum.kirupa.com/u/riderchic88)\
**Post date:** [November 5, 2003, 4:55pm UTC](https://forum.kirupa.com/t/centering-photos-within-movie-clip/93855/1 "2003-11-05T16:55:23Z")

</div>

hey everyone! 🙂

i have a question about sbeener’s photo gallery script. i have pictures of different sizes, and i’ve managed to get that working quite well by using an empty movie clip that’s coded to be resized to the photo. i was just wondering if there’s a way, instead of loading the photos flush to the upper left corner, to center the photos on the stage or in the movie clip (right now the movie clip is in the upper left corner).

here’s my code…

[AS]  
//Code written by sbeener (suprabeener)  
/\*  
i wrote this code, but you can use and abuse it however you like.  
the methods are defined in the order which they occur to make it  
easier to understand.  
\*/  
// variables ------------------------------------------  
// put the path to your pics here, include the slashes (ie. “pics/”)  
// leave it blank if they’re in the same directory  
this.pathToPics = “”;  
// fill this array with your pics  
this.pArray = [“1.jpg”, “2.jpg”, “3.jpg”, “4.jpg”, “5.jpg”, “6.jpg”, “7.jpg”, “8.jpg”, “9.jpg”, “10.jpg”];  
this.fadeSpeed = 20;  
this.pIndex = 0;  
// MovieClip methods ----------------------------------  
// d=direction; should 1 or -1 but can be any number  
//loads an image automatically when you run animation  
loadMovie(this.pathToPics+this.pArray[0], \_root.photo);  
MovieClip.prototype.changePhoto = function(d) {  
// make sure pIndex falls within pArray.length  
this.pIndex = (this.pIndex+d)%this.pArray.length;  
if (this.pIndex\<0) {  
this.pIndex += this.pArray.length;  
}  
this.onEnterFrame = fadeOut;  
};  
MovieClip.prototype.fadeOut = function() {  
if (this.photo.\_alpha\>this.fadeSpeed) {  
this.photo.\_alpha -= this.fadeSpeed;  
} else {  
this.loadPhoto();  
}  
};  
MovieClip.prototype.loadPhoto = function() {  
// specify the movieclip to load images into  
var p = \_root.photo;  
//------------------------------------------  
p.\_alpha = 0;  
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);  
this.onEnterFrame = loadMeter;  
};  
MovieClip.prototype.loadMeter = function() {  
var i, l, t;  
l = this.photo.getBytesLoaded();  
t = this.photo.getBytesTotal();  
if (t\>0 && t == l) {  
trace(this.photo.\_width);  
trace(this.photo.\_height);  
this.onEnterFrame = fadeIn;  
} else {  
trace(l/t);  
}  
};  
MovieClip.prototype.fadeIn = function() {  
if (this.photo.\_alpha\<100-this.fadeSpeed) {  
this.photo.\_alpha += this.fadeSpeed;  
} else {  
this.photo.\_alpha = 100;  
this.onEnterFrame = null;  
}  
};  
// Actions -----------------------------------------  
// these aren’t necessary, just an example implementation  
this.onKeyDown = function() {  
if (Key.getCode() == Key.LEFT) {  
this.changePhoto(-1);  
} else if (Key.getCode() == Key.RIGHT) {  
this.changePhoto(1);  
}  
};  
Key.addListener(this);  
[/AS]

thanks!! :thumb:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 29, 2004, 2:13pm UTC](https://forum.kirupa.com/t/centering-photos-within-movie-clip/93855/2 "2004-05-29T14:13:38Z")

</div>

Hi,

Ive used the code that was sufggested t o centre my pictures but it doesn’t centre them there are put in the bottom right of the page.

Ive removed the code and tried centering them manually to no avail.

So i was wondering if theer would be a kind soul who would have a look at my .fla file and see if they could sort it for me.

Appreciate any help!

Thanks

Andy

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 29, 2004, 2:31pm UTC](https://forum.kirupa.com/t/centering-photos-within-movie-clip/93855/3 "2004-05-29T14:31:21Z")

</div>

Try this one, I added a check for photo’s width. If you want change the dimensions of your movie, be sure to change the absX/absY values;)

```auto
absX = 200;
//absX is the middle of the stage in width
absY = 100;
//absY is the middle of the stage in height
this.pathToPics = "photogall/";
this.pArray = ["bek.jpg", "beks.jpg", "clive.jpg", "gdad.jpg", "jc2.jpg", "jc.jpg", "me.jpg", "nanndad.jpg", "sam.jpg", "sam1.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
MovieClip.prototype.changePhoto = function(d) {
	this.pIndex = (this.pIndex+d)%this.pArray.length;
	if (this.pIndex<0) {
		this.pIndex += this.pArray.length;
	}
	this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
	if (this.photo._alpha>this.fadeSpeed) {
		this.photo._alpha -= this.fadeSpeed;
	} else {
		this.loadPhoto();
	}
};
MovieClip.prototype.loadPhoto = function() {
	var p = this.photo;
	p._alpha = 0;
	p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
	this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
	var i, l, t;
	l = this.photo.getBytesLoaded();
	t = this.photo.getBytesTotal();
	w = this.photo._width;
	if (t>0 && t == l && w>0) {
		this.onEnterFrame = fadeIn;
		this.photo._x = absX-this.photo._width/2;
		this.photo._y = absY-this.photo._height/2;
	} else {
		//trace(l/t); 
	}
};
MovieClip.prototype.fadeIn = function() {
	if (this.photo._alpha<100-this.fadeSpeed) {
		this.photo._alpha += this.fadeSpeed;
	} else {
		this.photo._alpha = 100;
		this.onEnterFrame = null;
	}
};
this.onKeyDown = function() {
	if (Key.getCode() == Key.LEFT) {
		this.changePhoto(-1);
	} else if (Key.getCode() == Key.RIGHT) {
		this.changePhoto(1);
	}
};
Key.addListener(this);
//show the first photo
this.changePhoto(1);

```

scotty(-: