I have a FlashBuilder project for which I want to set the displayed size (in browser) only via the html file. I don’t want to hardcode the size of the swf in the flash code.
Also I need to provide several parameters with flash vars.
My html is a modified version of the standard html code generated by FlashBuilder. I try to set the size of the swf in JavaScript and using a container div. So I have the following html code to display the swf:
<html>
<head>
<title></title>
<style type="text/css" media="screen">
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
background-color: #ffffff;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
</style>
<!-- Enable Browser History by replacing useBrowserHistory tokens
with two hyphens -->
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" src="history/history.js"></script>
<!-- END Browser History required section -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var swfVersionStr = "11.1.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
var attributes = {};
flashvars.json = "some json file.json";
flashvars.width = "900";
flashvars.height = "480";
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
params.wmode = "direct";
attributes.id = "Main";
attributes.name = "Main";
attributes.align = "left";
swfobject.embedSWF("Main.swf", "flashContent", "100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left");
</script>
</head>
<body>
<div style="display:block;text-align:left;width:900px; height:480px; position:absolute; top:50px; left:100px">
<div id="flashContent">
<p>To view this page ensure that Adobe Flash Player version 11.1.0 or greater
is installed.</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>");
</script>
</div>
</div>
</body>
</html>
And the following in my flash main method:
public function Main(){
swfWidth = LoaderInfo(root.loaderInfo).parameters.width;
swfHeight = LoaderInfo(root.loaderInfo).parameters.height;
swfFrameRate = LoaderInfo(root.loaderInfo).parameters.framerate;
json = LoaderInfo(root.loaderInfo).parameters.json;
loadJsonFile(json);
stage.frameRate = swfFrameRate;
stage.scaleMode = StageScaleMode.NO_SCALE;
view = new View3D();
view.width = swfWidth;
view.height = swfHeight;
camera = view.camera;
cameraController = new HoverController(camera, null, 150, 10, 10);
this.addChild(view);
}
However, when I open this in browser the displayed size does not match the size given in the hmtl (with the above code it results in about 700×430 px).
What am I doing wrong?
Finally, I managed to fix it.
The problem was the Main.html and index.template.html created by Flashbuilder (and wich is not easy to revise, as it is very complex and more detailed than actually needed.
I created a new .html file with the help of this generator:
http://www.bobbyvandersluis.com/swfobject/generator/index.html
.. and now the stage is set as provided by the flashVars.
This is how my Main looks like now: