I am currently working on a website for a client and one of their requests was that their home page have some animation featuring some of their promotions. Now I know the first thing you are saying is "please, God, say it aint so, not FLASH!" Yes I know flash is evil, I absolutely hate it but in this instance it is the best tool for the job.
I won't tell you how annoying the software is to make a flash movie but I will tell you how annoying it is to simply embed a flash file in your web page using valid HTML.
Here is the jist of what I needed to accomplish:
- Valid HTML
- A movie that doesn't repeat
- A movie with a clickable link/region
- A movie with a transparent background
- Avoid annoying "Click to activate this control" in Internet Explorer
I was able to do these things but never a combination of all of them. I first tried using a javascript library called SWF Object since that is something I've seen on our work websites. SWF Object worked fine although it failed miserably with the transparent background. I tried pretty much everything I could think of to get that to work even using examples from the documentation but to no avail it sucks.
On a side note, people are seriously over-using these javscript libraries. Within a few years every legitimate web developer will have forgotten getElementById() and will assume that javascript can naturally select individual elements by class name with no problem. I think libraries are the cheap way out, not to mention how many KB they take up. Check out one of my work websites. It has over 12 javascript files, clocking in at over 240KB. Gez.
After that I tried simply hardcoding the html into the webpage. This worked fine in IE but Firefox and the likes required the noncompliant EMBED tag to make it work. Even worse was I was now faced with the annoying Click to activate this control problem in Internet Explorer.
After various modifications to my code I ended up just taking the invalid EMBED tag wrapped with an OBJECT tag and through it in an external javascript file using multiple document.writes
Everything worked now, except the code technically wasn't valid HTML even though the W3C validator said so. Then today I read this article on Alistapart and specifically this comment. After that it all made sense to me. After hours of toiling I had found the solution and everybody was wrong!
This code not only validates but it works. The only drawback here is we still have the annoying click to activate this control problem in Internet Explorer. The trick here was to remove the ClassID attribute since that stopped it from working in Firefox and adding the DATA attribute.
<object type="application/x-shockwave-flash" data="/yourfile.swf">
<param name="movie" value="/yourfile.swf">
<param name="loop" value="false">
<param name="wmode" value="transparent">
</object>
Embeding Flash Without Click To Active And Using Valid HTML
Simply place this script in an external .JS file and call it using the bottom function. Viola, no more click to activate, transparent background, doesn't repeat, and work fine in all browsers without the stupid EMBED tag and without annoying conditional comments for IE.
<script type="text/javascript">
function writeFlash(file)
{
document.write('<object type="application/x-shockwave-flash" data="'+file+'">')
document.write('<param name="movie" value="'+file+'">')
document.write('<param name="loop" value="false">')
document.write('<param name="wmode" value="transparent">')
document.write('</object>')
}
</script>
<script type="text/javascript">
writeFlash("/yourfile.swf");
</script>
