EMBEDDING FLASH

There seems to be a lot of confusion about the code needed to properly embed Flash objects within a website: it's the most frequently asked question at this site's forum. The rise of social networking sites like Myspace (who filter lots of codes) and the Eolas patent enforcement have thrown quite some confusion into the mix. In this tutorial, I'll shortly align the best options to embed Flash.

Single embed code

Let's start with the easiest way to embed Flash in a website, with a single embed code. We presume we have a mediaplayer.swf file located in the same directory as the HTML page it's embedded in

<embed

src="mediaplayer.swf"

width="300"

height="300"

allowscriptaccess="always"

allowfullscreen="true"

/>

Of these parameters, the most important one is the src. This contains the location of the SWF file to include, here mediaplayer.swf. If the SWF file resides in another directory, we can point to it with a relative path (eg. ../flash/mediaplayer.swf or an absolute path (eg. http://www.myserver.com/flash/mediaplayer.swf).

The width and height parameters comply with the width and height of the SWF in pixels, but they can also be entered as a percentage of the SWF container (eg: width="100%").

Last, the allowscriptaccess and allowfullscreen parameters tell the browser the SWF can both communicate with external scripts (and link to external pages) and use the new fullscreen mode. If you do not want to allow this, you can remove both parameters, since they default to respectively sameDomain and false.

Extra Parameters

The code listed above uses only a couple of the available parameters. A complete list of them can be found at Adobe's website, but let's show the most interesting ones here:

1. bgcolor (#rrggbb): set the SWF background color using a hexadecimal value.
2. flashvars (variables): the variables placed here will be loaded in the SWF.
3. menu (true, false): set this to false to hide most of the rightclick menu.
4. wmode (opaque, transparent, window): set this to either transparent or opaque to fix z-index or flickering issues.

Flashvars

Of the above parameters, the most interesting one is flashvars, which allows you to send startup variables to the SWF. This site's FLV Media Player and Image Rotator support a large number of these variables, making them easy to customize and reuse. Let's give our example mediaplayer.swf three flashvars; one for the list to play, one for the background color and one for automatically starting the song:

<embed

src="mediaplayer.swf"

width="300"

height="300"

allowscriptaccess="always"

allowfullscreen="true"

flashvars="file=playlist.xml&backcolor=0x000000&autostart=true"

/>

As you can see, flashvars are entered as a single string, with an = symbol separating the name and value and an "&" symbol separating subsequent flashvars. There's no limit to the number of flashvars you can add to the embed code. Once more note that the FLV Media Player and Image Rotator also support quite a few of them.

Flashvars problems

Three problems related to flashvars often cause them not to load. The first relates to relative linking of files. When linking to MP3, image and XML files, you should always start from the location of the HTML in which the SWF is embedded. So, in the previous example, if the SWF was to be put in a subdirectory, the flashvar pointing to the playlist would remain to be file=playlist.xml and not file=../playlist.xml! There's an exception: the path of FLV files should be given relatively from the SWF file. In order to prevent confusion, you can always point to files using an absolute URL (including the http://www part).

The second problem relates to the importing of XML files. Due to security restrictions, Flash can only import XML files if they reside on the same domain as the SWF file. So, in our mediaplayer example, if the SWF is located in the domain www.myserver.com the playlist.xml should also reside on www.myserver.com. A workaround for this is to use a simple crossdomain.xml file, which should be installed in the root of the site that contains the XML. Here's the one from YouTube.

The third problem relates to the three symbols ?, = and &. Since they are used to stack the flashvars, they cannot be used in the flashvars themselves. By escaping these vars, the problem can be solved. Therefore, replace the three symbols with their escaped strings and unescape() them again in the SWF:

1. ? → %3F
2. = → %3D
3. & → %26

Eolas, XHTML & javascript

In 2005, a large embed problem arised after a small company named Eolas filed (and won) a lawsuit against Microsoft. Eolas enforced a patent on automatically embedding external applications (like Flash) in webpages. As a result, Microsoft updated Internet Explorer: you'll see a grey border appearing around an SWF when you move your mouse over it. Before interacting with it, you first have to click once to activate it. Very annoying.

A second problem with the regular <embed> code is that it's not a valid XHTML tag. So, if you want to build a standards-compliant, accessible website, you cannot use it.

A workaround for both these problems is the usage of javascript for embedding the Flash content. After a webpage has loaded you can insert the <embed> tag with a small javascript, circumventing both the Eolas and XHTML problems. As a bonus, you can use javascript to check if the correct Flash plugin is available on your visitor's computers. If not, alternative content can be loaded.

SWFObject

A very good, freely available javascript to use for this embed proces, is the SWFObject script by Geoff Stearns. It's used extensively on this site, wherever an SWF file is embedded. To use it, first upload the swfobject.js to your server and include it in the <head> section of your website:

<script type="text/javascript" src="swfobject.js"></script>

Second, give the HTML element in which the SWF should be placed a unique id:

<div id="flashbanner">this will be replaced by the SWF.</div>

Third, instantiate an SWFObject below the named HTML element and put all parameters in there (for a full list of parameters, read the SWFObject Website):

<script type="text/javascript">

var so = new SWFObject('mp3player.swf','mpl','300','250','7');

so.addParam('allowfullscreen','true');

so.addVariable('file','playlist.xml');

so.addVariable('backcolor','0x000000');

so.addVariable('autostart','true');

so.write('flashbanner');

</script>

The SWFObject instance will create the code needed to embed the mp3player.swf. It sets it's dimensions to 300 by 250 pixels and also sends the flashvars for the file, backcolor and autostart variables (with a nice, separate line per flashvar). Finally, the instance replaces the text by the SWF, so we can see a Flash movie directly embedded in our page, without borders and with XHTML validity!

Wrapping Up

The implementation of SWFObject wraps up this general overview of the embedding of Flash in websites. For questions or hints, or in case I've forgotten anything, please join this site's forum. If you want to create specific embed codes for the FLV Media Player or the Image Rotator, take a look at the setup wizard, which can automatically generate it.