# Centering pics in kirupa Photo Gallery Using XML and Flash

**URL:** https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169
**Category:** flash
**Created:** [March 24, 2006, 10:54am UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169 "2006-03-24T10:54:17Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![arn](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arn](https://forum.kirupa.com/u/arn)
#### Post date: [March 24, 2006, 10:54am UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/1 "2006-03-24T10:54:17Z")

</div>

Hello,

I am using the kirupa xml foto gallery and I am loading different sized images… if they would load nicely centered the problem is solved… (not to stage width/height…!!)

The movieclip “picture” has to load the images centered from its own registration point so that it can be placed anywhere on the stage…  
now its loads the images from aka left top…

any help greatly appreciated…😉

best

arn

i used this :  
\_x -= \_width/2;  
\_y -= \_width/2;

but it throws the images in a strange place on stage…

---

<div class="post-metadata">

### Author: ![Rasper](https://avatars.discourse-cdn.com/v4/letter/r/9fc29f/32.png) [@Rasper](https://forum.kirupa.com/u/Rasper)
#### Post date: [March 24, 2006, 1:36pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/2 "2006-03-24T13:36:00Z")

</div>

i’m not familiar with the kirupa gallery, but standard the registration point of a movieclip is top left. So you can use this knowledge to center the image.

However, this can only be done AFTER the image is loaded, so keep that in mind.  
After it’s been loaded, just do somethink like this:

```auto
   if(mc_image._width > _root._width || mc_image._height > _root._height){
    while(mc_image._width > _root._width || mc_image._height > _root._height ){
     mc_image._xscale--;
     mc_image._yscale--;
    }
   }
   mc_image._x = (_root._width - mc_image._width) / 2;
   mc_image._y = (_root._height - mc_image._height) / 2;

```

If you plan on doing it like this, and load every image in the same mc\_image movieclip, you have to set the \_xscale and \_yscale back to 100 every time you load a new image into it.

Good luck.

---

<div class="post-metadata">

### Author: ![arn](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arn](https://forum.kirupa.com/u/arn)
#### Post date: [March 24, 2006, 3:14pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/3 "2006-03-24T15:14:23Z")

</div>

Hi Jasper thanks for the reply…  
my Actionscript knowledge is a little narrow…

So i don’t know where to implement in you code…

here is all actionscript involved…(all in frame 1…:

```auto

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i&lt;total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.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&lt;100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p&lt;(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&gt;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);
picture._x -= _width/2;
picture._y -= _width/2;
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
[/AS]
 
 
Hope you/anyone..;)......... can figure it out
```

---

<div class="post-metadata">

### Author: ![JoshuaJonah](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joshuajonah/32/1775_2.png) [@JoshuaJonah](https://forum.kirupa.com/u/JoshuaJonah)
#### Post date: [March 24, 2006, 3:17pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/4 "2006-03-24T15:17:26Z")

</div>

```auto
function loadXML(loaded) {
   if (loaded) {
      xmlNode = this.firstChild;
      image = [];
      description = [];
      total = xmlNode.childNodes.length;
      for (i=0; i<total; i++) {
         image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
         description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
      }
   firstImage();
   } else {
      content = "file not loaded!";
   }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.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);
      picture._x = (_width/2)-(picture._width/2);
      picture._y = (_height/2)-(picture._height/2);
      desc_txt.text = description[0];
      picture_num();
   }
}
function picture_num() {
   current_pos = p+1;
   pos_txt.text = current_pos+" / "+total;
}

```

---

<div class="post-metadata">

### Author: ![Rasper](https://avatars.discourse-cdn.com/v4/letter/r/9fc29f/32.png) [@Rasper](https://forum.kirupa.com/u/Rasper)
#### Post date: [March 24, 2006, 3:38pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/5 "2006-03-24T15:38:40Z")

</div>

Oops, I thought you asked for the images to scale to fit too, my mistake.

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [March 24, 2006, 3:56pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/6 "2006-03-24T15:56:34Z")

</div>

You have to wait till the picture is full loaded…

scotty(-:

---

<div class="post-metadata">

### Author: ![JoshuaJonah](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joshuajonah/32/1775_2.png) [@JoshuaJonah](https://forum.kirupa.com/u/JoshuaJonah)
#### Post date: [March 24, 2006, 4:00pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/7 "2006-03-24T16:00:23Z")

</div>

oh yeah, good point…hmm.

```auto
function loadXML(loaded) {
   if (loaded) {
      xmlNode = this.firstChild;
      image = [];
      description = [];
      total = xmlNode.childNodes.length;
      for (i=0; i<total; i++) {
         image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
         description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
      }
   firstImage();
   } else {
      content = "file not loaded!";
   }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.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;
      }
      picture._x = (_width/2)-(picture._width/2);
      picture._y = (_height/2)-(picture._height/2);
   }
};
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;
}

```

?

---

<div class="post-metadata">

### Author: ![arn](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arn](https://forum.kirupa.com/u/arn)
#### Post date: [March 24, 2006, 5:12pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/8 "2006-03-24T17:12:13Z")

</div>

Hi rasper/defective and scotty…

thanks for your efforts…but nu succes yet…

…it has to be centered to it’s own registration point…not that of the for example “stage”…

By the way…  
My “picture” clip is completely emty…aka…no content on frame one…  
(just using it like a container function…). is this right?..

hope someone can bring up the code…I think we are getting close…🙂

Rasper your last code does the centering job …but it puts the loaded images not anywhere near the “picture” clip…i moved it across the stage but your code places the pictures always at the same position…  
seam not te relate to the picture clip position…although it does the job…some finetuning…needed…🙂

Much appreciated!

best,

arn

---

<div class="post-metadata">

### Author: ![Rasper](https://avatars.discourse-cdn.com/v4/letter/r/9fc29f/32.png) [@Rasper](https://forum.kirupa.com/u/Rasper)
#### Post date: [March 24, 2006, 11:14pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/9 "2006-03-24T23:14:45Z")

</div>

Using an empty movieclip is the way to do it.

My code does indeed place the picture in the middle of the stage.

I’m not quite sure about this, but if you load an image inside a MovieClip, than that image ‘becomes’ the MovieClip. If you use

```auto
picture._x -= picture._width/2;
picture._y -= picture._width/2;

```

it will place the movieclip at the coördinates that equal to the half of your image size. For example if your picture-movieclip is directly located in the \_root, and it is 500px wide, this will mean that it will be placed on \_x = 250. If it were 300px wide, it will be placed on \_x = 150.

But, if you want to use an empty movieclip to place your image in, and then place that movieclip somewhere (manually) so that the registration point is the middle of the picture, you will have to do something else. I think you should put your picture-movieclip inside another ‘holder’ movieclip. When the picture is loaded, you can use the code in this post to position it inside that holder movieclip. That way you can keep your holder movieclip on the same centered place.

Is that something that you can use?

---

<div class="post-metadata">

### Author: ![arn](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arn](https://forum.kirupa.com/u/arn)
#### Post date: [March 25, 2006, 11:31am UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/10 "2006-03-25T11:31:55Z")

</div>

Hi Rasper.

thanks for your explanation…this makes me think of the wellknown…  
scale/resize function wich does the job perfectly…if there is someone out there who can implement this code into the kirupa xml gallery code…?..

here is what I have…(it’s from another setup…)

[AS]  
MovieClip.prototype.resizeMe = function(w, h, id) {  
var speed = 3;  
container.\_alpha = 0;  
this.onEnterFrame = function() {  
this.\_width += (w-this.\_width)/speed;  
this.\_height += (h-this.\_height)/speed;  
if (Math.abs(this.\_width-w)\<1 && Math.abs(this.\_height-h)\<1) {  
this.\_width = w;  
this.\_height = h;  
container.\_x = this.\_x-this.\_width/2+spacing/2;  
container.\_y = this.\_y-this.\_height/2+spacing/2;  
infofield.\_y = Math.round(this.\_y+this.\_height/0+spacing/0);  
container.\_alpha += 8;  
if (container.\_alpha\>90) {  
this.\_root.container.infoclip.info.text = id;  
container.\_alpha = 100;  
delete this.onEnterFrame;  
}  
}  
};  
};  
[/AS]

thanks…🙂

best,

arn

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [March 25, 2006, 1:13pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/11 "2006-03-25T13:13:10Z")

</div>

```auto
var cx = picture._x;
var cy = picture._y;
this.onEnterFrame = function() {
	filesize = picture.getBytesTotal();
	loaded = picture.getBytesLoaded();
	preloader._visible = true;
	preloader.preload_bar._xscale = 100*loaded/filesize;
	if (picture._width) {
		preloader._visible = false;
		if (picture._alpha<100) {
			picture._alpha += 10;
		}
		picture._x = cx-picture._width/2;
		picture._y = cy-picture._height/2;
	}
};

```

scotty(-:

---

<div class="post-metadata">

### Author: ![arn](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arn](https://forum.kirupa.com/u/arn)
#### Post date: [March 25, 2006, 9:19pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/12 "2006-03-25T21:19:35Z")

</div>

scotty!!! and evereybody alse here invloved…🙂  
many thanks…your code works like a charme…🙂

I knew you had the skills…😉 I’ve checked severel other postings of you…  
and your knowledge/dedication to this forum …is needed…and much respected…:thumb:

thanks…again…

made the finishing touch on my current project.!

Best,

arn

[www.electronicnature.com](http://www.electronicnature.com)

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [March 25, 2006, 9:45pm UTC](https://forum.kirupa.com/t/centering-pics-in-kirupa-photo-gallery-using-xml-and-flash/183169/13 "2006-03-25T21:45:16Z")

</div>

no problem =)