Tutorials
HTML Tutorials
How to Embed Flash and Video in XHTML
Please note that the DTD (Document Data Type) for this page is XHTML Strict. If you check this page against the W3C validation service, it will pass validation. Most of the rest of this site uses an HTML5 DTD.
I. How to embed Flash SWF objects in XHTML
SwfObject is the preferred way to include Flash movies with HTML content; you get accurate display in all main browsers, and you generate valid XHTML code when checked against http://validator.w3.org.
If you own Dreamweaver CS5, you already have a pre-canned SWFobject solution
Dreamweaver CS5 will create swfObject code for you if you choose Insert > Flash SWF or Insert > Flash FLV. The main difference here is that the automatic method it uses will use a Flash graphic and link to encourage users to install the Flash player if they don't already have it. The problem with this pre-canned solution is that it doesn't do users of i-phones and many other Flash-incompatible devices any good; this solution assumes the entire world either has Flash or is willing to install Flash, which is no longer true.
Where to find SwfObject Code and Instructions
The documentation page for swfObject is found at http://code.google.com/p/swfobject/wiki/documentation. If this link is ever broken, try searching Google for two keywords swfobject flash. There are two methods that will work for including Flash content in HTML pages, and in the example on this page we are using the Static (and probably safest) method. Visit this useful site for a look at more ideas on how to deal with iPhone and iPad friendly Flash content.
How to use SwfObject Step 1
First you must publish the Flash movie in order to generate the SWF file. Then you can use this code inside the head of your HTML document to load the Swf javascript.
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
This assumes, of course, that the file swfobject_modified.js actually exists in your Scripts folder.
How to use SwfObject Step 2
It is important that the Flash movie code shown here be inserted into an appropriate div on the page. There must be room for the movie. Note that this code uses the same registration (cog_sky) as was referenced in the head of the document. Notice there is also code that ignores the object lines if the browser is identified as Internet Explorer [If !IE]. Finally, notice that there is an image source given for those who may not have the Flash plugin installed, so they can at least see a static image of the movie. This is particularly useful for users who may be viewing your site using an iPhone or other mobile device that does not support Flash.
The default behavior of the Flash SWFobject is that instead of putting up an alternate image, it puts up a Flash Installer link. If you are going to make use of this link, you must make sure you have the expressInstall.swf file in your scripts folder. Again, the problem with this solution from Adobe is that some devices can not and will not support Flash, so that such an option will only frustrate and confuse those users. That is why the method shown below is using an image (which could be a clickable link, etc) instead.
