Solved

Expand my stage background to fill entire browser window

Posted on 2010-11-22
6
958 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery 2 23
Explain this javascript function to me 2 25
jQuery force form POST 7 45
JS Event Does not Trigger From File 2 26
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 last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

839 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