(Site Identification)

'Eye' Focus: Web Support Tutorials

Shockwave/Flash Loader

The purpose of this Shockwave/Flash Loader is to ensure that your visitor always gets your message, regardless of browser support. This loader used JavaScript to test for proper support of your SWF file. It the browser fails the support tests, then an alternative presentation is provided, perhaps written in Javascript. If the browser fails support of JavaScript, then a second alternative is provided in plain HTML.

If you use this approach properly your message will never be missed because the visitor's browser could not display your message.

Download the Shockwave/Flash Loader now. It contains this example and all the files you will need to get started.

SWF Example Demo

Below you should see a sample SWF animation. This file is used by Macromedia to demonstrate that the browser has a compatible, version 7, Flash player installed and functional. If you do not see this animation, then you should see an appropriate 'alternative' message.


Your browser does not currently support the Javascript so support for Shockwave/Flash files could not be tested.

If you examine the source of this page, since it is a tutorial, I have two different messages to display if the SWF file cannot load.

  1. The JavaScript works but the SWF is not supported:

    The JavaScript HTML informs the visitor that the SWF is not supported, this could just as easily be a JavaScript version of your SWF if you so choose.

  2. The JavaScript is not supported:

    The NOSCRIPT HTML informs the visitor that the JavaScript is not supported, this would be the plain HTML version of your message since neither the SWF or JavaScript works.

I also decided to use a background image, with HTML content over it, to present my messages. The point of this script is to make sure that your message is not missed. If you only rely on the SWF to deliver your message, and it is not supported, then you have missed your opportunity to reach the visitor.

(to Top) Web Page Sample Code

This is a an example of how you should call the SWFloader function. Simply replace the information in all capital letters with the appropriate information. For a more specific example you can look at the source code of this page.

<script language="JavaScript1.1" type="text/javascript"><!--
var html = "JAVASCRIPT_ENCODED_HTML_EQUIVALENT_FOR_SWF_FILE";
SWFloader("CSS_ID", "URL_OF_SWF_FILE", VERSION, WIDTH, HEIGHT, "#COLOR", html);
// --></script><noscript><div id="CSS_ID"
style="position:relative; margin:0px auto; width:WIDTHpx; height:HEIGHTpx; background-color:#COLOR;">
HTML_EQUIVALENT_FOR_SWF_FILE
</div></noscript>

Always think and program with accessibility in mind and you will reach more customers.


[Updated: Sunday, November 18, 2007]