Web standards compliant Javascript Flash detect and embed

Posted on by

FlashObject now has a permanant home at this url: http://blog.deconcept.com/flashobject/.

This post is partially out of date, and has been superceeded by Proper Flash embedding: FlashObject Best Practices. I’ve also closed the comments, please leave feedback in the new post.

Nearly every project I work on these days has Macromedia Flash involved with it some way or another. If you’re into the whole web nerd thing, you’ll know that embedding Flash in a XHTML page doesn’t play so nice with these web standards everyone is raving about. Developers basically have two choices these days when working with XHTML and Flash:

  1. The Flash Satay method, which uses a single object tag to embed the Flash movie. This method’s main drawback is that the movie won’t start playing until it is 100% loaded. This can create problems with large Flash sites where the user would be left with a blank screen until the movie loads. There are ways around this, but it involves using another swf file that loads your main movie and placing the preloader inside the first swf. This can clutter up your directories with ‘holder’ movies and make adding Flash content much more time consuming than it should be.
  2. Use Javascript to write the object / embed tags – This seems to be the most common way of embedding Flash today. Drawbacks include reliance on Javascript being enabled on the user’s browser, and having to include a .js file with each Flash movie, or rewrite the object and embed code for each movie.

With these in mind, I decided to come up with a standard way to embed my Flash movies, whether it be a single movie on a page (full Flash site) or multiple inline Flash elements on a larger XHTML page.

The features I wanted are:

  • Ability to embed unmodified Flash movies without the aid of other Flash movies
  • Ability to detect the Flash player version in the user’s browser and display alternate content if needed
  • Alternate content options – plain text (HTML), redirect, or image
  • Must validate as XHTML 1.0 transitional and up
  • Must accommodate any type of Flash embedding, including additional parameters and variables passed in via the Flashvars parameter
  • Easy to use (even non-technical designers should be able to use it!)
  • Must be able to be bypassed. What if the user has Flash but the detect failed for some unknown reason? (new browsers, unexpected plugin architectures, etc.)

With all this in mind, I started to look around for what other people have already come up with. Most large sites I looked at used simple Javascript to write each Flash movie to the page, or some reusable code that accepted parameters for the Flash movies. ABC News had the most advanced version I could find, with some excellent reusable Javascript that detected the plugin and could not only write the object and embed to the page, but could also target an element on the page and place the Flash movie inside it.

The ABC News code to write a Flash movie to the page looks like this:

var logo = new Flash("/flash/abcnewslogo.swf", 64, 64, 6);
logo.setParam("wmode", "transparent");
logo.render('logocontainer');

To view their Flash embed code, look here.

This isn’t bad at all, but it’s missing a few of my requirements: No way to specify alternate content if the user doesn’t have Flash (and no non-Flash site redirect option), and there’s no way to bypass it – if someone has some new unknown browser with a Flash plugin, and this script can’t find their plugin, there is no way they will get to see your Flash content.

So. Using this code as a base (except for the plugin detect, which I already had a copy I pieced together a while back and was basically the same thing anyway) I put together a new version with everything that I needed.

Here is what a basic Flash embed would look like:

var flashDial = new FlashObject("xm_dial.swf", "xmdial", 527, 349, 6, "#ABAFAE");
flashDial.write();

You can also target a specific element to place the Flash movie in by passing an element id in the write() method, like this:

myFlash.write('mydiv');

And here is a sample of what it would look like if you placed the code on the page and included alternate content and a few other optional parameters:

myFlash = new FlashObject("swffile.swf", "swffile", 500, 300, 6);
myFlash.altTxt = "<h1>You need to upgrade your Flash Player!</h1>";
myFlash.addParam("wmode", "transparent");
myFlash.addParam("salign", "top");
myFlash.addVariable("varname", "varvalue");
myFlash.write();

And that’s it! If you need to overwrite a default parameter, like quality, you would just set the parameter:

myFlash.addParam('quality', 'low');

If the user has Flash, they see the Flash movie. If they don’t, they will see your alternate text and a link to disable the Flash detect. This is done by simple adding detectflash=false to the query string (the link is added to the alternate text automatically unless you overwrite it).

Here is a sample page with a little Flash movie. Try uninstalling your Flash plugin and viewing the page.

I’ve also made a Flash template for this (included in the .zip file), so you can publish the javascript code you need directly from Flash – it’s not perfect, and only provides the very basic embed code, but it’s a nice starting point.

Download the FlashObject source code. Check out the updated version for the latest code downloads.

UPDATE (10-15-2004): Mark Wubben pointed out that there were couple loose variables hanging around, so I fixed that up. I decided to leave the getFlashVersion() function out in the open so it can be used independantly. Maybe you would want to use it to provide a general help statement without embedding a Flash movie?

UPDATE (10-20-2004): Just a small update, I removed the codebase variable since it will never be used by the browser. The only reason it’s in there is to give the browser a URI to download the plugin from, but since the Javascript won’t write the plugin code if they don’t have the plugin, it will never be used.

UPDATE (10-20-2004): I just posted a little follow up to the whole application/xhtml+xml mime types problem.

UPDATE (11-11-2004): Martin Klasson wrote and told me about how escape() tends to munge up some characters like ø and ä to name a couple. So I took it out, and switched the example page to utf-8 (because it should have been anyway). You’ll just have to watch out for things like double quotes being passed in through flashvars, but ideally you wouldn’t be doing that anyway, right?

UPDATE (11-13-2004): Just found a bug in the getQueryParamValue() function and fixed it. I should also note that you can use that function to grab URL parameters and send them to your Flash movie, so I added a little note in the usage comments on how to do that.

UPDATE (11-15-2004): Fixed a small bug pointed out by Manoloweb where the alt text would be written in the script tag instead of the target div if you specify a target. All fixed up now.

110 thoughts on “Web standards compliant Javascript Flash detect and embed”

  1. Have you considered providing a small .swf that does a minor version check as well (when flash is found)? JS can only check for major Flash Player versions. For example, player 6.0.65 optimized .swfs won’t play in earlier minor version releases of player 6. Would be a nice addition!

  2. Pingback: Kim's personal blog

  3. a) f***in’ fantastic
    b) i noticed that you nor other posters made much mention of the ability to REPLACE a <div>; I, for one, am loving this feature. flash navbars, flash home page, etc. – make an HTML version for search engines, spyders & those w/o flash/javascript… then swap it out for nice flash for the real audience.
    yes it’s not pure validation/accessibility, but unless i’m working on a gov’t site, i take a ‘do the best you can’ approach.

    THANKS Geoff

  4. Excellent script, as is your suggestion on the 100% height and width CSS which works great as well (no more un-xhtml-esque topmargin=”0″ leftmargin=”0″ needed for Opera).
    Only thing is, since I changed my index.cfm from HTML 4.0 Transitional to XHTML 1.0 Transitional (content=”text/html)
    the XML parsing in Flash doesn’t work no more. Use XML to load multilanguage content in f.i. buttons and “pay-off”.
    Tried myFlash.addParam(“allowScriptAccess”, “sameDomain”); but that didn’t change nothing. Haven’t read this anywhere, someone has any ideas? Cheers, Kees

  5. Hey, Jules, on Jan 2nd:
    talking about using REPLACE to change the content of a <div>
    That might be a way to swap out flash clips on the same page–somehing I’m trying to do with a near-negative knowledge of both <div>s and jscript. Could you give an example? I hunted around, but didn’t find anything out on the great wide web.

  6. Kees,

    I’ve never heard of anything like that happening – the only thing that pops into my mind is that maybe it’s a character encoding issue? Is your XML and XHTML file using UTF-8 encoding?

  7. Hi Geoff, you’re right so far as my second xml file got encoding=”ISO-8859-1″ because of previous testing so I set it back to “UTF-8” and that now works. But changing the encoding back to “UTF-8” doesn’t do the job for my first xml file.
    My setup is like this:
    – xhtml embedded (container)movie loads first (ini-type) xml file with multilengual settings for buttons and “pay-off” (which are in separate external menu movie)
    – clicking on these buttons loads the specific external movie that parses a second (content-type) xml file with specific content
    It’s so strange that the parsing doesn’t work in the first and DOES work in the external movies while in plain HTML-4 without the embed there’s no problem in this way. I hope I can find out what’s causing problems here..
    Cheers,
    Kees

  8. Hi Geoff,
    Delete my postings from your blog if you like, I got it solved:
    myFlash.addVariable(“language”, “<cfoutput>#language#</cfoutput>”);
    I forgot to pass it in the new setup with your xhtml embed code while it was still available in the HTML 4 setup.
    Cheers,
    Kees

  9. Any help or suggestions will be greatly appreciated.
    I’m sniffing for the presence of the flash6player. When I attempt to play a flash6 swf file in IE5 with the flash5player installed(Windows platform) the sniffer script is attempting to load the swf content. This results in a failed load. So, I’m left with no functioning flash content and no alternate content.

    From what I’ve been able to tell, where the getFlashVersion function is looping through the possible player version numbers and executing the VBScript —
    execScript('on error resume next: result = IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.'+i+'"))','VBScript');
    —
    it returns true for the presence of the 5player when the 6player is the one installed.
    Why is this happening?
    Thanks.

  10. Did you uninstall the Flash player using the Macromedia Flash player uninstaller?

    When you install the Flash player, there are pointers placed in the Windows registry, and the VBScript is checking for those pointers. If they are present, it assumes the Flash player is present. If you manually remove your Flash player files but don’t remove the registry pointers, the script will still think that the Flash player is installed.

  11. Pingback: Brajeshwar

  12. Pingback: BooIzzy.com

  13. Pingback: InnerGeek

  15. This looks great, is going to save me a lot of typing! Having downloaded the code and looked through the files I have a query on the following comment in the readme.txt:

    flashobject.js – javascript file that does the magic: copy this to the same directory as the flash movie you want to embed.

    Does the JS file really need to sit next to the SWF or is this just to simplify the instructions? Thanks . . .

  16. Matteo: Your method is pretty interesting – although the main problem I have with it is that you have to have a bunch of extra XML files floating around to make it work, and it suffers from the same drawbacks as Flash Satay in that if the user has an older Flash player their browser will still try to play the content anyway. Presumably you would use a Flash detect on a gateway page and then forward them to the page with the Flash content, but what if they bypass your detect page?

    Adam: you can place the .js file anywhere you want.

  17. I found what I believe to be a small bug in this code, which we have fixed. The embedding of the flash object for netscape, firefox, etc. was not allowing for the passing of parameters to the flash movie e.g. <param name=”movie” value=”movie.swf?clip=1″>, or at least flash was not responding to the parameters.
    The change we made was to replace
    flashHTML += ‘<embed type=”application/x-shockwave-flash” src=”‘ + this.swf + ‘” width=”‘ + this.width + ‘” height=”‘ + this.height + ‘” id=”‘ + this.id + ‘” align=”‘ + this.align + ‘”‘;
    with
    flashHTML += ‘<object type=”application/x-shockwave-flash” width=”‘ + this.width + ‘” height=”‘ + this.height + ‘” id=”‘ + this.id + ‘” align=”‘ + this.align + ‘” data=”‘ + this.swf + ‘”>’;
    in the getHtml function (the reordering of the html is not the fix – it is the use of the object rather than the embed tag). Hope this is useful.

  18. It’s not a bug, you should be using flashObject.addVariable("var", "value"); to add variables. It uses the flashvars param/attribute instead of passing the vars in the url string which has some limitations (in some browsers there is a limit to the length of the URL string).

  19. Geoff,

    I’m very thankful for your excellent script which I find most useful. I have one suggestion and two questions:
    My suggestion has its origin in an attempt of using your script with a page which relied in Flash/JavaScript communication to perform, attempt that has not been well succeeded with Firefox or Mozilla. I thought that they missed the name attribute of the embed tag — God knows why, if they’re trying, or so they say, to be as web standards compliant as they can — so I tried to use an addParam(“name”, “moviename”) method, but, this time, it was IE who stopped working. So, I’ve decided to go to line 89 of your script and add the string [ + ‘” name=”‘ + this.id] to your flashHTML variable, and now I got it working in IE, Mozilla and Firefox… It still doesn’t work in Opera 8, but as Opera is virtually unknown in my country, Portugal, and as it only begun to support flash’s wmode in this new beta version, I will not let me be worried about that. I hope that this suggestion may be of some usefulness. (I started a thread on this subject in Opera forums, but it hasn’t got any answers till now: http://my.opera.com/forums/showthread.php?s=7837ac23457e79073764c9c43a01d770&threadid=79344 .
    My questions:
    1- As the innerHTML is any longer supported by W3C recommendations and, therefore, Mozilla has already announced that its browsers won’t support it for much longer [ http://www.mozilla.org/docs/web-developer/upgrade_2.html ], wouldn’t it be preferable (I have not tried it yet, so I don’t know if it is feasible in this case, but it seems like so) to use the node structure and methods?
    2- I’ve noticed that your IE sniffing depends on the ActiveXObject recognition… Is it 100% safe? Specially now that browsers are allowing users to change the browsers id and turning plugins on or of… Is there any feature that we could use instead? I confess that I don’t see any… There’s a thread on this subject in Opera forums [ http://my.opera.com/forums/showthread.php?s=&threadid=68877 ] ; Jim Ley has written something about this subject also [http://jibbering.com/faq/faq_notes/not_browser_detect.html ]

  20. Roberto, lots of good questions :)

    1) the missing name attribute: you shouldn’t need it in there for the Javascript communication. You should be able to communicate using only the id, by doing document.getElementById('flashid').setVariable('var', 'value'); I haven’t actually tested this, so maybe I’ll put together a test page soon and try it out.

    2) innerHTML: in a perfect world, yes, I would use createElement and not innerHTML, but since innerHTML is better supported at the moment, it made more sense to use that instead for the time being. There are also some bugs with using createElement in some browsers (with Safari you have to use innerHTML anyway to make the page redraw). Also size in a concern here, and the js for the innerHTML is smaller than the createElement code that does the same thing. The only drawback is that innerHTML doesn’t work when you send your pages with a mime type of application/xhtml+xml, but that is so rare and still partially buggy (since IE doesn’t support it) that it’s not really worth the hassle at the moment. Eventually it should be rewritten to take advantage of the DOM methods, though.

    3) IE ActiveX sniffing: The detect works by checking for the navigator.plugins array first, which is independant of the browser’s UA string so you will never have a problem with trying to check for ActiveX controls in Opera or any other browser. As for the reliability of using that, as long as you install/uninstall your plugins correctly (using the macromedia uninstaller, etc.) there should be no problems with this method at all. If a problem does arise in the future, the detect has a built in way to bypass the detection and display the Flash movie on the page anyway, whether the user has the plugin or not (look for the dodetect variable in the code).

  21. Geoff,

    Thank you so much for answering. About the missing attribute… In fact, there is some JavaScript -> Flash communication, in the page I’m developing, but there were no problems there. The problems arise when Flash tries to communicate with the JavaScript on the page… There should be nothing much to it — an fscommand (command, args) from the flash side, and a function myDocument_DoFSCommand(command, args) in the JavaScript side (with that hook in VBscript for Internet Explorer)… But, without the name attribute, the JavaScript, on the Firefox browser, doesn’t seem to be able to receive any flash instructions… which makes me think that the problem must reside in Flash itself. After all, Macromedia is still saying, in the online help for Flash MX Professional 2004: “In a web browser, the fscommand() function calls the JavaScript function moviename_DoFScommand in the HTML page containing the SWF file. The moviename is the name of the Flash Player as assigned by the NAME attribute of the EMBED tag or the ID property of the OBJECT tag.”

  22. Ah, very interesting. I’ll see if i can do some tests and possibly add in the name attribute to the embed tag.

    Thanks for the info.

  23. What a gem this is, thank you. I’ve used the satay method to date. Well aware of its limitations and not willing to create placeholder movies your method could see Flash use being expanded in my standards-compliant projects.

  24. Ok Geoff… but you don’t have to think at that extra bunch of floating XML as an extra bunch of floating XML.
    You should think at that as an opportunity of setting variables about your swf behaviour on the fly, without recompiling.
    Well, of course you should be able to serve yor swf with a custom library… but… think at that now!
    Wow… it’s a golden bunch of xml… Ok… The detection… sorry… but I believe in alternate content. You should be able to serve the same contents in an alternate way. If you don’t, you’re out (not really you, of course… an ipothethic reader)… And if you do, but not in a W3C way, well, you’re also out.
    If I disable JS form my browser, there’s a mess. That’s bad… Isn’t it?

  25. This is a great solution. I am utilizing this in a current project. It works great in IE on PC’s. Has there been any reported issues with other browsers or with Macs? I have not had an opportunity to test it with other stuff yet.

  26. It works great on all the mac browsers I’ve tested it on (and I developed it on a Powerbook). Tested in Firefox, Mozilla, Safari, IE 5, Opera (6 and 7), and Camino. All work great.

  27. Thanks Geoff. One more quick question. I am using this to load in a Flash clip into a div. Is it possible to utilize the redirect feature to load a gif in the div if Flash fails to load or if it is not detected as opposed to redirecting the page? I am limited in my Javascript knowledge.

  28. Well you can either print alternate content, or redirect them to a different page – it sounds like you just want to spit out a .gif image instead, so you would do it like this:

    myFlashObject.altTxt = "<img src="images/altcontent.gif" alt="Alt text" />";

  29. Just a tiny little thing… In the “flashObject.html” template file (the one that is outside the “sample” folder), the CDATA declaration is incorrect. It is “

  30. Thanks Geoff. I have tried the following code and it works to load a default jpg if Flash is not installed but I have one problem I hope you can adise.

    var myFlashObject = new FlashObject(firstImage, "FlashMovie", "760", "185", 6, "#999999");
    myFlashObject.addParam("wmode", "Opaque");
    myFlashObject.altTxt = "<img src='AEHF-bkg.jpg'/>";
    myFlashObject.write('flashTable');
    FlashMovie.LoadMovie(4, "footerBanner.swf");

    The following line of code returns an “Flashmovie is undefined” error when Flash in not loaded.

    FlashMovie.LoadMovie(4, “footerBanner.swf”);

    I assume due to the fact that the FlashObject was not created since Flash was not installed. It seems I need to encase this line with some sort of if statement so this line does not get addressed when Flash is not present. I have tried all sorts of things but nothing seems to work. Do you have any ideas. I use “FlashMovie.loadMovie(x,”xxxx.swf”) throughout the page for multiple loading of Flash elements since it allows me to load to specific levels or I would simply utilize the FlashObject.write throughout.

  31. You are on the right track: it’s failing because if they don’t have Flash installed, the object/embed tag doesn’t get written to the page, so your next js call will fail. You could do something easy like this:

    if (FlashMovie) { // code here }

    Or a better solution would be to pass in the movie to load via the Flashvars parameter, and have your holder .swf file load in the movie that is passed in. Not all browsers will support talking to Flash movies with Javascript like you are doing, so the Flashvars would be a better solution in the long run.

    It would look something like this:

    var myFlashObject = new FlashObject(firstImage, “FlashMovie", “760″, “185″, 6, “#999999″);
    myFlashObject.addParam("wmode", “Opaque");
    myFlashObject.addVariable("targetswf", "footerBanner.swf");
    myFlashObject.altTxt = "<img src='myjpg.jpg' alt='You need Flash!' />";
    myFlashObject.write('flashTable');

    Then, in your Flash movie, you just do a loadMovie(4, _root.targetswf);

  32. Just an idea…
    Having made use of this great script to handle Flash objects throughout a site, with a little extra js and a cookie it would be possible to give visitors a Flash on/off button. The script executes as normal in the absence of a cookie. Click “Flash Off” and a cookie is created which makes Flash player version = 9,9,9,9,9 and the page refreshes. Click “Flash On” the cookie is deleted and page refreshes.
    Well that’s the theory. I just wish I knew how to code it.

  33. Thanks Geoff. Your solution seems good for my application. I have a dilemma somewhat. The initial Flash object is a small file that loads in the middle of a very complicated page and I had hoped to use the html onLoad function to call a javascript function that would inturm use the loadMovie function to load in the large major Flash clip after the page loads. With the concern over using loadMovie from javascript is their another way to sucessfuilly load a large clip at onLoad into a layer or clip in the root Flash loaded earlier in the page?

  34. A simpler possibility. Can Javascript control the FlashObject stopping and or starting from a javascript funtion in the page html onload function? The idea is the initial clip loads and plays to frame 10 and stops. The pages finishes loading and the html Onload function fires a javascript function that inturn tells the FlashObject clip to resume play. The clip goes to the next frame and loads the large clip into an empty clip on its own. Is this possible?

  35. You could just call myFlashObject.write() when the page loads – you might want to place some content in the div you are replacing though, something like “Flash content loading, please wait.” or something like that, then when you call the write() method, use the id of the object with the placeholder text in it, and it will be replaced with the Flash content.

    David,

    Yeah, that wouldn’t be too hard to add in there, but I don’t think it has much of a place as far as general use goes. I would leave functionality like that for browser extensions or other user installed extras.

  36. Geoff. Yet one more question. Is it possible to utilize TGotoFrame(target,frame) and TPlay(target) to control an instance of myFlashObject to be able to goto-and-stop or goto-and-play a Flash clip with any higher degree of browser support than loadMovie offers. If not is there any more reliable way to do so? Thanks for all of the help.

  37. The Flash on/off cookie thingy was just an idea for an add-on I wanted to try. I’m sure users will come up with many other ways of customizing your script to do interesting things.
    I have a few visitors with ancient computers who’d like to disable Flash but are not tecky enough to configure their browser settings.
    Anyway, if anyone’s interested, I’ve got it working now. Click my link to see. Click the Flash logo for non-Flash content.
    I’ve added the cookie handling code to the flashobject JS. On the homepage and navigator frame the script returns alternative content when A. Flash Player present and correct, B. Flash Player disabled by cookie, C. Flash Player missing or version too old.
    Thanks again for the script Geoff.

  38. Geoff.

    I have a problem with swapping the the flash movies over in one of my div’s.
    Everything is working fine untill I load the dam thing up in IE6.

    I currently have two flash movies loaded on one page using the method you have devised. My first movie is like a header and contains navigation buttons. the second movie is directly below it in another div loaded using the same method. I am using this div to hold the main content of my site and the nav movie to swap the flash movies.

    From the buttons in the nav movie a function is called that triggers the getURL function. eg.

    loadNewContent = function (newPage) {
    var urlLink:String = "flash/madianGraphics"+newPage+"Page.swf";
    getURL("javascript:var bodyFlashObject = new FlashObject('"+urlLink+"', 'siteBody', '756', '701', 7, '#BCB9AE');");
    getURL("javascript:bodyFlashObject.addParam('menu', 'false');");
    getURL("javascript:bodyFlashObject.write('flashBody');");
    };

    This works great in every browser but when tested in IE6 all I get is a white flicker (the reload of the div) then the original swift movie that was loaded from the HTML code reappears (not loading different swift file).

    Do you have any idea why IE6 is doing this? Is it a SP2 security issue?

    cheers

  39. Damian and Geoff:

    How multi-browser reliable is getURL(“javascript:blahblah()”) calls from Flash to run Javascript functions and stacking div’s. Your approach may help me solve my Flash problem and offer another solution to avoiding using “LoadMovie” and or GotoFrame methods with their browser limitations.

    Thanks

  40. Damian: I’m not sure why that would happen. It could just be the way that Internet Explorer handles Flash movies – or a general ActiveX problem. An alternative would be to put your content inside a iframe and just switch out the page inside there. This would have the added bonus of the back button working as expected for your users.

    Dan: As far as I know, the only browser that had problems with that was IE 4.5 on the Mac platform… You might want to do a little googling though to be sure. I’ve never really had problems with it, and still use it very often in projects these days.

  41. Geoff & Dan

    Solved the issue with IE6 not swapping movies. Not sure why it does it, might be something to do with relative pathing in IE. My solution was to take the code out of flash and place in the HTML page. Flash then calls this function still using getURL(“javascript:newContent(‘”+urlLink+”‘);”) passing it the URL required that is stored in ‘urlLink’.

    The html code turned out as follows:

    <script type="text/javascript">
    // <![CDATA[
    var bodyFlashObject = new FlashObject("flash/madianGraphicsHomePage.swf", "siteBody", "756", "701", 7, "#BCB9AE");
    bodyFlashObject.addParam("menu", "false");
    bodyFlashObject.write('flashBody');
    // ]]>
    newContent = function(myContent) {
    // <![CDATA[
    var bodyFlashObject = new FlashObject(myContent, "siteBody", "756", "701", 7, "#BCB9AE");
    bodyFlashObject.addParam("menu", "false");
    bodyFlashObject.write("flashBody");
    // ]]>
    }
    </script>

    Only one small annoyance, IE gives a flicker of white when the flash movie changes. All other browsers are seamless with the transition. Can’t have everything hay.

    So now you can change flash movies without using loadMovies(), using frames or iFrames (thanks for the idea but Geoff) or having to manually refresh the page.

    For those who want to see this in effect visit http://www.madiangraphics.com/v2.0/ This site is under construction and will eventually move to the http://www.madiangraphics.com

  42. Damian

    I was having a similar problem with loading a jpg in the lower div layer and loading Flash with the OnLoad function in a higher div layer and I was getting the momentary flicker as Flash loaded. In my case I simply put the jpg in the higher level layer and loaded Flash below it. In frame two of my Flash I use GetURL to call a Javascript function that changes the style attribute of the top layer to ‘hidden’. Presto clean loading Flash. This might also work for you.

    Geoff:

    Do you know if this line of code is relatively multi-browser usable:
    ImageTable.style.backgroundImage=’url(JWST-Pre.jpg)’;
    This works In IE but I am not sure about other browsers.

    Is there any way to replace the ‘URL(JWST-Pre.jpg)’ with a variable?
    I have searched everywhere for an answer to that question to no avail.

    I am using a Javascript array to select the specific image to load into the layer background by utilizing the above ‘style’ method while the page is initially loading so I have it displaying while the page finishes loading and Flash loads in the layer below at onload.

    Also, since I already have a jpg in place above the Flash layer is it possible to simply turn off the Flash detect so if Flash fails the jpg simply stays in place with no interuption or notification to the viewer?

    Cheers

  43. I noticed that the detection wasn’t working quite right on a linux version of Firefox with no plugins installed. It threw an error about execScript not being a valid function (line 148, in the getFlashVersion function). It turns out that the test for navigator.plugins && navigator.plugins.length a few lines up was returning false because the length was zero, and so it ended up in the IE branch of that function. Might want to consider dropping the check for plugins.length, or maybe test it as a boolean using ===.

  44. Interesting, I’ll patch that up soon. Thanks for pointing it out. I wonder if the same thing happens on other platforms and why nobody has seen that yet – does firefox come with any plugins installed by default on platforms other than linux?

  45. I’ve seen a few criticisms elsewhere of your method because it doesn’t work with JavaScript disabled.

    So, to solve the issue of JavaScript being disabled, it’s quite simple (and valid XHTML) to include noscript tags also containing the replacement content, therefore catering for nearly all possible combinations of Flash, No Flash, and JavaScript.

    The only situation it doesn’t cater for is Flash installed but JavaScript disabled, although if you really wanted to, you could combine the noscript tags with this method, although the combination of all this stuff is veering off quite wildly into bloat territory, and I haven’t actually tested it to be sure it would work as intended.

    “Horses for courses”, as the saying goes, and I still don’t believe there is a 100% satisfactory solution available for this problem, although yours is the best I’ve seen so far.

    Since my current project only has non-essential Flash animations with replacement static images for when Flash isn’t present, I’m using your method here combined with some noscript tags and the replacement content also in the noscript tags, as that covers enough bases without as much bloat.

    Thanks for your work, it’s good stuff!

  46. What I’ve been doing to get around the “JS Disabled” problem, is:

    Create your content as if your Flash content is all plain images the same size your Flash movie is (or divs sized the same size as the Flash content. Then use the FlashObject code to replace that content. This way you don’t need noscript tags at all – since your content is there to begin with, if they have js disabled the page will display as intended.

    I’ve been planning a little tutorial on best pratices from what I’ve learned from impelmenting this embed method on a few high traffic websites – snapple.com and the new Jetta mini site included (It has worked out great and really stands up to the test of high traffic websites).

    Also keep in mind that every other XHTML valid method of embedding Flash that I have seen other than using JS (aside from the one that requires the extra XML file for each Flash movie) will not work 100% in Safari since it will ignore the param tags.

  48. Cool, thanks for posting that. It looks like the Safari screen grab isn’t showing the Flash or the upgrade message, but I just double checked and it does work in Safari too. I wonder if it’s a bug in how Browsercam takes the screen grabs.

  49. I cannot begin to thank you enough! Mac compliancy is the bane of my mortal existence, and scripts like these at lease alleviate some of that.

    You are a Saint!!!

  50. if i wanted to pass a variable to the swf that would display the section of the swf according to the page (normally like blah.swf?section=home) i need to use addVariable, correct? i’ve tried doing this with both addVariable and addParam and i can’t get either to work. i’m a javascript noob and apparently not fully understanding how to accomplish this.

Comments are closed.