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-->

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.:

I will here collect a series of links of useful information on the interaction between flash and JavaScript, Until I have evaluated all relevant infos, to write a good summary on common practices.

The famous SWFObject to easily embed flash content in html, that was previously hosted on deconcept.com has now moved to google.code basically there are 2 ways to embed your swf into your HTML site:

Following is a basic code sample for the integration using swf object, including parameters, flashvars and attributes. (for many external interface interactions, you will need to give your swf an ID and a name)
here the javascipt to embed, in this case for a fullBrowser embed of the swf:

PLAIN TEXT
JavaScript:




<script src="js/swfobject.js" type="text/javascript"></script>


<script type="text/javascript">


 


        //vars and parameters for embedded swf


        var flashvars = {var1:"sampleImg.jpg", var2:"my caption here"};


        var params = { menu: "false", allowScriptAccess:"sameDomain",allowfullscreen :"true"};


        var attributes = { id: "mainSwf", name: "mainSwf" };


        swfobject.embedSWF("flash/main.swf", "mainSwfDiv", "100%", "100%", "9.0.0","expressInstall.swf", flashvars, params, attributes);


</script>


<!-- later in the html page comes the div tag where you want your swf to be embedded where you can put in your alternative text, in case someone has javascript disabled, or no flash plugin installed.-->


<div id="mainSwfDiv">


 You need Javascript activated and the flash player plugin installed to be able to view this content.


The newest Flash Player can be downloaded here:


 


<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></div> 

Attention!!:
giving the id or the name identical name to the swf file causes javascript errors on IE!! took me ages to find the reason for these. So just call your id and name differently than your swf is called.

A brief and basic recollection about passing vars from JS to AS3. found on: metah.ch

<updated 04.08.2008>

After having passed on variables inside of the swfObject script in my HTML/PHP page:

Read the rest of this entry »