After nearly a year since Microsoft announced changes in IE to manage "active content," the IE security update was released recently. I haven't heard a lot of talk about this in the community so either I'm not looking in the right places or the adoption of this security update has been slow. Nevertheless, we began the process of "fixing" our active content at work which exists almost entirely as Flash movies. To start, one of our developers upgraded his browser to the latest version that includes the changes affecting active content. After upgrading, all Flash movies embedded in the browser using OBJECT/EMBED tags had to be clicked (activated) before you could interact with them. Before activation, the movies timelime would play fine but mouseovers and other interactivity would not show. Gray boxes would also display around every SWF that had not been activated, even ones that were simple graphics or logos without any interactive content. It was pretty annoying having to activate all the Flash movies but this update could have made the user experience much worse.
Now, on to fixing the content. Adobe does not offer any recommendations for fixing your Flash OBJECT tags and instead defers to Microsoft. Microsoft recommends developers use JavaScript to dynamically write out OBJECT and EMBED tags to the browser. The solution is simple enough but with dozens upon dozens of Flash movies we did not want to write tons of JS to fix the content. Instead, we found some free code already written for this specific problem, which you can find here. Once you have the JS in place with a script include the code to display a Flash movie is as simple as this:
<div id="topNavigation"></div>
<script type="text/javascript" language="javascript">
var fo = new FlashObject("movie.swf", "headerMovie", "100%", "110", "6", "#E9E9DF");
fo.addParam("menu","false");
fo.addParam("wmode", "transparent");
fo.addParam("salign", "B");
fo.addParam("quality","high");
fo.addVariable("mainFrameTarget","mainFrame");
fo.write("topNavigation");
</script>
The div is used to receive the contents of your Flash movie once the FlashObject code writes the innerHTML property. The first line of the JS script creates an instance of the FlashObject class. The classes constructor expects to receive the relative or absolute path to your SWF, the ID name of your SWF, the width value, the height value, the Flash player version number, and the stage background color (in that order). The next 4 lines are direct replacements for the old PARAM tags which were used to tell IE browsers about certain properties of your Flash movie. If you write a new fo.addParam() call for each of the PARAM tags in your original code you should be good to go. The next line illustrates how you can pass flashvars with the name of the Flash var nominated first and it's value second. Incidentally, if you have lots of Flash vars that you are currently stringing together in one property you can use the fo.addParam() function like this: fo.addParam("flashvars", "var1=value1&var2=value2");. The last line shows the write() function call which tells the FlashObject code not only to write out the Flash movie but which div should receive it.
And that's it. The bad part is the time consuming nature of fixing all your instances of Flash OBJECT tags. And it's a shame too, that if you are concerned about IE users getting the right experience on your Web site, you have to make this change. On a personal note, I have not decided if I am going to redo how I place my Flash content in the code. And since almost no one hits my site in IE it may not even matter. What does matter is how this change from Microsoft is affecting the entire Web. Since active content includes applets, QuickTime, Flash movies, and anything else that uses OBJECT/EMBED tags there's not many places that will not be affected by this change. It's certainly a staggering thought to say the least.
If your sites are in need of a "fix" here's some helpful resources:
Adobe Active Content Developer Center
Internet Explorer ActiveX Update
SWFObject JavaScript Code
UPDATE: 04.21.2006
Due to this I have updated the download link and the name of the product from FlashObject to SWFObject (just above). All other text in this post - including code - still references the old name "FlashObject." Just wanted to point this out.
