asked on

Expand my stage background to fill entire browser window

I have a stage that's exactly half black and white and I would like it to expand beyond the stage and fill the entire browser window, no matter what size it is (liquid/dynamic resizing).

I originally have set up the swf file floating on top of an html table that's split black and white too (using a javascript code I found), but what I want to be able to dynamically swap the colors when I press a button. I haven't been able to figure out how to also change the HTML table colors that swf is on top of and I thought it might be easier to go about with the liquid full-browser stage. I'd prefer avoiding the HTML stuff, although if someone know's how to change the HTML table colors with a rollover/rollout & release function of the buttons in sync with the swf I suppose that would work too.
loaderSS.png

Justin Mathews

Try something like (notice the attributes on <body> element):

<body scroll='no' LEFTMARGIN='0' TOPMARGIN='0' MARGINHEIGHT='0' MARGINWIDTH='0'>
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="main" width="100%" height="100%"
			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
			<param name="movie" value="main.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#869ca7" />
			<param name="allowScriptAccess" value="sameDomain" />
			<embed src="main.swf" quality="high" bgcolor="#869ca7"
				width="100%" height="100%" name="main" align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="always"
				type="application/x-shockwave-flash"
				pluginspage="http://www.adobe.com/go/getflashplayer">
			</embed>
	</object>
</body>

Open in new window

Proculopsis

The following fills the entire screen with a black and white colour-flipping table which might help a bit:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26633021.html</title>

<script>

function eventMouseOver( cell )
{
  var left = document.getElementById( "left" );
  var right = document.getElementById( "right" );

  switch ( cell.id )
  {
    case "left":
      left.style.backgroundColor = (left.style.backgroundColor=="black")? "white" : "black";
      right.style.backgroundColor = (left.style.backgroundColor=="black")? "white" : "black";
    break;
    case "right":
      left.style.backgroundColor = (left.style.backgroundColor=="white")? "black" : "white";
      right.style.backgroundColor = (left.style.backgroundColor=="white")? "black" : "white";
    break;
  }

}
</script>

<style>
body { margin: 0px; }
#ground { width: 100%; height: 100%;  border-width: 0px; border-spacing: 0px; border-style: none; border-collapse: collapse; }
#left { width: 50%;  border-width: 0px; padding: 0px; border-style: none; background-color: black; }
#right { width: 50%;  border-width: 0px; padding: 0px; border-style: none; background-color: white; }
</style>

</head>

<body>

<table id="ground">
<tr>
<td id="left" onmouseover="eventMouseOver(this);">&nbsp;</td>
<td id="right" onmouseover="eventMouseOver(this);">&nbsp;</td>
</tr>
</table>

</body>

</html>

Open in new window

colorrot

ASKER

The key is I don't want any of the content to scale, I just want the black and white background to always fill the entire browser window. I'd somehow have to get my background layer which has two movie clip symbols (one that makes it half black and one that makes it half white), to scale beyond everything else in the stage. While all the other stage elements are still proportional and in the center of the screen.

Proculopsis seems to be on the right track with the HTML thing if I were to stick with that direction. How do I get my flash buttons to communicate with the the HTML page (as currently my spash screen is a simple flash one).

It might help you to see what i'm doing here, as I have a test version up here:
http://www.colorrot.com/

Now I could make the splash screen all HTML and that might be a good idea, as I'll probably say you need flash to enter, use an optimal screen size of at least x, etc..., but the splash screen isn't the only place I want to be able to swap colors. I want to be able to change my main stage as well at the click of a button, in which case my main swf would need to communicate with the HTML table. Is that possible? I know you can have flash communicate with HTML to change the background color, but I haven't been able to find a way to get it to target specific cells.

This is what I have on my buttons:
//////////////////Roll Over
on (rollOver) {
      var colorful = new Color("_root.left_bg");
      colorful.setRGB(0xFFFFFF);
}

on (rollOver) {
      var colorful = new Color("_root.right_bg");
      colorful.setRGB(0x000000);
}

on (rollOver) {
      var colorful = new Color("_root.minus");
      colorful.setRGB(0xFFFFFF);
}

on (rollOver) {
      var colorful = new Color("_root.plus");
      colorful.setRGB(0x000000);
}

on (rollOver) {
      var colorful = new Color("_root.minus");
      colorful.setRGB(0xFFFFFF);
}
//////////////////Roll Out
on (rollOut) {
      var colorful = new Color("_root.left_bg");
      colorful.setRGB(0x000000);
}

on (rollOut) {
      var colorful = new Color("_root.right_bg");
      colorful.setRGB(0xFFFFFF);
}

on (rollOut) {
      var colorful = new Color("_root.minus");
      colorful.setRGB(0x000000);
}

on (rollOut) {
      var colorful = new Color("_root.plus");
      colorful.setRGB(0xFFFFFF);
}
//////////////////Release (so main stage is proper colors)
on (release) {
      var colorful = new Color("_root.left_bg");
      colorful.setRGB(0x000000);
}

on (release) {
      var colorful = new Color("_root.right_bg");
      colorful.setRGB(0xFFFFFF);
}

on (release) {
      var colorful = new Color("_root.minus");
      colorful.setRGB(0x000000);
}

on (release) {
      var colorful = new Color("_root.plus");
      colorful.setRGB(0xFFFFFF);
}
///////////////////////Play splash movie
on (release){
getURL("http://www.colorrot.com/CRS_INV.html");
}

ASKER CERTIFIED SOLUTION

colorrot

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

colorrot

ASKER

Actually I made a minor typo in the code, this is the correct code that must be added.

Stage.scaleMode = "noscale";
//----- 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

colorrot

ASKER

You must go beyond the HTML settings to do this, you must also make a special movie clip with the proper code to scale it.