# Image resizing/fixed position for larger images

**URL:** https://forum.kirupa.com/t/image-resizing-fixed-position-for-larger-images/224846
**Category:** Uncategorized
**Created:** [May 6, 2007, 6:05am UTC](https://forum.kirupa.com/t/image-resizing-fixed-position-for-larger-images/224846 "2007-05-06T06:05:18Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![timmy041](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@timmy041](https://forum.kirupa.com/u/timmy041)
#### Post date: [May 6, 2007, 6:05am UTC](https://forum.kirupa.com/t/image-resizing-fixed-position-for-larger-images/224846/1 "2007-05-06T06:05:18Z")

</div>

Hello all.

I have decided to play around with Flash and try and teach myself something. Now I have done [kirupa.com - XML and Flash Photogallery, Page 1](http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm) this tutorial, as well as the other tutorial to add a scrolling thumbnails element to it with no problems at all.

I have (using the code provided by Cello in his resize.zip found here [kirupaForum](http://www.kirupa.com/forum/showthread.php?t=132588&highlight=resize+picture)) made it so images of any size can be used. From this, how would i make it so rather then eh top left of each image being loaded, the center of each image is loaded. This way all pictures will have their position in the same location?

I have changed the layout and everything to accommodate the larger sizes, and right now i have started from scratch so i do not have the scrolling thumbnail element included.

here is the code.

> 

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) {  
spacing = 10;  
picture.\_alpha = 0;

MovieClip.prototype.loadPic = function(pic){  
\_root.picture.\_alpha = 0;  
this.loadMovie(pic);  
\_root.onEnterFrame = function(){  
var t = picture.getBytesTotal(), l = picture.getBytesLoaded();  
if (t != 0 && Math.round(l/t) == 1){  
var w = picture.\_width + spacing, h = picture.\_height + spacing;  
border.resizeMe(w, h);  
delete \_root.onEnterFrame;  
}  
}  
};  
MovieClip.prototype.resizeMe = function(w, h){  
var speed = 3;  
this.onEnterFrame = function(){  
this.\_width += (w - this.\_width)/speed;  
this.\_height += (h - this.\_height)/speed;  
if( Math.abs(this.\_width-w)\<1){  
this.\_width = w;  
this.\_height = h;  
\_root.picture.\_x = this.\_x - this.\_width/2 + spacing/2;  
\_root.picture.\_y = this.\_y - this.\_height/2 + spacing/2;  
\_root.picture.\_alpha = 100;  
delete this.onEnterFrame;  
}  
}  
};  
picture.\_alpha = 0;  
picture.loadMovie(image[p], 1);  
desc\_txt.text = description[p];  
picture\_num();

}

}

}  
function prevImage() {

if (p\>0) {  
spacing = 10;  
picture.\_alpha = 0;

MovieClip.prototype.loadPic = function(pic){  
\_root.picture.\_alpha = 0;  
this.loadMovie(pic);  
\_root.onEnterFrame = function(){  
var t = picture.getBytesTotal(), l = picture.getBytesLoaded();  
if (t != 0 && Math.round(l/t) == 1){  
var w = picture.\_width + spacing, h = picture.\_height + spacing;  
border.resizeMe(w, h);  
delete \_root.onEnterFrame;  
}  
}  
};  
MovieClip.prototype.resizeMe = function(w, h){  
var speed = 3;  
this.onEnterFrame = function(){  
this.\_width += (w - this.\_width)/speed;  
this.\_height += (h - this.\_height)/speed;  
if( Math.abs(this.\_width-w)\<1){  
this.\_width = w;  
this.\_height = h;  
\_root.picture.\_x = this.\_x - this.\_width/2 + spacing/2;  
\_root.picture.\_y = this.\_y - this.\_height/2 + spacing/2;  
\_root.picture.\_alpha = 100;  
delete this.onEnterFrame;  
}  
}  
};  
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;

}

If my logic is wrong it would be great if you guys could let me know seeing as this is my first time with flash. Thanks.

Any help would be great.

I have tired looking at examples here [kirupaForum](http://www.kirupa.com/forum/showthread.php?t=87388) but all links seem to be expired.

and here

> **[kirupaForum](https://forum.kirupa.com)**
>
> Got a web design/development question or just want to hang out with the most awesome people on the planet? Drop on in!

Thank you all