|
Flash applications of one sort or another are an integral part of most websites these days and while they may look pretty, they rarely validate XHTML Strict. This is frustrating if you want a cool-looking website that's also standards-compliant. So, I thought it might be useful to demonstrate by example how to clean up a Flash application and dress it up in xhtml finery for validation - a 'flashectomy', of sorts. If not, one can always play the games.
The following code is for the Flash game console above - right out of the box - complete with 27 errors. Not only is it an ugly block of code, but it doesn't come close to validating, either:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0"
WIDTH="535" HEIGHT="228" id="games2">
<PARAM NAME="movie" VALUE="games2.swf">
<PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor"
VALUE="#150186">
<EMBED src="/community/games2.swf" quality="high" bgcolor="#150186" WIDTH="535" HEIGHT="228" NAME="games2"
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
Click to View and Validate Console Before
Fortunately, getting this game console to validate is pretty much a matter of simply stripping out duplicated and erroneous information and replacing it with xhtml.
There are two main tags used - <embed> and <object>; and since the <embed> element isn't recognized by xhtml, won't validate, and is mostly duplicated data, anyway - out it goes - leaving the '<object>' tags:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0"
WIDTH="535" HEIGHT="228" id="games2"><PARAM NAME="movie"
VALUE="games2.swf">
<PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor"
VALUE="#150186">
</object>
Next, <OBJECT classid="#" is replaced with the cleaner, shorter xhtml version: <object type="application/x-shockwave-flash" (kinda' like: <style type="text/css"> or <script type="text/javascript">); and finally, codebase="#" is replaced with: data="games2.swf" (for the address of the movie) leaving the final markup looking like this:
<object type="application/x-shockwave-flash" data="http://www.dystopiad.com/validating/games2.swf" width="535" height="228" id="games2"><param name="movie" value="games2.swf"/>
</object>
Click to View and Validate Console After
That's it - a cleaner, meaner, shorter markup for a game console that validates XHTML Strict! This method seems to work just fine with other Flash applications, too - like headers, for example - although it has some limitations with longer Flash movies in that the whole movie has to load before it starts playing.
Pacman, anyone?
|
Awesome job!
i use swishmax to create flash apps with. i tried this majigger of yours, but it doesn't seem to work in IE, firefox or dopera. am i missing something? i mean, how hard could it be?