• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 970
  • Last Modified:

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
0
colorrot
Asked:
colorrot
  • 4
1 Solution
 
Justin MathewsCommented:
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

0
 
ProculopsisCommented:

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

0
 
colorrotAuthor Commented:
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");
}
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
colorrotAuthor Commented:
I found the solution.

I turned my background images into a movie clip and named the instance "background"

In the first frame of my actionscript layer I put this:
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


Worked perfect, also you must make sure that your HTML file publishes the height and width to 100% and not a fixed pixel ratio.
0
 
colorrotAuthor Commented:
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

0
 
colorrotAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now