Full Window Flash, Done Right
So you want to have Flash take up 100% of a browser window, but that's not enough, it also has to maintain a minimum size. This will give Flash the ability to expand and contract as the user resizes the window, but if they make it too small scroll bars will appear. Achieving this involves a multistep process in order to properly support the most browsers (Safari, Firefox, IE 5.5 through 7).
Step 1: Create Your Container HTML File
Starting out with a HTML 4.01 Strict file is essential in creating a consistent experience. It's time to get used to conforming to standards unless you want to mess around with multiple box models. No, you cannot use XHTML, no one should use it. Almost no one serves it properly and IE 6 has no clue what application/xml is. All you'll do is force IE to render in quirks mode and use its box model.
Here is the start of a HTML 4.01 strict document as generated by BBEdit.
Step 2: Embed Your Flash with SWFObject 2.0
SWFObject 2.0 is a free JavaScript library that provides the ability to uniformly embed Flash while maintaining standards compliance and cross-browser support. I strongly urge you to check out the documentation as this article won't go into any depth about its use.
Between the
Stopping here would create a nicely embedded Flash file that will resize with the window. Though a little CSS needs to be added to make it properly fill the window.
Step 3: The CSS
CSS needs to be added to make sure the Flash fills the entire window. There are a variety of issues with full window content, the specifics which I no longer recall, so you'll just have to trust me for the most part.
Add within the
Now the Flash should take up the entire window. Though this doesn't yet solve the problem of enforcing a minimum size when a user resizes the window. The user could shrink the window down and miss important elements, but Flash has no way of telling the browser that needs to maintain a certain size. A little CSS is all it takes to address that in modern browsers.
There is some over-specification in there because of a Safari bug.
I purposefully said modern browsers, because IE 6 and below have no idea what
Step 4: Making Up for It with JavaScript
Even though IE 6 doesn't support the CSS that would make this process complete doesn't mean it has to get any more difficult. I created a JavaScript function called minsize()* to emulate the absent behavior.
The function takes the ID of the element you want to set minimum dimensions to, followed by the width, then the height. It should be wrapped in a IE conditional statement and placed at the end of the document before the closing body tag.
*Please do not redistribute this file. The credits within need to remain intact. I also ask to be notified of any changes or improvements so I can update and repost the file as needed.
Step 5: Dealing with "Click to Activate"
Certain versions of IE will display a message around a Flash embed saying that it must be clicked to activate. This is due to that whole patent mess. Microsoft eventually licensed the patent so not every version of IE is effected. This can also be solved with another JavaScript workaround that should be included at the end of the document before the closing body tag, wrapped in IE conditional comments.
Step 6: Putting It All Together
With everything put together Flash should not only take up the entire window, but maintain minimum widths in most browsers, at least the ones I've tested (Safari, Firefox, IE 5.5 through 7.). That should be just about everyone.
Here is what it all looks like together:
I hope you've enjoyed scrolling to the end of this document as much as I did writing it. Here are the referenced files:
Completed HTML
minsize.js (1.0.001)
clicktoactivate.js
SWFObject
Please send me comments on how I can improve this process or minsize.js. I will try to keep this document up-to-date and expand it if necessary.
Step 1: Create Your Container HTML File
Starting out with a HTML 4.01 Strict file is essential in creating a consistent experience. It's time to get used to conforming to standards unless you want to mess around with multiple box models. No, you cannot use XHTML, no one should use it. Almost no one serves it properly and IE 6 has no clue what application/xml is. All you'll do is force IE to render in quirks mode and use its box model.
Here is the start of a HTML 4.01 strict document as generated by BBEdit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.7">
</head>
<body>
</body>
</html>
Step 2: Embed Your Flash with SWFObject 2.0
SWFObject 2.0 is a free JavaScript library that provides the ability to uniformly embed Flash while maintaining standards compliance and cross-browser support. I strongly urge you to check out the documentation as this article won't go into any depth about its use.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.7">
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
swfobject.registerObject("flash_holder","7.0.19","swf/expressInstall.swf");
//-->
</script>
</head>
<body>
<div id="content">
<object id="flash_holder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" style="overflow: hidden;">
<param name="movie" value="flash.swf">
<param name="quality" value="high">
<param name="scale" value="noscale">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash.swf" width="100%" height="100%">
<param name="quality" value="high">
<param name="scale" value="noscale">
<!--<![endif]-->
<div>Adobe Flash is required to view this website. Please <a href="http://www.adobe.com/go/EN_US-H-GET-FLASH/" onclick="window.open(this.href); return false;">install</a> it and reload this page.</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
Between the
head tags the SWFObject JavaScript file is referenced, followed by the function call itself. Between the body tags two nested objects are used along with some IE conditional comments. If none of this makes any sense, you probably still need to read the SWFObject documentation. The important thing is to set the width and height of the both objects to 100%.Stopping here would create a nicely embedded Flash file that will resize with the window. Though a little CSS needs to be added to make it properly fill the window.
Step 3: The CSS
CSS needs to be added to make sure the Flash fills the entire window. There are a variety of issues with full window content, the specifics which I no longer recall, so you'll just have to trust me for the most part.
Add within the
head tags the following CSS:<style type="text/css">
<!--
html,
body,
div#content {
width: 100%;
height: 100%;
}
body {
padding: 0;
margin: 0;
background-color: #FFFFFF;
}
object { margin-bottom: -4px; }
-->
</style>
Now the Flash should take up the entire window. Though this doesn't yet solve the problem of enforcing a minimum size when a user resizes the window. The user could shrink the window down and miss important elements, but Flash has no way of telling the browser that needs to maintain a certain size. A little CSS is all it takes to address that in modern browsers.
<style type="text/css">
<!--
html,
body,
div#content {
width: 100%;
height: 100%;
}
body {
padding: 0;
margin: 0;
background-color: #FFFFFF;
}
div#content,
object#flash_holder {
min-width: 1000px;
min-height: 750px;
}
object { margin-bottom: -4px; }
-->
</style>
There is some over-specification in there because of a Safari bug.
I purposefully said modern browsers, because IE 6 and below have no idea what
min-width or min-height even is. Chances are forgoing IE 6 support is not a likely option.Step 4: Making Up for It with JavaScript
Even though IE 6 doesn't support the CSS that would make this process complete doesn't mean it has to get any more difficult. I created a JavaScript function called minsize()* to emulate the absent behavior.
<head>
...
<script src="js/minsize.js" type="text/javascript"></script>
...
</head>
The function takes the ID of the element you want to set minimum dimensions to, followed by the width, then the height. It should be wrapped in a IE conditional statement and placed at the end of the document before the closing body tag.
<!--[if lte IE 6]>
<script type="text/javascript">
minsize('content',1000,750);
</script>
<![endif]-->
*Please do not redistribute this file. The credits within need to remain intact. I also ask to be notified of any changes or improvements so I can update and repost the file as needed.
Step 5: Dealing with "Click to Activate"
Certain versions of IE will display a message around a Flash embed saying that it must be clicked to activate. This is due to that whole patent mess. Microsoft eventually licensed the patent so not every version of IE is effected. This can also be solved with another JavaScript workaround that should be included at the end of the document before the closing body tag, wrapped in IE conditional comments.
<!--[if lte IE 7]>
<script src="js/clicktoactivate.js" type="text/javascript"></script>
<![endif]-->
Step 6: Putting It All Together
With everything put together Flash should not only take up the entire window, but maintain minimum widths in most browsers, at least the ones I've tested (Safari, Firefox, IE 5.5 through 7.). That should be just about everyone.
Here is what it all looks like together:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.7">
<style type="text/css">
<!--
html,
body,
div#content {
width: 100%;
height: 100%;
}
body {
padding: 0;
margin: 0;
background-color: #FFFFFF;
}
div#content,
object#flash_holder {
min-width: 1000px;
min-height: 750px;
}
object { margin-bottom: -4px; }
-->
</style>
<script src="js/minsize.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
swfobject.registerObject("flash_holder","7.0.19","swf/expressInstall.swf");
//-->
</script>
</head>
<body>
<div id="content">
<object id="flash_holder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" style="overflow: hidden;">
<param name="movie" value="flash.swf">
<param name="quality" value="high">
<param name="scale" value="noscale">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash.swf" width="100%" height="100%">
<param name="quality" value="high">
<param name="scale" value="noscale">
<!--<![endif]-->
<div>Adobe Flash is required to view this website. Please <a href="http://www.adobe.com/go/EN_US-H-GET-FLASH/" onclick="window.open(this.href); return false;">install</a> it and reload this page.</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<!--[if lte IE 7]>
<script src="js/clicktoactivate.js" type="text/javascript"></script>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript">
minsize('content',1000,750);
</script>
<![endif]-->
</body>
</html>
I hope you've enjoyed scrolling to the end of this document as much as I did writing it. Here are the referenced files:
Completed HTML
minsize.js (1.0.001)
clicktoactivate.js
SWFObject
Please send me comments on how I can improve this process or minsize.js. I will try to keep this document up-to-date and expand it if necessary.
Labels: Firefox, Flash, How To, HTML, IE, JavaScript, Safari
posted by Scott at
8:22 PM
5 Comments:
thanks parker!
At the bottom of the page: http://voice.firefallpro.com/2008/06/full-window-flash-done-right.html there are references to needed files (eg minsize.js). The paths to these files are broken, so I'm can't really implement the method you describe.
The links worked at one point. I'm not sure what caused blogger to do that. I've since fixed them. Thanks for letting me know.
Great entry, thanks a lot! I was wondering what "scripts.js" that your code refers to is... It is the only one you don't have a link to.. Thanks again!
You can ignore scripts.js. Its extraneous.
Post a Comment
Links to this post:
Create a Link
<< Home