The best solution I found so far is SWFObject. Here are the steps for a very basic installation:
- Download the zip file (link) and extract it.
- Put couple of files in your web directory: swfobject.js and expressInstall.swf
- Add some code on the page (I like the dynamic method):
- Put this in the head tag:
<script type="text/javascript" src="swfobject.js"></script>
(make sure the path to the js file is correct) - Put this also in the head tag:
<script type="text/javascript">
swfobject.embedSWF("file name", "div id", "width", "height", "version", "expressInstall.swf");
</script>
Change "file name" to your file name with correct path.
Change "div id" to id of the div you are placing the swf.
Specify "width" and "height".
Specify your swf "version". For example: "9.0.0".
Make sure the path to "expressInstall.swf" is correct. - Create a div in the body of the html that is to hold the swf. Give it an "id", same as what you specify above javascript for "div id".
- Add alternate content in the div. This content will show if the user doesn't have Flash installed.
- Put this in the head tag:
<!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>SWFObject</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = false;
var params = { wmode: "transparent" };
var attributes = false;
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>
I usually add wmode="transparent" in case I have html dropdown navigation on top of the flash. If I don't have this, the navigation will go under the Flash.
Here's a nifty swfobject generator - link.
There are a lot more you can do with SWFObject. The zip has great examples as well. It is updated often, so always read the instructions and download latest from here - link.
Another little tip: on Firefox, if you click on a flash, an annoying dashed border appears around the swf. Put this in your CSS and it should fix it:
object { outline: none }
No comments:
Post a Comment