# Some help please with full browser XML gallery

**URL:** <https://forum.kirupa.com/t/some-help-please-with-full-browser-xml-gallery/185375>\
**Category:** flash\
**Created:** [April 12, 2006, 9:16pm UTC](https://forum.kirupa.com/t/some-help-please-with-full-browser-xml-gallery/185375 "2006-04-12T21:16:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![cmart](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@cmart](https://forum.kirupa.com/u/cmart)\
**Post date:** [April 12, 2006, 9:16pm UTC](https://forum.kirupa.com/t/some-help-please-with-full-browser-xml-gallery/185375/1 "2006-04-12T21:16:10Z")

</div>

Hi all, a couple issues I’d like to work out.

I have taken the [XML photgallery tutorial](http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm) a step further by making it full browser (with images centered in the browser window). To make this possible, I’ve sunk the “picture” mc one level deeper into a “container” mc that is centered via actionscript.

So the code changed from: picture to \_root.container.picture

Problem is, the registration point for the loaded images is top left. Since some of the images are different sizes, I’d like the registration point to be dead center. How would I do this? Actionscript follows (it’s a lot, my apologies).

Side note: Why is the fade-in script so poorly written? Is there a way to make the fades smooth? It works ok when on local drive, but I’m assuming that the delay introduced by an image being accessed on the server makes some of the fades very sudden and ineffective. Any idea how to force the alpha fade to wait until the image has fully loaded?

[Link to rough sketch of the image gallery](http://www.shopgentei.com/lookbook/shopgentei_lookbook_2.html)

Thanks in advance

[AS]

// no scale

stop();  
Stage.scaleMode = “noScale”;  
Stage.align = “LT”;

backGround.\_y = Stage.height/2;  
backGround.\_x = Stage.width/2;  
bottomBar.\_y = Math.floor(Stage.height);  
bottomBar.\_x = Math.floor(Stage.width/2);  
container.\_x=Stage.width/2;  
container.\_y=Stage.height/2;  
shopInfo.\_x=0;  
shopInfo.\_y=0;

backGround.onResize = function() {  
// main background is always centered  
this.\_y = Stage.height/2;  
this.\_x = Stage.width/2;  
};  
Stage.addListener(backGround);  
//  
container.onResize = function() {  
// main content is always centered  
this.\_y = Math.floor(Stage.height/2);  
this.\_x = Math.floor(Stage.width/2);  
};  
Stage.addListener(container);

bottomBar.onResize = function() {

this.\_y = Math.floor(Stage.height);  
this.\_x = Math.floor(Stage.width/2);  
};  
Stage.addListener(bottomBar);

shopInfo.onResize = function() {  
this.\_y = 0;  
this.\_x = 0;  
};  
Stage.addListener(shopInfo);

////////////////////////////////////// XML

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);  
\_root.bottomBar.previous\_btn.onRelease = function() {  
prevImage();  
};  
\_root.bottomBar.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 (\_root.container.picture.\_alpha\<100) {

\_root.container.picture.\_alpha += 2;  
}  
}  
};  
function nextImage() {  
if (p\<(total-1)) {  
p++;  
if (loaded == filesize) {  
\_root.container.picture.\_alpha = 0;  
\_root.container.picture.loadMovie(image[p], 1);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
}  
function prevImage() {  
if (p\>0) {  
p–;  
\_root.container.picture.\_alpha = 0;  
\_root.container.picture.loadMovie(image[p], 1);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
function firstImage() {  
if (loaded == filesize) {  
\_root.container.picture.\_alpha = 0;  
\_root.container.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;  
}

[/AS]

---

<div class="post-metadata">

**Author:** ![Greggeh](https://avatars.discourse-cdn.com/v4/letter/g/8baadc/32.png) [@Greggeh](https://forum.kirupa.com/u/Greggeh)\
**Post date:** [April 12, 2006, 9:48pm UTC](https://forum.kirupa.com/t/some-help-please-with-full-browser-xml-gallery/185375/2 "2006-04-12T21:48:37Z")

</div>

container.onResize = function() {  
// main content is always centered  
this.\_y = Math.round(Stage.height/2 - this.\_width/2);  
this.\_x = Math.round(Stage.width/2 - this.\_width/2);  
};

---

<div class="post-metadata">

**Author:** ![cmart](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@cmart](https://forum.kirupa.com/u/cmart)\
**Post date:** [April 12, 2006, 10:14pm UTC](https://forum.kirupa.com/t/some-help-please-with-full-browser-xml-gallery/185375/3 "2006-04-12T22:14:48Z")

</div>

thank you very much.

---

<div class="post-metadata">

**Author:** ![cmart](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@cmart](https://forum.kirupa.com/u/cmart)\
**Post date:** [April 12, 2006, 11:18pm UTC](https://forum.kirupa.com/t/some-help-please-with-full-browser-xml-gallery/185375/4 "2006-04-12T23:18:01Z")

</div>

ok well that works as far as centering but now I’ve run into an issue. Because the container is empty before the first XML image loads, it’s not placing the image in the center until the stage is resized and the listener kicks in.

Any ideas of how to combat this issue?

---

<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:** [April 13, 2006, 5:08am UTC](https://forum.kirupa.com/t/some-help-please-with-full-browser-xml-gallery/185375/5 "2006-04-13T05:08:07Z")

</div>

```auto
this.onEnterFrame = function() {
	//you've forgot to change the path here
	filesize = _root.container.picture.getBytesTotal();
	loaded = _root.container.picture.getBytesLoaded();
	preloader._visible = true;
	if (loaded != filesize) {
		preloader.preload_bar._xscale = 100*loaded/filesize;
	} else {
		preloader._visible = false;
		//if the picture is loaded set x and y
		_root.container._x = Math.round(Stage.width/2-_root.container._width/2);
		_root.container._y = Math.round(Stage.height/2-_root.container._height/2);
		if (_root.container.picture._alpha<100) {
			_root.container.picture._alpha += 2;
		}
	}
};

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![cmart](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@cmart](https://forum.kirupa.com/u/cmart)\
**Post date:** [April 13, 2006, 2:01pm UTC](https://forum.kirupa.com/t/some-help-please-with-full-browser-xml-gallery/185375/6 "2006-04-13T14:01:54Z")

</div>

thanks very much scotty. You’d be surprised (or i’d be embarassed) at how many times I looked over that code and missed that path.

---

<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:** [April 13, 2006, 2:24pm UTC](https://forum.kirupa.com/t/some-help-please-with-full-browser-xml-gallery/185375/7 "2006-04-13T14:24:07Z")

</div>

you’re welcome=)