Thursday, December 10, 2009

Flash and W3C Validation without JavaScript

For those of you who are familiar with my site know that I am trying to create it using only strict XHMTL and CSS. This presented a bit of a problem when I wanted to use one of my Flash projects for the holidays.


I scoured through several articles on the Internet but I could not find anything that fit exactly what I wanted. SATAY was a good approach but to be honest my Flash creations are not designed properly, and some of them I do not have the original code to fix them the way they should be. Other approaches did not allow for an alternate image for all browsers or required JavaScript.


I had come to the conclusion that I was just going to have to publish my page without an alternate image when I decided to search one last time. I ran across a site with a solution using the IE comment hack that also allowed alternate content for non IE browsers. I wish I had written down the link for you to reference as they had written 95 percent of the following code. The only thing I could not get it to do was to validate as strict XHTML.


I reworked their code and came up with a solution that would validate. Of course this is not the holy grail of Flash validation code. But it works well with simple movies. I have tested it in IE6, IE7, IE8, Firefox 3.5.5, and Safari 4.0.4 for windows. (Personally, I do not care about compatibility for obscure or older browsers.) All browsers showed the alternate image when the plugin was not installed and displayed the Flash animation when it was. I do not have access to an actual Mac so no idea on the compatibility. For the alternate image I used a jpg that was the same size as the movie.


(I do not have a handle on blogging yet so the code formatting is not the greatest.)


The actual source code can be seen here: www.webdebris.com/test/flashtest.htm

<div class="cFlashMovie">

<!--[if !IE]> <-->

<object type="application/x-shockwave-flash"

data="assets/moviename.swf" width="580" height="435">


<!--> <![endif]-->

<!--[if IE]>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"

width="580" height="435">

<param name="movie" value="assets/moviename.swf" />

<param name="quality" value="high" />

<!-->

<img src="assets/flashrequired.jpg" alt="This animation requires Flash."/>

</object>

<!--> <![endif] -->

</div>

2 comments: