Feb 23
How to get validated when using Flash
2004 at 01.23 am posted by Veerle
It took you countless hours of research, blood, sweet and sometimes even tears when looking for a solution to build a standard website that validates and looks good in every modern browser. So now you want to add a little Flash movie as icing on the cake. Most people will use the code that Macromedia generates for this.
At first everything looks fine in your browser, that’s until you go back to the W3C to see if it validates. What follows is pure frustration grrrl… Your hard work down the drain because it no longer validates anymore because of Flash. Look at this ‘bad’ example to see what I mean. Click on the link at the bottom to check the validation and see the long list of errors.
The good news is that it is possible! So what does it takes to accomplish this task? To make this work you have to use slightly different code. Here is a ‘good’ example for you to look at.
It’s sad that Macromedia doesn’t provide an easier solution, especially since the Flash player is so wide spread and their commitment to using standards and CSS. One of the new features in Flash 8.0 (MX VIII?) should be a W3C compatible code generated when exporting to swf.
Update: This has been tested in Internet Explorer 6 PC, Internet Explorer 5 Mac, FireFox Mac, Safari, Netscape 7 Mac and PC and Opera 6.03 Mac. I had no access yet to other browsers.
Update on June 16th: Another way to get your page validated is to use a Javascript for your flash code. Put a link to your script in the (X)HTML page on the place where you want your flash:
<script type="text/javascript" src="script.js"></script> Then use this example script.
14served
1
This is good stuff, did not come across this info anywhere else yet. Thanks.
2
thanks a lot V! I’ll surely check it out ! But you know I’m not a code wizard at all ! I’ll send you my code to review ...:-)
@Dion how’s the daughter doing ! ( and the mum & dad of course ?)
3
Thanks for asking roger, they are doing absolutely fine. First day at work today… Constantly thinking about them :-). Feeding goes great, it all is starting to work in there. Had a good sleep last night.
4
Just to let you know that the valid example does not show in Opera 7.23.
5
It does in Opera 7.22/Win. (Damn, these new Opera versions come in too fast ...). And it shows up in Firefox 8.0/Win as well.
6
@Gasper, it might not have worked in Opera because you didn’t have the newest Flash plug-in. I used version 7 to export my movie. But it’s now changed to version 5. So maybe that was the reason because it doesn’t check on the Flash version.
7
@Fabian, thanks for reporting this! I still have to download Firefox for my Dell PC. It’s on my “todo” list ;-)
8
-Firbird (0.7) - Perfect
-IE 5 & 5.5 - Flash loads and plays, but there is a serious rendering bug where the background turns black...weird. Maybe a CSS issue?
-IE 6 - Perfect (wow!).
-NN 4.8 - Aside from the upper left graphic being indented in/down the page about 10/30 pixels, this actually worked - damn good sh*t
-NN 6 - Perfect.
All done on PC in WinXP - flash plugin version 7. (that’s my gauntlet of tests. :-) )
I do wonder what happens when flash is not installed. With no codebase attribute, I wonder if people will be presented with the option to download the flash player - I believe that’s the only failing point of this example - then again, substituting a graphic in place of some annoying popup window is not so bad.
9
A couple of things with regards to this technique:
1) It doesn’t stream in IE 5 and 5.5. This can be a problem when using large Flash files. To fix it use this javascript (use onload="” to attach it to the body tag)
function flashFix()
{
if(navigator.appVersion.indexOf("MSIE 5.5")!=-1){
for(i=0;a=document.getElementsByTagName("object");i++){
if(a.getAttribute("type") &&
a.getAttribute("type").indexOf("application/x-shockwave-flash")!=-1 &&
!a.getAttribute("classid")
){
a.outerHTML=a.outerHTML.slice(0,a.outerHTML.indexOf(">"))+
“ classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000’ “+
“><param name=’movie’ value=’"+
a.getAttribute("data")+
”’ /><param name=’wmode’ value=’transparent’ />"+
a.outerHTML.slice(a.outerHTML.indexOf(">")+1,a.outerHTML.length);
}
}
}
}
2) To make the background of the flash movie transparent, add this to the code:
param name="wmode" value="transparent"
Otherwise, nice technique Veerle. :)
10
Note that the above javascript technique is technically a hack: the HTML it produces isn’t standards compliant, but as long as it remains between <script> tags your XHTML document will be compliant.
I maintain that it’s within the spirit of validation - producing valid markup and using easily removed hacks to make it work as was always meant to.
11
Actually, there is an easier way to do this that requires no JS.
In the object tag where you specifiy
data="stars.swf"
do this:
data="loader.swf?f=stars.swf"
Then in the loader.swf you can do a few things, the basic one I would do is on frame one place:
if(f) {
this.loadMovie(f, 0);
}
(check my code, it may have errors since i’m not proofing it right now - but the gist is right).
In addition, you may want to version check since that won’t happen without the codebase attributes, etc.
This way you need no “js hacks” since it will load a small 1k loader.swf and then stream in (via the flash plugin) the larger movie.
12
Hi,
I have had this prob for a long time and have been tearing my hair out! I tried this a while back, eliminating the <embed> tags, but if you don’t use the <embed> tags, then older versions of Netscape will only show a blank white space. The problem with this, if you happen to look for web site awards, is that you have to be viewable in older versions of Netscape! SO...I am STILL frustrated. :)
13
@shei, the way I do it now to get around this validating issue is to embed my flash code in a javascript with “[removed]”.
For example:
I put a link to my script in the (X)HTML page on the place where I want my flash:
<script type="text/javascript" src="script.js"></script>
Here is the script I use.
I know this isn’t really practical :-(, but at least I can validate my page.
14
<object type="application/x-shockwave-flash"data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
</object>
this code avoids the streaming bug, it uses a container movie that loads the main movie. the container stops at first frame (bug), but loads the main.swf which streams fine !!!
it’s the flash satay method :
flash satay link