First, let’s say you have a page with a Flash animation on it. For this example, we’re going to use our project management tool, Projecturf, to explain how we do this. If you look at the site in a browser with Flash installed, you’ll notice that we have animation to show the user various parts of the application in a cool, dynamic way. Those screenshots have animated talk bubbles with some text that explain each section. All of this is useful information for the user and a Search Engine. However, it’s in Flash. If you’re on an iPhone, you would see a big blank box where the Flash is suppose to be when you visit the website. This just won’t do.

Here’s the method we’re using. First, we use SWFObject (see our post about using SWFObject and Flashvars) to load the SWF. The SWF is displayed in a <div> tag using an ID. In addition to having the animated version, we have also taken a screenshot of what the first frame of the animation looks like (which we’ll use later). You can see it here. In addition, we have included the text that is inside the SWF within the <div> and have told it not to display on the page using CSS.

Here’s the logic of how this works. If the user is viewing the site in a browser with Flash installed, they will see the animation, which is on the very top layer. If the user is on an iPhone or does not have Flash installed, they will see the image that is sitting underneath in the <div> (which displays a completed, static site rather than a big blank spot where the animation should be). If a Search Engine crawls the site, it will read the content that is also in the <div>. This information is otherwise displayed in the image and/or animation. This has been a very effective method for ensuring maximum compatibility with multiple devices, browsers, user preferences, and Search Engines.

Below is the SWFObject code used to insert the Flash in the “flashBanner” <div> (note that SWFObject now has a cleaner, more updated way of inserting SWF files with Version 2)

1
2
3
4
5
6
7
8

<script type="text/javascript">
    // <![CDATA[
        var so = new SWFObject("flash/pt_home.swf", "Home", "950", "604", "8", "#202020");
     	so.addParam("wmode", "transparent");
    	so.useExpressInstall('flash/expressinstall.swf');
    	so.write("flashBanner");
    // ]]>
</script>

Below is the code used in the HTML file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<div id="flashBanner">
     <img src="images/projecturf-screenCaptures.jpg" alt="Projecturf Screen Captures" width="950" height="604" />
	<h2>Projects</h2>
	<p>Create projects in a snap! Your master calendar shows all milestones on all projects.</p>
 
	<h2>Dashboard</h2>
	<p>Post announcements, update the project brief, and follow the latest activities.</p>
 
	<h2>Milestones</h2>
	<p>Calendar important milestones, set deadlines, and assign to team members.</p>
 
	<h2>Tasks</h2>
	<p>Quickly create tasks, associate them with milestones, assign responsibility, and track progress.</p>
 
	<h2>Timecard</h2>
	<p>Track billable time, export to excel, and send it to project managers or clients.</p>
 
	<h2>Documents</h2>
	<p>Share documents without storage limits and organize by folders.</p>
 
	<h2>Designs</h2>
	<p>Upload, share, rate, and get design concepts approved.</p>
 
	<h2>Development</h2>
	<p>Share your development work using your servers and log progress.</p>
 
	<h2>Discussions</h2>
	<p>Collaborate, discuss important topics, create threads, and comment on documents and designs.</p>
 
	<h2>Search</h2>
	<p>Quickly find information and have it segmented by section for you automatically.</p>
 
	<h2>Tools</h2>
	<p>Use the Project Completion Report and dynamic Gantt charts for status reports.</p>
 
	<h2>Contacts</h2>
	<p>Manage project teams, view contact cards, and change permission levels.</p>
 
	<h2>Address Book</h2>
	<p>Import contacts into your address book to quickly create project teams.</p>
 
	<h2>Personalization</h2>
	<p>Personalize Projecturf with a color theme, your own logo, a private Web address, and more.</p>
 
	<h2>Systems</h2>
	<p>Use a single login to access all your Projecturf accounts.</p>
</div><!-- !end flashBanner -->

Below is the code used in the CSS file to hide the content from users who can already see it in the animation

1
2
3

#flashBanner p, #flashBanner h2 {
	display: none;
}

Lately, we’ve started to use Flashvars as opposed to external XML files to generate the content in the Flash files. We really like this approach for a few reasons. First, the content is in the HTML page directly, which means there is one less file to manage. Second (and this is a big one), if your SWF looks for an XML file to load content, the browser tends to cache that content. So the next time you visit the page, you will see the cached content even if you’ve replaced and updated your XML file. In this situation, the user has to manually clear their cache and reload the page to see the new content. The problem here is that most users don’t clear their cache all that often. So you run the risk of users seeing old, outdated content, even though you’ve spent the time to update it. So our solution recently has been to use Flashvars when we can.

A good example of this can be seen on our new website. The panels right underneath the clouds on the top of all the pages have text in them. They have a headline, sub-header, and a paragraph of text. The headline and sub-header are part of the SWF file and thus require us to either use an XML file, put the text directly in the Flash file itself (not very friendly for updates), or use Flashvars. Here’s how we did it (in the <head> of our document):

1
2
3
4
5
6
7

<script src="js/swfobject.js" type="text/javascript"></script> <!-- Load SWFObject -->
<script type="text/javascript">
		var flashvars = {mainTitle: "Functional, interactive design.", subTitle: "Three words that mean more to us than you'd think."};
		var params = {wmode: "transparent", allowFullScreen: "false"};
		var attributes = {};
		swfobject.embedSWF("flash/workheader.swf", "flash-work", "950", "195", "9.0.0", "flash/expressInstall.swf", flashvars, params, attributes);
</script>

You need to be using the latest version of SWFObject (version 2) to do this. The benefits of using Flashvars is that the browser shouldn’t cache old XML data, it’s easier to maintain (i.e. less files to work with), and it’s written in the HTML document directly.