iPhone Readiness – SWFObject Method

Steve —  1.4.2010 — 2 Comments

SWFObject

SWFObject has been around since October 2004 as a JavaScript method to detect not only the presence of the Flash Player, but minor versions of the Flash Player for feature readiness. Since then, it’s evolution has continued to add features that cover today’s ever-increasing code complexities. To get the SWFOjbect code as well as all other resources for this very useful tool, head over to http://code.google.com/p/swfobject/

As I stated in the overview article, this is my preferred method for Flash detection for the iPhone. This method is used on all of your SWFs and therefore inherently takes care of all detection and alternate content substitutions as part of the solution. In short, it’s simpler.

Obviously, the first thing to do is download the code and get it on your site. There are great instructions on the Google site on how to setup the include files and you also get some demo files that show how your code should look when using either the static or dynamic method.

I used hyper-linked images that looked similar to the Flash content as the alternate content so visually, there wasn’t much missing. Other than that, there isn’t much to it other than following the instructions and choosing the method that suits your content and situation better. There will probably be some trial and error that you’ll need to go through, but given an hour, you should have it just like you want it.

Here’s the JavaScript code on my example site (put inside <head> tag):

<script type=”text/javascript” src=”/Scripts/swfobject.js”></script> //the include JavaScript file
<!–Button 1 Code–>
<script type=”text/javascript”>
var flashvars = {};
var params = {};
params.wmode = “transparent”; //sets the SWF file to have a transparent background. Default is “opaque”
var attributes = {};
swfobject.embedSWF(“/assets/multimedia/PTT_Button1.swf”, “myContent1”, “174”, “40”, “9.0.0”, “”,  flashvars, params, attributes);
</script>
<!–Button 2 Code–>
<script type=”text/javascript”>
var flashvars = {};
var params = {};
params.wmode = “transparent”;
var attributes = {};
swfobject.embedSWF(“assets/multimedia/PTT_Button2.swf”, “myContent2”, “174”, “40”, “9.0.0”, “”,  flashvars, params, attributes);
</script>

And the associated content code (alternate content defined):

<!–Button 1–>
<div id=”myContent1″><a href=”html/FindTip.asp” style=”padding:4px”><img src=”assets/images/PTT_Button1.jpg” alt=”Defeat the Diaper | Find a Tip” width=”174″ height=”40″ border=”0″></a></div>

<!–Button 2–>
<div id=”myContent2″><a href=”html/GiveTip.asp”><img src=”assets/images/PTT_Button2.jpg” alt=”Defeat the Diaper | Give a Tip” width=”174″ height=”40″ border=”0″></a></div>

Given that, there is one piece of advice I can give:
Make sure you enclose the content you want SWFObject to examine in <div> tags. For those of you that code using tables, don’t try to affect a <td> as the SWFObject’s default behavior is to hide the element and this will destroy the table’s structural integrity and therefore produce undesired results.

For an example of a site that this method has been used, you can go to defeatthediaper.com – my community potty training tip site. I hope this helps and don’t forget to add the <meta> and CSS mods outlined in the overview article.

Trackbacks and Pingbacks:

  1. iPhone Readiness – Flash Detection Method | 3 Lefts = 1 Right - 1.4.2010

    […] To overcome this, you could call a modified version of the Flash Detection script on each of those pages that resets the session variable if the detection fails, but that starts to get pretty cumbersome and is why I eventually went to the SWFObject route. You can read about that method in THIS POST. […]

  2. Get your Website iPhone-Friendly | 3 Lefts = 1 Right - 1.4.2010

    […] If you’re interested in the Flash Detection method, read THIS POST outlining it. If you’d rather employ the SWFObject method, I’ve covered it in THIS POST. […]

Leave a Reply

Text formatting is available via select HTML. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

CommentLuv badge