Image Image Image Image Image
Scroll to Top

To Top

activex

19

Jul
2006

Information Resources

Permalink

By admin404

Flash Plug-In Detection and Upgrading

July 19, 2006 - Information Resources

Incorporating the SWFObject ExpressInstall to force Plug-in Installation

In our previous article (Activating an ActiveX Control’s Interface through Javascript), we recommended circumventing the Microsoft Internet Explorer update that forces users to activate media items with Geoff Stearns’s SWFObject. As a result, a number of emails flooded into ERA404 with questions on browser detection to drive users to upgrade their Flash Plug-In.

Flash has obviously grown quickly from its original version and Adobe/Macromedia released a number of browser plug-ins to handle these advances. While we recommend publishing Flash files to accommodate for the least common denominator (that is, users with older plug-ins), sometimes requesting a user browser upgrade is unavoidable. Browsing the Adobe site can show you a census of plug-in penetration into the web-browsing world. At the time this article was published (07/19/06), penetration looked like this:

 

V. 5 V. 6 V. 7 V. 8
US
97.7% 97.2% 94.8% 69.3%
Canada
98% 96.9% 94.1% 79%
Europe
98.3% 97.2% 95.1% 76.1%
Asia
n/a n/a n/a n/a

 

Adobe has recently released the Adobe Flash Plug-in v.9.0, and while roughly 94% of the world has at least v.7.0, your Flash files may require 8 or 9, to work properly. Note, also, that those figures are from March 2006 and penetration has certainly increased since then; especially now that myspace.com is forcing users to upgrade to Flash Player 9.0. Again, Geoff Stearns has come to the rescue with his ExpressInstall method for the SWFObject.

To detect and request an upgrade, encode your SWF file the same way we instructed in our previous article:

<div id="navcontent">This content will show if the movie cannot load.</div>
 <script type="text/javascript">
 // <![CDATA[
 var a = new SWFObject(swf/nav_home.swf", "fo_nav", "796", "72", "8,0,0,0", "#FFFFFF", true);
 a.addParam("allowScriptAccess", "sameDomain");
 a.addParam("quality", "high");
 a.addParam("scale", "noscale");
 a.write("navcontent");
 // ]]>
</script>

Add a parameter for the Flash redirect to tell the browser to reload your flash after installation is successful:

a.addParam('xiRedirectUrl', 'http://www.yourwebsite.com');

Now that you’ve properly inserted your Flash using the SWFObject, let’s look at how you can modify your Flash file to use the object’s plug-in detection and drive the user to upgrade if necessary. In the above example, you can see I’ve required a plug-in of 8 or greater. With the following code, users with a browser that meets or exceeds this requirement will see nothing but your movie. Users with an older plug-in (release previous to v.8.0) will see Flash Alert (left) that asks them to update their plug-in. If the user says “Yes,” the plug-in will install automatically. If they say “No,” a Javascript Alert will inform them that the movie cannot be viewed because a newer plug-in is required.

Remember from our previous article that when the SWFObject returns “false” (the movie cannot be displayed), then the text content that you provide in the <div> container will show instead. It is because of this that you should put text in the <div> container to inform them of what’s happening. The example above says “This content will show if the movie cannot load,” but it would be more informative (when you have the ExpressInstall included) to replace that content with something like this:

This Flash movie cannot load. You are viewing this because:
1. You have no Flash Plug-In (Click here to download)
2. Your Flash Plug-in is older than the necessary version required to play this movie
(Click here to reload the movie and click “Yes” when asked to upgrade your plug-in.)

Now let’s get to the Flash.

Include the following lines of code into your Flash file prior to the loading bar (optional) and content:

#include "expressinstall.as"
 
 // initialize the ExpressInstall object
var ExpressInstall = new ExpressInstall();
// if the user needs to upgrade, show the 'start upgrade' button
if (ExpressInstall.needsUpdate) {
// this is optional, you could also automatically start the
 // upgrade by calling ExpressInstall.init() here instead of the following lines
// attach the custom upgrade message and center it
var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);
upgradeMsg._x = Stage.width / 2;
upgradeMsg._y = Stage.height / 2;
// attach the button actions that will start the ExpresInstall updater
upgradeMsg.upgradeBtn.onRelease = function() {
 // the ExpressInstall.init() method is what kicks off the actual update
ExpressInstall.init();
}
 // if expressinstall is invoked, stop the timeline.
stop();
}

Ensure that Mr. Stearns’s expressinstall.as file is in your build directory so that it will be available to be compiled with the movie when you publish. That’s all you need to do.

Zeh Fernando, the genius behind zeh.com.br, recommends embedding the contents of Mr. Stearns’s expressinstall.as script into the timeline of a template Flash movie and saving this as your launchpad for all sites. Starting with a FLA that includes the ExpressInstall (and a stripped-down index.html file for which the .swf is to be “embedded”) will help to manage your scripts from inception to launch and make it easier for users.

Recommended Links

Tags | activex, adobe, citarella, deconcept, detect, flash plug-in, geoff stearns, macromedia, shockwave, swfobject, update, upgrade, zeh fernando