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>
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete