Some help please with full browser XML gallery

programming flash
1

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

I have taken the XML photgallery tutorial 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

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]

2

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);
};

3

thank you very much.

4

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?

5 
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(-:

6

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.

7

you’re welcome=)