Sample of usage with SWFObject

Top  Previous  Next  

SWFObject is a small Javascript file used for embedding Macromedia Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.

* Pages sent as text/html, not application/xhtml+xml.

 

How SWFObject Works

Using SWFObject is easy. Simply include the JavaScript file called swfobject.js and then use a small amount of JavaScript on your page to embed your Macromedia Flash content.

 

The following example shows the minimum amount of code you need to embed an SWF:

 

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

       <div id="chart">This text is replaced by the Flash movie.</div>

<script type="text/javascript">

       var so = new SWFObject("demo/swf/fcp-pie-chart.swf", "flashchart", "650", "400", "6", "#ffffff");

       so.addVariable("xml_file", 'demo/data/fcp-3d-pie-chart-caption-1.xml');

       so.write("chart");

</script>

 

Download

swfobject_1.4.zip (ZIP, 40K) mirror

 

 

How to use this library with FCP Chart

The following sections describe what this code does.

 

Holding the SWF

 

<div id="chart">[...]</div>

 

This part prepares an HTML element that holds the SWF. The content placed in the "holder" element is replaced by the Flash content so that users who have Flash Player installed will never see the content inside this element.

 

Alternate content can be any combination of HTML and images—whether it's a message to your users who don't have Flash Player installed or simply alternate HTML content. This feature has an added bonus of letting search engines index your alternate content. For more detailed look at how SWFObject can help your search engine ranking, read the blog posting about Flash and search engine optimization.

 

 

Passing in the Parameters

 

var so = new SWFObject("demo/swf/fcp-pie-chart.swf", "flashchart", "650", "400", "6", "#ffffff");

 

This code creates a new SWFObject file and passes in the following required parameters:

 

  • swf: File path and name to your FCP SWF file.
  • id: ID of your object or embed tag. The embed tag will also have this value set as its name attribute for SWF files that take advantage of swliveconnect (used for JavaScript communication, replaced by ExternalInterface in Flash 8).
  • width: Width of FCP SWF.
  • height: Height of FCP SWF.
  • version: Required player version for your Flash content. This can be a string in the format of "majorVersion.minorVersion.revision" (example: "6.0.65") or you can just require the major version (for FCP Chart minor version is: "6").
  • background color: Hex value of the background color of FCP SWF.

 

 

Optional parameters include the following:

 

  • useExpressInstall: If you would like to upgrade users using the Express Install feature, use true for this value.
  • quality: This is the quality at which you wish to play your Flash content. If you specify no quality, the default is high.
  • xiRedirectUrl: If you would like to redirect users who complete the Express Install upgrade, you can specify an alternate URL here.
  • redirectUrl: If you wish to redirect users who don't have the correct Flash Player version, use this parameter and they will be redirected.
  • detectKey: This is the URL variable name that SWFObject looks for when bypassing the detection. Default is detectflash.

 

For example, to bypass Flash detection and simply write the SWF to the web page, you could add ?detectflash=false to the URL of the document containing the Flash content.

 

 

Passing XML data file to FCP

 

so.addVariable("xml_file", 'demo/data/fcp-3d-pie-chart-caption-1.xml');

 

This function tells FCP Chart which data file will to be parsed & displayed.

 

 

Writing the Flash Content to the Page

 

so.write("chart");

 

This code tells the SWFObject script to write the Flash content to the page—assuming the correct version of the player is installed on the user's system—by replacing the content inside the specified HTML element.

 

 

Simple Example Adding a Few Parameters

 

In this example, I create a new SWFObject file and set quality to "low" and alignment to "t":

 

<script type="text/javascript">

       var so = new SWFObject("demo/swf/fcp-pie-chart.swf", "flashchart", "650", "400", "6", "#ffffff");

       so.addVariable("xml_file", 'demo/data/fcp-3d-pie-chart-caption-1.xml');

       so.addParam("quality", "low");

       so.addParam("salign", "t");

       so.write("chart");

</script>

 

You can find a full list of the current parameters and their possible values in the following Flash Player TechNote: Flash OBJECT and EMBED tag attributes.

 

 

Pulling Variable Values from the URL String

 

The SWFObject script comes with a function that allows you to pull variable values from the URL string. For example, suppose you have a URL like this:

 

http://www.example.com/page.html?xml_file=demo/data/fcp-3d-pie-chart-caption-1.xml

 

Using the function getQueryParamValue(), you can easily pull these values from the URL and then pass them into your SWF. Using the previous URL, you would have the following:

 

<script type="text/javascript">

       var so = new SWFObject("demo/swf/fcp-pie-chart.swf", "flashchart", "650", "400", "6", "#ffffff");

       so.addVariable("xml_file", getQueryParamValue("xml_file"));

       so.write("chart");

</script>

 

The getQueryParamValue() function also supports reading variables from location.hash, which is used sometimes when deep-linking into your Flash application.

 

For more information visit author's site.