Flash detection with swfobject and SSP Director
Slideshow Pro
It’s the ultimate goodie bag of flash component wonderfulness. Many of you probably use it already. If not, check it out here: www.slideshowpro.net.
The best part of SSP is that it also has a fantastic CMS, SSP Director, which you install on your server. The CMS is cheap, easy to install, runs pretty much anywhere and has an incredibly splashy, “web 2.0” interface, with drag and drop functionality and a beautiful, expensive-feeling vibe. I’ll be using SSP and SSP director as my example, but you can apply the same method of Flash detection to any flash movie in your websites! As long as it’s got the file extension .swf, you can use this method!
Why detect Flash at all?
Flash detection is a very important thing. I wish that all visitors had a current version of the flash player. I also wish that I could eat ice cream 3 meals a day, but that’s just not reality. We want to make sure visitors have a version of the Flash player to show content as we intend it.
There are many Flash detection systems available, including the one that comes built into the Adobe Suite, but I’m very partial to one called swfobject.
We’ll use a JavaScript called swfobject which travels very lightly on the internet and is just what we need for our ExpressionEngine website!
Create and upload your Flash movies
So you’ve installed SSP Director on your server and uploaded all your content! Great! You’ve created your Flash file (.swf) with your SSP component in it, and customized it using ActionScript. Even better! You’ve put your Flash file on the internet, either in a folder to hold all your flash content, or right there in the root of the web server.
Crossdomain Files
(Only for use with SSP Director files - if you have a regular SSP file or a regular .swf file, ignore this part completely. You don’t need a Crossdomain file at all…)
In order for SSP Director to function properly, you must upload a tiny XML file called a “Crossdomain” file to your server. You want to put this in the ROOT of your web server, where index.php lives, (whether your Flash files live in a separate folder or not.)
The purpose of Crossdomain.xml is simply to tell your SSP Director Flash movie (or movies) that it’s really ok to get your data out of your Director installation and put it into the componant in your swf. It tells your Flash movie that your domain name is in fact perfectly safe to talk to. You must have this file uploaded to your server before you can use your SSP Director movies. Many a designer has sat for hours in front of a “broken” SSP Director movie, wondering why it worked great locally and suddenly can’t find its content after it’s been uploaded to the server. To avoid frustration, make sure you’ve uploaded a properly formatted crossdomain.xml file to your server. To get a sample Crossdomain.xml file go to slideshowpro.net, sign in to the account center (the same place you went to purchase SSP and/or SSP Director) and fish around. You’ll find many cool samples to work with, including a sample crossdomain file.
Now let’s get some flash detection!
Get swfobject
You can find the SWF Object packages here:
http://code.google.com/p/swfobject/
You will need to download the swfobject 2_1 (the current version as of this writing) zip file and expand it someplace on your hard drive.
Inside the swfobject folder, you’ll find a file called “swfobject.js” which you need to upload to your server. I like to keep mine inside a folder called “scripts” so that I can keep all my little javascripts in one handy place, but you can put yours wherever you like. Just remember where you put it so you can adjust your paths later!
Also download the swfobject “generator” and unzip it.
The swfgenerator zip contains a single file called index.html. That’s it. Just one little file. But what a powerful little file it is!
Generate your swfobject markup
Open index.html.
Look at that! A handy markup generator!
You will need to fill in the required fields in the “SWFObject configuration section”.
Under Publishing Method, I select “Dynamic Publishing” so that I can show my Flash-less visitors my very own alternative content graphic that will prompt them to download the latest version of Flash and so that I can give myself a couple more options for doing so.
In the HTML container id field, type the name of the div that’s going to hold your alternative content and, eventually, your .swf. Mine is called “ssp”...
You’ll need to tell the generator the name of the div your Flash movie is going to live in. What happens is that the little Javascript replaces the alternative content with the Flash content at runtime. Thus it’s pretty important to get your nomenclature right, otherwise your JS won’t know where it’s supposed to be putting your Flash content. Mine is called “ssp” and the CSS has already been created, along with the rest of my template HTML. This step is very important. The javascript in your template will need to know which swf it’s sucking off the server and into your page, so leaving this blank, or filling it out with a typo can cause your js to get lost and stop working.
In the SWF definition section, you’ll need to tell swfobject the name of your Flash movie and how big it is. Mine is called “drawings.swf” and is 820x550.
If you click the little “more” link, you’ll see all kinds of parameter options for controlling the look of your Flash movie, including background color, quality, and looping. You can get really fancy with these if you want, but I’m going to leave mine pretty basic.
The only other thing I’m going to add in this section is a Flash content id, which, in this case is the same as the name of my content div, “ssp.”
In the HTML definition section, you’ll need to tell the generator what your doctype is and what character encoding your page uses. Make sure this matches the information already created with your template!
When you’re all done entering things, and answering the generator’s questions, click the Generate button.
You will see a tiny little HTML page in the generated output window. This is what we’re going to add to our template to make the whole thing go.
Create alternative content
If a user doesn’t have the correct version of Flash, you’ll need to prompt them to get it. The built in alternative content is a standard little “Get Flash” button.
I don’t like this button at all, so I’m going to make my own “Get Flash” image.
In Photoshop create a new graphic telling your visitors to download the latest version of Flash. Make it the same size as your .swf, so that you can avoid extra CSS.
Upload your new graphic to your images folder.
Integrate swfobject into your template
Now, open up your template in EE.
Copy and paste the appropriate chunks of markup into the appropriate places. Put the script stuff in the head of your document, where it belongs.
Change the path to the swfobject.js file so that it reflects the actual location of the file on your server. Mine in in a folder called /scripts, so I need to change the path so that it looks like the code below.
Change the embedSWF path to reflect the location of your .swf file. Mine in in a nice little folder called /flashfiles, so I need my template to reflect that.
<head>
<link rel="stylesheet" type="text/css" media="all" href="http://ee-developer.com/home?css=inc/screen" />
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};
attributes.id = "ssp";
swfobject.embedSWF("/flashfiles/drawings.swf", "swf", "820", "550", "9.0.0", false, flashvars, params, attributes);
</script>
</head>
Put the rest of the code inside the div you made to hold your flash content.
<div id="ssp">
<div id="my-flash-content">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="/images/mysiteimages/getflashcustom.jpg" alt="Get Adobe Flash player" />
</a>
</div>
</div>
Now I will change the paths to my alternative content so that my custom “download flash” graphic will show up in my template, instead of the default Adobe button.
Leave the link intact though, so that when visitors click on your “download flash” button they’ll be able to actually download Flash.
Save your template and test it!
You should have a nice SWF sitting right in your HTML page.
Test alternative content
The only way you’ll ever see the alternative content you made is if you don’t have the correct version of Flash installed. Bummer, right? So let’s do a little trick so we can see what we’re looking at!
In the
swfobject.embedSWF(”/flashfiles/drawings.swf”, “ssp”, “820”, “550”, “9.0.0”, false, flashvars, params, attributes);
line, change the version of Flash from the current version to a version that hasn’t been released yet. I’m going to change mine from 9.0.0 to 11.0.0.
Save your template and view it in your browser! Now you should be able to see your alternative content. Don’t forget to change it back!
That’s it, you just detected Flash and showed your visitors a nice SSP Director movie.
