Flash, validation and the latest versions of IE

In case you missed it, Microsoft has changed the way ‘ActiveX’ content — including Flash and QuickTime — is embedded in web pages.

With the change, a user will have to click once to activate an ActiveX control before interacting with it. Effectively, users will have to click twice on any link embedded in a Flash movie.

Hardware companies are (or should be) shipping new machines with the change enabled. Updates and security fixes scheduled for April 11 and mid-June will enable this change for existing Windows users. This change has also been made in Internet Explorer 7, beta 2.

The Fix

The good news is that there are several easy workarounds that use external Javascript (or JScript) files.

I’m using the following JavaScript function on a project at work. It takes three parameters: the movie’s URL, the movie width, and the movie height.

function writeFlash(movieLocation,width,height){
  document.write('<object id="flashmast" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+width+'" height="'+height+'"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="'+movieLocation+'" /><param name="quality" value="high" /><embed id="flashembed" src="'+movieLocation+'" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="'+width+'" height="'+height+'"></embed></object>');
}

In your HTML document, you just need to invoke the function: <script type="text/javascript">writeFlash("movie.swf",100,200);</script>. The script writes the object and embed elements to the browser.

The Benefits

The good news is that this method also works in every other major browser.

What’s more, putting the (invalid) <embed> tag in an external JS file means your HTML will validate. (The <embed> tag is a holdover from Netscape’s heyday. It is an invalid element, but necessary for embedding Flash in Mozilla/Netscape browsers. There is a way to chuck the <embed> tag entirely, but it has a drawback. You may also be able to use the extensibility of XHTML to make it a valid element, but er, don’t quote me on that.)

The big, glaring problem

And you knew one was coming, didn’t you? This method fails if JavaScript or ActiveX controls are disabled.

That’s where the noscript element comes in handy. You can put alternative content — such as an image, or a ‘J(ava)Script required’ message — between the <noscript> and </noscript> tags.

In order to pass validation, however, you will still need to enclose your noscript element between object tags. The difference here is that <noscript> is supported natively in the browser without a plug-in, so the object element won’t require an activation click (at least, not in Internet Explorer beta 2).

Technorati: web development, web design, IE7, JScript, JavaScript, Eolas + Microsoft