Flash Satay: Embedding Flash While Supporting Standards

by Drew McLellan

265 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. “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.
  6. > 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.
  7. 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.
  8. 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.
  9. “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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. I just realised that I still see the text area in your example, setmajer…

    Copy & paste the code below to embed this comment.
  16. 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.
  17. 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]—>
    < 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.
  18. Your conditional syntax is flawed. you’re using:

    < 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:

    < 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.
  19. 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.
  20. 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/c400×200.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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. For XHTML compliance, of course! :)

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

    Copy & paste the code below to embed this comment.
  30. 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.
  31. 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.
  32. Sorry address is: http://www.hodgers.com/epicenter/test/

    Copy & paste the code below to embed this comment.
  33. 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.
  34. Very cool :-D It worked perfectly for my site, thanks!

    Copy & paste the code below to embed this comment.
  35. 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.
  36. 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.
  37. 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.
  38. 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.
  39. 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.
  40. 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.
  41. 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.
  42. 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.
  43. 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.
  44. 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.
  45. 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.
  46. 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.
  47. 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.
  48. dsadas

    Copy & paste the code below to embed this comment.
  49. 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.
  50. 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.
  51. 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.
  52. 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.
  53. 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.
  54. 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.
  55. 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.
  56. 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.
  57. 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.
  58. tgsdgdgdg

    Copy & paste the code below to embed this comment.
  59. [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.
  60. 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.
  61. 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.
  62. 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.
  63. 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.
  64. 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.
  65. 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.
  66. 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.
  67. 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.
  68. 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.
  69. 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.
  70. 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.
  71. 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.
  72. 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.
  73. 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.
  74. 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.
  75. 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.
  76. 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.
  77. 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.
  78. 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.
  79. 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.
  80. 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.
  81. My movie is made from tempeh. What should I do?

    Copy & paste the code below to embed this comment.
  82. /*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.
  83. 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.
  84. 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.
  85. 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.
  86. 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.
  87. 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.
  88. 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.
  89. 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.
  90. 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.
  91. 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.
  92. 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.
  93. 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.
  94. 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.
  95. 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.
  96. 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.
  97. 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.
  98. 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.
  99. 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.
  100. 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.
  101. 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.
  102. 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.
  103. 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.
  104. 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 1×1 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.
  105. 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.
  106. Could you make a downloadable movie, and a copy paste code available?

    :)

    Copy & paste the code below to embed this comment.
  107. 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.
  108. 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.
  109. 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.
  110. 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.
  111. 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.
  112. 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.
  113. Er, not Dave. I meant Drew. :-)

    Copy & paste the code below to embed this comment.
  114. 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.
  115. “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.
  116. 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.
  117. 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.
  118. 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.
  119. 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.
  120. 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.
  121. 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.
  122. 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.
  123. 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.
  124. 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.
  125. 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.
  126. 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.
  127. 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.
  128. 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.
  129. 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.
  130. 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.
  131. 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.
  132. 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.
  133. 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.
  134. 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.
  135. 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.
  136. 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.
  137. 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.
  138. 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.
  139. http://www.macromedia.com/devnet/activecontent/articles/devletter.html

    This might be usefull….

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

    Copy & paste the code below to embed this comment.
  141. 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.
  142. 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 1×1pixel 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.
  143. 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.
  144. 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.
  145. 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.
  146. 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, © 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.
  147. 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.
  148. 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.
  149. 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.
  150. 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.
  151. 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.
  152. 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.
  153. 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.
  154. 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 html PUBLIC">DOCTYPE then suddenly the 100% in the height will work. You can also add an additional exclamation (< 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.
  155. 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.
  156. 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.
  157. 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.
  158. “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.
  159. 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.
  160. 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.
  161. 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.
  162. 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.
  163. 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.
  164. 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.
  165. 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.
  166. 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.
  167. 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.
  168. 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.
  169. 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.
  170. 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.
  171. 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.
  172. 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.
  173. 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.
  174. Good

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

    Copy & paste the code below to embed this comment.
  176. 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.
  177. 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.
  178. 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.
  179. 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.
  180. 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=0×000000&txtovercolor=0xcccccc” width=“260” height=“152”>

    </object>

    Copy & paste the code below to embed this comment.
  181. 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.
  182. 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.
  183. 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.
  184. I just added them, because I didn’t know how ALA display the code.

    Copy & paste the code below to embed this comment.
  185. 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.