Detecting the Flash Player Flash

What good is an awesome Flash experience if no one can see your Flash movies?

Because most Flash content is viewed with a Web browser, it’s extremely important to make sure that your HTML pages check for the existence of the Flash Player plug-in before you start pushing Flash content to the browser. There are a variety of ways to check for the Flash Player, and this section provides an overview of the available methods.

Plug-in versus ActiveX: Forcing content without a check
The Flash Player is available for Web browsers in two forms: the Flash Player plugin (as a Netscape-compatible plug-in) and the Flash Player ActiveX Control (for use only with Microsoft Internet Explorer on Windows 95/98/NT/2000).

If you directly insert a Flash movie into a Web page with the <EMBED> tag (for Netscape browsers), then one of two scenarios will happen:

  1. The browser has the Flash Player plug-in and will load the Flash movie.
  2. The browser does not have the Flash Player plug-in, and displays a broken plug-in icon. If scenario 2 occurs and the PLUGINSPAGE attribute of the <EMBED> tag is defined, the user can click the broken plug-in icon and go to the Macromedia site to download the Flash Player plug-in. If no PLUGINSPAGE attribute is specified, then clicking the broken plug-in icon will take you to a generic Netscape plug-in page.

If you insert a Flash movie into a HTML document with the <OBJECT> tag (for Internet Explorer on Windows only), then one of two scenarios will happen:

  1. The browser has the Flash Player ActiveX Control and will load the Flash movie.
  2. The browser does not have the Flash Player ActiveX Control, and will autodownload and install the ActiveX Control file from the Macromedia site.

The ActiveX Control will only autodownload and install if the classid and codebase attributes of the Flash movie’s <OBJECT> tag are correctly specified. Depending on the user’s security settings, the user needs to grant permission to a Security Warning dialog in order to commence the download and install process.

The Flash 5 Player ActiveX Control will automatically download if Microsoft Internet Explorer for Windows encounters an HTML page with Flash content.

The Flash 5 Player ActiveX Control will automatically download if Microsoft Internet Explorer for Windows encounters an HTML page with Flash content

Although using the <OBJECT> and <EMBED> tags by themselves is by far the simplest method for integrating Flash content into a Web page, it’s not the most userfriendly method of ensuring that the majority of your Web visitors can view the Flash content. The most common way to detect Flash movies is by using JavaScript and VBScript, as we see in the next section.

JavaScript and VBScript player detection
The use of scripts written into an HTML document is very popular for Flash Player detection. If you’re getting familiar with Flash 5’s new ActionScript syntax, then you’ll find that JavaScript detection code isn’t all that complex. JavaScript is a universal scripting language that most 3.0 or higher Web browsers can employ to some capacity. Microsoft’s implementation of JavaScript, called JScript, isn’t exactly the same as Netscape’s JavaScript. For this reason, you can translate some JavaScript functionality into Microsoft’s proprietary Web-scripting language, VBScript.

In this section, we look at how to create an HTML document that checks for the presence of the Flash Player plug-in with JavaScript, and the Flash ActiveX Control with VBScript. We use two images of a traffic light one .SWF image with a green light on, and one .GIF image with a red light on to display the results of our plugin and ActiveX detection. Many Web sites employ a similar mechanism: Before an HTML page with Flash content can be accessed, the visitor will be presented with a screen telling them if they have the Flash Player installed. If they don’t have it, then they can click a link to get the plug-in or ActiveX Control.

Detecting the plug-in with JavaScript
By rearranging the JavaScript code that is created by the Ad 5 Banner template in the Publish Settings, we can set up a testing mechanism that delivers one of two graphics to the visitor’s Web browser. Copy the scriptDetection.html document located in the ch41 folder of the Flash 5 Bible CD-ROM, and open it in your preferred text editor (SimpleText, Notepad, BBEdit, and so on). Look at lines 10 to 15 (The ¬ indicates a continuation of the same line of code. It should not be written in the actual JavaScript code in the HTML document.):

Line 10 initializes a variable plugin to indicate the presence of the Flash 5 Player plug-in on Netscape (or IE 5.0 Mac). Line 11 initializes a variable called activeX to indicate the presence of the Flash 5 Player ActiveX Control. At this point, we create them with a value of 0, meaning that the plug-in and ActiveX Control are not installed.

Line 12 is borrowed from the Ad 5 Banner HTML template output. It uses the mimeTypes array of the navigator JavaScript Object to determine whether the Flash Player (in any version) is installed. If the Flash Player plug-in is installed, then the variable plugin is now equal to the value [object Plugin]. If this is true, then lines 13 and 14 will execute. Using the description property of the Plugin Object, we can determine whether the Flash Player is the correct version. In this example, we check whether it’s greater than or equal to 5. Notice that we can use a comparison as the value of the plugin variable. If the Flash 5 Player (or higher) is installed, then plugin will equal true (or 1); if a lower version is installed, then plugin will equal false (or 0).

Creating a test object in VBScript
At this point, if the visitor is using Netscape (on any operating system) or Internet Explorer on the Macintosh, then the variable plugin will have a value of either 0 or 1. However, we still need to check for the ActiveX Control, if the visitor is using Internet Explorer for Windows. Line 11 already initialized a variable called activeX.

Lines 16-21 check to see if VBScript can create a Flash Object in the document (The ¬ indicates a continuation of the same line of code. It should not be written in the actual JavaScript code in the HTML document.):

Line 16 determines whether the visitor is using Internet Explorer on Windows 95, 98, or NT. If that’s the browser they’re using, then lines 17 to 21 will execute. These lines of code create the VBScript that is necessary to check for the existence of the Flash 5 Player ActiveX Control. Using the IsObject and CreateObject methods, VBScript can determine whether the ActiveX Control is installed. If it is installed, then the variable activeX will equal true (or 1). Note that this variable is available to both JavaScript and VBScript. This section of code is also borrowed from the Ad 5 Banner HTML template.

Inserting the graphics
After the variables plugin and activeX have been set appropriately, we can use these variables to either display a Flash .SWF graphic or a .GIF image graphic. In the body of the HTML document, we can reuse the plugin and activeX variables to insert either the Flash or .GIF graphics. Lines 31 to 36 of the HTML document will write the tags to display the .SWF or .GIF image for Netscape (on any platform) or IE on the Mac (The ¬ indicates a continuation of the same line of code. It should not be written in the actual JavaScript code in the HTML document.):

If the plugin variable is not equal to false (line 31), then line 32 will execute. Line 32 uses the <EMBED> tag to insert a Flash .SWF file, depicting a green light that animates to a full green color, and the HTML text “Flash 5 Player Plug-in detected.” If the plugin variable is equal to false and the browser is Netscape 2.0 or higher (line 33), then lines 34 and 35 will create <A HREF> and <IMG> tags, depicting a static .GIF image of a red traffic light that links to the Macromedia download area.

Then, JavaScript will create the HTML text “Flash 5 Player Plug-in not installed.” Lines 43 to 52 perform the same functionality for Internet Explorer for Windows. If the activeX variable is true, then an <OBJECT> tag is written and a green traffic light will animate on. If it’s not installed, then a static .GIF image of a red traffic light will be displayed. Finally, we should do two more things:

  1. Tell IE 4.5 (or earlier) Mac users that we can’t detect the Flash 5 Player plug-in.
  2. Tell other users that they can either (a) proceed to the main Flash site, or (b) click the appropriate traffic light to download the plug-in or ActiveX Control.

Lines 59 to 62 tell IE 4.5 (or earlier) Mac users that we can’t detect their plug-in settings. We can either leave it to them to decide whether they should download the plug-in, or we could direct them to a sniffer movie to determine if the plug-in is installed.

Lines 63 to 65 check whether either the plug-in or the ActiveX Control is installed. If it is, then we tell the visitor to proceed to the main Flash site. Note that you would want to insert more JavaScript code here that includes a link to your Flash content.

Lines 66 to 74 check whether the plug-in and the ActiveX Control are both absent.
If neither is installed, then we tell them which traffic light (lines 67 to 74) to click. Although you’ll most likely want to spruce up the look and feel of this page to suit your particular site, you can use this scripting layout to inform your visitors about their plug-in or ActiveX Control settings.

Using a Flash Swiffer movie
If you would prefer to avoid JavaScript and VBScript, then you can also use small Flash movies known as swiffers to detect the Flash Player. Swiffers are virtually hidden from the visitor, and direct the HTML page to a new location (using a getURL action) where the real Flash content (or site) exists. If the Player is not installed, then the movie won’t be able to play and direct the HTML page to a new location. If this happens, then a special <META> tag in the <HEAD> of the HTML document will direct the browser location to a screen that informs the visitor to download the plug-in or ActiveX Control.

Making the Swiffer movie
The Swiffer movie is a small Flash movie that has the same background color as the HTML document. We do not need any artwork or symbols in this movie.

  1. Open Flash 5, and in a new Flash movie document (.FLA file), rename Layer 1 to actions.
  2. Add a keyframe on frame 2 of the actions layer. Double-click this new keyframe to open the Actions Panel.
  3. In the Actions Panel, we create some ActionScript that checks for Flash 3 (or earlier), 4, and 5 Player versions. We can direct each version of the Player to a unique URL. The basic principle of this ActionScript is to use Flash versionspecific actions to determine which Player is displaying the movie:
  4. Change the size of the movie frame to 18 px×18 px, in the Modify➪Movie dialog. This is the smallest size a Flash movie can have. Change the background color of the movie to match the background color of the HTML document. Click OK.
  5. Save the Flash movie as swiffer.fla.
  6. Open the Publish Settings dialog (File➪Publish Settings). Check the Flash and HTML options in the Formats tab. Uncheck the Use default names option, and rename the HTML file to swiffer_start.html.
  7. In the Flash tab, select Flash 4 in the Version drop-down menu.
  8. In the HTML tab, select the Flash Only (Default) template. Click the Publish button located on the right side of the Publish Settings dialog.
  9. When the files have been published, click OK to close the Publish Settings dialog. Save your movie again. You now have swiffer.html and swiffer.swf files in the same folder as your swiffer.fla file. In the next section, we add some additional HTML tags to the swiffer.html document.

Integrating the Swiffer movie into an HTML document
After you have made the swiffer.swf and the swiffer.html files, you can modify the HTML document to guide the browser to a unique URL where plug-in information and download screen will be shown. Remember that the ¬ indicates a continuation of the same line of code. Do not insert this character into your HTML document.

  1. Open the swiffer.html file in your preferred HTML document editor. Macromedia Dreamweaver, Notepad (PC), SimpleText (Mac), or BBEdit will do just fine.
  2. Somewhere between the <HEAD> </HEAD> tags, insert the following HTML
  3. This <META> tag has two attributes, http-equiv and content. The http-equiv attribute instructs the hosting Web server to add the value of http-equiv as a discrete name in the MIME header of the HTML document. The value of the content attribute becomes the value of the MIME entry. Here, the Web browser will interpret the META tag as:

    Refresh: 5; URL=download.html

    in the MIME header. This name/value pair tells the browser to reload the browser window in five seconds, with the file download.html. After testing, you may decide to increase the time the browser waits before reloading a new URL. On slower connections (or during peak Internet hours), you may find that five seconds is not long enough for the Flash movie to initiate its getURL actions.

  4. Save the HTML file. At this point, you need to create a download.html file. As a temporary measure, you can use the scriptDetection.html file from the previous detection method. You also need to create flash3.html, flash4.html, and flash5.html files for the getURL actions in the swiffer.swf movie.

When you have your HTML documents ready, you can load the swiffer.html document into a browser. If the Flash Player is not installed, then the META tag should transport the browser location to the download.html URL. If the Flash Player is installed, then the Flash ActionScript will direct the browser to the appropriate page.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics