SWFObject and Best Practice Implementation

by Scott 13 views33

With more and more full screen Flash web sites appearing on the internet, it’s important to understand how to properly embed the Flash movie in the browser window.

In this tutorial we will cover best practice embedding of SWF movies using SWFObject with a custom function for adding browser scrollbars for smaller browser windows.

Requirements

Download Source Files

Pre-Requisites

Basic knowledge of Flash and HTML. This tutorial is intended for all skill levels.

Step 1 Setup your SWF for full screen viewing.

Create a new SWF movie, this can be any size you want, for this example I’ve setup a new movie at 600 pixels wide by 400 pixels high ( 600 x 400 px).

When you embed an SWF in your HTML, it’s default behavior is to scale to fill the width and height of the browser window. This means that if you create a SWF at 600x400pixels and view it on a browser sized at 1024×768 your beautifully designed 600x400px SWF will scale to 1024×768 and look .

For the purposes of this tutorial, we want our SWF to stay at scaled 100%, if our 600x400px design is viewed on a larger browser window such as 1024×768 px, we want the Flash stage to be centered and for the extra space around the stage to be filled with our overflow background.

To stop our SWF from scaling, we simply add this line to Frame 1 of our ActionScript:

ActionScript 2:

Stage.scaleMode = "noScale";

ActionScript 3:

stage.scaleMode = StageScaleMode.NO_SCALE;

Step 2 Setup your xHTML Template

This is a standard W3C Compliant xHTML Template that I recommend you use a basis for all of your sites.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Title</title>
	</head>
	<body>
	</body>
</html>

Save this file as test.html

Step 3 Add SWFObject Dynamic SWF embedding

Extract the SWFObject zip file you downloaded earlier and copy the SWFObject.js and expressInstall.swf files into the same directory as your new index.html file.

Step 3a

Add the SWFObject.js include to the head tag of our HTML template.

<script type="text/javascript" src="SWFObject.js"></script>
<script type="text/javascript">
//<![CDATA[
SWFObject.embedSWF("example.swf", "flashMovie", "100%", "100%", "6.0.0","expressInstall.swf");
//]]>
</script>

Step 3b

Add the flashMovie div and flashContainer div to the body tag of our HTML Template.

<div id="flashContainer">
	<div id="flashMovie">
		<h1>Alternative flashMovie</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>
</div>

Step 3c

Add the following CSS to style the div flashContainer and flashMovie in the head tag. This resets the browser margins and padding to 0px, ensuring the SWF fille the entire browser window and sets the flashContainer div to fill to 100% of the browsers width and height.

	<style type="text/css" media="screen">
		html, body{
			margin:0;
			padding:0;
			height:100%;
		}
		#flashContainer{
			width:100%;
			height:100%;
		}
	</style>

Also add the following meta under your title tag.

<meta http-equiv="flashMovie-Type" flashMovie="text/html; charset=iso-8859-1" />

So our HTML template should now look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Flash SWF Embedding, the right way min-width, min-height and scroll bars</title>
		<meta http-equiv="flashMovie-Type" flashMovie="text/html; charset=iso-8859-1" />
		<style type="text/css" media="screen">
			html, body{
				margin:0;
				padding:0;
				height:100%;
			}
			#flashContainer{
				width:100%;
				height:100%;
			}
		</style>
		<script type="text/javascript" src="SWFObject.js"></script>
		<script type="text/javascript">
		//<![CDATA[
		SWFObject.embedSWF("example.swf", "flashMovie", "100%", "100%", "6.0.0","expressInstall.swf");
		//]]>
		</script>
	</head>
	<body>
		<div id="flashContainer">
			<div id="flashMovie">
				<h1>Alternative flashMovie</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>
		</div>
	</body>
</html>

The important line for embedding your own Flash SWF is here:

SWFObject.embedSWF("example.swf", "flashMovie", "100%", "100%", "6.0.0","expressInstall.swf");

You can change example.swf to the name of your movie. You can also include paths, so if youe swf was located in ./test/ and was name test_swf.swf your embed tag would look like:

SWFObject.embedSWF("./test/test_swf.swf", "flashMovie", "100%", "100%", "6.0.0","expressInstall.swf");

The 4th parameter, 6.0.0 sets the minimum Flash player version. For example, ff you’re publishing to Flash Player 8, set this variable to 8.0.0

The 5th parameter, “expressInstall.swf”, tells SWFObject to automatically upgrade older Flash players to the required version. Make sure the expressInstall.swf is uploaded in the directory of your HTML.

More information on embedding with SWFObject is available at http://code.google.com/p/SWFObject/w/list

Step 4 Adding custom JavaScript to get the browser viewport size

Now we want to add a JavaScript helper function to set the minimum size of our Flash movie, so that if the browser is re sized below the minimum width or height scroll bars will be added. This replicates the functionality of a standard HTML web site.

Here is the helper function:

		function setFlashSize(flashWidth,flashHeight){
			var size = [0,0];
			if( typeof( window.innerWidth ) == 'number' ) {
				size = [window.innerWidth, window.innerHeight];
			} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
				size = [document.documentElement.clientWidth, document.documentElement.clientHeight];
			} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
				size = [document.body.clientWidth, document.body.clientHeight];
			}
			window.onresize = function() {
				document.getElementById("flashContainer").style.minWidth = flashWidth+"px";
				document.getElementById("flashContainer").style.minHeight = flashHeight+"px";
				document.getElementById("flashContainer").style.width = size[0] < flashWidth ? flashWidth+"px" : "100%";
				document.getElementById("flashContainer").style.height = size[1] < flashHeight ? flashHeight+"px" : "100%";
			};
			window.onload = function(){
				window.onresize();
			}
		}

This function accepts 2 parameters, the minimum width of your Flash movie and minimum height of your Flash movie. The script then calculates the viewable area of the browser window and sets an onResize listener to fire and set the minimum width and height of the flashContainer div.

Add this function above our SWFObject.embedSWF function call like so:

		<script type="text/javascript">
		//<![CDATA[

		function setFlashSize(flashWidth,flashHeight){
			var size = [0,0];
			if( typeof( window.innerWidth ) == 'number' ) {
				size = [window.innerWidth, window.innerHeight];
			} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
				size = [document.documentElement.clientWidth, document.documentElement.clientHeight];
			} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
				size = [document.body.clientWidth, document.body.clientHeight];
			}
			window.onresize = function() {
				document.getElementById("flashContainer").style.minWidth = flashWidth+"px";
				document.getElementById("flashContainer").style.minHeight = flashHeight+"px";
				document.getElementById("flashContainer").style.width = size[0] < flashWidth ? flashWidth+"px" : "100%";
				document.getElementById("flashContainer").style.height = size[1] < flashHeight ? flashHeight+"px" : "100%";
			};
			window.onload = function(){
				window.onresize();
			}
		}
		SWFObject.embedSWF("example.swf", "flashMovie", "100%", "100%", "6.0.0","expressInstall.swf");
		//]]>
		</script>

You’re SWF is now properly embedded with SWFObject, however there is a problem which often overlooked when creating full screen Flash web sites. If the browser window is smaller then the dimensions of the Flash SWF stage, no scrollbars will appear on the browser and the Flash stage will simply be cut off.

Resizing the browser window below the size of our Flash stage cuts off the edges of our Flash stage:

Step 5 Setting the minimum size of our Flash movie

Now we have our help functions we can call on them to set the minimum size of our Flash movie. This is as simple as adding the following line after our SWFObject.embedSWF call:

		setFlashSize(600,400);

Substitute the required width and height into the function parameters replacing the 600 and 400 respectively.

Congratulations!

Your HTML template should now look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Flash SWF Embedding, the right way min-width, min-height and scroll bars</title>
		<meta http-equiv="flashMovie-Type" flashMovie="text/html; charset=iso-8859-1" />
		<style type="text/css" media="screen">
			html, body{
				margin:0;
				padding:0;
				height:100%;
			}
			#flashContainer{
				width:100%;
				height:100%;
			}
		</style>
		<script type="text/javascript" src="SWFObject.js"></script>
		<script type="text/javascript">
		//<![CDATA[

		function setFlashSize(flashWidth,flashHeight){
			var size = [0,0];
			if( typeof( window.innerWidth ) == 'number' ) {
				size = [window.innerWidth, window.innerHeight];
			} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
				size = [document.documentElement.clientWidth, document.documentElement.clientHeight];
			} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
				size = [document.body.clientWidth, document.body.clientHeight];
			}
			window.onresize = function() {
				document.getElementById("flashContainer").style.minWidth = flashWidth+"px";
				document.getElementById("flashContainer").style.minHeight = flashHeight+"px";
				document.getElementById("flashContainer").style.width = size[0] < flashWidth ? flashWidth+"px" : "100%";
				document.getElementById("flashContainer").style.height = size[1] < flashHeight ? flashHeight+"px" : "100%";
			};
			window.onload = function(){
				window.onresize();
			}
		}
		SWFObject.embedSWF("example.swf", "flashMovie", "100%", "100%", "6.0.0","expressInstall.swf");
		setFlashSize(600,400); //set the minimum width and height of your Flash movie
		//]]>
		</script>
	</head>
	<body>
		<div id="flashContainer">
			<div id="flashMovie">
				<h1>Alternative flashMovie</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>
		</div>
	</body>
</html>

If you test this in your a browser and re size the browser window to something under 600px wide and 400px high you will see the scroll bars appear.

Extra Optimization: Setting the minimum size of our Flash movie

As a final step add alternate Flash content or SEOptimized content into the flashMovie div, for example:

		<div id="flashContainer">
			<div id="flashMovie">
				<h1>Alternate Content Goes Here!</h1>
				<p>Users without Flash or JavaScript, Search Engine Crawlers will see this text instead of my Flash movie</p>

				<p>Insert SEO Optimised keywords and information about your web site here for Search Engine indexing.</p>
			</div>
		</div>

Conclusion

You now have a Search Engine Optimized, flash embed page with provisions for users without Flash or JavaScript. And if visitor with a smaller resolution browser window then your Flash stage they will be able to scroll around the web site as if it were a standard HTML based site.

Further reading:

Embedding with SWFObject (official documentation)

Scott

My name is Scott King, I'm an Senior Interactive Developer with ten years of commercial development and design experience located in Sydney, Australia.

I create Flash applications and web sites, Papervision 3D applications, rich media banners, strict W3C compliant CSS, xHTML and JavaScript/jQuery based web sites, PHP and MySQL back end applications and 32bit desktop applications and widgets. I also operate the official Papervision Showcase web site.

http://www.scottking.com.au/blog
http://www.papervisionshowcase.com

Comments (33)

  1. Hi, great article, nicely summarizing all essentials.
    Onlu thing I noticed, is that the Link you are providing to google.code is hardcoded with Uppercase letters, and therefore does not work. This would be the right one:
    http://code.google.com/p/swfobject/wiki/documentation

    Cheers
    Simon

  2. Nice write up 🙂

    I was about to code something similar myself for my current project, until I came across swffit: http://icanhaz.com/swffit

    swffit is a simple add-on to swfobject that seems to to the “minimum size” thingy quite nicely.
    It also lets you change your mind later on, if your size requirements vary during site navigation.

  3. source link don’t work (404 error)

  4. @arek,

    Pls link updated. Tnx 4 pointing it.

  5. Wellll, I never knew embedding flash was so complex when needed to be done correctly. I have no interest in learning Flash becasue I think you need to specialise in it to be good, BUT, with all the free Flash templates etc floating around, I am tempted to have a little play in the future sometime…!

  6. hi,
    i try your Flash_Embed_proper_usage.html,
    but it always showing the vertical Scrollbar even my window is as big as 1200x 1000,
    i using firfox 3.0.11

  7. Hi Yau,

    Please amend your CSS like so:

    #flashContainer{
    width:100%;
    height:100%;
    overflow: hidden;
    }

    Add the overflow: hidden; property to the #flashContainer rule. This should fix your scrollbar problem.

    Let me know how you go.
    Scott

  8. Really a great information on embedding of SWF movies. Most of my doubts have cleared.

  9. Hi Scott,

    Thanks for a great blog. We are a small flash website design & marketing company and are utilizing SWFOBJECT “alternate Content” for our many clients. Should we be concerned about being penalized by Google ?

    ~Trojan

  10. Great article. You surely make it look really simple. Easy to use and implement.

  11. nice tut’.. but then i have one problem.. is there anywhere i can switch
    between the flash object and an image if the flash plugin is not found on the user’s machine.

  12. Hi, in safari for windows it’ don’t work work. scrollbars not apper

  13. Really great article… I am a novice, but wanted to learn about swfobject. I went through the tutorial, did as I was told, but when I open the html in a browser (firefox and safari, Mac), all I get is the alternate content. My swf, js, and other files are all in the same folder. I have flash installed… any idea what I am doing wrong? I can post my code if it would help.
    Thanks!!

  14. Hi All,

    Great post, but curious, when using the embedSWF method I have not found a way to set the wmode to transparent. Any ideas?

  15. Hi!

    This is a great tutorial. But how can enable full screen? Like allowfullscreen: ‘true’ for swf. I can’t make it to work :-(. Please help me.

    Thanks!

  16. I tried setting the swfmode to transparent too. Would not work for me.

  17. Thanks for the most needed information.Despite following all your instructions I am unable to see ‘example movie’ in my html file.Please guide and advise me how to dispaly this swf movie in the html file.
    thanks

  18. This is good although it does not work properly in Internet Explorer. I’m sure you’re alllll testing in IE? I’m using IE 8 to varying degrees of workingness i’ve tried ie 8 quirks mode ie 8 standards, ie 7 quirks and ie 7 standards and none really do what it does in Firefox / Chrome.
    Finding the height/width of a page in ie is a pain and i know i used to have a script somewhere that does it properly and if i find it i’ll try to pass along a fix to y’all.

  19. I have seen some drastic differences too while comparing IE7, IE8, Mozilla and Chrome. IE does things a lot differently at times which is very annoying.

  20. Tks very much! After lose hours and hours finally someone that are able to write a simple y funcionally tutorial!
    Tks!!!

  21. @Stefano I agree with you on that one for sure.

  22. Thanks so much for this tutorial, it really helped me out!

  23. @Lisa that is what makes the WordPress community so great.

  24. this is nice but how do you hide the flash context menu with this?

  25. How do I edit the rest of the swf-ebedded displayed html page? All of the code for the swf is in the head of the html. I want to contain the swf in a div and do regular html around it please.

  26. @James you can do that using HTML around it and outside the div.

  27. Hey James, It’s easy.


    get a player

    go crazy

  28. Hi Scott, cheers from Brazil!

    The “overflow: hidden; property” works great solving the vertical scroll bar problem!

    Thanks a lot!

  29. If in IE the page wont be able to resize back to normal value (100%), change
    “size[0] < flashWidth ? flashWidth+"px" : "100%";"

    to normal if ()
    {}
    else
    {}

  30. Great to know the — in depth from this blog.This will really help for my forward steps to be taken.

  31. I can’t believe how many “guru” developers have tried to solve this ridiculous problem of flash plugin version detection and embedding, including swfObject developers and Adobe’s developers and I have yet to find ONE that have 100% succeeded!
    This example doesn’t work at all in any browser in my PC (29-08-2011)! It only shows the alternative content. I guess some things have changed since this article was written -probably useless now.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>