Solving the IE Flash Click to activate problem.
Mar 19th, 2007 by Resident Code Monkey
So you have developed this great flash movie that you took your time to perfect, and come time to embed it on your website you find that it works perfectly in FireFox but not Internet Explorer, which requires end-users to first click on the flash movie to activate or gain focus and then you are able to continue as usual.
You followed the procedure that you have always used, you stare in disbelief the <object> and <embed> tags have never failed you, but all of a sudden these methods do not work anymore.
Due to legal action, Microsoft has begun to require the end-user to click once on a flash movie to activate it, before the user is able to interact with the flash movie.
Fortunately there is a way to continue to use them by inserting them dynamically via JavaScript, by using document.write or SWFObject. As I will you show you, it is not that hard to implement either method plus they both validate according to the W3C (X)HTML validators.
Let us see how you would use the JavaScript document.write method to dynamically insert the Flash code during page load. You would place the following code where you want the flash movie to go.
document.write(‘<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="700" height="200" id="flashMovie" align="middle">
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="movie" value="movie.swf"></param>
<param name="quality" value="high"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<embed src="movie.swf" mce_src="movie.swf" quality="high" bgcolor="#FFFFFF" width="700" height="200" name="flashMovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>’);
</script>
The above code would embed a flash movie called movie.swf with the size of 700 x 200 pixels, and a background color of white (#FFFFFF) on the fly, and best of all it does not require your end-users to click to activate the flash movie.
If you are happy with using that method, and having to type all that code out each time feel free to continue using it, otherwise I’ll show you another method you can use, that is easier to remember and has less code to type per each flash movie.
That method is the SWFObject JavaScript library so lets have a look at how we would implement it. First of all because SWFObject is a JavaScript library you have to download it to your website and then load it on each page you wish to use it on before you can actually do anything with it.
So surf over to http://blog.deconcept.com/swfobject/ and grab the latest copy of SWFObject and save it as swfobject.js, and then we can see how to implement it.
The code above you should put between the <head> tag of your page, as it loads the SWFObject JavaScript library for us to be able to use. The next piece of code you will want to place where you want your flash movie to go.
<script type="text/javascript" language="JavaScript">
var swfobject = new SWFObject("movie.swf", "flashMovie", "700", "200", "7", "#FFFFFF");
swfobject.write("flashContent");
</script>
The above code will do the same thing as the document.write method, but is easier to implement and read, it also writes out all the code needed for each different browser, and has a smaller load footprint.
The minimum syntax of SWFObject is:
There are many other options you can use for your SWFObject implementation, over at http://blog.deconcept.com/swfobject/ you can view them as well as extra examples.
I hope this has jump started you on your way to embedding flash movies that load smoothly for the end-user, as well as helped you gain some knowledge of how JavaScript can help with hurdles you may come up against.
Until next time,
-Resident Code Monkey
Leave a Reply