If you’ve used an iPhone, you’ve noticed that Flash content cannot be displayed. Also, for users that have Flash turned off, those using screen readers, and for Search Engines, animation cannot be seen or indexed. However, there is a great method we’ve been using to display content that will work for everyone.

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;
}