It was not until recently that I truly realized how important it is for developers working with flash to check the user’s flash player version before delivering their flash content.  With Adobe’s not-so-recent release of AS3 which only runs on flash player 9 or greater and many people (especially in corporate settings) still having version 8, it is truly imperative that the developer checks that the user has the necessary version to view the content.

Below I present 2 viable and tested solutions for this problem.

If you are using Adobe Dreamweaver to import flash content into your web page, you most likely already know that dreamweaver asks you do embed the flash player with the help of the ‘AC_RunActiveContent.js’ file.  You may or may not also know that the file also checks for player compatibility and asks the user to go and download the appropriate flash player thus doing all the checking for your.  So, essentially if you use dreamweaver and allow it to embed your movie for you, you’re all set.  Click Here to see how dreamweaver embeds flash content.

BUT, this also does not allow you the full control over displaying custom errors, redirects or alternative content loading you might want for a more user-friendly experience.  Let me explain further.

Lets say that you have some custom cool flash charts of your company’s 3rd quarter profits that interact with the user and show off your amazing graphing skills. Now, say the user doesn’t have the most up-to-date player so all he’ll get is a message prompting him/her to download the newest player. This might be good for some people but I know that if I want to look at something as simple as a chart and have to go to another site to download software, restart the browser, I would be a bit agitated.

Your best alternate here is to have the page load an alternative image version of the chart along with a link asking the user to download the newest player if they so choose to view the chart in an interactive environment. This way the user experience is much more seamless and gives him/her the choice to view the content exactly to their liking. To achieve this goal of seamlessness experience, I have included a series of steps you can do below with links to supporting materials.

  1. First, if you don’t already have the code for SWFObject, click here to download the code and put it in your working site directory. The home page of SWFObject gives you all the instructions you need to incorporate the code into your page.
  2. Get yourself a fresh copy of the ‘AC_RunActiveContent.js’ file and if you don’t have one handy, here’s a link to one that you can download from Fresh Web Trends…download
  3. Your next step would be to slightly modify the regular implementation of the SWFObject javascript to include your flash version testing.

    CODE: (put this script in the head tag of your page)

    <script type=”text/javascript”><!–
    // ——————————————————-
    // Globals
    // Major version of Flash required
    var requiredMajorVersion = 9;
    // Minor version of Flash required
    var requiredMinorVersion = 0;
    // Minor revision of Flash required
    var requiredRevision = 0;
    // ——————————————————-
    // ?
    </script>

    CODE: (this code is placed where you want to display your flash content)

    <div id=”flashDiv”></div>
    <script type=”text/javascript”>
    var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
    if (hasReqestedVersion){
    var so = new SWFObject(“flash/sampleFlash.swf”, “mymovie”, “620″, “320″, “9″);
    so.addVariable(“wmode”, “opaque”);
    so.write(“flashDiv”);
    }
    else{
    document.getElementById(‘flashDiv’).innerHTML = ‘<p style=”padding:10px;”>You need you download the latest version of Flash Player to view this content. <a href=”http://get.adobe.com/flashplayer/?promoid=DXLUJ” target=”_BLANK” />Click here</a> to download.</p>’;
    }
    </script>

Let me explain what the code above does just in case you have any questions.

Header code: the only variable that you need to set is ‘requiredMajorVersion’.  This tells the script what version it should be checking against to determine if the end user has the appropriate flash version.

Body code: The AC_RunActiveContent file contains a method called DetectFlashVer which does exactly what the name suggests.  What we do is check if the user has the appropriate flash version and if they do we use SWFObject to load the flash movie into the appropriate div or otherwise we do something different such as informing the user that they need to download the newest version of the player and maybe even displaying a jpg version of the flash content.

- Click here to see a sample page that shows what happens when the users have the correct version installed.

- Click here to see what happens when the users don’t have the correct version installed.

As you have learned, having the knowledge of the end users capabilities can greatly facilitate user experience and ensure that the user sees exactly what was originally indended.