Posted by sortofme on July 9th, 2008
Having had difficulties to find a rather complete description on this very common subject, I thought I might as well compile a selection of techniques necessary to accomplish this.
first, let's go through the requirements within the HTML page and the swfObject javascript, which comes into the head of the HTML page embedding the swf:
more about the use of the swfObject here-->
HTML:
-
<script type="text/javascript" src="js/swfobject.js"></script>
-
<script type="text/javascript">
-
//vars and parameters for embedded swf
-
var flashvars = { };
-
var params = { menu: "false", allowScriptAccess:"sameDomain", allowfullscreen :"true"};
-
var attributes = { id: "main", name: "main" };
-
swfobject.embedSWF("flash/main.swf", "mainFlash", "100%", "100%", "9.0.0","expressInstall.swf", flashvars, params, attributes);
-
</script>
-
<style type="text/css">
-
<!--
-
html, body, #mainFlash{ height:100%; width:100%;}
-
body { margin:0; padding:0; overflow:hidden; background-color:#A31724; text-align:center; }
-
-->
-
</style>
-
Set both the width and height of your SWF to 100% in your SWFObject definition.
-
Include CSS to get rid of any default margins/padding and set the height of the html element, the body element and the entire chain of block level HTML elements that your SWF will be nested in to 100%, because Firefox (or: any Gecko based browser) in standards compliant mode (or: using a valid DOCTYPE) interprets percentages in a very strict way (to be precise: the percentage of the height of its parent container, which has to be set explicitly)
Now go to your flash movie, and manage the scaling and alignment of your SWF and the positioning of your SWF's elements, within your ActionScript code, e.g.:
Actionscript:
-
stage.scaleMode = StageScaleMode.NO_SCALE;
-
stage.align = StageAlign.TOP_LEFT;
-
-
stage.addEventListener(Event.RESIZE, resizeHandler);
-
-
function resizeHandler(event:Event):void {
-
trace(stage.stageWidth + " x " + stage.stageHeight);
-
// center stuff
-
}
Recent Comments