Flash Satay: Embedding Flash While Supporting Standards

by Drew McLellan

265 Reader Comments

Back to the Article
  1. Very interesting… excellent detective work.

    Copy & paste the code below to embed this comment.
  2. I’m not sure I buy the argument that having codebase point to a different domain name is a security problem (can you cite a w3 spec that states this?), but there is another problem when the attribute points to another domain.

    By definition, if the data attribute is a relative URI, then it is *relative* to the codebase attribute. For browsers that follow the spec this closely, that means the browser would try to find your movie on Macromedia’s site.

    Copy & paste the code below to embed this comment.
  3. Okay. I understand what’s happened, for the sake of getting some code to be XHTML compliant, but is it really worth it? You’re taking out the codebase, only to put it in “sacraficially” somewhere else—so no point to that. Then you’re having to alter the movie to load it into an empty clip, though not a headache, seems pretty pointless to me. I’d rather just leave the code like it is instead of having to tear it apart and slap some bandages all over it for the sake of Netscape.

    Copy & paste the code below to embed this comment.
  4. With all due respect I think you’re missing the point. A lot of designers want to use standards. We work our asses off to sell this idea to our clients. Then when we embed Flash movies our sites aren’t compliant any more and our code is bloated. I plan to use this technique as a starting point for my own explorations. And the author says the same thing. He says it is only a starting point. Damn good one if you ask me.

    Copy & paste the code below to embed this comment.
  5. Would that method work with other plugins? On our website, we use a lot of Quicktimes (we’re a TV production company). We’re redesigning, and I wanted to go for XHTML/CSS. But, because of the Quicktimes, it wouldn’t validate - until now (?).

    BTW, as far as I know, the ONLY browser (but not the least) that used to use the <object > tag for plugins was IE/WINDOWS. EVERY browser on the Mac (and probably on Linux) used the <embed> tag. So the Satay Method, especially if it works with other plugins, is quite welcome - unless you design only for one browser…

    Copy & paste the code below to embed this comment.
  6. It’s worth pointing out that validity doesn’t necessarily mean accessibility; there’s nothing to stop someone designing a badly designed flash based site only to stick it between some validating HTML tags and claiming web design excellence.

    I’m sure that this discovery will please many web designers using flash who are also conscious of web standards. But I think it’s going to take much more work on the part of Macromedia, W3C and the browser manufacturers before we have a proper solution to the Flash accessibility problem.

    Copy & paste the code below to embed this comment.
  7. Please forgive my ignorance but what functionality are you losing if your site doesn’t validate due ONLY to the bloated Flash generated code? I appreciate this article and I’m excited about using this and testing it out but I’m not sure what I am gaining by using it besides the ability to claim that my site is standards compliant.

    For instance, if my site validates 100% and then I insert the Flash object code and it no longer validates does this cause the site to lose some functionality that it had at 100% compliance?

    Again, I’m relatively new to Web standards and so I’m asking from the perspective of wanting to learn and am in no way making any sort of negative comment about the article. Thanks.

    Copy & paste the code below to embed this comment.
  8. ... Mohammed will go to the mountain.

    The article “Including Flash files in valid XHTML pages” by David Robertson deals with the same problem (/avec/ Quicktime, this should prove interesting for you, Jonathan) by writing a custom DTD and thus making the now invalid elements and attributes valid.

    http://www.outofthetrees.co.uk/resources/flash_versus_standards.php

    Copy & paste the code below to embed this comment.
  9. A very informative article, I just found this site and applaud the attention to detail and clear explanation through the journey to the solution. I totally agree with cutting the fat in coding, while attaining browser compatibility and xhtml compliance. While my experience is a mere shadow as compared to the author, it is sure nice to find a site that offers articles of this detail.

    Copy & paste the code below to embed this comment.
  10. You migh like to know that I’m using IE5.5 on Win98. You also might like to know that all I see instead of the flash movie is a <textarea>-like empty field.

    The technique works fine on Mozilla. Though if it can’t work fine on IE5.0 it’s of no use to me. Any ideas? Which attribute is missing that is causing the error?

    <OBJECT>, though theoretically great, is not quite supported. See
    http://www.student.oulu.fi/~sairwas/object-test/results/
    This test chart shows that OBJECT should be working on my browser. It isn’t.

    Copy & paste the code below to embed this comment.
  11. Jonathan said that all Mac browsers used only the Embed tag to access plugins. From what I can tell, that’s not true. Mozilla and Chimera seem to work just fine with this technique; I will assume Netscape does as well. IE5/Mac works with it, as do iCab and Opera.

    NS4 and OmniWeb 4.x don’t seem to work with the Object tag. Frankly, it’s their loss.

    Copy & paste the code below to embed this comment.
  12. I’ve re-tested and with a version of the player compatible with the movie in this article, and I see it working in both IE 5.0 and NS 4.
    I’d be interested to hear if you have the same problem in these browsers once you’ve updated your Flash Player.
    (remember there a techniques outside the scope of this article for detecting what version of the player is being used).

    Copy & paste the code below to embed this comment.
  13. What I meant is that the method used by almost everybody (the “Cooked Twice Method” aka the Macromedia Code) made the <object> tag useless in Mac browsers - all of them relied on the <embed> to display the plugin. Believe me, I had a lot of problem with a client updating pages I’ve done in FrontPage (brrrr…). It made the Flash on the page disappear in every Mac browser, because it was always removing the <embed> tag (IE/Windows doesn’t need them).

    Obviously, the article proved that it is possible to use the <object> tag with Mac browsers, something I thought was not possible before.

    Copy & paste the code below to embed this comment.
  14. I find the same result as Manuel Razzari with IE5.5/Win - see a screenshot at www.december14.net/graphics/posts/flashsatay.gif

    Interestingly, though the box looks like a TEXTAREA, I found you can’t actually type in it. Also, note that the page title appears as “about:blank” rather than “A List Apart: Flash Satay” as given by the TITLE tags. Maybe these give a clue to some bright spark as to what’s going on.

    Copy & paste the code below to embed this comment.
  15. I have the Flash working in IE 5.5 here, so it’s not a direct 5.5 issue.
    Do you get the same results once you’ve updated your Flash Player? I have to stress that the article includes no player version checking - this alone is the subject of another article.
    Thanks for the feedback.

    Copy & paste the code below to embed this comment.
  16. You have saved me! Having written strict compliant XHTML/CSS for the last 1.5 years I can now have 100% compliant Flash movies in my content. Excellent. Leave it to Alistapart!

    Copy & paste the code below to embed this comment.
  17. I did a quick test of a QuickTime Movie object, with pretty good results on a Mac OS X, using the following code:

    <object type=“video/quicktime” data=“movies/mymovie.mov” width=“600” height=“416”>



    Error text
    </object>


    Worked fine on Chimera 0.6, Mozilla 1.1, Opera 6b2 and iCab 2.8.2.
    MSIE 5.1.1 worked but showed no movie controller.
    OmniWeb 4.1.1 displayed the nested content.

    Copy & paste the code below to embed this comment.
  18. For compatibility, why not nest two <object> tags?

    The outer one uses the traditional method for MSIE/win, and the inner one for Netscape and Mac browsers.

    This is not quite as trim on the code, but should still validate, work almost everywhere and allows nested fallback html.

    [rats, I shouldn’t have typet “<” on my previous post. Can someone fix that?]

    Copy & paste the code below to embed this comment.
  19. Michael—nice thought, but IE/Win will render *all* nested object tags, not just the first one.

    I know this because I’ve been working on a slightly different method of embedding cross-browser compatible plug-ins using <object>, and making use of some new features being added to Mozilla.

    In the process, I came up with a way to nest object tags without getting the double, tripple, etc. rendering in IE/Win, while still supporting automatic downloading of plugins—for both IE and Mozilla. I’m not quite done testing across browsers and platforms, otherwise I’d share the details.

    There’s probably a whole other article there, if apartness is interested.

    Copy & paste the code below to embed this comment.
  20. IE/Win has a bug where if you nest two OBJECTs, it will try to play them both. So that works in theory, but not in practice.

    Copy & paste the code below to embed this comment.
  21. Aw, too bad MSIE/win breaks on nested Objects.

    If anyone’s interested, I just found that OmniWeb 4.1.1 recognizes a windows-style QuickTime object, with the classid and codebase. So the following code works on a bunch of modern Mac browsers, and I’m guessing on Mozilla/win too:

    <object classid=“clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” codebase=“http://www.apple.com/qtactivex/qtplugin.cab” width=“600” height=“416”>


    <object type=“video/quicktime” data=“movies/quietpassage.mov” width=“600” height=“416”>

    Error text.
    </object>
    </object>

    Now if we figure out how to hide the second object from MSIE/win . . .

    Copy & paste the code below to embed this comment.
  22. I notice you said the page doesn’t include version testing. Which version of Flash is required to view the movie? I just tried looking at the page using IE6/Windows XP/Flash 5.0, and the movie wasn’t displayed. It wasn’t until I reached the end of the article and read the byline that I even knew there was supposed to be an animation.

    C

    Copy & paste the code below to embed this comment.
  23. I think it is important to point out exactly what is being embedded. The IE method embeds an actual ActiveX control which by design has specific properties (parameters; s) and functions but only can realistically work on Windows systems. The other method embeds the “file”? which could be use on all systems and it’s up to the browser to choose the appropriate “plug-in”?.

    The problem with this is most formats do NOT have actual properties and functions associate with them. This means you not could tell an MPEG movie for instance to “play”? through script and you can’t specify whether it should be displayed with a movie controller and expect it to work without exception on all systems.

    Ironically this isn’t a problem for XML and many XML based formats (XHTML, SVG) as they can typically relay on the DOM and extended DOMs. The WebCGM format also specifies specific properties for it’s format when used in an HTML/XHTML object tag scenario.

    I think it’s something that needs to be addressed either with standard functions and properties for media types or perhaps SMIL.

    Copy & paste the code below to embed this comment.
  24. Hi Drew, I scanned the article and the comments, but am not sure of one point… which browser brands, in which versions and on which platforms did you test this? And were their initial configurations including (a) no Player; (b) old Player; and (c) current Player?

    tx,
    jd

    Copy & paste the code below to embed this comment.
  25. here is a safer solution:

    ask the macromedia team to alter their swf template in future versions of flash.

    they screwed up on this one - but using a fix (odd word in this context i know) will just make things more complicated in the future. for the moment, there’s safety in numbers.

    having said that…

    it is a pretty elegant hack! well done :-)

    Copy & paste the code below to embed this comment.
  26. OK - here is the code that I would need:
    <object type=“video/quicktime” data=“some_poster_movie.mov” width=“240” height=“196”>






    </object>

    As pointed earlier, it works fine in Mozilla 1.1a, Chimera 0.6, Opera 6b2, OmniWeb 4.1 (all on MacOS X, don’t have access to Windows yet).

    On IE 5.1/Mac: some seem to be ignored, notably “controller” and “href”. If I clic on the poster movie, the linked movie doesn’t load. And a controller is always visible. In fact, I’d be tempted to say that all tags are ignored and default settings applied. Anyone can confirm this?

    Copy & paste the code below to embed this comment.
  27. In response to jd, this technique has been tested and known to work in:

    Win IE 5, IE 5.5, IE 6
    Win NS 4, NS 6, NS 7
    Win MZ 1, MZ 1.1
    Mac IE 5 (OS 9 & X)
    Mac NS 4, NS 6, NS 7
    Mac MZ 1.1

    In this discussion I have seen reports of success on iCab and Opera as well as Chimera. Apparently it may not work well in OmniWeb - that may or may not be an issue, depending on the audience of a particular site.

    We’re going to try to compile the Flash player into Konqueror and see if it works there. Anyone tried any other Linux browsers yet?

    As far as plugin/no plugin goes, this technique offers an easy way of serving alternative content. I haven’t attempted to address version testing other than the suggestion of using a sacrificial movie to prompt a browser update. Version testing in Flash is a subject all on its own, and hopefully one we can address in the future. I know I’d like to nail that, for my own sanity.

    I think we have positive reports from nearly every browser you would reasonably expect a visitor to be using to view Flash content.

    Copy & paste the code below to embed this comment.
  28. If you don’t like the sacrificial lamb idea, you can easily insert alternate content (a gif or text) as described in the article. Readers with the appropriate version of the Flash player will see Flash content; those with an older version - or no Flash player - will see a static image or text. No version testing needed.

    For the purposes of this article, I decided NOT to convert my Illustrator file to a static gif. It seemed safe to assume that everyone who had a Flash player installed would see Flash content. We’d tested on all the browsers and platforms listed above: http://www.alistapart.com/stories/flashsatay/discuss/2/#ala-1211

    I wanted readers who consider themselves die-hard standards geeks to see Flash on ALA. Wanted some of them to click their Validator bookmarklets and discover before reading a word of the article that we’d embedded Flash content without breaking XHTML validation.

    The actual SWF is less than 5K. We could have embedded it WITHOUT using the Satay method: lack of streaming in IE/Win would not have been apparent. Decided it was best to go ahead and use the Satay method anyway, so readers who wished to do so could view source.

    In this article, Flash is used decoratively. It’s not interactive. It’s not a core component. It’s simply a low bandwidth, animated vector illustration. A title attribute on the markup element that surrounds the illustration is one means of providing alternate content (and is used on the article). To play it safe, you’d also provide a GIF image with alt and title attributes. That combination would deliver this application (a decorative element) to pretty much any visitor.

    If you wanted to build a whole site or a whole section of a site in Flash - AND wanted the page containing the Flash to validate as XHTML (an unlikely but possible combination) - you’d need to do version testing or export as a widely used older version of Flash or use alternate content (“If you can’t see the animation, download the Flash 6 player [link]”).

    Copy & paste the code below to embed this comment.
  29. the method doesn’t work for me either, I’m on IE 5.50.4522.1800 on Win 98.

    I also get the weird text-box that I can’t interact with, and the about:blank page title.

    trying to see the movie by typing its URL will work.

    Also, I can’t always view source (sometimes I can, sometimes I can’t).

    Yes, I have the latest flash 6 player, I don’t have the new beta.

    Copy & paste the code below to embed this comment.
  30. I think using the object tag to embed multimedia elements is a great concept and one that everyone needs to become comfortable with because in xhtml 2.0 there won’t be any img tags, or they’re deprecated, I don’t remember which—you’ll have to load images with the object tag, like you should. It makes more sense, and it’s more accessible, especially due to nested object tags, which is another concept I’m very excited about. Of course, xhtml 2.0 will break even in win/msie 6, but it will be an important standard for up and coming browsers. This article is, of course, a step in the right direction, and a very interesting one to me, who has been waiting for something like it; I haven’t desgined anything in flash since I discovered I couldn’t do it with standards. This is definitely going to propel flash, for me, into the foreground.

    Copy & paste the code below to embed this comment.
  31. thanks for sharing!!!

    Copy & paste the code below to embed this comment.
  32. In XHTML 2 as it stands now there won’t be any IMG tags. There also won’t be links as we know them. Keep in mind XHTML is a draft and is subject to change. It may change significantly. Browser makers may be slow to support it and developers may be slow to learn it. Still, the point you raise is important. A lot of what we know may disappear from future specs. Elements like OBJECT that have been around forever but have been little used by many of us will take on increased importance.

    Copy & paste the code below to embed this comment.
  33. The SWFs were created in Flash MX and require Flash Player 6. I just tested the article in a fresh copy of Virtual PC running Win XP Professional and IE6. Initially there was no Flash movie. (XP in Virtual PC comes with the Flash 5 plug-in.) Right-clicking over the blank space revealed a contextual menu that read “About Flash Player 5.” Clicking it took me to Macromedia where I was given the option to download Flash Player 6. I said yes. The download took a few seconds over DSL and the player configured itself automatically in the background. The Flash movie then showed up IE6.

    Had we used a sacrificial test movie or exported the SWFs in an earlier Flash format, we’d have gotten fewer (if any) bug reports, I expect. Bug reports do not indicate failure - they’re just more information that can help guide choices when implementing this technique.

    Copy & paste the code below to embed this comment.
  34. Just to clarify my earlier comments at http://www.alistapart.com/stories/flashsatay/discuss/#ala-1197 and to endorse those of basta at http://www.alistapart.com/stories/flashsatay/discuss/2/#ala-1213 I was already using Flash Player 6. To be absolutely sure, I downloaded the latest release in case this made a difference. It still does not play in IE5.5/Win - the “textbox” appears instead. Like basta, I found the movie plays by entering its URL directly into the browser, so there is apparently no problem with the player.

    I found that Opera 6/Win (again with the latest version of the player) does not work either, leaving a white panel where the movie should be.

    I did find Mozilla 1.0/Win worked fine, however.

    I think it will take more than just player version detection to get this working reliably: there does seem to be an issue relating to browser or Windows versions too. It will be interesting when I get back to my office tomorrow to check it with IE6 on Win2000 Pro.

    Copy & paste the code below to embed this comment.
  35. Not working here as well on IE5.5 SP2, Win98SE, w/latest Flash player. Same mysterious textarea. Blank white area in Opera 6.01.

    Works in all my versions of NS and Moz.

    Copy & paste the code below to embed this comment.
  36. using <embed> </embed> seems to work on both browsers.. ie5.0 and netscape 7.0 and i didnt even erquire the classid nor the codebase. perhaps you could explain what ive done wrong. thanks in advance.

    the markup i used are as follows:

    <embed src=“http://geocities.com/azmord/spadins.swf”
    width=“600”
    height=“200”
    play=“true”
    loop=“true”
    quality=“best”
    scale=“showall”
      pluginspace=“http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Versi>
    </embed>

    Copy & paste the code below to embed this comment.
  37. aziz, the goal was not to use embed because it isn’t standard compliant

    Copy & paste the code below to embed this comment.
  38. Kudos Drew on an excellent and much needed article. I’ve been wrestling with Flash and standards for a while only to have recently come up with much less elegant methods involvong DTD alteration and/or [removed].

    Using Satay, I now feel comfortable adding Flash content to standards compliant pages. It terms of Flash player versioning, it should be simple enough matter to integrate some Mr. Moock’s Flash based fpi methods:
    http://www.moock.org/webdesign/flash/detection/moockfpi/

    Good to here some discussion about XHTML 2.0 as well, which is really starting to look like XML. For more see:
    http://www-106.ibm.com/developerworks/library/wa-xhtml/?n-wa-9192

    XHTML 1.0 strict Satay for testing available here:
    http://home.hawaii.rr.com/timfm/W3SWF/

    Copy & paste the code below to embed this comment.
  39. ...don’t fix it (particularly if the “fix” just leads to more hacks or failures).

    In this case, if standards are important simply for the sake of standards, it ain’t broke.

    However, if standards are important not simply because you believe in the standards-cause, but because you are developing for an environment that is only functional with strict standards implementation - then sure, this is the method to use.

    I’m not familiar with any environment that only functions with strict standards implementation.

    Having said that, the article still has value for it’s relatively thurough analysis and testing of the <object> tag, regardless of standards. I do believe the standards-driven nature of the article misses the real value of the analysis of the <object> tag, however.

    (Simply because a page validates to a set of standards doesn’t mean the code that is used isn’t convoluted and/or unecessary - don’t rely on standards compliance, standards grow and shrink)

    Copy & paste the code below to embed this comment.
  40. There’s some really nice work done here and heading in the right direction. However, I would still regard it as having some way to go and can’t see the benefits of leaving the code of the past. Losing the upgrade and streaming functionality of IE is no small loss.

    The author shows some bias. After doing some undocumented hacks to cater for Mozilla and Netscape he concludes “valid markup for Flash movies was possible, but only once Microsoft had fixed this problem with IE/Windows”. Hmmm, personally I’d regard that Mozilla and Netscape still have some work to do on their implementation of the Object tag.

    However, I don’t want to distract from what is some excellent research work. Well done.

    Copy & paste the code below to embed this comment.
  41. but it still won’t convince me to turn off my Flash killing utility when browsing.

    However, the very fact there are Flash authors who are concerned about W3C standards indicates that one of these days there may actually appear worthy uses of that technology.

    Brett

    Copy & paste the code below to embed this comment.
  42. Call me slow and I do realize that using values of the object tag correctly being the utmost importance of this article, but one can/has been able to achieve a valid XHTML document with a flash movie embedded using http://www.moock.org/webdesign/flash/detection/moockfpi/ for quite a while.

    Copy & paste the code below to embed this comment.
  43. Pete -

    The moock FPI is not XHTML compliant due to it’s use of the <embed> tag, which is itself not XHTML compliant.

    Regardless, the moock FPI scripts are a tad overrated and bloated. They specifically ignore revision numbers (which are not detectable via scripting in IE/Win) which can lead to significant problems in Flash 6 player revisions (the latest fixing some rather significant bugs in the original Flash 6 plugin).

    However, moock FPI is a good starting point, just don’t copy-paste and assume everything is good to go.

    Copy & paste the code below to embed this comment.
  44. Great, it now validates. Through more ugly hacks this has been done all along.

    But what really interests me is the operation performed on the OBJECT element, an element that shows the power of graceful degredation. No more script hacking to show some stupid text or image instead of a Flash movie.

    Copy & paste the code below to embed this comment.
  45. If you have the Flash Player 5, all you will see on the article and ALA front page is a blank space! Flash is there, you can right-click on it, but nothing animates. I didn’t realize I hadn’t upgraded to Flash Player 6, and no message came up asking me to upgrade. But after I upgraded, now I see animation and text.

    Copy & paste the code below to embed this comment.
  46. I have done similar with Java applets on my website (putting them strictly in object tags) so that it valiates as XHTML 1.1 and W3C-AAA (at least according to Bobby). Glad to see it works for Flash as well.

    Copy & paste the code below to embed this comment.
  47. Great idea, but it does not seem to work for Win98/IE5.5… If users using that configuration are of any concern to you, I suggest not using the code until a solution has been found.

    Copy & paste the code below to embed this comment.
  48. most likely you are using the Flash 5 plugin.


    I used win xp, IE 5.5, flash 5 plugin on one machine and got the textfield

    win xp IE 5.5, flash 6[mx] plugin and it works fine.

    Copy & paste the code below to embed this comment.
  49. re : most likely you are using the Flash 5 plugin.
    No, as has been pointed out by a few users (and ignored by almost everyone else) there is a problem with: win98/ie5.5/flash6.

    The <textarea> appears when classid=”...” is removed from the object tag.

    Copy & paste the code below to embed this comment.
  50. Ace hack - does that make you soopa famous?. But seriously.. I use mozilla and sometimes konqueror with LINUX. Neither the flash movie or image shows up in either browser. Screenshots: konqueror and mozilla. I should add though that macromedia release flash plugins for linux ‘after’ WIN and MacOS releases. Thanks for looking into this though.

    Copy & paste the code below to embed this comment.
  51. I asked Dru this via email but thought I’d post it here as well in case anyone else has an idea.

    I work at a small design agency where most of the work we do is small sites consisting of only a few pages. We rarely get a chance to test pages on a web server until after they are sent to the client, so most of the time we are loading html directly into the browser by double-clicking the file in Windows. The problem with this is that parameters are not passed into Flash movies unless they are being served, so the ‘satay’ solution will stop us from being able to test any Flash movies in web pages unless we load them onto a web server.

    Is there a workaround to this problem anyone knows about?

    Copy & paste the code below to embed this comment.
  52. oops! I know it’s not a big deal but to present the following code:
    <object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”
    codebase=“http://download.macromedia.com
      /pub/shockwave/cabs/flash/swflash.cab#versi
    width=“400” height=“300” />
     
    </object>

    as correct. notice the empty tag of <object /> and then the closing </object>. This was corrected halfway down the article…

    nitpicky, but let’s get it right, ok?

    Copy & paste the code below to embed this comment.
  53. kliertje - i get a 404 not found on the URIs of your screenshot PNGs. :(

    Copy & paste the code below to embed this comment.
  54. When I encountered the article using IE6 on WinXP - SP1, I saw the flash movie try to load and fail on both the intro page and the article. It left an empty space where it was suppose to be. I switched to Mozilla 1.2a (still on XP) and nothing appeared there at all on either page, not even a space. I had viewed flash movies on both these browsers in the past and knew that some were in flash 6.
    I went to macromedia.com and installed flash players on both browsers and came back to ALA - voilA! it now works. I don’t know why - interesting though, anyone ?

    Copy & paste the code below to embed this comment.
  55. To get around the problem of detecting whether or not a browser has Flash installed/enabled is to create a page that has an http-equiv refresh tag that directs the user to a non-flash page after 10 seconds, but also has a small Flash movie embedded that takes the user to the true Flash-enabled site. This small movie could well be the ‘sacrificial’ movie required by the article.

    I use this Flash-to-detect-Flash method successfully, as it also gets around the problem of someone who has Flash but has set their security levels up to high (IE mainly here), effectively diabling any ActiveX controls (hello Flash Player!)

    Copy & paste the code below to embed this comment.
  56. Like Keith Bell and Manuel Razzari, I met the same problem of display (text box instead of the flash movie) while using Win98 SE, IE 5.0 and Flash player 6 . It worked well on NS 6.2.

    Copy & paste the code below to embed this comment.
  57. If omitting codebase causes the textarea bug, what happens if you use both codebase= and type= properties together?

    I think it would validate, but would it fix the problem?

    (Btw IE5.5 and Win98 work fine with Flash 6 for me)

    Copy & paste the code below to embed this comment.
  58. I’m not at home where this technique is not working, but I’m going to try setting a CSS background image to the OBJECT tag which, IF this works, would make the Flash object (otherwise seen as a textarea) gracefully degrade to an image if the user does not have the right plug-in. Macromedia achieves this with a bizarre bulk of javascript and vbscript (which, on the other hand, will fit into valid XHTML).

    later,

    Copy & paste the code below to embed this comment.
  59. Adding a classid attribute will prevent the movie from playing in many, many browsers. Trust me, I’ve been there with that one!
    Keep the suggestions coming, though.

    Copy & paste the code below to embed this comment.
  60. The following code does not get rid of the textarea in win98/IE5.5/flash6, but it plays the flash movie correctly inside the textarea. Mozilla1.1 and Netscape 7.0 ignored the outside object, playing the inside object correctly. I did not test in other borwsers.


    <object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=“0” height=“0”>

    <object type=“application/x-shockwave-flash” data=“movie.swf” width=“400” height=“300”>
    </object>
    </object>

    However, placing this code in an ASP file resulted in this error:

    An object tag cannot be placed inside another object tag.

    I don’t know if this is any help…

    Copy & paste the code below to embed this comment.
  61. I can’t seem to see the Flash content for this article in Opera 6.01 (WIN XP Pro).

    I can see other Flash content on other sites, but not for this article.

    Anyone know why?
    thanks.

    Copy & paste the code below to embed this comment.
  62. I foresee many problems with this. But I’m often wrong. Let us know what happens!

    Manuel http://www.alistapart.com/stories/flashsatay/discuss/3/#ala-1244 said:

    >I’m not at home where this technique is not working, but I’m going to try setting a CSS background image to the OBJECT tag which, IF this works, would make the Flash object (otherwise seen as a textarea) gracefully degrade to an image if the user does not have the right plug-in.

    Copy & paste the code below to embed this comment.
  63. It’s a great workaround, but not really worth my time. I’ve created many xhtml/css/508 valid websites and sometimes the only thing that doesn’t validate is the <embed> tag. So what? It won’t validate, big deal…I’m not going to come up with some crazy method of making it “validate”.

    Copy & paste the code below to embed this comment.
  64. Jon, I hear you but there’s another way to think about this. Figure <embed> is a hack (since it’s not part of any standard spec). Figure all the little extra attributes we normally use to embed Flash in IE and Netscape are hacks. The HTML generated by Flash? A hack. A hack that works in multiple browsers, but a hack.

    Consider that OBJECT is the way it’s supposed to work. In that light, the clean, simple markup proposed midway through the article is anything but a hack.

    Unfortunately, when done the right way, IE/Win doesn’t stream the Flash. That’s where the hack of using one movie to load another comes in. If IE/Win would stream SWF content embedded via the OBJECT element, we’d be all done and hack-free.

    Copy & paste the code below to embed this comment.
  65. apartness -

    I’d have to agree with Jon on this topic. Ultimately, everything is a hack, given enough time. XHTML2 will result in XHTML1 being relegated to “hack” status. Even the <font> tag was part of a set of standards at one point.

    If IE/Win would stream the SWF content, the main hack in the Satay method would not be needed. However, as it is needed, it still results in making this method simply a hack. And a hack with still quite a few issues to be tested through (the textarea display bug mainly).

    What we currently have is a hack, sure it isn’t compliant, but it does work better than the Satay method. People see the Flash object - and isn’t that the point?

    Copy & paste the code below to embed this comment.
  66. Usefull article.

    I have only one problem. Get parameters passed to a flash movie seems not working in mozilla, but works fine in Explorer.

    I put
    data=“img/menu.swf?obrir=3” in tag object and


    It should work, but not.

    Copy & paste the code below to embed this comment.
  67. I think that you have this problem to pass the parameters to flash because you are using an older version of the flash player plugin - after version 6 r 40 this method is supported.
    Version of Flash Player after that uses the new Mozilla api for plugins and are scritpable.

    Great article by the way!

    Copy & paste the code below to embed this comment.
  68. If you use absolute URLs rather than relative for the “data” then Moz and Opera work fine (on W2K) with the inclusion of the codebase attribute - much better than having to put a 1k empty swf elsewhere on the site. I knocked up a quick page if anyone with different browser/platform combinations wants to test it and get back to me:
    http://www.bw3.co.uk/flashtest.html

    Cheers, Paul.

    Copy & paste the code below to embed this comment.
  69. Paul:

    Your test page worked for me in Mozilla 1.1/Mac, IE5.1/Mac, and IE6/Win XP, all with Flash Player 6 installed. Very nice page btw! Even the source code is pretty.

    jeffrey

    Copy & paste the code below to embed this comment.
  70. In http://www.alistapart.com/stories/flashsatay/discuss/3/#ala-1251 packman said:

    >Ultimately, everything is a hack, given enough time. XHTML2 will result in XHTML1 being relegated to “hack” status.

    XHTML 2 is a science project. If it moves forward as currently written, and if browser makers and developers support it as currently written, then IMG,
    , and even A HREF= may one day be viewed as hacks. Maybe.

    If XHTML 2 is adopted as written, there’s no guarantee that XHTML 1 will be deprecated. The two specs may coexist, each serving a different need. In which case, existing markup standards would not be considered hacks.

    I understand the point you’re making. There is a tension between two views. One view suggests that each new standard should build on what came before, creating a forward-compatible upgrade path. The other view says, if what came before was broken (even for theoretical reasons) it should be replaced with something closer to a pure theoretical ideal.

    The latter view seems to be guiding the XHTML 2 draft, which dispenses with many traditional HTML elements:

    http://www.w3.org/TR/2002/WD-xhtml2-20020805/

    But it’s still a working draft.

    We’re a bit far afield from this article’s topic, though not from its reason for being, which is to bring embedded multimedia elements into conformance with existing markup specs AND MAKE IT WORK. Since we don’t know what W3C is thinking (they publish specs, not strategies or rationales) we don’t know if they plan to deprecate all existing markup specs one day.

    XHTML 1.0 Compatible is the current spec and the one nearly every browser supports, and the idea of this article is to be able to use that spec to properly embed multimedia elements. If that can be done it seems worth doing to me.

    Copy & paste the code below to embed this comment.
  71. Cool article. I’ve been doing it this way

    <object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi width=“740” height=“168”>




    <!—used to create valid xhtml with embed tag—>
    [removed]
    //<![CDATA[
    if (navigator.mimeTypes && navigator.mimeTypes[“application/x-shockwave-flash”]){
    [removed](’<embed src=”/media/youflashmovie.swf” base=”.” wmode=“window” menu=“true” quality=“high” bgcolor=”#ffffff”’);
    [removed](‘width=“740” height=“170” type=“application/x-shockwave-flash”’);
    [removed](‘pluginspage=“http://www.macromedia.com/go/getflashplayer” />’);
    }
    //]]>
    [removed]
    </object>

    on pages like http://www.davidsonbicycles.com and it validates http://validator.w3.org/check?uri=http://davidsonbicycles.com/html/home.shtml. The files I’m using for clients aren’t large enough to stream, but I see no reason why it wouldn’t in IE and Netscape.

    Copy & paste the code below to embed this comment.
  72. http://validator.w3.org/check?uri=http://davidsonbicycles.com/html/home.shtml

    The validator url has a period next to and was failing.

    Copy & paste the code below to embed this comment.
  73. Re. what’s being called the ‘textarea’ bug in IE/Win: this seems to be part of a more general problem with the way that browser handles the <object> tag. I first ran into this when I tried using <object> instead of <img> for images (got inspired by the XHTML 2.0 draft!), and found that while Mozilla (1+, at least), Opera (6), and IE/Mac (5.x, on OS 9 and X) correctly displayed the images as expected, IE/Win 5.5 and 6 failed, in a way that sounds very similar to what people are finding here with Flash.

    So, in theory, IE/Win fully supports <object>, but in practice it’s likely a different matter. Unfortunately, I haven’t yet found any general workaround (obviously, for images, we can just use <img>, just confirmation: e.g., http://www.robinlionheart.com/stds/html4/ reports that IE/Win doesn’t handle nested objects correctly, and that it ‘destroys pages that use image objects’—my experience exactly. With a test page of a single image (jpeg, using the data attribute), I’ve tried in several instances of IE/Win, and found that 5.5sp2 and 6sp1 on NT displayed just a blank textarea-like box in place of an image <object>, while 6sp1 on XP displayed the image, but in a textarea-like box that was smaller than the image and that had active scrollbars. (The test page is here, if you’re curious: http://individual.utoronto.ca/ozon/object_test.html) The oddities with Flash (e.g., not streaming, as mentioned in the article, etc.) appear to be just more eccentricities in the way IE/Win handles <object>.

    While IE/Win’s eccentric ways of rendering <object> seem to confirm some people’s experiences of the ‘textarea’ problem, it doesn’t explain it—i.e., I can’t offer a description of the exact conditions under which <object> works and does not work in IE/Win. Any ideas?

    Copy & paste the code below to embed this comment.
  74. have a look at http://www.redmanjones.co.uk/
    you’ll find flash embeded in the site
    and it validates
    whats your problem?

    :)

    all you have to do is add ‘escape’ characters before the closing tags in the [removed] parts of the script.

    ie [removed](’ <\/OBJECT>’);

    simple.

    Copy & paste the code below to embed this comment.
  75. Re: But seriously.. I use mozilla and sometimes konqueror with LINUX. Neither the flash movie or image shows up in either browser. Screenshots: http://www.rhubarbleaf.com/ala/flash-hack1.png =konqueror
    and http://www.rhubarbleaf.com/ala/flash-hack2.png =mozilla

    Copy & paste the code below to embed this comment.
  76. Pauls test at http://www.bw3.co.uk/flashtest.html works fine in mozilla on Linux and the html validates :)

    Copy & paste the code below to embed this comment.
  77. I just have to say that, while it’s very cool what has been done, I’m not going to change the way I implement Flash, nor am I going to spend any time finding a way that makes it 100% standards complaint.

    Browsers arent popping up giant flashing red windows that say “This site is not compliant with blah blah blah.” No…the webpage loads fine, and everything works just as it should. Unless your target audience for the site always visits w3c.org and attempts to validate your URL prior to visiting the site, you dont need to be so strict. What’s next? Are you going to complain that the blind cant view [hear] Flash content?? Or maybe that the deaf cant hear [read] the musical notes of the background track?!

    Get real…the article is definately cool, but it isn’t necessary. When all is said and done, even IE 10.0 and Netscape/Mozilla 9.0 still won’t display Flash MX9 content properly.

    Steven Tyler said it best… “Dream On! Dream On! Dream On! Dream On! Dream-a-dream-a-dream-a dream-a. Dream On!”

    Copy & paste the code below to embed this comment.
  78. -b- wrote:
    <!—used to create valid xhtml with embed tag—>
    <script type=“text/javascript”>
    //<![CDATA[
    if (navigator.mimeTypes && navigator.mimeTypes[“application/x-shockwave-flash”]){
    [removed](’<embed src=”/media/youflashmovie.swf” ...

    While I am certainly not an expert on embedding multimedia files, it seems clear to me that the above is a different sort of a hack from most of the hacks discussed here or in the (excellent) article. Writing an <embed> tag with JavaScript in order to claim standards compliance seems disingenuous. This hack has the simple function of hiding the <embed> tag from the W3C’s validator software, that’s all.

    Copy & paste the code below to embed this comment.
  79. a bit off-topic but http://www.rhubarbleaf.com/ala/flash-hack1.png is very hard to read. wouldn’t you be better off with the default style sheet?

    Copy & paste the code below to embed this comment.
  80. “Get real…the article is definately cool, but it isn’t necessary.”

    As others have often said elsewhere, validation isn’t really an end in itself. What we’re trying to do is get to a position where we can follow standards, making mark-up cleaner and turning validation into a useful debugging tool.

    The detective work people are doing here is valuable, it’s another tiny step towards simpler development and better sites. I’ll certainly be looking into the techniques mentioned.

    Copy & paste the code below to embed this comment.
  81. While the flash movie in the article did not play using Win98/Op6.05, it does play in the new 7.0 beta1.

    Copy & paste the code below to embed this comment.
  82. INHO validation is the first step towards code that is accessible for altrnative browsing devices. If your markup doesn’t validate then it has less of a chance of beiung rendered understandibly in PDAs, Web TV, phones and of course speech and braille readers. It is often tempting to think that, in the case of speech readers, blind is blind, but the majority of people who have visual impairments have some vision (like, do you wear spectacles or contacts??) and could see something of the Flash rendering but not be able to pick out the detail. Valid code renders better in all sorts of alternative devices.

    In my mind its a non-argument *not* to validate - it is, after all the way that anyone can write to assist the vast majority of people. This of course applies far beyond this article into the whole realm of web authoring.

    Copy & paste the code below to embed this comment.
  83. John -

    I agree that validating to standards is good practice, when possible. It will benefit the site on many levels, one of which is potential accessibility.

    However, validation does not equal accessibility. Accessibility is an entirely different process when creating a website.

    In the case of the Satay method, accessibility is not the consideration. In fact, as many readers have pointed out, the Satay method is less-accessible then a non-standards compliant block of code (specifically, common browsers that correctly render the non-standards code, incorrectly render the standards code - therefore making this method less accessible).

    I’m not sure I fully understand your apparent view that non-valid code is completely inappropriate. There is and will always be some aspects of non-valid code that are more effective than valid code in reaching the majority of people. This is the nature of versioning of the W3C standards implementations.

    I see this alot - “pure valid code is the only correct code” - and that seems to be a case of missing the forest for the trees. In reality, the only correct code is the code that works where you want it to work.

    Copy & paste the code below to embed this comment.
  84. Okay okay…so I read my post again just now and maybe I came off a little too harsh, and possibly misunderstood.

    Bottom line for me is that the web and the tools will always be changing. And when youve got so many companies fighting with each other, while the end-users just want cross-compatability, you wind up *having* to use “unclean and invalid” code for it to work. Sure, it’s cool when people dig around and try and find fixes…but really…by the time the “fix” [or hack] is in place, new versions of all the browsers and plugins will be out, the “fix” wont be necessary anymore [and could actually CAUSE problems], and you’ve wasted all that time.

    Rather than look for fixes, why not lobby the right companies to produce the right code? Send an email to Macromedia complaining…send one to Microsoft…send one to apple….and send one to netscape.

    Or you could just be like me and use what they give you. Because you know there will always be problems, and if they fix the one your asking about now, they’re not fixing the one you’re going to absolutely need tomorrow.

    Copy & paste the code below to embed this comment.
  85. “Bottom line for me is that the web and the tools will always be changing.”

    Of course, but they can change in different ways. W3C standards are generally made to be as forwards- and backwards-compatible as possible.

    “by the time the “fix” [or hack] is in place, new versions of all the browsers and plugins will be out, the “fix” wont be necessary anymore [and could actually CAUSE problems]”

    The purpose of this article wasn’t to create invalid and/or bloated code to make something work in more current browsers. The purpose was to find *valid* code that works in as many current browsers as possible. As the code is valid, it will actually work better in newer browsers, provided that they continue to improve their standards support - and IE, Netscape, Mozilla and Opera are all getting better at it.

    “Rather than look for fixes, why not lobby the right companies to produce the right code?”

    That’s exactly what people have been doing for years, and it’s finally working. I hope you’ve at least glanced at http://www.webstandards.org/ ?

    “Or you could just be like me and use what they give you.”

    Which mostly, these days, is W3C standards.

    Copy & paste the code below to embed this comment.
  86. > create a page that has an http-equiv refresh tag that directs the user to a non-flash page after 10 seconds, but also has a small Flash movie embedded

    Be careful with this: remember meta-refresh is also a nasty hack that isn’t always supported and won’t be followed by spiders. If you do this, *always* include a text link to the content itself. Also meta-refresh has a tendency to screw up the back button - JavaScript ‘location.replace()’ might be better for this, again with the caveat about text backup.

    Another issue with Flash is that, like all ActiveX objects in IE, if you go to a page with a SWF and haven’t got Flash (or a new enough version) installed it’ll open a dialogue asking if you want to install Flash, rather than just using the object-tag-contents as alternative content. And it will do this again and again, for every SWF it encounters, which is incredibly irritating.

    Even worse, if you have different settings for the security options ‘Download signed ActiveX controls’ and ‘Download unsigned ActiveX controls’ (as is the default), IE will download the whole Flash installer just to check whether the file is signed or not, before asking if you want to install it. This eats bandwidth and makes your site load slower.

    Even turning ActiveX off completely doesn’t solve the problem, as IE then complains every time it comes to a page with a SWF or other control on. For no reason, since there is perfectly good alternative content available, but that’s IE for you.

    If you leave off the ‘codebase’ attribute so that IE does not attempt to download Flash, it instead contacts ‘ocget’ at microsoft.com which attempts to look up where the software can be downloaded. This also slows loading down, and lets Microsoft know who’s accessing your page unnecessarily. You can use a fake codebase to persuade IE not to bother fetch anything, but it’s tricky… codebase=“view-source:about:blank”’ works across browser versions, but may be responsible for lack of stability in IE 5.0. codebase=”[removed]” is stable on IE5, but banned in IE6SP1, where the codebase attribute is a bit more restrictive. Does anyone know of any others?

    To get around all this *and* work cross-browser, it’s going to need a fair bit of scripting, I reckon.

    Copy & paste the code below to embed this comment.
  87. I’m really enjoying reading the responses to this article and would encourage anyone who has suggested an idea to find time to test and develop it.
    One of the big advantages of Satay that hasn’t been discussed much is that of slimmer code. Macromedia’s twice-cooked code is extremely bloated - I like Satay because it’s nice and tight. What methods are you guys using to minimize the code you’re using to embed Flash movies?

    Copy & paste the code below to embed this comment.
  88. I found the Satay article provocative and useful. I especially like the notion of avoiding Javascript and VBscript redirects. It seems to me that that’s where the big saving comes in, not only in code but in waiting for the redirects to execute. Apart from validating, the Satay code is more elegant than the conventional OBJECT/EMBED code, but doesn’t save that much code. One elegant feature is that the Satay child code leads to a non-Flash source, whereas the EMBED portion of the conventional code presents only an alternative way to get the same swf file.

    The principle problem, it seems to me, is that the Satay code does not work on Windows 95 and 98, presenting what some readers have described as a text box. (That reminds me more of the popup windows on such platforms, which have a scrollbar and arrows top and bottom even if the content can’t be scrolled.) Somehow the focus on testing for a broad range of browsers obscured the fact that browsers don’t necessarily work the same on all platforms. I hope someone comes up with a solution for Windows 95 and 98.

    Copy & paste the code below to embed this comment.
  89. “The principle problem, it seems to me, is that the Satay code does not work on Windows 95 and 98”

    I use Win98, 1st edition. It works for me, in Opera 6.05 and Mozilla 1.1. I haven’t got Flash (at least not a recent version) installed in IE 4, so I don’t know if it would work there.

    Copy & paste the code below to embed this comment.
  90. The only work around I can think of is to download a web server, run it on your local computer, and point your browser to your local IP. It’s not good - it’s a work around - but it will work.

    If you use Windows, I recommend:
    SimpleServer:WWW (~200k)
    http://www.analogx.com/contents/download/network/sswww.htm

    If not, there’s a pretty good chance you’ll find one at:
    http://www.serverwatch.com/

    Copy & paste the code below to embed this comment.
  91. This one is inferior in terms of markup size, and it definitely isn’t following the ‘spirit’ of the standards, but the W3C validator says it’s kosher:

    <!—[if gte IE 5]><object codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi width=“400” height=“100”><div class=“notIE”><![endif]—>

    <object type=“application/x-shockwave-flash” data=“moviename.swf” width=“400” height=“100”><!—[if gte IE 5]></div><![endif]—>

    </object>

    Then add the following to your stylesheet:

    .notIE {
    display: none;
    }

    What it does is use IE’s conditional comments. The IE-specific object tag is hidden by the comments for everyone else, but IE sees the comments as a conditional. It’s proprietary MS crap, but since it’s solving a proprietary MS problem, why not?

    You can see an example at: http://www.setmajer.com/test/flash_object.html

    Just be forgiving regarding the Flash; I haven’t touched the app in over a year, and what few skills I had have atrophied somewhat. ;-)

    Copy & paste the code below to embed this comment.
  92. 1. I haven’t tested whether it will do the streaming bit (a bit advanced for me at the moment)

    2. IE 4 will get the ‘everyone else’ bit, so no codebase for that browser; given that IE 4 is rapidly approaching extinction, I’m not /that/ concerned.

    Copy & paste the code below to embed this comment.
  93. It’s a good article but I believe the author didn’t done extensive research (i.e. test it extensively through out all platforms not only virutally I mean literally testing it on 3 four machines different hardware softwares setting) Which I did about 9 months ago. Cos I come with a similar idea works fine on certain platform. But fail on the other so I just have to ditch it all together (again the problem is for the client end as long as it works they are happy and I received the money on the other hand would like to get it done the right way)
    I don’t know how many of you are working on mobile XHTML at the moment. I just started it. The XHTML is much more strick than the one you use on a computer’s browser. Now the big question is better to stick to the standard now or you will need extra time later to fix your problem if you move things further. I believe this is what the author’s intension.

    The problem again, the mobile world is just a s chaotic as the browser world. I try not to point fingers at M$ but they do get there first (also macromedia blend to the big boys leave the other with no choose) with the CE browser on the handheld have the flash plugin. From a content provider point of view. They want to delivery. From a desinger point of view they want that to work and delivery on time. From M$ point of view they don’t care what the other think they just do what ever they want (side note if any one read the business page. Windows Operation Division make 2.4 Billions Dollar on a turn over of about 2.9 Billions can you image that what kind of profit margin is that??? That’s why they can afford to do what ever they want)

    So the ultimate solution is make a lot of noise to Macromedia. Make it as your wish list (you could do this over there) Hope they change this in the future release)

    At the mean time we all have to stick to what ever that works for us :(

    Joel

    Copy & paste the code below to embed this comment.
  94. I like setmajer’s idea, and I’m shure that it can be perfected.
    Although it is a hack, it would allow IE5.5 to display the flash content properly.

    Copy & paste the code below to embed this comment.
  95. I just realised that I still see the text area in your example, setmajer…

    Copy & paste the code below to embed this comment.
  96. I got it to work, but it’s ugly as hell…
    IE 5.5 needs the classid and the codebase to work, and I used setmajer’s idea…

    <object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”
      codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi
    type=“application/x-shockwave-flash”
    data=“whatever.swf”
    width=“150”
    height=“150”>

    </object>
    <div >
    <![endif]—>
    <object type=“application/x-shockwave-flash”
    data=“whatever.swf”
    width=“150”
    height=“150”>

    noflash.gif
    </object>
    <!—[if gte IE 5]></div><![endif]—>


    it’s back to an other twice cooked method… but this one validates.

    Copy & paste the code below to embed this comment.
  97. here’s a better version using conditional comments which doesn’t use css to hide the content, and which only serves the alternative content to IE 5.5 :

    <!—[if IE 5.5000]>
    <object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”
      codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi
    type=“application/x-shockwave-flash”
    data=“whatever.swf”
    width=“150px”
    height=“150px”>

    </object>
    <![endif]—>
    <!—[if ! IE 5.5000]>—>
    <object type=“application/x-shockwave-flash”
    data=“whatever.swf”
    width=“150px”
    height=“150px”>

    noflash.gif
    </object>
    <!—[endif]—>


    it’s still twiced cooked, but it validates, so it’s better than macromedia’s twice cooked method.
    and because it works (hopefully) on all browsers, then it might be better than the satay method (if you want backward compatibility…) even though it’s a hack.

    I don’t know about the streaming in my version, though…

    Copy & paste the code below to embed this comment.
  98. Your conditional syntax is flawed. you’re using:

    <!—[if ! IE 5.5000]>—>

    That was my original idea, but MSDN says that for ‘downlevel visible’ conditionals (that is, conditionals that hide the content from IE but not other browsers) you have to use:

    <![if ! IE 5.5000]>

    Which, of course, doesn’t validate.

    In my testing, your syntax does not hide the second <object> tag in IE 5.5 Win2K.

    The other problem I see with your solution as-written is that IE5 and 6 on Win will still get the second object tag, because you’re testing whether the browser is IE 5.5.

    Further testing indicates that on my Win2K installation, IE 5.5 won’t show the movie unless you have the classid attribute in the object tag (I installed the Flash control for the first time today, so I *know* it is v. 6—unless MM is distributing 5 for some reason ;-). Worse yet, it gets pissy about having a conditional inside an <object> tag, with unpredictable results.

    The following appears to work on Moz 1.1/Mac, IE 5.1.6/Mac, and IE 5-6/Win2K, all using the Flash 6 plugin:

    <!—[if gte IE 5]>
    <object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi width=“400” height=“100”>

    </object><div >
    <![endif]—>
    <object type=“application/x-shockwave-flash” data=“everyoneelse.swf” width=“400” height=“100”>

    </object>
    <!—[if gte IE 5]></div><![endif]—>

    Updated code at: http://www.setmajer.com/test/flash_object.html

    Between the verbosity of the markup and the reliance on CSS, I’m thinking the Satay method—sacrificial movie and all—is probably superior in most instances.

    Copy & paste the code below to embed this comment.
  99. Hello…
    I’m facing tableless layout (with XHTML and CSS2) right now. I just tried to insert a flash movie into the page and I tested your “hack” with different browser.
    The flash player is version 6.
    It works great on Mozilla, on Opera 6 and 7 beta, on Netscape 6 and 7 but it didn’t work on IE6 SP1.
    My OS is windows XP.
    Bye!
    MILUS

    Copy & paste the code below to embed this comment.
  100. I haven’t been able to get this to work correctly on Win2k in Netscape 4.x or 7 (or Mozilla). Netscape 4 (no flash plugin) crashes completely and 7 (which for some reason installed with the Flash 3 plugin by default) refuse to display my alternate child <img>, and instead just show a white box where the Flash isn’t showing up.

    <object
    type=“application/x-shockwave-flash”
    data=”/banners/c400x200.swf?path=/banners/ad1_main.swf”
    width=“400” height=“200”>

    /banners/bnr_whatmakes_main.gif
    </object>

    This works great in IE 6, Opera, and Netscape 6, but I have Flash 5+ installed on them. The alternate image issue seems to be the problem.

    Any ideas, anybody? I can’t have people looking at a big empty box.

    Thanks in advance.

    Copy & paste the code below to embed this comment.
  101. I eliminated the container in the above code and got it to work in Netscape 7 (with the Flash 3 plugin, even though my movie is Flash 4), but luckily it’s a small Flash file. Some others are not so small, however. Netscape 4 still crashes violently.

    Copy & paste the code below to embed this comment.
  102. What an interesting investigation…who knew that someone would go to such lengths to investigate purity in coding. Why doesn’t someone ask the engineers of the HTML parsers themselves what is going on in their minds when they create a program that parses code that web develoeprs develop? Maybe if they knew in the upper (or lower) echelons of browser engineering, we may be able to code more elegantly to begin with.

    Copy & paste the code below to embed this comment.
  103. Great article,

    Again a step forward to a more standard compliant world. But since the world as we know it simply isn’t standard compliant, what’s the use of this article? As long as more browser work correctly with non-standard code I will use non-standard code. Why? For the sake of my visitors ofcourse. Many visitors still have old browsers, old plug-ins, low resolutions. Many people use the IE5.5/Win98 combination and I don’t want to generate code that requires them to update their plug-ins…

    Copy & paste the code below to embed this comment.
  104. I use opera and have few problems with most webpages - as in reads javascript ok and does most things that other browsers do, sometimes even better than IE, but this code does not seem to work in my browser. I can’t see the flash animation header to the article….bit of a shame
    I have flash MX player and have OS 9.2

    Copy & paste the code below to embed this comment.
  105. Looking at the container movie solution I fear that this might not work with shared libraries. In some browsers shared libraries do fail if the are not loaded in the very first movie.

    Copy & paste the code below to embed this comment.
  106. I was very interested when reading this article. We currently detect flash using javascript/vb (www.bbc.co.uk/scotland). This method would bypass javascript and make for a very minimal detect. However we do have to test this script on a large number of browsers.

    With a bit of manipulation I’ve so far got it working on:- Windows (IE6, Opera 6.05, Opera 7.0, Mozilla 1.1, Netscape 4.7, 6 and 7) and Mac (IE5, Netscape 7).

    On the mac with netsacpe 4.7 however it shows the object and the alternative image/text. Does anyone know of a way around this?

    (So far testing applies to browsers with flash installed).

    Copy & paste the code below to embed this comment.
  107. Very useful article!

    Out of interest, in this :

    <object type=“application/x-shockwave-flash” data=“c.swf?path=movie.swf”
    width=“400” height=“300”>

    noflash.gif
    </object>

    Why the closing ” > ” , in the param and img tags?

    Does anyone know?


    thanks

    Copy & paste the code below to embed this comment.
  108. Why then does it work perfectly well with me: Win 98SE (Dutch) and IE5.5 SP1?

    Copy & paste the code below to embed this comment.
  109. For XHTML compliance, of course! :)

    http://www.w3.org/TR/xhtml1/

    Copy & paste the code below to embed this comment.
  110. Can any-one think of a like method to embed sounds like Midi files in this way. If I embed a sound file using only an object tag with a type of “sound/midi” (no parameters), I get a warning about an unsafe Active-X control in Win XP IE6, after which it will play in Windows Media player (not embedded). If I try the page in Mozilla 1.1, I get nothing at all.

    Any suggestions.

    Copy & paste the code below to embed this comment.
  111. Hello again,
    Reading through this discussion it appears that a number of problems arise for different people. What I’ve done is to use XSSI to deliver three slightly different object definitions dependant on broswer type/os.

    If you guys are willing would you have a look at this page and tell me if, and what, problems you experience and what browser/os you’re using. This way we can maybe develop this idea further to work on as many browsers as we can. You can email me with suggestions (keep them clean(!)) and I can tweak with it a bit to improve upon it.

    Thanks for any feedback you can provide.

    Copy & paste the code below to embed this comment.
  112. Sorry address is: http://www.hodgers.com/epicenter/test/

    Copy & paste the code below to embed this comment.
  113. http://www.hodgers.com/epicenter/test/

    Works in all the PC browsers I have, except Opera 7:
    “The requested URL /pub/shockwave/cabs/flash/gov_activity_press_release2.swf was not found on this server.”

    I’m guessing it’s because the path is not a full path. That might work…

    Copy & paste the code below to embed this comment.
  114. Very cool :-D It worked perfectly for my site, thanks!

    Copy & paste the code below to embed this comment.
  115. http://www.hodgers.com/epicenter/test/

    Should now work in Opera 7 - at least it now works on mine.

    Copy & paste the code below to embed this comment.
  116. None of the examples in the discussion or article are working for Opera 5 mac, or Opera 6 win - by not work, I mean that you get a blank spot where the flash should be, flash menu if you right click. On windows, Opera 6.0.1 does not work, 6.0.5 is fine.

    Checking the opera documentation it says that <object> is not supported for plugins, <embed> is used, for version 6. (http://www.opera.com/docs/specs/index.dml?platform=windows&session=52143711993e30906ee316b3fe98aa07) (This changes for Opera 7 beta)

    I’ve got a version using a mucked-with moock detect which I’m testing up at http://www.reb.net.nz/js-flash4/

    Copy & paste the code below to embed this comment.
  117. RE: Opera Issues. Yeah I’ve noticed that. Opera 5.x, 6.0 and 6.01 all rely on the embed tag to display the flash movies. Got the weekend off from work and so I’m going to look at that, maybe use aziz’s idea http://www.alistapart.com/stories/flashsatay/discuss/2/#ala-1220.

    Know that it isn’t xhtml compliant but will only be seen by a small number of users (hopefully) and they would then get to see the content, which is important.

    The thing I’m really interested in is avoiding JavaScript altogether. We use an excellent Javascript sniffer but would I like to move away from Javascript as people who have flash but not javascript don’t get to see the flash content.

    I’m also going to develop a small flash sniffer to detect the version of flash that someone is using.

    Copy & paste the code below to embed this comment.
  118. This is what I do.
    Everytime I embed an flash onto the main page, well, I don’t
    Instead I use an iframe on my xhtml 1.0 page, and the iframe contains the unvalidated embed code.
    So when you validate the main page, it’s 100% perfect. No one will validate the iframe.
    But I guess if someone takes this article further, they can help me not need to cheat anymore.

    Copy & paste the code below to embed this comment.
  119. The movie is not loaded on my browser (Mozilla 1.1 on Linux with Flash Player 5).

    Copy & paste the code below to embed this comment.
  120. Regarding the size limitation of the container movie, you say:

    “You can modify the behavior of the container movie to do whatever you like—as long as it’s kept small. You can use GET and POST to pass variables through the container if you need to, for example. This method, however, will only work well if the container movie is just a few kilobytes in size.”

    A while back I thought I found a race condition when I tried using a ‘container movie+child movie+GET variable’ configuration. Sometimes the child movie could not find the GET variable (in your case, ‘path’) if it started looking for it in the first frame (and using an If statement). I was forced to push back the If statement a few milliseconds (frames) later where it was able to find the variable.

    Is this related to the size limitation of the container clip? And has anyone else run into this issue?

    Copy & paste the code below to embed this comment.
  121. I have IE 5.5 running on Windows 95. This page used to work just fine! Today, to test out a page I’m working on, I installed on my computer Netscape 4.08, and Netscape 4.77, and while I was at it I upgraded Mozilla to 1.2, which was just released.

    All of a sudden I get the mysterious “text box” that isn’t a text box, as others have described above. I’m pretty sure that the change had something to do with one of these three installations. Hopefully that will give someone a clue as to what is causing the problem.

    Regards,
    Steve

    Copy & paste the code below to embed this comment.
  122. Hi again.

    When opening a page using this method in Netscape 4.77 for Windows, I get the alternate IMG, followed by the Flash movie—in other words, they both show up!

    Can anyone explain this? Here’s the page (This is an unfinished “test” site, BTW) http://www.riderfamily.us/gfotest/

    Incidentally, when I pull up alistapart.com, the “validating” Flash movie doesn’t show _anything_! No text box, no nothing—just a space where the movie should be.

    Regards,
    Steve

    Copy & paste the code below to embed this comment.
  123. Is anyone familiar with a way to create DHTML drop down menus, without the use of images, that will leave the text links outlined in separate boxes? An example would be www.ford.com but the designers used images.

    Copy & paste the code below to embed this comment.
  124. Thank you SO much. I was infuriated when the oh-so-‘useful’ “PUBLISH” feature in FlashMX generated invalid code! The code for embedding flash was something I really didn’t understand, so I was slave to the infernal Publish command. You have freed me! Excellent research—and better yet, thanks for being generous enough to share this information with the internet community. Good luck in your future endeavors!

    Copy & paste the code below to embed this comment.
  125. I’ll “third” (I hate people who say that) the textarea-lookalike fault mentioned above with IE5.0/Win98, I’m getting it too. My Flash Player was last upgraded shortly after Flash MxPx was released (it was a v6 player though) so I just upgraded again to make sure and I’m still getting the same fault.

    I’m wondering though… Sometimes my QuickTime player tries to hijack .swfs and play them itself (god knows why), maybe that has something to do with it? Or maybe IE is misinterpreting the object as belonging to some other stupid ActiveX control, like that M$ “WYSIWYG” browser-based HTML editor (which, perhaps coincidentally, also appears as a textarea, and also doesn’t work in my browser).

    Copy & paste the code below to embed this comment.
  126. I also see the flash as a textarea form ... I use IE5.5, updated it to service pack 2 on WIndows ME and still is the same.

    The sick thing is I use IE 5.5 on Win2k at work, the page looks A-OK, why so? Also tested on the snazzy new Opera7, works like new ... :D (eh I made a pun ...)

    Those W3C people! haven’t they heard of Flash?!? :p
    Do they hate flash? Did Flash kill thier parents ... sigh~

    *Throws hand up in air in disgust/abandon*

    Copy & paste the code below to embed this comment.
  127. this is a good article though i have found my own workaround for this issue with the dreaded <embed> tag. i used javascript, check out my snippet that i use on all my flash based stuff. this will validate as html 4 when parsed against a validator. of course you have to change the values where relevant to your movie (swf). cheers.

    scott

    <!—

    // netscape embed hack.
    // allows the non-standard embed tag to be used without
    // returning error messages when parsed against a html validator.
    // checks for NETSCAPE, if so then NS loads the embed tag.
    // checks for IE, if so then IE is ignored and object tag loads.
    // code © scott villarosa 2002 - svillarosa@hotmail.com
    //——————————————

    var useragent=navigator.userAgent.toLowerCase();
    var is_nav= ((useragent.indexOf(‘mozilla’)!=-1));
    var is_ie= (useragent.indexOf(“msie”) !=-1);

    if (is_nav && !is_ie)
    [removed](”<embed src=’../swf/v1.swf’ loop=‘false’ menu=‘false’ quality=‘low’ bgcolor=’#d0d4d0’ width=‘600’ height=‘320’ type=‘application/x-shockwave-flash’>”);
    else
    [removed](”“);

    //—>

    Copy & paste the code below to embed this comment.
  128. dsadas

    Copy & paste the code below to embed this comment.
  129. Hmm… Actually:
    “Those Macromedia/Microsoft/Netscape people! Haven’t they heard of ‘webstandards’?!? :Do they hate ‘webstandards’? Did W3C kill their patents =) ... sigh”


    Pseudocode for compatible but NOT compliant take on:

    [removed]
    if badBrowser: do badStuff //be nice to bad ones. you know you want to.
    else: do nothin’ //be cool.
    badStuff: document write “<ignore>webstandards</ignore>”
    [removed]

    Copy & paste the code below to embed this comment.
  130. oh i see, this is the standards comliant way isit?
    http://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT

    *tears up page is disgust* ...

    =D sigh
    note to self: willusecleverhacks
    will learn cleaverhacks willuseclaverhacksevenifthereischancethatitwillnot show up is some browsers ...

    I havent really checked out the earlier hacks/code that was provided, but Scotts solution(this page) is quite cool, tricky fella you ;-)

    Copy & paste the code below to embed this comment.
  131. Yeah,
    I was a bout to have to take all flash off of my current XHTML project www.the-hacienda.net thanks man !!!!!

    Copy & paste the code below to embed this comment.
  132. I’m generating an xml file with a xslt file. The xml source file is an address book, and I want transform some elements to obtain the final address book. But I have a problem: I would like that the new xml file contains a new element with an identity field. It is possible?
    Sample of source file:
    ....
    <item>
    <name>Peter</name>
    <street>Park Avenue</street>
    <number>132</number>
    </item>
    <item>
    <name>Ingrid</name>
    <street>Market Street</street>
    <number>5</number>
    </item>
    ....

    Sample of (desired) result file:
    ....
    <item>
    <id>1</id>
    <name>Peter</name>
    <address>Park Avenue, 132</address>
    </item>
    <item>
    <id>2</id>
    <name>Ingrid</name>
    <address>Market Street, 5</address>
    </item>
    ....

    Copy & paste the code below to embed this comment.
  133. Does some one know why flash movie doesnt want to appear within HTML code produced by PHP?

    Copy & paste the code below to embed this comment.
  134. It does. I’ve just finished work on a site which uses a title banner in flash. It uses the ‘stripped object’ described in the article (A godsend at the time!), although not the Satay method, since it’s small enough to not need streaming. All this is generated from PHP. I have had no problems at all with this.

    Copy & paste the code below to embed this comment.
  135. Drew,

    Great article, thanks for sharing. I applied your article while setting up an animation on our homepage. One thing I noticed was that there was a significant change in frame speed depending on whether or not the follwing tag was present:

    Without it, the movie ran slower. Anyway, almost done getting the animation up and live, just some last minute testing left…

    Copy & paste the code below to embed this comment.
  136. This is a nice article and gave me an excellent starting point for the site I’ve been working on www.opprints.co.uk, in particular the Gallery.

    But I’ve come across some problems. Firstly Netscape Communicator 4.8 Mac seems to display both the flash content and the image - guess I can fix that with Javascript.

    More importantly (to me) a number of Gecko based browsers (though not Mozilla 1.2) will not display the flash file if you specify percentage hight and width. I can’t find anything in bugzilla which describes this.
    Examples:
    percentage sizing (fails in Chimera, Mozilla 1.1, Netscape 7)
    http://127.0.0.1/opprints.co.uk/httpdocs/simple_ponzo.php
    pixel sizing (works, but doesn’t scale)
    http://127.0.0.1/opprints.co.uk/httpdocs/simple_ponzo_fixed.php

    Hope this helps someone, or someone can help me.

    Adrian

    Copy & paste the code below to embed this comment.
  137. I too suffered from the ‘textarea’ problem with my own site and through testing found it to be a case of a corrupt Flash ActiveX control.

    Download Macromedia’s Flash Uninstaller to completely remove the embedded player from Explorer and then reinstall Flash.

    Copy & paste the code below to embed this comment.
  138. tgsdgdgdg

    Copy & paste the code below to embed this comment.
  139. [25/11/02 @ 04:53am] Shared Libraries | by Mario Klingemann (e)
    Looking at the container movie solution I fear that this might not work with shared libraries. In some browsers shared libraries do fail if the are not loaded in the very first movie.
    ———————————————————————————

    i agree entirely… also, i’m pretty sure there are hefty security sandbox issues that need to be resolved if you want to use this method accross domains… two movies talking to eachother is one thing but throwing in a middleman will eventually cause the container movie to become a burden

    moreover, there’s lots of ‘little things’ that one must now consider like the fact that the container clip needs to have a matching frame size and framerate as the intended loaded movie… so can YOU imagine making a whole bunch of different container movieclips for all your swfs that you decide to include in your page??? It’s no longer just one container but tons of ‘em if you’ve got a big website to manage

    after reading the article (which was well written… don’t get me wrong) i had many ‘gut instincts’ that tell me using a container movie to load the new movie in is just not a good practice to follow and shouldn’t be condoned… especially if we’re trying to establish ‘healthy’ standards in the web design world

    btw, hasn’t anyone ever just detected for the browser type first and then redirect the user to the proper *compliant* page with either the object or the embed tags??? seems logical to me… but without all the hassle

    i’m all for compliance… but i feel the cost of this solution seems a bit disruptive to the design process

    Copy & paste the code below to embed this comment.
  140. This article is just wrong
    <object type=“application/x-shockwave-flash” data=“movie.swf”
    width=“400” height=“300”>

    </object>
    does not work in netscape 7

    Copy & paste the code below to embed this comment.
  141. Dave,

    The following code works in NN7 for the animation on our homepage:

    <object data=”/container.swf” type=“application/x-shockwave-flash”
    width=“300” height=“200” >

    </object>

    Give it a try would you? Maybe it’s platform specific?

    Cheers, Mike

    Copy & paste the code below to embed this comment.
  142. Currently i am developing a software package for an internet caffee and i have used some of the flash SWF formats for animations and 3d effect
    but the problem is that when ever any one clicks the right mouse button then the flash menu appears..

    and i want to avoid it..

    please tell me how to vanish that bug ...

    I am Developing that software in Visual Basic and want a code to trap the menu in visual basic ..

    please help me in any concerns ....

    Copy & paste the code below to embed this comment.
  143. Currently i am developing a software package for an internet caffee and i have used some of the flash SWF formats for animations and 3d effect
    but the problem is that when ever any one clicks the right mouse button then the flash menu appears..

    and i want to avoid it..

    please tell me how to vanish that bug ...

    I am Developing that software in Visual Basic and want a code to trap the menu in visual basic ..

    please help me in any concerns ....

    Copy & paste the code below to embed this comment.
  144. Again I am getting the same textarea problem mentioned before. this is using windows 98 and MSIE 5.5 (with the latest flash player),

    interestingly there was no problem on my work computer (windows NT with MSIE 5.5)
    Netscape 4.x, 7 and Opera 6 on windows 98 all work fine.

    Copy & paste the code below to embed this comment.
  145. Good stuff - I found that I can’t use percentages for the width or height in Netscape6 - is there a way round this?

    Copy & paste the code below to embed this comment.
  146. What is “satay”? Since the word was used in the context of food, a word meaning “to fry in a small amount of fat” is “saute”. However, since the context involved skewering and dipping, I think the appropriate word would be “fondue”. Anyway, sorry to bring up such a relatively unimportant issue.

    As intriguing and elegant as this hack may be, in the event I actually need to do this, I’ll script it, probably with a combination of client-side JavaScript and server-side PHP or Perl.

    Of course, Flash is an incredibly presentation-oriented medium, so unless you have the Flash movie on the same page as some relevant information, I would question the point of even trying to make it XHTML-valid. A common case is for a Flash movie to be on a page by itself, in which case there’s no need to format the page so that it styles especially well and adapts to different types of viewers—there is only one type of viewer that even supports Flash, and that is one with video/sound support. But if it’s a logo on the same page as something readable, XHTML validity is definitely worth something.

    All that nastiness aside, your attention to the detail that it never need be an <embed/> tag will help me consider how I script it in order to keep the XHTML tree intact and valid, so thanks a zillion. ;-)

    Copy & paste the code below to embed this comment.
  147. This seemed like a really elegant solution until I tried the container movie in Opera, which don’t like it one little bit. Without it things are fine, it’s only on the addition of that actionscripted container that seem to make Opera throw it’s toys out of the pram. I won’t pretend to be an expert (just a beginner trying to learn..) but does anyone have ANY idea why this might be?

    Copy & paste the code below to embed this comment.
  148. Quick line to let you know that the latest Konqueror (KDE) fails too, so I guess Safari (MacOSX) will also fail.

    :-(

    Copy & paste the code below to embed this comment.
  149. Sorry about the previous post, I had plugins disabled! ... Its works wonders in Linux: Konqueror and Mozilla.

    Great article!

    Copy & paste the code below to embed this comment.
  150. where do I put the codebase attribute in my 1k movie. Is it a flash or html? Is it in the container movie c.swf?

    Copy & paste the code below to embed this comment.
  151. I have also recently run into (or noticed) the problem that Windows ME users with IE 5.5 experience with this method. I can’t for the life of me figure out why (with the exception of how they tie the browser in with the OS). Kind of ironic that it works on the Macs and even in NN 4.0, but not some of the newer MS trash.

    Has anyone figured out a work-around for it?


    —previous thread—
    I also see the flash as a textarea form ... I use IE5.5, updated it to service pack 2 on WIndows ME and still is the same.

    The sick thing is I use IE 5.5 on Win2k at work, the page looks A-OK, why so? Also tested on the snazzy new Opera7, works like new ... :D (eh I made a pun ...)

    Copy & paste the code below to embed this comment.
  152. g’day all…
    I’ve had a go at removing the embed tags from various html pages containing flash movies and replacing with the code discussed here… it works (Moz 1.2, Op 7.01 and IE6 all on Win32) and interestingly IE6 gives the hiccup which is a quick flash of an image place holder behind the flash movie before load up.

    The standard publish settings from Flash MX are a bit off the path, so I made an XHTML 1.0 compliant template to display flash movies that is available in the drop down menu of the Publish Settings HTML tab.
    I even wrote an article about it that you can read here : http://www.webqs.com/experiment.php?id=15
    The template is here for download :
    http://www.webqs.com/flashtemplates/Flash_Satay.html

    Follow the intructions in the article and you won’t have to change _that_ code all the time.

    Cheers
    James
    PS sorry about the rendering on that page, I’m still fine tuning the CSS.

    Copy & paste the code below to embed this comment.
  153. I like to use Flash because I can render text links on the fly as cleanly as graphics-based text - great for reusing the same movie for different navigations within the same site, or perhaps headers, labels, whatever. This requires the ability to pass variable to the movie, which will clearly be defeated by using the “satay” method espoused in the article. Doesn’t anyone pass variables to Flash? It’s an incredibly powerful tool…

    Copy & paste the code below to embed this comment.
  154. One other thing. I don’t know the first thing about XHTML compliance, and would love to learn, and am particularly interested in weighing the pros/cons of chasing compliance to the ends of the earth. My sites render just fine in IE 5 and up on both platforms, Safari, Netscape 6 and up on both platforms. I use frames. *shudder* I also hate bloated code and so I *double shudder* eliminated the OBJECT tag in favor of the EMBED tag. Cleaner, and has worked in every browser I’ve used so far. Nevertheless, compliance is a major concern for me and I’d like to know more about it. I invite responses via e-mail, but please don’t flame me for my choices or my “ignorance”. I’m simply doing what I have seen work…

    Copy & paste the code below to embed this comment.
  155. If a standard requires the convultion described in this article rather than the far cleaner code afforded by the <embed> tag, then what good is the standard, actually? [Looking for an honest answer to an honest question here.] Further, if XHTML 2.0 could change greatly before it is finalized, why not include it? There are some tags that have real potential value that I have always been baffled by their complete shunning by standards committees. How about the <iframe> tag for example? One other note regarding a comment about the value of Flash as a technology: vector descriptions are in many cases a far more efficient means of displaying graphics and certain types of text than raster methods. Done properly, a Flash movie can replace scores of bitmap graphics at a very small fraction of the size of the bitmaps. Garish animation aside, that’s a hugely valuable use of the technology.

    Copy & paste the code below to embed this comment.
  156. Hi mschmidt -
    I pass bookmarking vars to the _root timeline and no probs encountered (I’m not using the c.swf method discussed). If there are vars passed to c.swf that affect how the nav is going to be put together, these vars can be reverse accessed from the loaded movie.
    eg this.navitem = _root.navitem;

    As an addition to this, changing the “&” (ampersand character) to the htmlspecialchars() equivalent “&” helps to retain compliant code.

    HTH
    James

    Copy & paste the code below to embed this comment.
  157. My own preference is to use an inline frame. Degradation is graceful in pre-HTML 4 browsers and requires the following code:<iframe frameborder=“0” width=”*” height=”*” src=”*.swf” scrolling=“no” > No Iframe content here.</iframe>

    Copy & paste the code below to embed this comment.
  158. Hi
    devedge has this interesting article
    http://devedge.netscape.com/viewsource/2002/markup-and-plugins/

    IE/win apparently understands the mime type specified in the type attribute and the active x unique classid for Flash. Putting the classid in causes Mozilla to not render the Flash movie at all, not surprising given it is the Active X control. My installation of Opera 7 (w2k) displays the Flash content whether the activex x clsid is present or not, so it’s not a blanket plugin specific issue.

    I’ve tried to replicate the pseudo-textarea issue on a win me / ie5.5 / 6,0,47,0 box but can’t. This system displays the content whether the classid is available or not, no textarea-like box is seen.
    Does the inclusion of the classid attribute make the pseudo-textarea disappear on the affected systems ?
    If a release of the version 6 Flash activex control was faulty, would upping the codebase version to say
    codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,47,0” or similar be the solution….

    Copy & paste the code below to embed this comment.
  159. Hi,

    first of all: Great article.

    I tested the method described in the article with different browsers and it worked with these Browsers that had the flash plugin installed:

    Browsers running on Windows 98 SE:
    - Mozilla 1.2.1
    - Mozilla 1.3
    - Netscape 4.7x
    - Opera 7.0
    - Internet Explorer 5.0

    Browers running on Windows 2000:
    - Mozilla 1.3
    - Internet Explorer 5.0

    Browsers running on Debian GNU/Linux testing:
    - Mozilla 1.2.1
    - Netscape 4.77
    - Konqueror 3.1
    - Opera 6.11

    Every single browser displayed the flash movie.

    I also tried the following browsers without the plugin:

    - all those mentioned above
    - lynx
    - w3m
    - links

    All of them displayed the alternative content. (or nothing if no alternative content was supplied)

    In my eyes, the method described in the article is clearly superior to the “conventional way”. Just imagine a future browser that supports <object> but not <embed> and that does not support ActiveX contols: This browser would not be able to display the multimedia content even if it had support for the Netscape plugin architecture and the flash plugin were installed.

    I also tested the idea behind the method for the Lurawave plugin and it worked, too, so I assume it will work with any type of multimedia object.

    It seems as that http://www.alistapart.com/stories/flashsatay/discuss/6/#ala-1469 is the solution to the IE textarea problem, (which never occured to me) at least it gives a logical explanation for this phenomenon.

    Copy & paste the code below to embed this comment.
  160. I copied the following code in to the body of my html page:
    <object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”
    codebase=“http://download.macromedia.com
      /pub/shockwave/cabs/flash/swflash.cab#versi
    width=“150” height=“75” id=“movie” align=”“>

    <embed src=“wednesday.swf” quality=“high” width=“150”
    height=“75” name=“movie” align=”” type=“application/x-shockwave-flash”
    plug inspage=“http://www.macromedia.com/go/getflashplayer”>
    </object>
    My movie is called ‘wednesday.swf’. I can not get the flash movie to work.

    I can not even see the swf working when i go to file>Publish Preview in Flash.

    Could any body tell me why this is.

    Copy & paste the code below to embed this comment.
  161. My movie is made from tempeh. What should I do?

    Copy & paste the code below to embed this comment.
  162. /*I’m a student who’s about to lose tons of marks if I can’t validate my site
    I’ve been attempting to apply your research to a shockwave movie but
    nothing shows up and I’m cornered it with all these w3c contraints.
    What am I missing?*/

    <object type=“application/x-director"data=“directormx.dcr”
    width=“100%” height=“100%”>

    </object>

    Copy & paste the code below to embed this comment.
  163. Flash movie does not wor in html
    - the classid will stop the Flash movie from displaying in Mozilla it will still run in IE6 when removed.
    - you need to specify the full path to the movie
    eg instead of wednesday.swf use http://www.mysite.com/wednesday.swf - in both instances (data and movie)

    director valid xhtml
    Your data attribute is running into the type attribute. Maybe this is the cause?
    Also see cause above… the movie may need to be an absolute reference.
    Not constraints! Standards for the web browser corps to follow.


    Tempeh :
    Maybe you should try a mime type like

    application/tofu-plain

    Cheers
    James

    Copy & paste the code below to embed this comment.
  164. This is all very interesting stuff, especially for someone like myself who is just beggining to come across this type of issues. After reading through many of the great ideas and comments posted I can only come to the conclusion that, even if you do test everything thoroughly on every single browser/operating system combination, there’s no guarantee that the Satay method will work on other people’s computers. What works fine for some doesn’t for others. Why not? Too many factors, it seems to me. Or maybe not? Any comments on this?

    Copy & paste the code below to embed this comment.
  165. The opera problem is with offline content, probably something to do with the paths to the files - once you upload content and test it over the net on a website then it works, it’s odd, but not a problem if you have your sites on the net as opposed to an intranet or something.

    Copy & paste the code below to embed this comment.
  166. I almost w3c-ed and googled myself to death over object/embed for a tiny Flash movie. “Making progress” works fine in all our target browsers but NS4.x, and those folks will never know there was *supposed* to be a movie. Much appreciated!

    Copy & paste the code below to embed this comment.
  167. I am most interested in being able to nest two objects and the browser atuomaticlly displaying an image if the relevant plug is not present.

    I have tested it and it seems to work fine, but reading the messages here, i get the impression there are some problems, can someone clarify if this works or not??

    Copy & paste the code below to embed this comment.
  168. I gleaned a lot of helpful information from this article and these posts. I have made a personal stab at the problem but with a quicktime twist. I hope this gives some of you more ideas about the problem until it is turly solved by browser authros and new media friendly standards. Here is what I wound up using…

    function embed(src,href) { //src is the embedded file and href a possible link
    [removed](”<object width=\“128\” height=\“96\” “);
    if (((navigator.appName.search(‘Microsoft’) != -1) || (navigator.appVersion.search(‘MSIE’) != -1)) && (navigator.appVersion.search(‘Mac’) == -1))
      [removed]( “classid=\“clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B\” codebase=\“http://www.apple.com/qtactivex/qtplugin.cab#versi>”);
    else
    [removed](“type=\“video/quicktime\” data=\”“+src+”\”>”);
    [removed](”</object>”);
    }

    This can easily be modifed for flash. And when doing so it looks very nice on ie(mac+win), moz(mac+win), and safari. As it is for quicktime, this works really well for all of those broswers except ie(mac) which successfully embeds the file but ignores the s. Unfortunealty, as others have commented there is limited functionality (read: damn slow) response from opera(mac) and non existant from opera(ie) reguardless of how it identifies itself. Hope this helps

    Happy Hunting,
    Jon Morley

    Copy & paste the code below to embed this comment.
  169. In the if statment of my previos post and/or code example it is possible to modify it for better compatibility with opera(win).

    if (((navigator.appName.search(‘Microsoft’) != -1) || (navigator.appVersion.search(‘MSIE’) != -1)) && ((navigator.appVersion.search(‘Mac’) == -1) || (navigator.userAgent.search(‘Opera’) == -1)))

    if (M$ & !opera_or_mac) -> old object; else give satay

    NOTE: For quicktime opera(win) does not embed under any circumstances without an embed tag from the looks of things. This is however not true for flash. opera(win) embeds that nicely with this satay hack.

    Copy & paste the code below to embed this comment.
  170. double checked that logic there should be…

    (((navigator.appName.search(‘Microsoft’) != -1) ||
    (navigator.appVersion.search(‘MSIE’) != -1)) &&
    (navigator.appVersion.search(‘PPC’) == -1) &&
    (navigator.userAgent.search(‘Opera’) == -1))

    sorry

    Copy & paste the code below to embed this comment.
  171. OK, after reading through the article and all of the comments relating to it, is it fair to say this is where it stands?

    The satay method works in all non-ie browsers where the current version of the flash plugin is installed.
    The satay method works in all ie browsers with perhaps the exception of 5.5, a mysterious text-area box appears instead.
    The satay method would work in the 5.5 browsers if the classid were included with the object, but including this attribute would make it not working non-ie browsers.

    If that is the case, I like the solution of dynamically adding the classid, either client side using javascript (although I don’t like this method because one has to worry if javascript is turned on or off on the clients machine) or server side (JSP, PHP, ASP) based on the users browser (if IE=true then classid…)

    It seems that this will atleast cut down on the most frequent problem posted, that of the textarea object being displayed.

    What are the other problems people are having? Are there any cases where a non-ie browser won’t work with anything other than an embed tag? If so, what browser/version/OS?

    Copy & paste the code below to embed this comment.
  172. Nick, I’m working on a summary of the comments. The ‘textarea’ problem has been repeatably traced back to a corrupt Player install.

    Copy & paste the code below to embed this comment.
  173. Opera 6 for Win bungs on removal of the embed tag, I’ve found. Won’t display anything - this is fixed in v7.

    Copy & paste the code below to embed this comment.
  174. Further to the IE 5.5 textarea problem traced to a corrupt player installation first resolved here:

    http://www.alistapart.com/stories/flashsatay/discuss/6/#ala-1469

    A rogue installation of the Netscape player npswf32.dll running on the same system can cause a conflict with IE 5.5 resulting in the textarea.

    Copy & paste the code below to embed this comment.
  175. Fred, Could you please explain a little bit more on your fix. What to do with the npswf32.dll? Should we remove or reinstall it?

    Copy & paste the code below to embed this comment.
  176. Have downloaded Macromedia’s Flash Uninstaller and managed to remove the embedded player from Explorer and reinstall Flash. But the textarea problem remains. What am I doing wrong? I’m using Win98 with IE 5.5 and Netscape 7. Could it be a problem with the npswf32.dll, as explained by Fred Elliot? If so, how do I fix it? Any suggestions would be nice.

    Thank you guys

    Copy & paste the code below to embed this comment.
  177. I have used this code and found a bug with IE Mac. My flash movie has some links in it but they are no clickable as IE is adding a transparent image over the top of the swf. The action is to launch another window via JS. Any idea of a work around.

    Copy & paste the code below to embed this comment.
  178. First check the ‘View All Files’ radio box in folder settings.

    Search for any instances of npswf32.dll using ‘Find Files Or Folders’.

    There should be only one copy of npswf32.dll which lives in the ‘Plugins’ folder of Netscape/Mozilla directory. Opera also calls on this folder.

    Delete any extra copies of npswf32.dll found.

    If the textarea persists rename npswf32.dll inside the Netscape/Mozilla directory to npswf32.old. This will however disable the Flash plugin in Netscape/Mozilla and Opera.

    If neither method works then I’m afraid it’s a deeper IE 5.5 issue and not a problem with the Flash Satay method and will probably require a complete reinstallation of the browser.

    Copy & paste the code below to embed this comment.
  179. Fred, Thanks for the infor. The strangest thing happened; it’s working now all of a sudden. I did a search and found only one instance of npswf32.dll. Now I’m more puzzled as to what happened. I did not change any system settings. So, why the sudden change? Anyway, its working now on Win98 with IE5.5 and NN7. But how is it possible? The only thing I did was to search for npswf32.dll? Hope to find some answers to this strange behaviour.

    Copy & paste the code below to embed this comment.
  180. in the article it says that the codebase attribute means that the object tag wont load in mozilla. i have the codebase attribute in and it is working in Mozilla 0.9.6/win98se

    if this is true then the container movie is not needed, right?

    Copy & paste the code below to embed this comment.
  181. This is beautiful work, in my opinion. But I’m vexed by the fact it won’t work in Gecko based browsers (and perhaps others, but I haven’t checked) when the width and height attributes are set to percents. For example, I’m using Flash MX’s new “noScale” feature that allows the stage to be fixed, and need the movie to be set to 100%. It validates as XHTML 1.1. so I’m assuming %‘s are legal.

    Check out http://www.foliomedia.com/index.htm (which has no DTD because it isn’t using the “Satay Method” and wouldn’t render at all in gecko browsers with it.) Then check out http://www.foliomedia.com/index2.htm (won’t render because of the 100% width and height attributes.

    Any help with this would be appreciated.

    Copy & paste the code below to embed this comment.
  182. Well, I’ve followed all the threads on this issue. I’ve uninstalled and reinstalled the flash 6 player. I’ve deleted all the npswf32.dll files on my system and yet it still gives me this wierd text area on IE5.5.

    I guess I’m just going to have to be stuck with pages that don’t validate which is a bugger.

    Oh well.

    Copy & paste the code below to embed this comment.
  183. Hey

    I implement the codebase tag and it works fine in Moz and Opera7. I find the classid tag stops things in Mozilla but everything still works in Opera7.
    I don’t need to use the container movie at all… maybe because my site loads content in from index.swf anyway.

    Dylan - I checked your links and they both worked fine on Mozilla 1.3. The only probs I’ve had with percentages was with NN4 - Moz and Opera work fine.

    HTH
    James

    Copy & paste the code below to embed this comment.
  184. Ignore all the guys that write here that <object> isn’t well supported! It is very well supported.

    I use the example for a front-page of a huge site. And therefore it HAS to work. So I tested it with all browers we support, and it worked fine. (In fact we only support W3C-compliant XHTML 1.0 Transitional. But because so many DAUs use IE, we have to support this one too. :-\)

    It’s even possibe to use an 1x1 px flash and scale it with style=“width: ??px; height: ??px;” in the object tag. It will display the movies properly.

    Our supported browsers are:
    - All W3C-compilant browsers (Mozilla, Netscape, Opera 7, ...)
    - IE 60., 5.5, 5.0
    Every thing not compilant to w3c Is a BROWSER BUG!! So we MUST blame the programmers of the browsers for it!! That’s why I personally try to show this on every place possible, so that the sufer gets pissed of from his browser, not from our site.

    This is the source-code (with php in it) that I use:

    <object
    data=”<?=$gfx ?>/c.swf?path=<?=$gfx ?>/teaser.swf”
    type=“application/x-shockwave-flash” id=“FlashTeaser”
      481px; height: 140px;”
    >



    <? include($inc_path.’/flash_teaser.noflash.box.html’); ?>
    </object>

    Copy & paste the code below to embed this comment.
  185. I found to work perfectly for IE5.5 and Mozilla, which as a developer are the only two I really care about. I’ll check it out with recent Opera releases and maybe someothers, but only so I don’t wonder.

    Thank you very much for this article, it was a bit tough to find, but I’m so glad I did!

    Copy & paste the code below to embed this comment.
  186. Could you make a downloadable movie, and a copy paste code available?

    :)

    Copy & paste the code below to embed this comment.
  187. This link on XML.com describes why some people are seeing the scrollbar+text area and some people aren’t on IE…

    http://www.xml.com/pub/a/2003/07/02/dive.html

    Quote :

    “...Why won’t it work? Well, it will work in some browsers. But not in Internet Explorer. The <object> element is a good idea; unfortunately, it came a bit too late in the game. Before <object> was officially added to the HTML specification in 1997, Microsoft had already introduced its own vendor-specific element in Internet Explorer 3.0 as a way of embedding ActiveX controls in web pages: an element named… <object>.

    When <object> was later standardized, Microsoft retrofitted support for it, sort of. Except that, to this day, even the latest version of Internet Explorer treats all <object> elements as ActiveX controls. Which means that if you have your security settings on “high” (disabling all ActiveX controls), you won’t see any <object> elements, even ones that have nothing to do with ActiveX (like the above example).

    Even if ActiveX [is not] enabled (which it is by default), Internet Explorer renders the above image with a nasty border, and two sets of scroll bars.

    Oh, and remember when I said that you were supposed to be able to nest <object> elements and let the browser choose between multiple formats of the same image? Well, that doesn’t work in Internet Explorer either; instead of rendering the first one it understands, it renders all of them.”

    So the question is can this be overcome - or is it a case of a tag naming issue and bungle without solution?

    Flinging a question out -
    Maybe a new tag for plugins is needed? ouch!

    Cheers
    James

    Copy & paste the code below to embed this comment.
  188. Thanx this article was word for word what i was looking for.(that never happens)
    you’re a champion!

    Copy & paste the code below to embed this comment.
  189. I think this is up to Macromedia to sort out in the flash code!

    Someone ask them to sort it out! To busy to be doing that all the
    time. I churn out websites like theres no tomorrow!

    Copy & paste the code below to embed this comment.
  190. Hi!

    I am not sure why, but when I did what you written in the article and went to HTML Tidy XHTML Validator it told me this:

    Warning: discarding unexpected

    Warning: discarding unexpected </object>
    graphics/spacer.gif</object></td>

    So there is an option that I have made something wrong because now it is 00:35 AM, or this theory will have to be adjusted to fit new requirements.

    Otherwise - good job, it is important to have somebody looking into this problem, because w3c does not seem to do anything to make flash movies compatible…

    Best Regards

    Miro Perdoch

    Copy & paste the code below to embed this comment.
  191. This technique seemed to work pretty well. But then I tried this:

    <object type=“application/x-shockwave-flash” data=“c.swf?path=index.swf” width=“100%” height=“100%”>







    </object>

    And to my surprise it didn’t load Flash in Netscape and Mozilla. :( All worked fine in IE, but the height=100% breaks Netscape and Mozilla for an unknown reason. Setting width=100% doesn’t affect anything. I’ve tried publishing the c.fla with Flash MX, but that didn’t help.

    So I guess some more testing needs to be done.

    Copy & paste the code below to embed this comment.
  192. I fail to see how the issue will be solved if Macromedia fixes the SWF template. First of all, they’d have to change how Flash exports HTML embedding code to write valid markup. Second, doing so would still not address the cross-browser difficulties which this “hack” sucessfully overcomes.

    Props to Dave, it’s clean, elegant, and best of all, works!

    Copy & paste the code below to embed this comment.
  193. Er, not Dave. I meant Drew. :-)

    Copy & paste the code below to embed this comment.
  194. So far as I can tell, <embed> isn’t HTML 4 compliant either. Which sort of begs the question, if we didn’t care before, why should we now? Apart from not being able to attach a validate by referrer link in your site, no one will ever know but you and the web gods (and maybe someone who’s ripping your code apart just looking for something to complain about). Lets face it, while standards-compliance is a great and worthwhile goal, who’ll sacrafice a customer or even just a visitor for the sake of compliance alone?

    Great article, but it just points out the reason that W3 issues recommendations, not edicts.

    Copy & paste the code below to embed this comment.
  195. “I fail to see how the issue will be solved if Macromedia fixes the SWF template. First of all, they’d have to change how Flash exports HTML embedding code to write valid markup.”

    You can change the way Flash exports HTML very easily:
    http://www.alistapart.com/stories/flashsatay/discuss/7/#ala-1717

    Cheers
    James

    Copy & paste the code below to embed this comment.
  196. Any ideas how to get swLiveConnect=“true” to validate as HTML 4.01 Transitional? It’s the only error I get after validating my page and I have to(?) use it since I transfer data from JavaScript to Flash…

    Copy & paste the code below to embed this comment.
  197. Isn’t it possible to use javascript to detect the browser then use the object tag instead of embed for netscape.
    I like every thing about the satay method except having to nest Flash movies to get IE to stream.

    Copy & paste the code below to embed this comment.
  198. Cowboy, I came across this article yesterday and thought the exact same thing :)

    [removed]
    if(window.navigator.userAgent.indexOf(“MSIE”) != -1 && window.navigator.userAgent.indexOf(“Windows”) != -1){
    flashtag = ‘<object id=“flashmovie” width=“300” height=“200” type=“application/x-shockwave-flash” codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi><param name=“movie” value=“compliant.swf” ></object>’;
    }else{
    flashtag = ‘<object id=“flashmovie” data=“compliant.swf” width=“300” height=“200” type=“application/x-shockwave-flash”><param name=“movie” value=“compliant.swf” ></object>’;
    }
    [removed](flashtag);
    [removed]
    <noscript>
    <object id=“flashmovie” data=“compliant.swf” width=“300” height=“200” type=“application/x-shockwave-flash”>

    </object>
    </noscript>

    this way you can avoid needing a loader movie as well as re-insert the codebase functionality

    Copy & paste the code below to embed this comment.
  199. Hmm, lets try that again

    [removed]
    if(window.navigator.userAgent.indexOf(“MSIE”) != -1 && window.navigator.userAgent.indexOf(“Windows”) != -1){
    flashtag = ‘<object id=“flashmovie” width=“300” height=“200” type=“application/x-shockwave-flash” codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi><param name=“movie” value=“compliant.swf” ></object>’;
    }else{
    flashtag = ‘<object id=“flashmovie” data=“compliant.swf” width=“300” height=“200” type=“application/x-shockwave-flash”><param name=“movie” value=“compliant.swf” ></object>’;
    }
    [removed](flashtag);
    [removed]
    <noscript>
    <object id=“flashmovie” data=“compliant.swf” width=“300” height=“200” type=“application/x-shockwave-flash”>

    </object>
    </noscript>

    Copy & paste the code below to embed this comment.
  200. This is great. I use it for all my small animations. Before, I was always trying to export as animated GIF, but because of the huge file size, I had to go with a static GIF. Now I can put in a SWF animation and have the static GIF as backup, while still retaining validation.

    Copy & paste the code below to embed this comment.
  201. Thanx Crafty:
    So It can be done…
    I did something like that but, made it a function using [removed] and passed it the movie and the dimensions but IE Still wasn’t streaming… I must have goofed. Doh…. I was starting to think you couldn’t use activeX that way. Your script could be wrapped up as a function, and still stream in IE, yes?

    Copy & paste the code below to embed this comment.
  202. I want to place cold fusion variables directly in to the flash movie in the object and embed area.
    this is in an atempt to keep people from hiting swfs that are behind login areas.

    Copy & paste the code below to embed this comment.
  203. thanks for the article it realy helped my little problem. I had to keep some people from hitting the swf directly on a site .
    these swfs were behind a login.
    I mixed this method with a cfm server page that only passes the variable to flash if it finds the session variable.
    problem solved. (until someone figuers out how to ruin my day again)

    Copy & paste the code below to embed this comment.
  204. I still see the IE 5.5/Windows 2000 bug as a great big show-stopper. I have problems in IE 6.0 as well. The whole point of compliancy is to make web sites that are accessible to everyone, and unfortunately there’s a considerable percentage of people out there using this combination. I’m also not sure about Player detects and asking them to update their Players to see a movie that would normally play in older versions - that detracts from ease of use and tends to annoy greatly. For now, I’m sticking with the old bloated code, sadly ruining x-html gloriousness for that page. :(

    Copy & paste the code below to embed this comment.
  205. Hi, first thanks for this amazing article.
    Seems like the alternative contend wont disapear on Win, Netscape Nav. 4.7 if the plugin is installed.

    Copy & paste the code below to embed this comment.
  206. When I had that kind of problem, I tried to “elude” the validator,
    using javascript but i don’t kwon if it’s a good idea. What do u think?
    I’ ve done a separate file .js with a function, using the metod “write”
    of the element “document” to give back the flash plugin needed tags.
    Then i called the funcion in the xhtml file. It worked and validated.
    //javascript file:
    function flashCode() {
    [removed](”<object cla ....”);
    [removed](”<param nam ...”);
    }

    // html file:
    [removed]
    flashCode();
    [removed]

    Please forgive me if I said a lot of nonsense!

    Copy & paste the code below to embed this comment.
  207. I wrote a little workaround in javascript for the flash player problem, it can be found (along with explaining documentation) at:
    http://www.stilldreamer.com/javascript/a_list_aparts_flash_satay_method_improved/

    Copy & paste the code below to embed this comment.
  208. Im inserting an image in between an object tag to serve as the static default in case the browser doesnt recognize the flash - Im getting an error only on IE 5 for Mac where the flash appears correctly, but a big space is generated underneath. The space seems to be about the height of the static image, which says to me thats its also processing the static image in some fashion. The object tags are embedded within div tags, and there is asp code inside the div but before the object tag to determine the path of the flash. Anyone else see problems similar to this?

    Copy & paste the code below to embed this comment.
  209. Hi there, using Safari 1.0 (v85) on Mac OS X 10.2, after uninstalling the Macromedia Flash player using Macromedia’s uninstaller, instead of seeing the nested non-Flash content I see a blue block with [?] on it and get an alert

    Plug-in not found.
    The page “A List Apart: Flash Satay” has content of MIME type “application/x-shockwave-flash”. You do not have a plug-in installed for this MIME type, so this content can not be displayed.

    This happens on both the first page of the Flash Satay article and on my own page where I’m using the Flash Satay method. But I think earlier versions of Safari would display the HTML nested in the object tag.

    Thanks for an awesome article and a stimulating discussion.

    Copy & paste the code below to embed this comment.
  210. Good work but i tried the author’s suggestion but didn’t succeed. I don’t know what i am missing.

    <object type=“application/x-shockwave-flash” data=“Brochure4.swf”
    width=“400” height=“300”>

     

    </object>

    Copy & paste the code below to embed this comment.
  211. I was looking at this as a way to replace my flash wth a gif as the client was corporate and couldnt install flash on any of their old machines. I had to find a way to replace the flash with a gif. I came across this tutorial and must say i was a bit baffled at first as my actionscripting is limited, but after figuring it out it worked a treat!

    Well done Dru.

    The only problem i had was that the flash loaded into the container file took the background attribute of the container and dropped from blue to grey but i figured out changing the container background to the colour i need worked! guess im a bit thick but this has saved me a fortune in time! thanks

    Copy & paste the code below to embed this comment.
  212. I found the same weird scrollbox object in Win98 running Explorer 5.5. I narrowed it down to the classid. If you put the classid attribute back into the object tag it starts working in Explorer 5.5, but, unfortunately, this breaks Netscape. I have yet to find a universal solution for this.

    Hats off to Drew for figuring it out this far.

    Copy & paste the code below to embed this comment.
  213. Nice work. We’re testing it out tomorrow with some complex e-learning code developed by a customer of ours.

    One problem with checking the Flash version using the codebase attribute is that it only works for IE/Win. One possible cross-browser solution lies with your one-frame “container” movie; put a version check in that frame before the “_root.loadMovie” command. If the user has the right version, load the movie; otherwise, redirect to the Macromedia download page. You can check the version by getting the value of $version (this hidden variable is only available in Flash Player 4.0r11 or later, though).

    Steve S.

    Copy & paste the code below to embed this comment.
  214. grokmac, as I said, check out http://www.stilldreamer.com/javascript/a_list_aparts_flash_satay_method_improved/ where I propose a solution to the IE5.5 problem which doesn’t harm Netscape.

    Copy & paste the code below to embed this comment.
  215. I also find that the method described does not work at all and generates the same result as the other two posts specified, which is simply that an empty text area appears on the screen, but no movie. I did follow the instructions described in the article to the letter, but sadly cannot say I have had the same astounding results as the other users.

    Copy & paste the code below to embed this comment.
  216. As Steve writes

    IE Mac tries to render the alternate image between the object tag, this results either in a blank space or an transparent image that blocks the links in the flash. I noticed that removing the width and height parameters from this image fixes the problem.

    for better IE5 Mac support use:

    <object type=“application/x-shockwave-flash” data=“c.swf?path=movie.swf”
    width=“400” height=“300”>

    noflash.gif
    </object>

    Copy & paste the code below to embed this comment.
  217. Thanks very much for your proposals but:

    1. the article had been published almost a year ago and there is still no real solution to the original problem

    2. the discussion in most of the articles is how to get it work in all browsers

    3. where are the responsible persons and what are they doing?

    to 1: as far as I can see there hasn’t been much progress over the year. but the train is running into the right direction. if someone could make a final point including example code for different needs (streaming - not streaming, browser abcd, java-script used or not used, etc. ) it could work for many more people to use it and to test it.

    to 2. am I right that the original code by macromedia (or whoever made it) does work in every browser? although it is a workaround as well, all what happens here is to replace a workaround by a workaround for the sake of xhtml-validation without being able to rely on the code if it works for everybody or not.

    to 3. it’s been a great work to make the world easier but if the developers ignore it then what does it help. does anybody have any influence so that we can hope for the future that this article and this forum can be treated as a historicle artefact?

    have a nice day and don’t stop working - it’s been a great job so far

    F.

    Copy & paste the code below to embed this comment.
  218. Because of the Eolas lawsuit, MS will modify IE’s handling of ActiveX-objects. Read about it here: http://msdn.microsoft.com/ieupdate/

    Workaround is to have Javascript write the <object>-code, as described some posts up and also here: http://www.macromedia.com/devnet/activecontent/articles/devletter.html

    Copy & paste the code below to embed this comment.
  219. http://www.macromedia.com/devnet/activecontent/articles/devletter.html

    This might be usefull….

    Copy & paste the code below to embed this comment.
  220. Sorry Ronald! I posted at the top of the thread!

    Copy & paste the code below to embed this comment.
  221. I know this is a somewhat old article, but I feel worth pointing out that ASP (v3.0 anyway) won’t even let you use nested Object tags. Must relate to the problem with showing nested tags in IE.

    Copy & paste the code below to embed this comment.
  222. At first, i too fell victim to the white text area in IE 6/Win98SE/Flash7. But then noticed I had the movie parameter messed up. I had typed the name of my movie where the name of the parameter went. Doh! As soon as I made sure it was the text box went away. I realize that other’s text box woes might be of a different breed, but there just might be another with my same mistyped problem.

    Now, the cool thing about using only <object> as it pertains to Netscape (at least 6 and 7.1 w/flash 6 and 7) is that my audio controls setup in flash now work! Using <Embed>, netscape wouldn’t allow me to move my scroll bar setup as a volume control!?! I would get the circle with a line through it like the no-smoking signs. Now, with the Obj. tag, It works the way it was intended. It always worked in IE.

    To the person who wrote that you have to have the same frame size as your loaded movie, I don’t. My c.swf file is a 1x1pixel movie. I used to use actionscript to check what version was installed, if any. I am deffinitely going back to that method.

    Thanks for your time/effort to clarify the Macromedia code. The alternate image works perfectly as a link to flash download page.

    -Que

    Copy & paste the code below to embed this comment.
  223. I was searching the web to find more on the table issues with ns/mozilla. For some reason a table with height 100% didn’t quite work. Nothing worked for that matter.
    After using this code all is fine. For some reason ie and ns translate some tags in a strange way, like embedded tags or input hidden tags.
    Can be a true pain in the ... programmers life.

    With this code i get a neat alignment at the bottom. Nice work!

    Copy & paste the code below to embed this comment.
  224. I am having some problems with IE5.1 on mac (OS9). My movies will load all external swfs eventually but when I load them up front with a script to continue playing once loaded, the movie sticks.

    The files work fine on all other platforms and in other browsers. This is only effecting 50% of the files I have.

    Any ideas please?

    Copy & paste the code below to embed this comment.
  225. So, I’m looking at this page in Mozilla and Netscape 4.76 and the small Flash movie at the top (that I assume is embedded using the Satay method) is not loading. (IE works fine though). No alternative content either. Is there something wrong with my setup??

    I am concerned because some of my older projects (www.millardhealth.com) (www.dancepower.com) that use some Flash are no longer working in Mozilla or 4.76. The player for these browsers is version 5.0 r41 and it seems that the movies may have been re-exported with newer versions that just don’t show up now. (classic grey ‘movie not loaded’ message when right-clicked. ) I appreciate any help you can offer, but I know this is the sort of problem that could have 100 causes.

    Copy & paste the code below to embed this comment.
  226. OS: Windows 98SE
    Browser: IE 6.0

    THE OBVIOUS
    I tried to use alternative content as documented in the Satay method. In order to test my alternative content I needed to disable Flash so that the MIME type would be unrecognized, and the child element, my alternative content, would be displayed.

    MISGUIDED EFFORT
    I foolishly attempted to disable Active X (this obviously doesn’t cause my browsers MIME definitions to change, eh). To my horror, I found that the browser crashes!

    NARROWING THE PROBLEM
    (1) Removing the alternative content stops the browser from crashing, but also ruins the progress of the mission.
    (2) Deleting the flash plugin from c://windows/downloaded program files causes the MIME type to be unrecognized and the alternative content displayed.
    (3) Finally, the browser does not crash if MIME is unrecognized while active x is disabled.

    WHAT DID YOU SAY, AGAIN?
    So, in shorthand, the issue can be condensed thusly: (a) flash installed, (b) active x disabled, (c) alternative child-element content within the object tag = browser crash in (at least) win98/ie6.

    I don’t have access to any minor broswers or mac software. Please report any further findings you have regarding this bug. AND, please email me (satayPost at webjuju.com) if you reply regarding this.

    Copy & paste the code below to embed this comment.
  227. Hi all

    I’ve been following the Satay discussion for a while now, unfortunately I can’t help with the IE/Windows problem as in testing it has never happened to me….

    To support the validation of object markup I wrote this little article that hopefully will help solve any issues out there.
    http://www.sitepoint.com/article/1209/

    In my markup I pointed the codebase at the site base tag instead of the location for the .cab file at Macromedia.com. It works across every Windows browser I tested on. (Moz, FB, Opera 7, IE6, IE5).
    The only issue I found was that users with no Flash on IE/Win will see an activex security popup for “unsigned controls”. (See article).

    The other thing I have been thinking about is the various solutions to the problems Eolas and Microsoft present when dealing with objects in (x)html.
    Does elimination of the classid and codebase force a bypass of the stupid popup box? I’m thinking this because these two are the activex-centric parts of the object tag… I wonder :D

    Cheers
    James

    PS, Jay, to remove Flash use Macromedia’ Flash Uninstaller. To test older versions of the player dowload the old player form MM - there are some sites out there with instructions on registering these OCX files in Windows.

    Copy & paste the code below to embed this comment.
  228. I liked it very much, but there’s a problem with Mozilla1.4 (didn’t test in other versions):
    When using

    to make the movie display with no background, it shows, but you loose interactivity with the flash movie (can’t access the buttons with the mouse). Curiously, I can with the tab key, and thus I can navigate through the flash movie.

    Copy & paste the code below to embed this comment.
  229. i created flash file as a pop ad in my web.when i browse the web in ie.6 flash file and background of my web links are working fine. when using with lower version of explorer background links are not working properly.please clarify.

    Copy & paste the code below to embed this comment.
  230. I went through the comments and really don’t know… Is there any better soulution than the final satay method? Thanx.

    Copy & paste the code below to embed this comment.
  231. to users who don’t have the flash-plugin is the only thing I need. I don’t want to force people to upgrade anything. I have used a code like this:

    <object type=“application/x-shockwave-flash” data=“http://www.adserver.com/banners/banner.swf”
    width=“468” height=“60”>

    http://www.adserver.com/banners/banner.gif
    </object>

    (which I have edited from the satay-method, thanks a lot)It works in most cases, but it doesn’t know which version of Flash the user has. If user has version 5 and the banner is made in Flash MX only white space will be shown.

    Is there a way to show the gif-version if the flash-banner can not be shown (without using any javascript-vbscript-crap)?

    Copy & paste the code below to embed this comment.
  232. I’ve been trying out the Satay method -
    works really well in IE6 (pc).

    One thing I’ve found is that if you disable Active X controls and test offline the flash movie still delivers - in order to guage whether satay method worked I had to upload the file and test online.

    Copy & paste the code below to embed this comment.
  233. For some reason, Opera browser does not cache the nested .swf-file. Maybe it has to do with the url: load.swf?open=movie.swf
    ? Caching works fine if the inside-movie is loaded alone.

    Nice “hack” though. MacroMedia should really consider using valid HTML/XHTML.

    Copy & paste the code below to embed this comment.
  234. There is currently a percent bug problem in Netscape 7 and Firebird when trying to use the Satay method. Dylan from Foliomedia.com and myself have been working together on alternative solutions to make the Satay method work in as many browsers as possible, and in our testing we discovered a percent bug that displays a blank Flash object in the following browsers thus far: Netscape 7.0, 7.02, 7.1 and Firebird 0.6, 0.6.1, 0.7.

    The issue specifically appears when a percent is used in the height= attribute. A percent can be used in the width= but not in the height=. Also the bug seems to be closely tied the exclamation character in the XHTML DOCTYPE. For instance, if you delete the exclamation before the DOCTYPE(<DOCTYPE html PUBLIC) then suddenly the 100% in the height will work. You can also add an additional exclamation (<!DOCTYPE! html PUBLIC) and the height=“100%” will suddenly work and show the Flash object.

    For the moment, here’s an alternative to getting around the NetFire percent problem:

    [removed]
    //<![CDATA[
    var ht = (screen.height)-158; ///Netscape 7 and Firebird percent fix.
    [removed](’<object type=“application/x-shockwave-flash”
    data=“flashmovie.swf” width=“100%” height=”’+ht+’”>’)
    [removed](’
    </object>’)
    //]]>
    [removed]

    This percent bug has been reported to Bugzilla and Netscape.

    Copy & paste the code below to embed this comment.
  235. That was a great bit of sleuthing, but I really think that in using flash we still have no choice but to be seated between two chairs. I really like your (w3c compliant) method of providing alternate content but unfortunately it won’t work with IE 5.2 for Mac, it tries to display BOTH the swf and the img and/or text. No matter, even w3c hasn’t been able to provide a plausible alternative to embedded flash. You can see what I had to do on my site - I hope to be able to ‘lighten’ it soon.

    Thanks for your work, cheers!

    Copy & paste the code below to embed this comment.
  236. what about take your final

    <object type=“application/x-shockwave-flash”
    data=“c.swf?path=movie.swf”
    width=“400” height=“300”>

    </object>

    and add a simple

    codebase=“http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash”

    wouldn’t any browser, if detect absence of type mentionned, open the codebase ?
    and if not, simply put instead of a noflash.gif a textlink toward the codebase url upper ?

    cause, you know, if there’s a way to respect w3c standards for using flash while keeping auto-updater fonctionnality, i’d be the very first to enjoy using it ;)

    thx for you article anyway
    coming back to read news
    >nykk da freak

    Copy & paste the code below to embed this comment.
  237. I think the best way is to use default W3C standards without tricks like ‘data=“c.swf?path=movie.swf”’.

    To prevent problems for some non standard compliant browsers you could use browserdetection. I think it’s not a problem to use non-W3C-validated code there.

     

     

    Copy & paste the code below to embed this comment.
  238. “There is currently a percent bug problem in Netscape 7 and Firebird when trying to use the Satay method. Dylan from Foliomedia.com and myself have been working together on alternative solutions to make the Satay method work in as many browsers as possible, and in our testing we discovered a percent bug that displays a blank Flash object in the following browsers thus far: Netscape 7.0, 7.02, 7.1 and Firebird 0.6, 0.6.1, 0.7.”

    Uhm, that’s not a bug.
    http://www.w3.org/TR/CSS2/visudet.html#the-height-property
    “The percentage is calculated with respect to the height of the generated box’s containing block.”
    An empty body has a height of 0.
    Now you could argue that this is replaced content and it has intrinsic height, however since a plugin displays the content, and not the browser - how do you expect the browser to figure out the content size?
    However I can safely assume that what is wanted it 100% window height. One possible correct way to do this is with a style sheet:

    BODY {margin: 0px; padding: 0px}
    OBJECT {position: absolute; top: 0px; bottom: 0px}

    Or place the object in a div container.

    Copy & paste the code below to embed this comment.
  239. Using this codebase has anyone any idea how to make the movie size relative and still work in mozilla?

    Copy & paste the code below to embed this comment.
  240. In order to make relative size work the way you want, you need to understand height in HTML.
    http://www.w3.org/TR/html401/struct/objects.html#adef-height-IMG

    Height is not defined by the viewport (window) size, but by content or absolute position.

    Copy & paste the code below to embed this comment.
  241. I’ve had problems with validating the flash through w3c; it wont recognize my opening <object> and <embed> because when I close them, it says ‘cannot find opening tag…’ pretty much, that sucks..

    Copy & paste the code below to embed this comment.
  242. Take a look at http://vmalek.murphy.cz/ or http://www.quirksmode.org/css/100percheight.html

    Copy & paste the code below to embed this comment.
  243. just a side note before i even begin my tests, if you want a passed variable to be available on larger files, look into:

    FlashVars

    http://www.macromedia.com/support/flash/
    ts/documents/flashvars.htm

    which will have variables available immediately vs the method such as myflash.swf?varname=foo which may or may not be available depending on the size of the swf.

    Copy & paste the code below to embed this comment.
  244. I have only made the concious decision lately to start writing standards compliant code and this problem foxed me for most of today!  Once I implemented your article I found it worked to great effect.  The end result is here: http://www.simplycfhost.com/om

    The only problem I have is in IE6 with a thin bar appearing above the side menu, but that could be me.

    I actually used a cfinclude tag to pull all the images and tables in to replace the Flash movie and it still works fine.

    My hat off to you, now I just gotta lose this bar!!! :)

    Copy & paste the code below to embed this comment.
  245. I do not arrive has to make function this method under Netscape PC would have a solution?
    [sorry for my english, and maybe i do something wrong, see my problem on http://www.e-mergency.net ]
    ps:nice article

    Copy & paste the code below to embed this comment.
  246. I have been trying to do this for a while now and came across this site which said it would work with Mozilla. However, I haven’t been able to get it working, can anybody tell me why?

    Unless it doesn’t like relative paths, I can’t see what the problem is.

    CODE:
    <object type=“application/x-shockwave-flash” data=”../_images/generic/map.swf” width=“218” height=“218”><param name=“movie” value=”../_images/generic/map.swf” valuetype=“object” ></object>

    Copy & paste the code below to embed this comment.
  247. Re: Luke Hammond
    I can’t see anything in you code that would keep it from working in Mozilla. I tested the map.swf directly off of your site using the following browsers in Win2K:

    Mozilla 1.3.1 using FlashPlyr 6.23
    Mozilla 1.4 using FlashPlyr 6.29
    Mozilla 1.5 using FlashPlyr 6.79

    They all worked just fine. I even tested a relative path off of my own server using your exact XHTML code and that also worked fine in Mozilla.

    I did notice that your map.swf does not work with any Flash players less than 6.23.

    I tested with Flash players 5.30 or 5.41 and the .swf did not display. So point being, that maybe the Mozilla you are using is grabbing an older Flash player from it’s automatic search plugin feature?

    Things to re-check:

    1. Make sure the automatic plugin search is off.
    2. Reinstall the Flash player to ensure that it is not corrupted.
    3. Re-export and re-upload map.swf to ensure it’s not corrupted.

    So, the first thing I can suggest is to turn off Mozilla’s automatic plugin search feature and make sure that a fresh Flash Player of
    6.23 or higher is loaded in your Mozilla.

    The process for turning off the plugin search is to go to your Mozilla directory and then find:

    defaults\pref\winpref.js

    In the winpref.js the line your are looking for is located toward the bottom around line 453 or so. It will look like this:

    //pref(“plugin.scan.4xPluginFolder”, false);

    Just take the two comments out to force it NOT to search for Flash plugin in another browser or directory, like this:

    pref(“plugin.scan.4xPluginFolder”, false);

    Now install a fresh copy of NPSWF32.dll to Mozilla’s plugins folder from another Netscape of at least a 6.23, or one from Macomedia’s Flash player archive page:
    http://www.macromedia.com/support/flash/ts/documents/oldplayers.htm

    You could also save your Flash .swf down to version 5 and see if it works then. However, it’s good to know how to turn off the plugin
    search feature when testing with various Flash player versions.

    I may be off on a tangent, but auto search could be fishing out a lesser Flash player..?

    Please visit my Contact section under RazorX.com and e-mail me a problem test page link if this turns out to not be the fix, and
    I can try more testing.

    Copy & paste the code below to embed this comment.
  248. Re: Ric Gates wrote: Uhm, that’s not a bug.

    Well, Mr. Gates, I tried your CSS fix and it thankfully corrects the percent problem in Netscape 7 and Firebird, however, there are a few issues with the suggested CSS. Even though CSS fixes it, it still seems quirky to me.

    First, to recap for those who have been following these comments, I would like to re-summarize the Satay goals that are trying to be accomplished:

    1. To use Flash Satay, which is itself just XHTML compliant code.
    2. To get an embedded Flash object to work at 100% and overcome the height=“100%” attribute non-display issue.

    Using XHTML normally with the object tag attributes of: height and width in pixels works just fine. The problem arises when you try to use 100% in the object tag’s height attribute. So now, the latest fix seems to be that we are required to use CSS intervention to just make the object attribute of height=“100%” work. So now you might be asking, if the height percent is a valid attribute option, then why doesn’t it work by itself? That’s a good question. Perhaps the width and height attributes are still there just for the older browsers…?

    But I have tested the CSS in over 20 browsers and it does work. However, the CSS suggestion proposed previously does have it’s issues.

    I am re-posting the previous CSS suggestion here and calling it CSS percent fix suggestion 1:

    body {margin: 0px; padding: 0px}
    object {position: absolute; top: 0px; bottom: 0px}

    First off, bottom: 0; is not needed any of
    the 23 browsers I tested. Second, the position:absolute declaration in the object selector, kills the object display specifically in Netscape 6.0, 6.01 and
    6.1. But if the position: absolute is taken out, then the Flash object will NOT display in most newer browsers. Also object {position: absolute;} keeps NS 4.8 or less from resizing/stretching the object. So the best way to resolve these issues is to take OUT the object selector, and instead use height: 100%; in an html,body declaration.

    This is CSS percent fix suggestion 2:

    html, body { margin: 0;  padding: 0;  height: 100%; }

    Notice the padding: 0; is required for Opera browsers to display the object fully. The additional html element selector is also needed to deal with the way some browsers see the viewport. You can even throw in a width: 100%; and take out the width and height attributes in the object element, but if you do, be sure to test how it works in your target browsers, as the full CSS may not be liked by all.

    The CSS suggestion 2 works in every browser higher than Netscape 4.8 on a Win2K box and the list of happy browsers I tested with are:

    I.E.: 5.5, 6
    Firebird: 0.6. 0.6.1, 0.7
    K-Meleon: 0.7, 0.8.1
    Mozilla: 1.3.1, 1.4, 1.5
    Netscape: 6.0, 6.01, 6.1, 6.2, 7.0, 7.02, 7.1
    Opera: 6.02, 6.06, 7.01, 7.03, 7.11, 7.23

    The only issue that arises is in Netscape 4.8 or less browsers. They will over-scale the Flash object because of the height: 100%; declaration. So you can just say to hell with those older browsers, or you can detect for them and pull the height: 100%; out for them. View home page source code at Razorx.com if you are interested in the JavaScript to detect and write for those older NS browsers located in the style portion.

    Sincere thanks goes to Ric Gates for the CSS suggestion, and thanks to JohnyB for the helpful article posts.

    For the moment, in this new landscape of XHTML, the suggestion of using CSS is currently the best way to fix the 100% percent issue in the object height attribute when a full Flash web site is desired.

     

    Copy & paste the code below to embed this comment.
  249. Not sure how relevant or useful this is but while I was testing your method I added this to my css,

    #flash { width: 400; height: 300; }

    Then added,

    <object id=“flash” type=“app…

    It elimated the need for the width and height tags in the browsers I tested. Any thoughts on this?

    I was also wondering if it was possible to turn the alternate image into a link back to Macromedia update.

    Copy & paste the code below to embed this comment.
  250. Does anyone know of a way to detect the Flash Player version while remaining XHTML compliant - all in one page? I know Macromedia has a 2004 deployment kit, but this requires multiple pages and multiple Flash files. Ideally, I’d like to detect the player version in a included ECMAScript function and determine to either show the movie or show a replacement image.

    Copy & paste the code below to embed this comment.
  251. The following CSS has worked for me using the XHTML 1.0 Transitional DOCTYPE, to display a flash file at 100% width and height (ie. it stretches to fit the full browser window) - note the inclusion of EMBED which is the Gecko (Mozilla/Firebird/Netscape…) bit:

    body, OBJECT, EMBED {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    }

    Copy & paste the code below to embed this comment.
  252. Re: coda
    Well, actually we are forgetting about the embed element, as it is not part of the XHTML
    specification and will prevent your page from validating. Only the object tag/element is being used. See the W3C validator service: http://validator.w3.org

    There is no need to use embed as a selector. Also, the {absolute: position} as part of
    an object selector, kills the display in NS 6.0, 6.01, and 6.1….and height: 100%;
    over-scales in NS 4.8 or less. See previous posts for more details on these issues:
    http://www.alistapart.com/discuss/flashsatay/25/

    I can understand if you say to hell with NS 4.8 or less, but NS 6.x is still fairly new and in use by many. Also if you don’t care about NS 4.8 or less, then I would expect that you would be detecting for those older browsers and posting a notice page with a browser upgrade link. The average user doesn’t know how or where to upgrade their browser unless we direct them.

    Copy & paste the code below to embed this comment.
  253. I only realised after my post that there were 25 previous pages of dicussion. ;) It’s good to know about those issues, thanks for that.

    Copy & paste the code below to embed this comment.
  254. Good

    Copy & paste the code below to embed this comment.
  255. Good

    Copy & paste the code below to embed this comment.
  256. There is a point I do not see here. I try to use the Satay method but I have big trouble when trying to use .
    First it doesnt work at all on Opera (but it seems Opera doesnt recognize this properties) and on Explorer and Mozilla, my animation have strange behavior. Do anyone know if using the transparent properties is compatible with the standards?
    Thanks!

    Copy & paste the code below to embed this comment.
  257. Reason why web standards are important to me:
    - At my company we develop web applications for Wireless/Handheld devices.  Adhearing to web standards is the only way a company can write a simple/efficient browser for these smaller devices.  If the HTML doesn’t validate, most of the time it won’t even run.

    - HTML Validation helps me debug my generated content with my php/perl pages.  It will help tell me where/if i forgot to add a closing tag, or if my loops are bad.

    I’ve been using a Javascript hack to get my Flash stuff to validate in the past. Taken from here:
    http://www.davidsonbicycles.com/html/home.shtml

    Copy & paste the code below to embed this comment.
  258. Re: jOrd
    Well, the author of davidsonbicycles.com is simply wrapping [removed] //<![CDATA[ around the embed tag. The embed tag is no longer a valid XHTML tag/element. The Flash Satay and many of the posts to it, have also confirmed that embed is no longer needed. Simply hiding it from the validator is not anything hair-raising, however, when the element is not needed, then it’s a waste of code.

    In trying to be XHTML compliant, the main issues revolve around the fact, that anytime IE 6 or less encounters the data element, it will not stream a movie.swf. To add to the problems, using a container movie to fix streaming in IE can add new troubles in Flash (read previous posts), also you cannot detect minor Flash player versions using client-side VBScript for an IE browser, so now your codebase=”” becomes important to catch minor Flash versions in IE. Minor Flash detection becomes vital when determining what ActionScript elements to use or not to use based on bugs within a particular minor version and/or player release. All of these issues have been thoroughly covered in previous posts though.

    So, all that being said, if I am being forced to use a JavaScript “hack and hide” with //<![CDATA[  to pass validation and to get IE to work right, then my personal choice is to feed IE what it wants. This allows me to maintain the ability to stream the larger .swf files, and still detect for minor Flash versions in the visiting IE browser if needed.

    My preferred and final solution, which I have dubbed Javay, is a simple block of code I have tested in many browsers:

    [removed]
    //<![CDATA[  /// Flash Javay method
    var ua = navigator.userAgent.toLowerCase();
    if ((ua.indexOf(“msie”) != -1) && (ua.indexOf(“opera”) == -1) && (ua.indexOf(“webtv”) == -1)){
    [removed](’<object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi width=“500” height=“500”>’);
    [removed](’ </object> ‘); }
    else{ [removed](’<object data=“movie.swf” type=“application/x-shockwave-flash” width=“500” height=“500”></object>’); }
    //]]>
    [removed]

    <noscript>
    <object data=“movie.swf” type=“application/x-shockwave-flash” width=“500” height=“500”>
    </object>
    </noscript>

    (Of course, now the future threat of Eolas/IE may force me to change how this code is delivered to the page.)

    And when I need my Flash object to be 100% width and height, then I use this CSS selection in addition to the Javay:

    <style type=“text/css”>
    html,body {margin: 0; padding: 0; height: 100%;}
    </style>

    But in all fairness, perhaps the author of davidsonbicycles created the site long before this research was available. So, credit may be in order for cleverness. In the past, I have been bad at maintaining web standards in some of my site designs. I too have sinned.

    It’s also good that you are dead-set on maintaining web standards. Web developers/designers with such enthusiasm are few and far between. It’s important that we continue to trade ideas and encourage each other in this important issue of XHTML compliance, because if we don’t push it, then no one else will.

    Copy & paste the code below to embed this comment.
  259. So many times I read articles about Flash, HTML, etc.. and I get confused, quickly (that is of course, unless I had had about 3 Starbucks Doubleshots)...

    It was simple, easy to understand, and flowed well for me - and now.. to try it!

    Copy & paste the code below to embed this comment.
  260. Interesting reading.  I tried it on a site I am developing, using flash for navigation. We have 5 categories, each with a color theme controlled by css, and matched in the flash navigation: Within the flash movie I change the color of a rectangle serving as a background, and text color, depending on the arguments passed to the flash movie via the URL.  When I added these arguments to the definition of “path” they seem to have been lost by the time the movie plays. I’m still somewhat of a newbie to all of this, so if I missed something, please enlighten me. [Using the non-compliant code, the process worked fine.]

    my code now reads:

    <object type=“application/x-shockwave-flash”
    data=“navloader.swf?path=jttvinpage.swf&bckgrnd=0xcc00ff&txtcolor=0x000000&txtovercolor=0xcccccc” width=“260” height=“152”>

    </object>

    Copy & paste the code below to embed this comment.
  261. I’m currently working with a number of Flash movies that interact with Javascript for various reasons. 

    When I try using this method it seems that the Flash player in Mozilla browsers is unable to pick up on either the name or id attribute of the object tag (it typically uses the name attribute of embed).

    Does anyone know of a way to use just the object tag but still have FSCommand work properly in Moz?

    Copy & paste the code below to embed this comment.
  262. I’m sorry if this question has been mentioned before.  I have looked through and I cannot find a solution in the forum.  The flash satay method works excellent in Mozilla and IE, but it will not work on Firebird 0.7 for me (flash simply does not appear).  I do not use percentages for the height.  The code is below:

      <object type=“application/x-shockwave-flash” data=“navigationx.swf” width=“730” height=“570” id=“navigation”  top:10px; left:10px;” standby=“The page is loading.  Please wait…”>
     
     
     
     
     
      </object>

    It is not the standby and it is not the transparency parameter.  This can be seen at http://www.xdemi.com/music/main.php

    Any solutions?

    Copy & paste the code below to embed this comment.
  263. This really works and while no container has been used for Flash, the page validates for XHTML. It works in Mozilla, Internet Explorer 6.0, 5.5, 5.01 and other browsers, too.

    <div id="flash">
    <object type="application/x-shockwave-flash" data="images/banner.swf" width="288" height="128">
    
    banner.gif
    </object>
    </div>
    
    Copy & paste the code below to embed this comment.
  264. I just added them, because I didn’t know how ALA display the code.

    Copy & paste the code below to embed this comment.
  265. Re: dusoft
    “This really works and while no container has been used for Flash, the page validates for XHTML.” Well dusoft, not exactly. Sure your code validates, but it does not work in all situations. First off, when I.E. encounters the data element it will not stream. Just pump your banner.swf up to 1 MB and view it with a dial-up to see what I mean. I.E. will give you a white box and wait for the file to completely download before playing it. Second, your code will not work in a full Flash situation. If you change your width/height to 100% you will quickly see a blank screen in newer Netscape/Firebird browsers. You have to remedy that with the appropriate CSS:

    <style type=“text/css”>
    html,body {margin: 0; padding: 0; height: 100%;}
    </style>

    Until Eolas hits, I am using the Javay method over the Satay method to resolve these and more issues. For a more detailed explanation, see previous posts:
    http://www.alistapart.com/discuss/flashsatay/26/

    Your method works good for a small Flash file and because you are not using percents, but it will not work for other situations beyond that. Also buy cutting out the codebase you are giving up an easy way to upgrade older Flash players for your I.E. visitors. And without a codebase, some web devers will try to use entry pages. Entry pages like, “You must have Flash player X to view this site..”, are a big waste. Most people don’t even know what a Flash player is, let alone what version they have. Hell, even I forget what Flash version I have sometimes. Flash player detection through JavaScript or with a Flash movie itself may be needed. Server-side detection is not yet reliable in all browsers.
    Flash detection should always remain invisible to the visitor.

    But a lot of what I’m saying has already been covered in previous posts, though.

    Copy & paste the code below to embed this comment.
  266. Sorry, commenting is closed on this article.