| One of the most frequently asked questions on any news group or mailing list involves how to detect the Flash Player. The Flash Player comes bundled with the more recent versions of the Netscape and Internet Explorer browsers, but in some instances your user will have chosen not to install it or will have uninstalled the Player. Your user might also have an earlier release of the Player installed. Some companies have a policy dictating that employees cannot have any unapproved plug-in or ActiveX Control installed. So, the question becomes, how do you detect the presence of the Flash Playerand what do you do if it's not there? Note In this chapter, we'll be referring to the Flash Player rather than the Flash plug-in, except in very specific circumstances. Why? Because the Flash Player is implemented as a plug-in in Netscape and Internet Explorer for the Macintosh, and as an ActiveX Control in Windows versions of Internet Explorer. Either way, it's still the Flash Player, and it makes more sense to be consistent. That being said, when you look at the code in the Flash Dispatcher section, the code will refer to it as the plug-in. Go figure. If you just think of the terms as being more or less interchangeable, you'll be fine.
You can use several methods to detect whether your visitor's browser is Flash-enabled: -
The Macromedia Flash Deployment Kit -
Browser-based detection (Windows IE only) -
Script-based detection (JavaScript or Visual Basic Script) -
Flash-only detection -
User choice With the rollout of Flash 5, Macromedia released the Flash Deployment Kit, which is a suite of tools that you can use to simplify the Flash Player detection process. Figure 26.1. Macromedia's Flash Player download page.  Flash Deployment Kit In response to the wails and moans of developers trying to find the perfect solution to detecting Flash-enabled browsers, Macromedia created the Flash Deployment Kit. This suite of tools can be downloaded for free from the Macromedia Web site, at www.macromedia.com/software/flash/download/deployment_kit/. The kit consists of the following components : -
The Flash Dispatcher (Dispatcher.js, Dispatcher.vbs, detectFlash.swf). -
Sample HTML pages that use the Flash Dispatcher (enter.html, installFlash.html, upgradeFlash.html). -
An interactive demo of how the Flash Dispatcher works with the sample pages (demo.html). -
Flash Dispatcher Dreamweaver/UltraDev behavior. Take a look at how you can use these separate components to simplify your life as a developer. Flash Dispatcher The core of the Flash Deployment Kit is the Flash Dispatcher. The Flash Dispatcher uses several methods to detect whether the appropriate version of the Flash Player is installed. The MM_FlashDispatch() function, which is defined in the dispatcher.js file, checks to see both if the Flash Player is installed and which version/revision is installed. The Dispatcher.vbs file works with the dispatcher.js file to check if the ActiveX control is installed. Based on the information the function returns, it does one of three things: -
Loads a page with the Flash content that you created into the user's browser (see Figure 26.2) Figure 26.2. The Flash movie is displayed successfully.  -
Loads a page without your Flash masterpiece (see Figure 26.3) Figure 26.3. A static image is displayed for users without Flash.  -
Assists the user in updating or installing the Flash Player (see Figure 26.4) Figure 26.4. Internet Explorer will install the ActiveX control for Flash automatically.  Updating Dispatcher for New Flash Versions The dispatcher.js file needs to be updated periodically to reflect new versions and revisions of Flash. Determining the latest version of Flash is easy: We're on version 5 at this writing. When Flash 6 is released, you'll need to add the line between the asterisks to the dispatcher.js file to detect for the Flash 6 plug-in: /* * Latest available revisions of the Plug-in. */ var MM_latestPluginRevision = new Object(); /********************************************* MM_latestPluginRevision["6.0"] = new Object(); /********************************************* MM_latestPluginRevision["5.0"] = new Object(); MM_latestPluginRevision["4.0"] = new Object(); MM_latestPluginRevision["3.0"] = new Object(); MM_latestPluginRevision["2.0"] = new Object(); The next block of lines needs to be updated as new revisions of the Flash Player are released, particularly if you are going to require the user to download the latest release of the Flash Player. /* * This table must be updated as new versions and revisions of  the * plug-in are released, in support of the 'requireLatestRevision' * option in MM_FlashDispatch(). */ MM_latestPluginRevision["5.0"]["Windows"] = 30; MM_latestPluginRevision["5.0"]["Macintosh"] = 30; MM_latestPluginRevision["4.0"]["Windows"] = 28; MM_latestPluginRevision["4.0"]["Macintosh"] = 27; MM_latestPluginRevision["4.0"]["Unix"] = 12; MM_latestPluginRevision["3.0"]["Windows"] = 10; MM_latestPluginRevision["3.0"]["Macintosh"] = 10; MM_latestPluginRevision["2.0"]["Windows"] = 11; MM_latestPluginRevision["2.0"]["Macintosh"] = 11; Determining the latest revision of the Player is a bit more of a challenge than knowing what the current version is. This also changes more often than the version number. The easiest way to find the current Flash Player revision is to visit the Flash Player download page at www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash. (You'll have to do this using both a Windows and a Macintosh machine.) In fact, the previous table already needs to be updated for the newest revisions of Flash (as of this printing)revision 42 has been released for the IE version of the Windows player, and revision 41 has been released for Netscape and the IE version of the Macintosh player. In this listing, you need to change these two lines to reflect the current revision numbers : MM_latestPluginRevision["5.0"]["Windows"] = 30; MM_latestPluginRevision["5.0"]["Macintosh"] = 30; So, an update of those two lines would look like this: MM_latestPluginRevision["5.0"]["Windows"] = 42; MM_latestPluginRevision["5.0"]["Macintosh"] = 41; | Script-based detection isn't always possible. If you can't use script-based Player detection, the MM_FlashDispatch() function will try to load the detectFlash.swf Flash movie to do Flash-onlybased detection. Sample HTML Pages So how do you call the MM_FlashDispatch() function? The first step to using the Flash Dispatcher is to create an HTML entry page. This page must include both the dispatcher.js and dispatcher.vbs files, as well as a call to the MM_FlashDispatch() function. Other than that, the file doesn't contain any information, so it is never visible to your user. You can either customize the enter.html file provided with the kit or create a new one based on enter.html. Listing 26.1 shows the HTML for the enter.html file that comes with the Deployment Kit. It includes the external dispatcher.js and dispatcher.vbs files, as well as the call to the MM_FlashDispatch() function. Listing 26.1 The entry.html File That Comes with the Flash Deployment Kit <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <TITLE>Welcome</TITLE> <META http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT TYPE="text/javascript" src="Dispatcher.js"></SCRIPT> <SCRIPT LANGUAGE="VBScript" src="Dispatcher.vbs"></SCRIPT> </HEAD> <BODY BGCOLOR="#ffffff"> <SCRIPT LANGUAGE="JavaScript"> MM_FlashDispatch("flash/index.html", "5.0", false, "upgradeFlash.html", !MM_FlashUserDemurred(), "installFlash.html", "noflash/index.html", false); </SCRIPT> </BODY> </HTML> In the code that calls the MM_FlashDispatch() function, you'll notice that the function takes eight parameters: MM_FlashDispatch(contentURL, contentVersion, requireLatestRevision, upgradeURL, install, installURL, altURL, overrridePluginsPage) Take a closer look at those parameters: -
contentURL. The URL of the page that contains your Flash masterpiece. This can be either an absolute or a relative URL. -
contentVersion. The version of Flash that you used to author your content. Because you're reading Inside Flash , you probably want to use 5.0 as the value. Other possible values are 2.0, 3.0, and 4.0. Down the road, you'll want to add 6.0 to this list. -
requireLatestRevision. A Boolean value; it's either true or false. If you enter true here, the user must have the latest revision of the Flash Player (plug-in only). If you enter false, it doesn't matter what revision of the Player is running. Again, you'll need to update the revision table in the dispatcher.js file as new revisions are released. -
upgradeURL. A URL to which readers are directed. If the user doesn't have the appropriate version of the Flash Player, you can specify a URL that gives upgrade information. The upgradeFlash.html page, which comes with the Deployment Kit, is an example of how to do this. -
install. Another Boolean valueeither true or false. If this value is true, the user will be prompted to install Flash 5. If the value is false, the user won't be prompted to install it. -
installURL. Similar to upgradeURL. If you require your user to install Flash to view your site and automated installation isn't supported by the user's browser/platform combination, you need to specify a URL where visitors can find more information about obtaining and installing the Flash Player. The installFlash.html file, which comes with the Deployment Kit, is an example of this. -
altURL. If you have a non-Flash site set up for people who cannot or will not install the Flash Player, you can enter the redirect URL here. -
overridePluginsPage. Another Boolean value. Set this to true to set the PLUGINSPAGE attribute for the embedded Flash Player sniffer (detectFlash.swf) to installURL. When a user accesses your site and loads the page with the Flash Dispatcher on it, one of three things happens: -
Everything is copasetic. The user has the proper version and revision of the Flash Player. Your masterpiece loads, and all is right with the world. -
An older version or revision of Flash is detected . If automatic updating is supported on the browser/platform being used, the Flash Player is updated, your masterpiece loads, and all is still right with the world. If auto-updating is not supported, your visitor will be redirected to the page that you specified in the upgradeURL parameter. (See Figure 26.5.) Figure 26.5. An HTML page prompts the user to download the latest version of Flash or proceed to the non-Flash page.  -
The Flash Player is not installed. If you set the install parameter to true and auto-installation is supported, the Player is installed and your masterpiece is loaded. Otherwise , the page that you specified in the installURL parameter will load. If the install parameter is set to false, the page that you specified in the altURL parameter loads. (See Figure 26.6.) Figure 26.6. An HTML page prompts the user to download Flash or proceed to the non-Flash page.  The interactive demo (demo.html) that comes with the Deployment Kit enables you to configure the various parameters and test the results. If you are daunted by the idea of configuring those parameters by hand, never fear. If you have either Macromedia's Dreamweaver or Dreamweaver/UltraDev with the Extension Manager installed, you can add a behavior to Dreamweaver/UltraDev to make this process easier. In case you aren't familiar with these software packages, Dreamweaver is a full-featured What-You-See-Is-What-You-Get (WYSIWYG) visual development environment for static HTML pages. Dreamweaver/UltraDev is a souped-up version of Dreamweaver that lets you add database connectivity to your site. Both of these packages have what are called "behaviors," which are built-in wizards and code sets to help you quickly accomplish a number of otherwise cumbersome tasks . In the first exercise, you'll walk through installing and using the Dreamweaver/UltraDev Dispatch Behavior. If you don't currently have a copy of Dreamweaver, you can download a 30-day trial from Macromedia's Web site. Just go to www.macromedia.com/software/dreamweaver/download/. You'll also need to install the Extension Manager for Flash if you don't already have it installed on your systemand you'll want it for Flash anyway. You can find the Extension Manager at www.macromedia.com/exchange/flash/. After you have both Dreamweaver and the Extension Manager installed, you're ready to start the exercise. Exercise 26.1 Using the Dreamweaver/UltraDev Dispatch Behavior If you have Dreamweaver or UltraDev installed, along with the Extension Manager, installing the Dispatcher behavior is easy. -
First you need to download the Flash Deployment Kit. Point your browser to www.macromedia.com/software/flash/download/deployment_kit/. If you don't already have a Macromedia Membership ID, you'll need to set one up. Download the ZIP or HQX file to your hard drive. You'll need to unzip or unstuff the file. -
Launch Dreamweaver (or Dreamweaver/UltraDev). -
Select Command > Manage Extensions. -
In the Extension Manager, choose File > Install Extension. -
Browse to the folder in which you unzipped the deployment files. In the Dreamweaver_behavior folder, you'll see a file called Flash Dispatcher.mxp. Highlight that file and click Install. -
Close and restart Dreamweaver/UltraDev. When you have the behavior installed, using it is easy. -
Create the page that you want to use as your entry page, and save it. -
In the Behaviors panel, click the + and select Macromedia Flash Dispatcher Behavior. -
The Dispatcher Wizard opens (see Figure 26.7). Figure 26.7. You can use the Macromedia Flash Dispatcher behavior in Dreamweaver/UltraDev to help you fill out the parameters needed by the MM_FlashDispatch() function.  -
Fill in the blanks, and you're ready to go. So, Macromedia has made it pretty easy for you to deploy your Flash movie and to decide how to handle different user configurations. Of course, if you insist on doing this yourself, you do have other options. Browser-Based Detection (Internet Explorer on Windows Only) Internet Explorer on Windows has two different ways to detect whether Flash Player is installed. If the Flash Player isn't detected, IE will automatically install the necessary ActiveX control. The two detection schemes are as follows : -
Install on demand. By default, the IE browser is set up to automatically download and install ActiveX controls from Microsoft's Web site as they are needed. This is a painless and easy way to get the Flash Player installed. Unfortunately it works only with IE on Windows. It also won't work if your user has disabled this browser option. -
clsid and codebase . These two items are attributes of the <OBJECT> tag. clsid identifies to the browser the ActiveX control that it is supposed to use to display the object. codebase tells the browser where to find the ActiveX Control for the Flash Player on the Internet, if it's needed. The clsid and codebase attributes are automatically inserted into the HTML page by Flash's Publish Settings. Dreamweaver/UltraDev automatically inserts it as well. Note You'll probably never need to know this, but just in case you aren't using Flash or Dreamweaver to create your HTML page here's the clsid for Flash 5: clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 Here's the codebase: http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,41,0 The numbers 5,0,41,0 indicate that the Flash 5 Player, release version 41, is needed for this page. When it reads this information, the browser checks the version of the Flash Player installed. If something less than the Flash 5 Player, or less than release version 41, is installed, the browser will download a new Flash Player from the preceding URL.
Script-Based Detection One of the reasons script-based detection is popular is because it works before the entire page is loaded. Actually, you've already seen an example of script-based detection: That's part of what the Flash Deployment Kit does. You also have a few other options. You can use the preset HTML templates in the Publish Settings panel (to see what the different templates do for you, select the HTML tab of the Publish Settings panel, choose a template, and click the Info button). Several of these templates give you a rudimentary Flash Player detection scheme. If you insist on rolling your own code, you'll use the same scripting languages that the Dispatcher did: JavaScript or VBScript. Although this method is easy to use, there are downsides. In particular, you need to be aware that a fair number of people disable their browser scripting languages, so if you are depending on scripting alone to detect the presence of the Flash Player, you might get burned. For more on using script-based detection, see Macromedia TechNote 14526. Using getVersion() Browser incompatibilities aren't the only issue that you must deal with when you are developing in Flash. You also must deal with the fact that different revisions for the different versions of Flash support different features. For example, in Flash 5, you don't have support for the contentType and ignoreWhite properties of the XML object until revision 41/42. In Flash 4, the capability to print directly from Flash wasn't incorporated until revision 20. Yes, it's a pain to have to worry about these issues, but, as a developer, it's also your responsibility. So, the question becomes, how do you deal with these issues? How do you know what your user's revision of Flash is going to support? One option is to force your user to download the latest revision of the Flash Playerthat option is available to you using the Flash Dispatcher. Another option is to check the user's revision number and tailor your content appropriately. You can use the $version variable in Flash to check the revision number. Unfortunately, this variable became available only with Flash 4 revision 11, so it won't work with earlier Player revisions. With the introduction of Flash 5 comes the getVersion() function. This function works only with Flash 5. (The TechNotes claim that it won't work for you in test movie mode, but it actually does. Then again, that's not where you need it to work.) The getVersion() function returns a string that contains the platform, major version, and minor version (revision) of the Flash Player installed for the user's browser. For example, on my machine, which is a Windows box with both IE and Netscape installed, I get the following results from getVersion(): IE: WIN 5,0,42,0 Netscape: WIN 5,0,41,0 If I test on the Macintosh across the room, I get this: IE: MAC 5,0,30,0 So both of the most recent browsers on my PC, which is my primary machine, have the latest versions of the Player installed. The Macintosh, which doesn't get used as often, is still using the original release of the Flash 5 Player. A UNIX box would return a similar string; the only difference would be that the platform designation would be four letters UNIXinstead of three. Now you know how to get this informationwhat are you going to do with it? Exercise 26.2 Using getVersion() To be able to do anything useful with the information that you just retrieved, you'll have to parse the string that is returned. Fortunately, that's pretty simple to do. -
Open a new Flash movie. You're going to place four dynamic textboxes on the Stage. The first textbox will display the value returned by getVersion(). The other three boxes will display the platform, major version, and minor version (revision) parsed from the string returned by getVersion(). -
Select the Text tool, and draw a textbox on the Stage. Open the Text Options panel and, with the textbox selected, change the following settings:
Text Type: Dynamic Text
Line Type: Single Line
Variable: playerVersion
Border/Bg: Selected
HTML: Not Selected
Selectable: Not Selected
-
Duplicate the existing textbox (Control+D or Command+D) three times. Line up the four textboxes so that they are in a vertical stack. The only thing that needs to change is the variable name . From top to bottom, the variable names should be as follows: playerVersion thisVersion majorVersion minorVersion -
All the ActionScript for detecting and parsing the platform and version numbers will be in frame 1 of the main timeline. Add a new layer and name it Actions. Select frame 1 in the Actions layer, and launch the Actions panel. -
First you need to get the information available from the getVersion() function. Enter the following code in the Actions list: // get Version info playerVersion = getVersion(); Go ahead and test your movie. The first textbox should be populated with either WIN 5,0,30,0 or MAC 5,0,30,0. The remaining textboxes should be empty. -
Next you'll create a new array, and you'll split the existing string on the space into the platform and version information. The platform information will occupy the first element of the array, so you can display that. Enter the following code: //split the platform and version info into a new array thisVersion = new Array(); thisVersion = playerVersion.split(" "); //extract platform info from array platform = thisVersion[0]; Now if you test your movie, you'll see the full string in the first textbox and the platform in the second textbox. -
Now all you need to do is create a new array and split the version information on the comma delimiter into the new array. Then you just need to display the first and third elements. Enter the following code: //extract version info from old array and split it into new array versionInfo = new Array(); versionInfo = thisVersion[1].split(","); //extract the major and minor versions majorVersion = versionInfo[0]; minorVersion = versionInfo[2]; Your completed code should look like this: // get Version info playerVersion = getVersion(); //split the platform and version info into a new array thisVersion = new Array(); thisVersion = playerVersion.split(" "); //extract platform info from array platform = thisVersion[0]; //extract version info from old array and split it into new array versionInfo = new Array(); versionInfo = thisVersion[1].split(","); //extract the major and minor versions majorVersion = versionInfo[0]; minorVersion = versionInfo[2]; -
Test your movie again. Now open the HTML page generated when you tested your movie inside a browser. If you've upgraded your Flash Player, you should see a different set of numbers. So what's the utility of this? If your users are using older Player versions than you developed for, and if you didn't force them to upgrade, you can redirect them to another area of the site that doesn't require the latest and greatest updates. In addition to the scripting methods mentioned so far, you can use Flash-only detection for the Flash 4 Playerversion 4 and higher. Using Flash to Detect Flash 4+ An alternative to using JavaScript to detect the Flash Player is to use Flash itself. This method, popularized by Colin Moock (www. moock .org/webdesign/flash), involves using the getURL() action, which works only in Flash 4 and above, in combination with an HTML page that contains a META refresh tag. The entry page of the site contains a Flash movie that forwards users to the actual Flash movie. If nothing happens in a set amount of time, the META refresh tag automatically sends users to a non-Flash page, which may or may not prompt them to download the latest version of Flash. Although this method does take more time to implement than JavaScript detection, it is compatible with more browser versions. This method is incorporated as a backup detection method in the Macromedia Deployment Kit. Exercise 26.3 Creating a Flash Sniffer Creating a Flash 4+ "sniffer" isn't at all difficult to do. -
Create a new Flash movie. -
Select Modify, Movie, and set the movie's dimensions to the minimum dimensions of 18 by 18 pixels. There's no reason to make this movie any larger than the minimum dimensions because its only function is to check for the presence of the Flash Player. -
Insert keyframes on frames 1 and 2. Select frame 2, open the Frame Actions panel, and place a getURL() action there. Inside quotes, put the URL of the HTML page that will display the actual Flash movie: getURL ("filename.html"); -
Add a stop() action to the same frame. -
Select File, Publish Settings. On the HTML tab, set the template to Flash Only (Default). Select File, Publish to generate the Flash sniffer. Now you need to create an HTML page that contains the META refresh tag: -
Create a new text file called index.html, and open it in Notepad. -
Inside the <HEAD> tag, place the following tag: <META HTTP-EQUIV="Refresh" CONTENT="10; URL=noflash.html"> Change noflash.html to the file that contains the actual Flash movie. -
Now create the page that the META refresh tag directs the browser to if the sniffer Flash movie doesn't forward the user to the actual movie. This is where you can give the user an opportunity to download the Flash plug-in. If you choose to do so, you should link to the Macromedia Flash Player download center, at www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash. That's it. Now you have a Flash-based detection system. There is still one more choice you can use: Let the user pick a Flash or non-Flash version of your site. Choosing No Detection With all these detection method choices, you might be wondering,"What happens if I don't do anything?" Choosing not to have any kind of detection at all is usually a bad and amateurish choice. If you choose not to use any type of Flash detection, you will have to rely on standard browser behaviors. If your user is running Internet Explorer 5 or higher on Windows, the built-in detection described previously will kick in automatically. Otherwise, your users will see a broken plug-in icon instead of the Flash movie. If they have the foresight to click the icon, they will be sent to the Flash Player download page. (See Figure 26.8.) This URL is specified in the <EMBED> tag by the PLUGINSPAGE parameter: www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash Figure 26.8. When users click on the broken image icon, the browser asks if they would like to download the plug-in.  But, come on, folks. How many people actually bother to click on broken link icons? | User Choice One method that you see used frequently is to give the user a choice of whether to view the Flash site or an alternate non-Flash site. The upside of this method is that you are giving the user a choice. You might want to cover your eyes for this partsometimes I actually choose the HTML site. Why? Sometimes I've already seen the Flash presentation and have been less than impressed. Sometimes it's because the Flash movie has so much going on that it grinds my processor to a halt. That really irritates me. The downside of this method is that you have to maintain two separate sites, and that's a real pain.  |
