colorrot
asked on
Liquid Scaling Problem
I have a website that design in Flash using Actionscipt 2.0 and I'm trying to use liquid (dynamic) scaling for the background. It almost works perfectly, except that depending on how you stretching the window size, the height won't always scale 100% - it will just have a large margin on the top and bottom all of a sudden.
This is driving me nuts, it's the only thing I can't quite get to work right on the site.
This is what I have in flash, "background" being my background layer.
This is what I have in HTML body.
You can see an example of what I'm working with here. It's important to note that the background in the website can swap colors like this test and that I need all the elements in my stage to stage in a fixed location to one another (notice the spacing between the plus and minus doesn't change, and the stage is centered in the browser):
http://colorrot.com/test.h tml
Try messing with it by scaling the browser window left to right and you'll see the clipping.
Is this even possible using actionscript? I'm considering looking into using javascript to make the swf hover over an html background like a lot of those pop-up ads. However that has its own challenges due to my dynamic background and I'm avoiding it if possible.
I've also attached the test fla file test.fla and it's html file test.html
This is driving me nuts, it's the only thing I can't quite get to work right on the site.
This is what I have in flash, "background" being my background layer.
Stage.scaleMode = "noscale";
Stage.align = "C";
//----- Background Scale --------
var StageWidth = 950;
var StageHeight = 576;
function scaleBackground()
{
if (Stage.width > Stage.height) {
background._width = Stage.width;
background._yscale = background._xscale;
} else {
background._height = Stage.height;
background._xscale = background._yscale;
}
background._x = (StageWidth - background._width) / 2;
background._y = (StageHeight - background._height) / 2;
}
Stage.addListener(this);
this.onResize = scaleBackground;
scaleBackground();
This is what I have in HTML body.
<body bgcolor="#000000" scroll="no" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bottommargin="0" rightmargin="0" >
You can see an example of what I'm working with here. It's important to note that the background in the website can swap colors like this test and that I need all the elements in my stage to stage in a fixed location to one another (notice the spacing between the plus and minus doesn't change, and the stage is centered in the browser):
http://colorrot.com/test.h
Try messing with it by scaling the browser window left to right and you'll see the clipping.
Is this even possible using actionscript? I'm considering looking into using javascript to make the swf hover over an html background like a lot of those pop-up ads. However that has its own challenges due to my dynamic background and I'm avoiding it if possible.
I've also attached the test fla file test.fla and it's html file test.html
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I was talking of the background of your stage, not the background of the page that is embedding the swf.
But when I have a look at your page, it seems you figgured it out. Is your issue resolved now?
But when I have a look at your page, it seems you figgured it out. Is your issue resolved now?
ASKER
Ahh I got it working! I was using an old algorithm code in my actual website. Yes yes yes. Thank you, you win the big prize that has taken me months to figure out.
I'm attaching the proper code and file for anyone who's interest for future reference.
test.fla
I'm attaching the proper code and file for anyone who's interest for future reference.
test.fla
ASKER
Here's the necessary action script 2.0 code:
Stage.scaleMode = "noscale";
Stage.align = "C";
//modified function that works if you extended you background layer beyond your stage. I recommend using 2000x2000 or larger.
if (Stage.width > Stage.height) {
background.left_bg._width = Stage.width;
background.left_bg._yscale = background.left_bg._xscale;
background.right_bg._width = Stage.width;
background.right_bg._yscale = background.right_bg._xscale;
} else {
background.left_bg._height = Stage.height;
background.left_bg._xscale = background.left_bg._yscale;
background.right_bg._height = Stage.height;
background.right_bg._xscale = background.right_bg._yscale;
}
background.left_bg._x = (StageWidth - background.left._width) / 2;
background.left_bg._y = (StageHeight - background.left._height) / 2;
background.right_bg._x = (StageWidth - background.right._width) / 2;
background.right_bg._y = (StageHeight - background.right._height) / 2;
}
Stage.addListener(this);
this.onResize = scaleBackground;
scaleBackground();
ASKER
Worked!
ASKER
What I was hoping to have was the background layer(which is just the split black and white image) independently scale. That is what the action-script is suppose to do, which would work flawlessly as is if the stage was aligned to the top-left or the top-right, not centered in the page.
The question is, how do I get the height-wasted-space to be filled? Is there no way to just have one layer/image stretch to the size of browser?