Flash & iPhone Workaround

I recently had a client ask me to adjust her site to be iPhone-compatible.  The navigation of this site uses Flash to apply a cosmetic animation on the text, so her site wasn't navigable via iPhone or any other non-Flash equipped device. At first I thought I would advise her to forget about the slight effect that the Flash provided and change to a non-animated, but fully accessible navigation system.  But I knew she really liked this small detail of the site, so I thought I would try another way. ...are you using swfObject to embed your Flash content, anyway? Because you probably should be.  swfObject is an  XHTML-valid javascript  method of displaying Flash content without using unwieldy <embed> tags.  The script will fill any old <div> with your Flash, and changing the layout is as simple as adjusting the <div> with your style sheet.  It detects Flash player versions and will help a user upgrade or install the Flash player "in-window" if necessary.  It is a fantastic workaround for the annoying IE "Eolas patent dispute" requirement to "activate" Flash content by clicking it once before any buttons are active. And -- thanks to the way that it degrades gracefully -- swfObject lets you "hide" accessible content behind your Flash.  I often use text describing the Flash content to boost a page's search engine indexability. Though this text is visually replaced by swfobject.js, it remains in the source code when the page renders. In the case of the iPhone, the Flash is simply not displayed, and whatever originally was in the swfObject-specified <div> shows through. This is where you put a static but more-accessible version of the Flash image. You can include any kind of xhtml, links, images, or even embedded swfs. In this case I simply made an html-friendly version of the client's site navigation, placed it in the navigation <div> and specified that swfObject would replace that content with the Flash nav where possible.  Voila!  The client sees her subtle Flash nav effect on her home computer, and can use her site from her iPhone as well (with minimal visible difference, as the Flash effect was a rollover effect anyway). I have also used this trick to "hide" a jpg of a site's logo or header behind a Flash version... this way when viewing on the iPhone, that most important piece of your site (your identity) isn't lost! swfObject was created by Geoff Stearns. Click here to download the project from Google Code.

Tags: iphone, swfObject, flash, accessibility, javascript, iphonedev