Archive for the ‘JavaScript’ Category
Embedding Flash
Ever since Alex and I started using valid code for websites, we have been searching for a way to embed Flash properly. The most common way we see is probably the built-in method in Dreamweaver.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0" width="550" height="400" title="Flash"> <param name="movie" value="../media/Flash.swf" /> <param name="quality" value="high" /> <embed src="./file.swf" quality="high" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed> </object>
In this code, different elements are used for different browsers. <object> is used for Internet Explorer while <embed> is used by other browsers. IE recognizes <object> and uses it to display Flash, however, other browsers do not, so they ignore it and move on to use <embed> as an alternative.
Because <embed> was created by Netscape and is not part of the HTML specification, it will make your page invalid. Moreover, this method will not allow you to put any alternative text or images if the Flash fails to load.
After some time on the Internet, we found an effective method of embedding Flash (on this site) that supports all the major browsers we know of.
<!--[if IE]> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0" width="550" height="400" title="Flash"> < ![endif]--> <!--[if !IE]> < --> </object><object type="application/x-shockwave-flash" data="./file.swf" width="550" height="400" title="Flash"> <!--> < ![endif]--> <param name="movie" value="./file.swf" /> <param name="quality" value="high" /> <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer" /> </object>
This method uses conditional comments, therefore, it can work on multiple browsers while having the same functions as the method used by Dreamweaver. The start of <object> was specifically meant for IE, so it is between <!--[if IE]> and <![endif]-->. Another variation of <object> for other browsers such as Mozilla Firefox is between <!--[if !IE]> <--> and <!--> <![endif]-->.
Another problem we have been trying to solve is we have to click on Flash objects in IE to activate them. It’s quite annoying, so we decided to get rid of it once and for all. We simply created a JavaScript file and included either the original or valid code by using document.write and added allowScriptAccess.
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0" width="550" height="400" title="Flash"><param name="movie" value="./file.swf" /><param name="quality" value="high" /><param name="allowScriptAccess" value="always" /><embed src="./file.swf" quality="high" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash" allowScriptAccess="always" width="550" height="400"></embed></object>');
Now the XHTML code is:
<script src="../scripts/Flash.js" type="text/javascript"></script>
Although JavaScript works in most browsers, some people prefer to block JavaScript, for it may be obtrusive. Therefore, we added the valid code within <noscript>:
<script src="../scripts/Flash.js" type="text/javascript"></script> <noscript> <div> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0" width="550" height="400" title="Flash"> < ![endif]--> <!--[if !IE]> < --> </object><object type="application/x-shockwave-flash" data="./file.swf" width="550" height="400" title="Flash"> <!--> < ![endif]--> <param name="movie" value="./file.swf" /> <param name="quality" value="high" /> <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer" /> </object> </div> </noscript>
So far this code has worked well although editing things inside is tedious. Right now, I don’t know if Flash embedded this way will stream properly. Apart from this, I don’t think there will be any other problems.
Note:
<script>shouldn’t be placed within<p>, or else your page won’t validate.
Links:
