Flash HTML Publishing Templates

If you develop with Flash for the web, you are probably already aware of SWFObject. According to its project page, “SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.”

Sounds great, right? It really is! There’s even a semi-handy application that you can use to generate the appropriate code for embedding your flash content. Of course, I say “semi-handy” because even once you’ve downloaded SWFObject and configured your SWF using the generator, you’ve still gone through a handful of extra steps just to get your content embedded. To put this situation in the parlance of a late-night informercial, “There’s got to be a better way!”

If you haven’t used SWFObject in the past, or even if you have, you’re probably aware that Flash offers a number of publishing templates for embedding SWF files in HTML documents. The interface for this functionality looks like this:

Did you know that you can modify the list of items in the “Template” dropdown? In fact, it’s really quite simple. If you navigate to…

[platform dependent path to Flash configuration files]../en/Configuration/HTML/

…you’ll find HTML documents corresponding to the publish templates you see in Flash. If you open these files, you’ll notice code that looks something like this:


$TTFlash Only
$DS
Display Adobe SWF file in HTML.
$DF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
$CS
<title>$TI</title>
</head>
<body bgcolor="$BG">
<!--url's used in the movie-->
$MU
<!--text used in the movie-->
$MT
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="$WI" height="$HE" id="$TI" align="$HA">
<param name="allowScriptAccess" value="sameDomain" />
$PO
<embed $PEwidth="$WI" height="$HE" name="$TI" align="$HA" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</body>
</html>

You may be wondering what those strange sigils represent. Adobe has an article explaining their functionality and how you can use them in your own publishing templates, so I’m not going to go into heavy explanations here.

What does this all mean for you? It means you can write your own publishing template that allow you to publish your content using SWFObject just by using the publishing template dropdown menu. I’ve even provided a few variations of the template you’ll need.

You can download my templates and use them yourself. There are four files included in this archive.

SWFObject_D.html: Publishes your flash file using the dynamic implementation of SWFObject.
SWFObject_S.html: Publishes your flash file using the static implementation of SWFObject.
SWFObject_D_external.html: Publishes your flash file using the dynamic implementation of SWFObject, and downloads SWFObject from its google code hosted location.
SWFObject_S_external.html: Publishes your flash file using the static implementation of SWFObject, and downloads SWFObject from its google code hosted location.

For the first two publishing templates, you’ll need to provide your own copy of SWFObject in the same directory where your HTML file resides. For the latter two, you don’t need to have a copy of SWFObject at all! All four of these templates will, however, require your own copy of “expressInstall.swf” if you’d like to provide that functionality.

Once you’ve downloaded the archive, simply unzip it into…

[platform dependent path to Flash configuration files]../en/Configuration/HTML/

…and relaunch flash if you haven’t already. If you’ve done everything correctly, you should see this next time you check your dropdown menu of publishing templates:

And there you have it. Simple SWFObject publishing in as few steps as possible. If you have any suggestions or improvements, please let me know. Hopefully this makes your work easier and more productive.

agitcraft