Solved

Expand my stage background to fill entire browser window

Posted on 2010-11-22
6
954 Views
Last Modified: 2013-11-11
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
Comment
Question by:colorrot
  • 4
6 Comments
 
LVL 16

Expert Comment

by:jmatix
ID: 34194424
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
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34194455

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
 

Author Comment

by:colorrot
ID: 34201376
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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

Accepted Solution

by:
colorrot earned 0 total points
ID: 34208584
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
 

Author Comment

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

Author Closing Comment

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

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

772 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