Providing Alternative Content for Flash

When developing web spaces in Adobe Flash, it is important to keep alternative content in mind. Alternative content is what will be displayed in the Flash Object’s place if no Flash player is found to be present in the user’s browser. Let’s start from the beginning.
How do I embed my Flash content so that it can be degraded gracefully?

The most standard way is to use the script “SWFobject.js.” SWFobject helps detect whether or not the user’s browser has flash installed. You can download the latest version as well as view documentation here: http://code.google.com/p/swfobject/

*It is important to review documentation before using a script written by someone else. It will explain this embed process in greater detail, and offer a reference of every parameter you are allowed to set on your Flash content. Very useful stuff.

First, open your text editor and scroll to the location where you want to embed Flash content. Paste in the code below as I explain each section’s purpose. There is a full version of the code at the end of the post for your insta copy-ing pleasure.

Embed the Swfobject.js script. This tells your website to load the swfobject javascript file. This is super important as all the fucntions we’ll be using come from here, and it won’t work without it. It is up to you to upload this file onto your web server and type the correct location here.


This script sets up the parameters for your Flash content. The “expressInstall.swf” is another file you will need to upload to your web server in order to get SWFobject to function propery. Note the parameter named “wmode.” Setting this to transparent is necessary if your Flash content has a transparent background, and is meant to be on top of your static web content.


Here is where your actual .swf is embedded. Make sure to set the height and width to the correct dimensions of your .swf file. Again, the wmode setting is present in the actual embed as well. Don’t forget to set it correctly.


	
	 

This IE only comment hack is in place to override Internet Explorer’s Compatibilty View. Normally, IE users are forced to click this button to see any Flash content. This section of the code takes care of that for us, but remember to set the parameters to be the same as previous lines.

    
		
		

This is the Alternative Content Div. Put your non-Flash content here and it will be loaded if no Flash player is found on the user’s browser.

Alt Content Here

Closing the IE object.

	
	

Close the main object.

That’s it! Your flash file is embedded on your site. You may want to wrap all this in a

so you can reposition the content at will. Or add some z-index values and have your Flash content be the background. It’s up to YOUR creativity!

Now to build your alternative Flash Content. The most common fallback content is a static image, but you may want to opt for something more robust. This is where non-Flash web technologies come in to play. In my next posts we’ll explore the realms of Javascript/HTML5 in order to deliver Flash-like interactivity and animation in your alternative content section. Thanks for reading!

-Zack Smith
Interactive Developer at Graphite Lab

Copy-friendly code:





	
	 
    
		
		
Alt Content Here
By |2012-05-16T15:29:28+00:00May 16th, 2012|Uncategorized, Web Design|1 Comment

One Comment

  1. Jose April 27, 2015 at 11:07 am - Reply

    What if we are working on html5? How do we add an alternative content to a swf file in an embed element?

Leave A Comment