SWFObject is a minimal & clean way to embed your flash content across any browser. Most flash sites use it and soon Adobe is going to use it as the de-facto standard for embedding flash content!
Download the object from here.
Take the swfobject.js from the downloaded folder and paste it in the folder where you store your index file which will use it along with your swf file. Copy the ‘expressinstall.swf’ file to this location as well.
Create a <div> element in the <body> part of the HTML page and call it ‘my_swf’ or whatever you want. This will hold the swf file. Presently just put in some content in there like what the page is about or a link to downloading Adobe Flash player coz the initial content will be seen only if the user’s computer does not have the Flash player installed. I think you should not only put the link to the player but also some stuff about your site. As it is Google is not going to be able to read what is inside the swf, it can definitely read the contents of this <div>.
Now call the swfobject.js file from the html page that holds your swf in the <head> section:
<script type=”text/javascript” src=”swfobject.js”></script>
The js file can be placed inside a folder called ‘js’ and called as well. So in that case, the src attribute of the <script> would look like this: src=”js/swfobject.js”
Now embed your swf directly like this (still in the <head> section)
<script type=”text/javascript”>
swfobject.embedSWF(“index.swf”, “my_swf”, “800″, “600″, “9.0.0″, “expressInstall.swf”);
</script>
Thats It!
As you can see, it took 6 arguments.
- Name of the swf
- Id of the <div> element
- Width of the swf
- Height of the swf
- Flash Player version required
- Name of the expressinstall file (used for getting the player)
Now if you want to make a 100% flash site that occupies the available space and also loads some FlashVars then add some CSS to the HTML + some parameters to the Javascript
In the <script> tag, where you embedded the swf, create an object for the FlashVars
var flashvars = {};
Now add properties to this using the object.property syntax
flashvars.the_flash_var = “Hello from HTML”;
To add some parameters that you’d generally set from the Settings button in the Flash CS3 IDE, create another object and add properties to it
var params = {};
params.menu = “false”;
params.scale = “noscale”;
Now add these to the embedSWF function of the swfobject
swfobject.embedSWF(“index.swf”, “gmi_swf”, “100%”, “100%”, “9.0.0″, “expressInstall.swf”, flashvars, params);
Thats all!
Inside flash, you can access the value of the_flash_var by typing
root.loaderInfo.parameters.the_flash_var;
Here is the code from the <head> tag all together
<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
var flashvars = {};
flashvars.the_flash_var = “Hello from HTML”;
var params = {};
params.menu = “false”;
params.scale = “noscale”;
swfobject.embedSWF(”index.swf”, “gmi_swf”, “100%”, “100%”, “9.0.0?, “expressInstall.swf”, flashvars, params);
</script>