[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Expand my stage background to fill entire browser window

Posted on 2010-11-22
6
Medium Priority
?
964 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
6 Comments
 
LVL 16

Expert Comment

by:Justin Mathews
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

650 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