|
SWFObject and Best Practice Implementation |
|
|
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 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)
Other Posts You Might Like
Create a AS3 MP3 Player with papervision3d spectrum display
As we've already promised you, here's the tutorial about how...- How to build a Flash Actionscript 3.0 Videoplayer
Today we explain you how to create a videoplayer with some b... 
Saving User Generated Imagery from an AIR Application Using the JPG and PNG Encoder Classes and Flas...
While anyone with an intimate knowledge of encoding bits of ...
Create and Skin a Photo Gallery with Flickr, Flex and Actionscript 3.0
This flex tutorial shows you how to create a simple Flex pho...- Create from Scratch a Away3D Shoot’em’Up Game: Part 4
Now that we have the player and some enemies we need for the...
Great to know the -- in depth from this blog.This will really help for my forward steps to be taken.
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
{}
Hi Scott, cheers from Brazil!
The "overflow: hidden; property" works great solving the vertical scroll bar problem!
Thanks a lot!
Hey James, It's easy.
get a player
go crazy
@James you can do that using HTML around it and outside the div.
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.
this is nice but how do you hide the flash context menu with this?
@Lisa that is what makes the Wordpress community so great.
Thanks so much for this tutorial, it really helped me out!
@Stefano I agree with you on that one for sure.
Tks very much! After lose hours and hours finally someone that are able to write a simple y funcionally tutorial!
Tks!!!
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.
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.
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
I tried setting the swfmode to transparent too. Would not work for me.
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!
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?
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!!
Hi, in safari for windows it' don't work work. scrollbars not apper
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.
Great article. You surely make it look really simple. Easy to use and implement.
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
@David
Pls re-check!
http://code.google.com/p/SWFObject/
gives 404 error
Really a great information on embedding of SWF movies. Most of my doubts have cleared.
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
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
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...!
@arek,
Pls link updated. Tnx 4 pointing it.
source link don't work (404 error)
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.
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/documentat...
Cheers
Simon
Become a TTL VIP Member & Get Notified of The Best Changes in Technology, Plus Win Prizes in Our VIP Only Contests...
 |
|
| Become a TTL VIP Member! |
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.
- spam
- offensive
- disagree
- off topic
Like