Flash, HTML pages, and SWFAddress

This is my solution for using Flash, SWFAddress, and HTML fall-back pages. It is more quick and dirty than “the right” solution, but it falls firmly into the “works for me” category.

I use SWFObject (link) to detect and execute a Flash site and to fall back to a non-Flash site when the browser cannot handle Flash

Typically, the code will look like the following:

 <script type="text/javascript" src="./js/swfobject.js"></script>
 <script type="text/javascript">
  var flashvars = {};
  var params = {};
  params.menu = "false";
  params.quality = "best";
  params.allowfullscreen = "false";
  params.wmode ="transparent";
  var attributes = {};
  attributes.align = "TL";
  swfobject.embedSWF("website.swf", "nonflash_content", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
 </script>

Extremely straightforward, except when you want to incorporate something like SWFAddress (link).

Say you have multiple pages:

http://www.site.com/index.html
http://www.site.com/media.html
http://www.site.com/contact.html

For the index page you can use the above SWFObject method because you will load the Flash file as your main homepage.

When you want to go directly to the media.html part of the Flash file you can pass a variable to the Flash movie to change the start point of your Flash file. All pretty straightforward. Throw in SWFAddress (link) and you have a way of handling changing the URL of the page while you browse the Flash site.

ie.

http://www.site.com/#/index.html
http://www.site.com/#/media.html
http://www.site.com/#/contact.html

Now, say you want to add a non-Flash representation of media.html. With SWFObject, you can redirect to the correct page, but if you’re using SWFAddress as well, you may run into a problem that manifests as incorrect URLS as SWFAddress handles URL address changes by appending onto the base URL:

http://www.site.com/media.html/#/contact.html

What would be nice is when you go to http://www.site.com/media.html is for the page to be smart enough to detect whether the browser can handle Flash or if it needs to fall back to the HTML page.

Easiest way I found was to just do a windows.location.replace if Flash is detected.

<script type="text/javascript">

   if (swfobject.hasFlashPlayerVersion("9")) {
     window.location.replace("http://www.site.com/#/media.html");
   }

 </script>

So, the logic follows this path:

If Flash capable, then redirect to the main page with the appropriate appended SWFAddress logic (ie. index.html/#/media.html ) which will use the logic of SWFAddress to set the site at the right point in the Flash movie.

Otherwise, it will just ignore the Flash detection and display the HTML page as is.

SWFAddress will be explained in greater detail in another post.