Flash Satay: Embedding Flash While Supporting Standards

by Drew McLellan

265 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. Good

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

    Copy & paste the code below to embed this comment.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. I just added them, because I didn’t know how ALA display the code.

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