Image Image Image Image Image
Scroll to Top

To Top

adobe

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

19

Jun
2006

Information Resources

Permalink

By admin404

Activating an ActiveX Control’s Interface through Javascript

June 19, 2006 - Information Resources

Removing the Marching Ants around SWF Files

As a result of the jury decision in Microsoft’s Eolas patent lawsuit, Microsoft created an Internet Explorer update that would force users to activate media items coded with “embed”, “applet” or “object” tags. The result of this decision is that while movies may play and function correctly in Firefox, Safari and other browsers, users must click Flash media to “activate” it and accept ActiveX alerts on pages containing Quicktime media.

A solution to this obstacle has been dutifully created and promoted by Geoff Stearns. His “SWFObject” (grab it here) is a simple Javascript which enables developers to embed Flash files into sites without using “embed”, “applet” or “object”.

For instance, we used to have our home page navigation coded like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="796" height="72" id="nav_home" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="nav_home.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="nav_home.swf" quality="high" bgcolor="#ffffff" width="796" height="72" name="nav_home" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

With Mr. Stearns’ SWFObject, the syntax is shorter and effective. In the head, we include his Javascript file:
<script type="text/javascript" src=js/swfobject.js"></script>

And in the body, we replace the object and embed tags with this:
<div id="navcontent"></div>
<script type="text/javascript">
// <![CDATA[
var a = new SWFObject(swf/nav_home.swf", "fo_nav", "796", "72", "7,0,0,0", "#FFFFFF", true);
a.addParam("allowScriptAccess", "sameDomain");
a.addParam("quality", "high");
a.addParam("scale", "noscale");
a.write("navcontent");
// ]]>
</script>

The SWFObject allows for you to add all the parameters of Adobe’s default export using the addParam function.

To make things better, you can still pass variables to and from the Flash from PHP by adding the FLASHVARS variable with Stearns’ addParam function.

For instance, our interior navigation, with the PHP/Smarty variables, looks like this:

<div id="navcontent"></div>
<script type="text/javascript">
// <![CDATA[
var a = new SWFObject(swf/nav_home.swf", "fo_nav", "796", "72", "7,0,0,0", "#FFFFFF", true);
a.addParam("allowScriptAccess", "sameDomain");
a.addParam("quality", "high");
a.addParam("scale", "noscale");
a.addParam("FLASHVARS", "section=‹$section›")
a.write("navcontent");
// ]]>
</script>

The resourceful Stearns’ provides the identical solution for embedding Quicktime movies to eradicate Microsoft’s ActiveX alert window.

Include his QTObject Javascript file in the head of your page:

<script type="text/javascript" src="js/qtobject.js"></script>

And modify the code for your Quicktime video to use his format:
<div id="video">
<script type="text/javascript">
// <![CDATA[
var myQTObject = new QTObject("reels/web.mov", "qo_web", "480", "376");
myQTObject.write();
// ]]>
</script>
</div>

Incorporating the add.Param function for Quicktime parameters, you can easily add poster movies and controller options the same way you would in Flash:
<div id="video">
<script type="text/javascript">
// <![CDATA[
var myQTObject = new QTObject("reels/reel_web_posterMovie.mov", "qo_web", "480", "376");
myQTObject.addParam("qtsrc", "reels/reel_web_posterMovie.mov");
myQTObject.addParam("href", "reels/web.mov");
myQTObject.addParam("target", "myself");
myQTObject.addParam("controller", "false");
myQTObject.write();
// ]]>
</script>
</div>

Recommended Links

SWFObject Download (zip)
QTObject Download (zip)
SWFObject Documentation
QTObject Documentation

Tags | activate flash, adobe, citarella, fix, fla, flash object, html, issue, macromedia, microsoft activex, patch, php, problem, quicktime embed, swf, swf object