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
- Adobe Flash
- HTML Editor or Notepad
- SWFObject (latest version 2.1 at the time of writing)
- Download the latest version of SWFObject from Google Code (http://code.google.com/p/SWFObject/)
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 600×400pixels and view it on a browser sized at 1024×768 your beautifully designed 600×400px 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 600×400px 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)
June 29th, 2009 at 12:53 pm
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
June 29th, 2009 at 2:37 pm
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.
June 29th, 2009 at 9:32 pm
source link don’t work (404 error)
June 29th, 2009 at 9:41 pm
@arek,
Pls link updated. Tnx 4 pointing it.
June 30th, 2009 at 11:43 am
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…!
July 2nd, 2009 at 5:36 am
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
July 2nd, 2009 at 2:26 pm
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
July 2nd, 2009 at 2:46 pm
Really a great information on embedding of SWF movies. Most of my doubts have cleared.
July 16th, 2009 at 3:23 am
http://code.google.com/p/SWFObject/
gives 404 error
July 16th, 2009 at 9:37 am
@David
Pls re-check!
July 28th, 2009 at 3:06 am
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
August 26th, 2009 at 2:01 pm
Great article. You surely make it look really simple. Easy to use and implement.
September 30th, 2009 at 8:23 pm
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.
October 18th, 2009 at 9:56 pm
Hi, in safari for windows it’ don’t work work. scrollbars not apper
October 23rd, 2009 at 9:33 pm
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!!
November 20th, 2009 at 7:32 pm
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?
November 30th, 2009 at 8:45 am
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!
December 9th, 2009 at 7:34 pm
I tried setting the swfmode to transparent too. Would not work for me.
December 16th, 2009 at 12:15 am
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
December 20th, 2009 at 6:15 am
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.
December 30th, 2009 at 7:35 pm
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.
March 11th, 2010 at 7:01 pm
Tks very much! After lose hours and hours finally someone that are able to write a simple y funcionally tutorial!
Tks!!!