Solved

Liquid Scaling Problem

Posted on 2011-03-06
6
330 Views
Last Modified: 2012-05-11
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.

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

Open in new window


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" >

Open in new window


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.html

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
0
Comment
Question by:colorrot
  • 4
  • 2
6 Comments
 
LVL 20

Accepted Solution

by:
ChristoferDutz earned 500 total points
ID: 35056447
Well the problem is that you are scalling while preserving the aspect-ratio of your image. This means if your image is twice as high then it's twice as wide.

You can think of your algorithm being the following .... take your image and scale it so it fills the height or the width exactly with as little wasted area as possible. This wasted area is what's driving you mad.

In order to resolve this, you would have to allow your image being scaled independently which could result in ugly results.
Another solution would be to fill up the wasted area with something looking the same way as your image. In your case you would draw a 50% black and 50 white rectangle behind the image and place the image in front of this.
0
 

Author Comment

by:colorrot
ID: 35142893
Drawing my background larger does not change anything. I more than doubled it, but when it's exported flash cuts its edges at the stage size. This might work if I was exporting it as a standalone presentation, but not for a website.

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?
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 35146055
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?
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:colorrot
ID: 35153039
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
0
 

Author Comment

by:colorrot
ID: 35153053
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();

Open in new window

0
 

Author Closing Comment

by:colorrot
ID: 35153056
Worked!
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
T263 Codec - Mac 7 189
Help with audio only file for Youtube 17 70
Noone on the network can stream news videos or feeds 16 69
iMove 10.1.4 - Extract portion of .mp4 movie 2 12
There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
Viewers will learn how to create and use Simpler instruments in Ableton Live. Load new Simpler into an empty MIDI track: Select a sample and drop it into sample window in Simpler: If sample is not pitched at C3, adjust tuning with Transpose para…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question