XML Image scale on browser resize

[Hu4ley]

Hi,

Im working on a full screen flash project that calls in an image from an xml file and displays it in the background. This all works great but is it possible to have the imported image scale up/down when the user resizes the browser window?? I have searched for a solution but cant seem to find one. Is this possible?

Im not sure if this will do any good but here is the code for loading in the background image:

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



Any help would be appreciated

Hurley

[Hu4ley]

Anybody help or point me in the right direction?

[Medyman]

Once the image is brought in via XML, just treat it like a regular image that you have within a MC.

I'm not sure what your bk is of so you should tweak this to suit your needs but not consider aspect ratios etc...


background_mc._width = Stage.width
background_mc._height = Stage.height

sizeListener = new Object();
sizeListener.onResize = function() {
background_mc._width = Stage.width
background_mc._height = Stage.height
}

Stage.addListener(sizeListener);

[Hu4ley]

First off thanks Medyman for your reply.

This has been driving me insane.

What im doing is importing random images into the background of my full screen flash project and would like the images to have the same aspect ratio regarless of browser size. Is there a piece of code I could add to this to achieve this effect???

Thanks for your help!!

[Medyman]

img._width = Stage.width;
img._height = Stage.height;
if (img._xscale > img._yscale) {
img._yscale = img._xscale;
} else {
img._xscale = img._yscale;
}

This will make it so that the scaling is proportional.

HTH

[Hu4ley]

Medyman your a genius!!!

That code did the trick!! Really appreciate your help. Cant believe such a tiny piece of code caused me so much headache. Once I finish the project ill post a link and you can see it in action. Once again THANKS!! :)

Hurley

[Medyman]

No problem. Glad to help! :)

[Hu4ley]

Hi medyman...

One more question... when I load my movie the imported background image loads fullscreen and dosent fit to window until I grab the browser and resize it. Have you any ideas on how to fix it?

sorry to be a pain :)

[Medyman]

Make sure the aspect ratio piece of code is declared inside the onResize listener as well as outside.

Your code should look like this...add the code from my second to last post above where it's commented


background_mc._width = Stage.width
background_mc._height = Stage.height
// Aspect ratio code

sizeListener = new Object();
sizeListener.onResize = function() {
background_mc._width = Stage.width
background_mc._height = Stage.height
// Aspect ratio code
}

Stage.addListener(sizeListener);

[Hu4ley]

I used the code you posted and the background image still dosent show up until I resize the window? Ill post the code below maybe im missing something..

#include "lmc_tween.as"
Stage.align = "LT";
Stage.scaleMode = "noScale";
/////////////////////////////////////////////////////
container_mc._width = Stage.width
container_mc._height = Stage.height
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;
}

sizeListener = new Object();
sizeListener.onResize = function() {
container_mc._width = Stage.width
container_mc._height = Stage.height
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;
}
}

Stage.addListener(sizeListener);

stageListener = {};
stageListener.onResize = function(){
header._y = Stage.height - header._height;
header._x = Stage.width - header._width;
}
Stage.addListener(stageListener);
/////////////////////////////////////////////////////////////////////////
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();
};
}
}


thanks medyman for the help.

[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? :confused:

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.