Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Using Flash 8 to Create Effective Detection Experiences

Using Flash 8 to Create Effective Detection Experiences

Well, folks, today is a good day: The search is over. The wheel has been invented. And tested. And taken on a nice, long road trip.

Say hello to the newest detection script, which you can implement easily using Macromedia Flash 8. Much like the Six Million Dollar Man, it’s better, faster, and stronger. And as an added bonus, you can actually rely on it.

Included as an HTML template option in Flash 8, this new detection script solution is implemented by setting your Publish Settings to publish an HTML page for your SWF file, and activating the Detect Flash Version check box prior to publishing. After you’ve published your files, the resulting HTML file contains all the code necessary to run effective detection, display alternate content to people with older versions of Macromedia Flash Player installed, and show different alternate content to those with JavaScript disabled.

In Macromedia Flash MX 2004, the solution was purely ActionScript-based and did not meet the needs of developers who wanted more fine-grained control over the user experience. The required browser redirect caused user confusion and in the end did not meet all the needs of the developer community.

What is provided in Flash 8 is a huge improvement in that it takes the best ideas from scripts that have been in use for years and provides a solution that gets developers up and running quickly. Want to hear the best part? I personally tested the new script in several different browsers (the newest versions of Internet Explorer, Firefox, Netscape, Opera, and Safari) on Windows and Macintosh operating systems. Each method was tested with no plug-in installed, with an old version installed, and with JavaScript disabled. The new Flash 8 script is the only detection approach that performs correctly in every single case.

Check out the Flash Detection Experience Matrix:

You have to do a little bit of work to implement the Flash 8 detection script, as the detection template is not meant as the final version of a web page. However, it’s not complicated, and doing so will help ensure you can keep all of your site visitors happy. To make the code in the default HTML template useful in a real page, you need to do some copying and pasting, possibly modify the version number to detect, then go through the code and set what you’d like to display as alternate content when an old version of Flash Player (or no player at all) is found, or JavaScript is disabled. The detection script has generic, default alternate content specified already, but you should really customize this to your (users’) needs.

Here’s a synopsis of the implementation process:

  1. After you’ve exported HTML with Flash detection from Flash 8, move the JavaScript code found within the template’s <head> tag to the same location in your page along with the JavaScript include, AC_OETags.js.
  2. In the Globals section of the JavaScript code, set the version number of the Flash version you’d like to detect.
  3. Replace the value of the alternateContent variable in the second JavaScript snippet with HTML for your own, custom content.
  4. Replace the HTML code found within the NOSCRIPT tag with appropriate alternate content.

As alternate content, consider what’s actually needed for the user to continue his or her experience seamlessly. If the Flash content is nothing more than an ad banner, specify a GIF or JPEG image as alternate content and leave it at that. If the Flash content is required, consider using a teaser image (such as a screen shot of what the user would be seeing if the correct player was installed) in conjunction with asking the user nicely to upgrade and offering a link to the installer page. This way, you offer a compelling reason for the user to perform the installation.

If the user has JavaScript disabled (this is true in 10% of web browsers, on average), he or she will see the content specified by the NOSCRIPT tag in your page. This could be a teaser image or plain text as well.

Most important is that what you show is helpful to the user experience. If the Flash content is not required, don’t force (or even request) the upgrade. If it is required, offer a good reason to upgrade. If JavaScript is disabled, offer a good reason to enable it and refresh the page, or show appropriate alternate content (such as a GIF or JPEG image).