XHTML and Flash

November 7th, 2006

An important part of our idat205 Creative Industries company was our use of flash in highly accessible and web standards compliant sites. Even though this was a feature of last year’s idat102 module with Dan Efergan and good website technique, I found myself put off by it all, especially favouring methods that didn’t involve anyone else’s code. Then the odd ‘Click to activate and use this control’ boxes appeared in microsoft Internet Explorer 6 and flash had to just not be used for anything important at all.

Flash under the ‘Click to activate and use this control’

 

However, I have discovered it really is easier to implement flash successfully than it seems.
So here’s how to do it:

Download the Script

Download the .js javascript file from http://blog.deconcept.com/swfobject/ (site is found very easily with google). Store it somewhere where your flash pages can find it.

Embed the Script

Embed the file within your page
(<script type="text/javascript" src="./swfobject.js"> </script>)

In addition I would place this above any CSS embed scripts it will get rid of the ‘FOUC’ problems discussed in
http://www.bluerobot.com/web/css/fouc.asp.

Embed your Flash File

Finally, you create a <div> of flash alternative content, which is written over if flash is available, like so:

<div id="website_menu">
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("./flash.swf", "flash", "300", "100", "8", "#ffffff");
so.write("website_menu");
// ]]>
</script>

And that is that, the page is XHTML compliant with regards to embedding the flash and IE doesn’t stop the content from interacting. For a list of reasons why this method is good, read more into the swfobject script blog site.

Update:

I’d say the basic parameters are pretty obvious (source,title,width,height,flash version and BG colour) but since this post and after a little experimentation its possible to do a rather lot more using ‘addParam’. For example setting the WMODE to something other than the defaults.