W3C compliant Adobe Flash embedding
There are a number of popular methods for embedding Adobe Flash in web pages. Most people will be familiar with what I’d personally consider the worst method, that is used by Dreamweaver which looks something like this:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="550" HEIGHT="400" id="myMovieName"> <PARAM NAME=movie VALUE="myFlashMovie.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED href="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>
(Example taken from http://kb2.adobe.com/cps/415/tn_4150.html)
However, if you use this “Dreamweaver-style” markup, your page will not pass the W3C HTML validator. This is due to the proprietary “embed” tag which is used.
Method 1: Flash Satay
As previously mentioned, the Flash Satay method uses pure HTML markup which looks something like this:
<object type="application/x-shockwave-flash" data="c.swf?path=movie.swf" width="400" height="300"> <param name="movie" value="c.swf?path=movie.swf" /> <img src="noflash.gif" width="200" height="100" alt="" /> </object>
You’ll no doubt immediately notice that the Flash Satay method doesn’t use an embed tag and is therefore W3C compliant.
- W3C Compliant HTML
- Very simple
- Offers non-Flash-capable alternative content (in the example this is demonstrated by the img tag but you can replace this with any valid HTML you wish)
- Does not require any script libraries of any kind (and therefore no extra HTTP requests)
- No inherent Flash version checking
I have personally tested the Flash Satay method on my IPhone and it works beautifully, the alternative content is displayed which means that IPhone and other non-Flash-capable browsers don’t display a nasty question mark filled box where content should be.
Method 2: SWFObject
<div class="my_div" id="flash_movie_1"></div>
- W3C Compliant HTML
- Offers non-Flash-capable alternative content
- Allows Flash player version checking
- More complex than Flash Satay (though pretty simple all the same)
Flash Satay offers a slightly simpler, quicker method which fulfils the needs of most developers in most cases and as such, it’s what I personally use unless I need to perform Flash player version checking. If however, the Flash movie requires a specific version of Flashplayer, SWFObject is an excellent method.