XML Image scale on browser resize

[Medyman]

Hi...

The code is working for me. You had some redundant code in there might be messing things up.

Also, you can add all the resize events to the same event listener. You don't need to create another one. And if you do create another one (to watching the resize of another thing, not the stage because you can use the same one), you should give it a different instance name.

Try copying and pasting this code. I've cleaned it up a bit.

Stage.align = "LT";
Stage.scaleMode = "noScale";

/////////////////////////////////////////////////////
container_mc._width = Stage.width
container_mc._height = Stage.height
container_mc._x = 0
container_mc._y = 0

function resize() {
	if (container_mc._xscale > container_mc._yscale) {
		container_mc._yscale = container_mc._xscale;
	} 
	else {
		container_mc._xscale = container_mc._yscale;
	}
}

sizeListener = new Object();
sizeListener.onResize = function() {
	container_mc._width = Stage.width
	container_mc._height = Stage.height
	if (container_mc._xscale > container_mc._yscale) {
		container_mc._yscale = container_mc._xscale;
	} 
	else {
		container_mc._xscale = container_mc._yscale;
	}
	header._y = Stage.height - header._height;
	header._x = Stage.width - header._width;
}

Stage.addListener(sizeListener);


/////////////////////////////////////////////////////////////////////////
var oldVar = 0;
var newVar = 0;
var my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
	if (success) {
		library = this.firstChild.childNodes;
		maxVal = library.length;
		delete my_xml;
		getImage();
	} 
	else {
		desc_txt.text = 'Error: XML Not Loaded';
	}
};

my_xml.load('library.xml');
p = 0;
this.onEnterFrame = function() {
	if (container_mc._alpha<100) {
		container_mc._alpha += 8;
	}
};

function getImage() {
	newVar = Math.floor(Math.random()*maxVal);
	if (newVar == oldVar) {
		getImage();
	} 
	else {
		oldVar = newVar;
		container_mc._alpha = 0;
		container_mc.loadMovie(library[newVar].firstChild.firstChild.nodeValue);
		newVar = Math.floor(Math.random()*maxVal);
		
		one_btn.onRelease = function() {
			getImage();
		}
	}
}

[Hu4ley]

still not working on this end?

On testing the movie the image dosnt appear until I resize the browser window. I even created a new document with 2 layers.. one for the actions and another for holding the container_mc and still it didnt work?

i have attached a zip file to this post... would you look at it for me?

Flash 8 format

thanks

[Medyman]

Sure, I'll have a look.

By the way, what is the oldVar & newVar business? Are you trying to get random background images out of your XML?

[Medyman]

Ok, had a look.

The code is working in a sense. Rendering XML in Flash is a relatively slow process. As everything else is pretty instantaneous, it takes some time for the XML to load.

So what is happening here, is that the container_mc is resizing but then the getImages function makes it full size again because the XML is parsed after containe_mc is resized.

What we want to do is to load in the image first and THEN resize.

To do this, lets create an resize function for the image. You already have a function called resize, change that to resizeImg. Add to that a declaration for the width and height and you have your resizeImg function. In the end, it should look like this:

function resizeImg() {
	container_mc._width = Stage.width
	container_mc._height = Stage.height
	container_mc._x = 0
	container_mc._y = 0
	if (container_mc._xscale > container_mc._yscale) {
		container_mc._yscale = container_mc._xscale;
	} 
	else {
		container_mc._xscale = container_mc._yscale;
	}
}

Now, all the resizeImg(); function inside your onEnterFrame event.

Your final code should be:

// Align Stage
Stage.align = "LT";
Stage.scaleMode = "noScale";

// resizeImg function
function resizeImg() {
	container_mc._width = Stage.width
	container_mc._height = Stage.height
	container_mc._x = 0
	container_mc._y = 0
	if (container_mc._xscale > container_mc._yscale) {
		container_mc._yscale = container_mc._xscale;
	} 
	else {
		container_mc._xscale = container_mc._yscale;
	}
}



sizeListener = new Object();
sizeListener.onResize = function() {
	trace(Stage.width)
	container_mc._width = Stage.width
	container_mc._height = Stage.height
	if (container_mc._xscale > container_mc._yscale) {
		container_mc._yscale = container_mc._xscale;
	} 
	else {
		container_mc._xscale = container_mc._yscale;
	}
	header._y = Stage.height - header._height;
	header._x = Stage.width - header._width;
}

Stage.addListener(sizeListener);


/////////////////////////////////////////////////////////////////////////
var oldVar = 0;
var newVar = 0;
var my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
	if (success) {
		library = this.firstChild.childNodes;
		maxVal = library.length;
		delete my_xml;
		getImage();
		resizeImg();
	} 
	else {
		desc_txt.text = 'Error: XML Not Loaded';
	}
};

my_xml.load('library.xml');
p = 0;
this.onEnterFrame = function() {
	resizeImg();
	if (container_mc._alpha<100) {
		container_mc._alpha += 8;
	}
};

function getImage() {

	newVar = Math.floor(Math.random()*maxVal);
	if (newVar == oldVar) {
		getImage();
	} 
	else {
		oldVar = newVar;
		container_mc._alpha = 0;
		container_mc.loadMovie(library[newVar].firstChild.firstChild.nodeValue);
		newVar = Math.floor(Math.random()*maxVal);
		
		one_btn.onRelease = function() {
			getImage();
		}
	}

}
stop();

In my testing, the random image thing doesn't really work. They way you're doing it is not really the most reliable way of doing random images.

Let me know if you need my help with fixing that up. Or you might want to keep it as is.