Craig Francis

JS Flash Replace

If you want to use Flash on your website, but you also want to provide an alternative for those users who don't have Flash installed, then you can use this bit of unobtrusive JavaScript.

Example

Below you should be able to see either the Flash object, or its alternative.

This is the Flash alternative.

The code

First you need to create your webpage with the Flash alternative wrapped in a simple <div>. This needs to have a unique ID so its contents can be replaced later...

<div id="flashExample">
<p>This is the Flash alternative.</p>
</div>

Next, you need to download my script.js and flashReplace.js files, then create an additional configuration file like flashExample.js (explained later) and include them all in the pages <head>, like so:

<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="flashReplace.js"></script>
<script type="text/javascript" src="flashExample.js"></script>

Then in your configuration file (flashExample.js), you need to change the general setup:

  1. The requireVersion line specifies the minimum Flash version required on your clients computer. If this line is deleted, the default of version '6' is used.
  2. The multiple textLink lines specify the text used in the disable/enable links, typically these can be deleted.

Still in the configuration file, the addFlashObject line needs to be updated... it is possible to copy this line multiple times, but for each one, the order of the parameters is:

  1. The element ID for the Flash object holder (flashExample).
  2. The URL of the Flash object (/a/swf/example.swf).
  3. The width of the Flash object (140).
  4. The height of the Flash object (20).
  5. The background colour of the Flash object (transparent).

Flash disable links

If you want to have links to enable or disable the Flash on your website, create an element with an id of 'flashDisableLinks', like so:

<p id="flashDisableLinks"></p>

Dependancy note

You don't really need the full scripts.js file, as we only use the addLoadEvent function. But it does contain other functions which are handy to have lying around.

Additional notes

The background colour is typically specified as 'transparent', but it is perfectly valid to use a hexadecimal colour like '#F00'.

The elements which make up the Flash alternative are not actually deleted from the DOM, instead its off-screened with CSS, so it is possible to use it in the print style sheet.

If use the flash detection object (which has issues in Flash 10), you can also download its source code.

Any feedback would be greatly appreciated. If you would like to use this code, please read the licence it is released under.