{"id":775,"date":"2008-05-30T05:45:03","date_gmt":"2008-05-30T12:45:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=775"},"modified":"2008-05-26T13:35:14","modified_gmt":"2008-05-26T20:35:14","slug":"using-flash-and-staying-standards-compliant","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-flash-and-staying-standards-compliant\/","title":{"rendered":"Using Flash And Staying Standards Compliant"},"content":{"rendered":"
Anyone who has ever worked with Flash on the web has likely come across the fact that embedding flash into a web page is usually no walk in the park. The code that Flash gives you to embed is something like this:<\/p>\n
<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=9,0,0,0\" width=\"650\" height=\"117\" id=\"test-flash-banner\" align=\"middle\">\r\n\t<param name=\"allowScriptAccess\" value=\"sameDomain\" \/>\r\n\t<param name=\"allowFullScreen\" value=\"false\" \/>\r\n\t<param name=\"movie\" value=\"test-flash-banner.swf\" \/><param name=\"quality\" value=\"high\" \/>\r\n\t<param name=\"wmode\" value=\"transparent\" \/><param name=\"bgcolor\" value=\"#ffffff\" \/>\r\n\t<embed src=\"test-flash-banner.swf\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"650\" height=\"117\" name=\"test-flash-banner\" align=\"middle\" allowScriptAccess=\"sameDomain\" allowFullScreen=\"false\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\" \/>\r\n<\/object><\/code><\/pre>\nIt’s not surprising why it was done this way…it works. But the way it works is through brute force (sometimes called the “Twice Cooked” method) and including more than what is needed for most browsers. The biggest problem is the <embed><\/strong> tag which is invalid code which will cause your page not to validate as standards compliant.<\/p>\nThis has been a problem for a long time<\/strong>. There is even an 2002 A List Apart article: Flash Satay: Embedding Flash While Supporting Standards<\/a>. Five years later, they are still talking about it<\/a>.<\/p>\nFortunately for us, some smart folks have taken this problem under wing. There are now a variety of ways to handle standards-compliant flash embedding. Here are some options:<\/p>\n
<\/p>\n
<swfobject><\/h3>\n
Swfobject<\/a> is the big kid on the block. Some previous projects now even consider themselves deprecated<\/a> and refer to swfobject. Swfobject is open source and hugely robust, especially now very recently gone v2.0. There are two options for embedding flash with swfobject, and both are standards-compliant. Since they are just simply too many features to mention here, I will just mention a few that stand out to me:<\/p>\n\n- Auto-detects Flash version and behaves accordingly<\/li>\n
- Can offer to auto-upgrade your Flash version<\/li>\n
- Offers alternative content when it’s the only option, which is also good for SEO<\/li>\n
- Brings Flash to devices with very poor Flash support like the PSP<\/li>\n
- Eliminates the “click-to-activate” crap in IE<\/li>\n<\/ul>\n
There is even a code-generator companion<\/a> to swfoject which will help you build the code you need to get started.<\/p>\n <\/p>\n
Objecty<\/h3>\n