Detect which version of the Flash Player a viewer has available and supply alternative content in the event that the necessary Player is not available. The alternative content, in this case, will be a link for the viewer to acquire the appropriate Flash Player, if desired. To assist in expressInstall of the Player, the .swf will be registered with SWFObject. This method of setting up Flash Player detection does not require the use of a plugin and gives you easy and direct access to the generated code.
SWFObject 2.x is an open-source application brought to you by Google. To view the open-source license for SWFObject 2.x, please visit http://www.opensource.org/licenses/mit-license.php. For further information on SWFObject and for another download source for the files needed to enable it to work, please visit http://code.google.com/p/swfobject/.
For supplemental information regarding SWFObject 2.x from Adobe, please visit http://www.adobe.com/devnet/flashplayer/articles/swfobject.html for an article entitled Detecting Flash Player versions and embedding .swf files with SWFObject 2.0, created by Bobby Van Der Sluis.
In theChapter 1 folder, make sure that you have access to the following files: swfobject_test.swf, expressInstall.swf, swfobject.js, and detection_generator.htm. They are located inside the Detection with SWFObject folder.
Move the swfobject_test.swf, expressInstall.swf, and swfobject.js files to the root level of your theme folder. Technically, the .swf you are embedding can be located anywhere, as long as you use the absolute URL in your code.
The detection_generator.htm file holds the open-source application that generates the necessary Flash Player detection code for you to put into your PHP template.
Be aware that hand coding your live website is a great way to learn and a fast way to work. You are probably going to make a few mistakes the first time through. It is in your best interest to have all of your information backed up before editing your site. You may want to have a text editing program or a WYSIWYG editor like Dreamweaver to maintain and organize copies of your files at each stage of development.
Another option is to set up WordPress locally so that the program runs on your computer instead of a server. XAMPP is a cross-platform utility that can help set up the Apache web server on your computer. You can download it here: http://www.apachefriends.org.
The benefit of this approach is that you do not have to upload files via FTP or reload pages to see the changes you've made. Also, your work in progress will be private—no one will be able to see your site until you move your completed site from the local install to your server.
2. For the SWFObject configuration section, leave the default settings for SWFObject (.js) as swfobject.js and for Publishing method as Static Publishing. Change Detect Flash Version to the version of the Flash Player appropriate for your animation. For example, the default of 9.0.0 is adequate. If you are using the latest and greatest capabilities of Flash CS4, instead change the version to 10.0.0. Check the box for Adobe Express Install and leave the file name as it is. This can be seen in the above screenshot.
3. For the SWF definition section, change the name of the Flash (.swf) to the name of your
.swffile. In this case, change it to:swfobject_test.swf. Dimensions need to be changed to the width and height of your.swffile. Change this to 320 x 240 pixels. Flash content id can stay as the default. This can also be seen in the above screenshot.4. For the HTML definition section, do not change anything.
5. Click the Generate button to generate the necessary Flash detection code in the window at the base of the application. Kimili generates the code and puts it into your WordPress shortcode. The SWFObject 2.x generator gives you direct access to your code. You then have to copy/paste the code to the appropriate location in your chosen template in WordPress. Your code should look like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("myFlashContent", "10.0.0", "expressInstall.swf"); </script> </head> <body> <div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240" id="myFlashContent"> <param name="movie" value="swfobject_test.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="swfobject_test.swf" width="320" height="240"> <!--<![endif]--> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> </body> </html>6. Select the <div> tag in the body section of the code. Everything from
<div>to</div>gets selected. Copy this (Edit | Copy or Ctrl-C).7. In the sidebar of your WordPress Dashboard, click on the arrow to the right of Appearance. Then, click on Editor.
8. On the right side of the screen, you now have a list of all the templates that are in the root directory of the
Themefolder. Click on the title of the desired.phpfile. This loads it in the Theme Editor.9. Paste the code you copied from the code generator (Edit | Paste or Ctrl-V) into the appropriate Template and <div> tag. Refer back to Developing a Strategy: Where to Place a .swf? if needed.
10. For the head content, select and copy the following:
<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("myFlashContent", "10.0.0", "expressInstall.swf"); </script>
Back in WordPress, open up header.php by clicking on Appearance | Editor | header.php. Paste the selected text in the head section after the</style> tag and before the</head> tag.
The code generator creates the code for you based on the choices you make. It generates the code within the basic structure of an HTML page. The code generated is web standards compliant and supports the incorporation of alternative content.
The JavaScript elements in the<head> section of the .htm generated HTML output accesses the swfobject.js file. This is a library of JavaScript necessary for the Flash Player version detection process to take place. The JavaScript elements also register your .swf file with the library and tell it which version of the Flash Player is needed.
In the body section of the document, a <div> tag is created that holds the object and nested object information/method that delineates which .swf is to be played, the width and height of it, and what alternative content to display if the appropriate Flash player version is not found. Notice that special coding is used to account for the needs of Internet Explorer, for example:<!--[ if !IE]>-->
If you want have your .swf dimensions relative (in percentages) instead of absolute (in pixels), you have two choices:
Choice #1:
1. Go back into the
detection_generator.htmfile.2. Change the Dimensions to 100 x 100 percentage, as seen below.
3. Click Generate.
4. Copy/paste your new code as needed.
Choice #2:
In WordPress, change the dimensions in pixels to dimensions in percentages. That section of code should look like this:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent"> <param name="movie" value="swfobject_test.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="swfobject_test.swf" width="100%" height="100%"> <!--<![endif]-->
The default setting for the detection_generator.htm file is for Static Publishing. The other choice is Dynamic Publishing. Static Publishing is able to reach a larger audience because of the way it is constructed. There is less dependency on JavaScript. The downside is minimal. As per Adobe's Bobby Van Der Sluis, Static Publishing does not have a solution for click-to-activate mechanisms. However, those are already being phased out of use (Internet Explorer and Opera were the browsers of interest with this). Dynamic Publishing relies more heavily on JavaScript, even for embedding the .swf file, so the audience reached is smaller. A couple of perks are that it generates less code and has no issue with click-to-activate mechanisms.
1. All you have to do to change the publishing method is open the
detection_generator.htmfile and change Publishing method to Dynamic Publishing, as seen below, leave the defaults as desired, and click Generate.
2. Notice there is slightly different and slightly less code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; var attributes = {}; swfobject.embedSWF("swfobject_test.swf", "myAlternativeContent", "320", "240", "10.0.0", "expressInstall.swf", flashvars, params, attributes); </script> </head> <body> <div id="myAlternativeContent"> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; var attributes = {}; swfobject.embedSWF("swfobject_test.swf", "myAlternativeContent", "320", "240", "10.0.0", "expressInstall.swf", flashvars, params, attributes); </script> </head> <body> <div id="myAlternativeContent"> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> </div> </body> </html>3. Copy/paste the necessary parts of this code into WordPress.
More options are available to you in the SWF definition section of the code generator. Click the More button to see them (they will look like the image below):
Choose and change Attributes and Parameters here if you would like the generator to create even more code for you. Many of these options are most useful when the .swf you are embedding is going to be the sole content of the .html page.
If you are doing a test run, you may want to change the quality setting to low to cut down on load time. Just remember to turn it back to the default or high when you are ready for the real deal.