This simple guide will show how to use swfobject for a fullscreen flash site.
First you need to of course download swfobject at http://code.google.com/p/swfobject/downloads/list and extract it to js/ folder for example here.
In this case, the flash file name will be index.swf.
Here's the html code:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | |
| <meta name="description" content="" /> | |
| <meta name="keywords" content="" /> | |
| <title></title> | |
| <link rel="Shortcut Icon" href="favicon.ico"> | |
| <script type="text/javascript" src="js/swfobject.js"></script> | |
| <script type="text/javascript"> | |
| var flashvars = {}; | |
| var params = {wmode: "transparent"}; | |
| var attributes = {}; | |
| swfobject.embedSWF("index.swf", "flash", "100%", "100%", | |
| "9.0.0","js/expressInstall.swf", flashvars, params, attributes); | |
| function getViewportSize() { | |
| var size = [0, 0]; | |
| if (typeof window.innerWidth != "undefined") { | |
| size = [window.innerWidth, window.innerHeight]; | |
| } | |
| else if (typeof document.documentElement != "undefined" && typeof document.documentElement.clientWidth != "undefined" && document.documentElement.clientWidth != 0) { | |
| size = [document.documentElement.clientWidth, document.documentElement.clientHeight]; | |
| } | |
| else { | |
| size = [document.getElementsByTagName("body")[0].clientWidth, document.getElementsByTagName("body")[0].clientHeight]; | |
| } | |
| return size; | |
| } | |
| </script> | |
| </head> | |
| <body style="margin:0px; padding:0px;"> | |
| <div id="container"> | |
| <div id="flash"> | |
<p><a href="http://www.adobe.com/go/getflashplayer"><img src=" " alt="Get Adobe Flash player" /></a></p> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| window.onresize = function() { | |
| var el = document.getElementById("container"); | |
| var size = getViewportSize(); | |
| el.style.width = size[0] < 900 ? "900px" : "100%"; | |
| el.style.height = size[1] < 600 ? "600px" : "100%"; | |
| }; | |
| window.onresize(); | |
| </script> | |
| </body> | |
| </html>You can specify the minimum size restriction that the flash can be viewed, in this case I specify 900x600. |
No comments:
Post a Comment