I've spent the last couple days trying to get this working, and i've overcome so many hurdles, but this last resizing thing just have me at a bind, still can't figure it out.

basically in a nutshell, i am trying to create a HTML webpage with flash movie (SWF) as background, and as the browser width increase, the background flash will increase as accordingly. exactly like you would see here: http://www.samsung.com/us/ all while maintaining the aspect ratio.

so far i've successfully gotten the HTML to show "over" the flash background. but now the problem remains that the background flash resizes according to flash embedding's default setting which are "showall", "noorder", and "exact" fit, as some of you might know, those factory settings don't provide the best solution. "exactfit" will distort the aspect ratio, while "showall" and "noorder' scales the swf, but you get a large gap at either right side or the bottom, which makes it look very ugly and unprofessional.

i've searched through this forum and many others, it appears that the solution lies within flash's internal action script so called "stage event" scale code. but i just don't know exactly what to put in the action script, and can't get it to work right.

here is the HTML i have now: (if you view it in IE, you might get a white gap on the left, i've come to realize that the CSS margin set to auto for horizontal automatically adds that white space to the left, while FF nicely pushes the background flash to the left, but that's another problem i need to figure out tomorrow)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquaflex</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/swffit.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.play = "true";
params.scale = "showall";
params.salign = "tl";
params.wmode = "opaque";

params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "flashContent";
attributes.align = "left";
swfobject.embedSWF("flash/slide_show_bg.swf", "flashContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
params.wmode = "opaque";



swffit.fit("flashContent",640,400);

</script>

<div id="flashContent">
<h1>Please Install Flash</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>

</head>

<body>
<div id="content">
This is a sample text
</div>
</body>
</html>




and here is the CSS:
++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++
@charset "utf-8";
/* CSS Document */

html, body {
background:#fff;
width:100%;
height:100%;
margin:0 auto;
align:left;


}

#flashcontent {
width:100%;
height:100%;
z-index:0;
margin:0 auto;

}


#content {
width: 873px;
float: center;
margin:0 auto;
z-index:2;
position:relative;

}



/*==================txt, links, lines, titles====================*/
a {color:#6ccdff;}
a:hover{text-decoration:none;}

h1 {}
h2 { font-size:2em; line-height:1.1em; font-weight:normal; color:#fff; background:url(images/icon1.jpg) no-repeat left top; padding:0 0 0 61px; margin-bottom:20px;}
h2.rss { background:url(images/rss.jpg) no-repeat left top;}
h2.icon2 {background:url(images/icon2.jpg) no-repeat left top;}
h2.icon3 {background:url(images/icon3.jpg) no-repeat left top;}
h2.icon4 {background:url(images/icon4.jpg) no-repeat left top;}
h2.icon5 {background:url(images/icon5.jpg) no-repeat left top;}
h2.icon6 {background:url(images/icon6.jpg) no-repeat left top;}
h2.icon7 {background:url(images/icon7.jpg) no-repeat left top;}
h2.icon8 {background:url(images/icon8.jpg) no-repeat left top;}
h2.icon9 {background:url(images/icon9.jpg) no-repeat left top;}
h2.icon10 {background:url(images/icon10.jpg) no-repeat left top;}
h2.icon11 {background:url(images/icon11.jpg) no-repeat left top; padding:10px 0 30px 71px; margin-bottom:0;}
h2.icon12 {background:url(images/icon12.jpg) no-repeat left top;}
h2.icon13 {background:url(images/icon13.jpg) no-repeat left top; padding:6px 0 24px 61px; margin-bottom:0;}
h3 { font-size:1.25em; margin-bottom:18px;}
h4 { font-size:1.25em; color:#adc75e; margin-bottom:6px;}
h4 a {color:#adc75e; text-decoration:none;}
h4 a:hover { color:#fff;}

.txt1 { font-size:.91em;}

.link1 { color:#fff;}
.link2 { background:url(images/marker1.gif) no-repeat right 2px; padding:0 21px 0 0;}

.sub { color:#6ccdff; border:0px; width:60px; height:22px; background:#000; }

.line-hor { background:url(images/line-hor.gif) left top repeat-x; height:1px; overflow:hidden; font-size:0; line-height:0; margin:20px 0 20px 0;}
.line-hor1 { background:#242930; height:1px; overflow:hidden; font-size:0; line-height:0; margin:25px 0 30px 0;}
.line-ver { background-image:url(images/line-ver.gif); background-repeat:repeat-y; width:100%;}
++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++
And here is the FLA source (yes, i am real desperate) http://www.digitalinvent.com/aqua/so...de_show_bg.fla