Tutorials

This page lists tutorials about how to use the Flash / JavaScript Integration Kit

• Using the Flash / JavaScript Integration Kit - Community MX, with example code.
• Integrating Flash with HTML, JavaScript and Ajax - FlashForward NYC 2005 Presentation. Mike Chambers and Christian Cantrell. * Integrating FlashJS Kit with Flash Detection Kit - Detects correctly if flash and javascript are enabled in clients browser.

The Flash JavaScript Integration Kit don’t implements any method to detect if clients browser has flash installed. Just does a document.write with the flash tag (view FlashTag.js).

It’s very simple to do a mixture between Flash JavaScript Integration Kit and Flash Player Detection Kit. Just follow these steps:

Just follow the steps indicated in this tutorial

I asumed that you have read all the instructions in Release History.

1. Copy all JS files (Exception.js, FlashTag.js, FlashSerializer.js, FlashProxy.js) to your web directory
2. Copy JavaScriptFlashGateway.swf file to your web directory
3. Include all necessary references in your html code:

<script type="text/javascript" src="path/to/Exception.js"></script>
<script type="text/javascript" src="path/to/FlashTag.js"></script>
<script type="text/javascript" src="path/to/FlashSerializer.js"></script>
<script type="text/javascript" src="path/to/FlashProxy.js"></script>

	var flashProxy = new FlashProxy(lcId, 'path/to/JavaScriptFlashGateway.swf');

1. Add your flashProxy.call in the head of your page

FlashTag class writes in the code of your page the version of flash needed to play correctly your movie. But this is not necessary if you use Flash Player Detection Kit. So, you have to delete all references of the flash version in the file.

Replace the FlashTag function by this code:

function FlashTag(src, width, height)
{
    this.src       = src;
    this.width     = width;
    this.height    = height;
    this.id        = null;
    this.bgcolor   = 'ffffff';
    this.flashVars = null;
}

Delete setVersion method.

FlashTag.prototype.setVersion = function(v)
{
    this.version = v;
}

In class FlashTag.prototype.toString replace the line:

 flashTag += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='+this.version+'" ';

by this line:

        flashTag += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" ';

In the body of your web page you will have a JS code that checks if the client browser has the right version of flash player and writes the flash tag or an alternate content. If client browser has not javascript there will be a noscript tag.

This code looks similar like this:

<script language="JavaScript" type="text/javascript">
<!-- 
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) {
    var oeTags = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
    + 'width="500" height="500"'
    + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
 
    ........
 
    + 'play="true"'
    + 'loop="false"'
    + 'quality="high"'
    + 'allowScriptAccess="sameDomain"'
    + 'type="application/x-shockwave-flash"'
    + 'pluginspage="http://www.macromedia.com/go/getflashplayer">'
    + '<\/embed>'
    + '<\/object>';
    document.write(oeTags);
  } else {
    var alternateContent = 'Alternate HTML content';
    document.write(alternateContent);
  }
// -->
</script>
<noscript>
  No javascript content  	
</noscript>

Now you have to replace the document.write of the oeTags for the FlashTag necessary to perform the communication between flash and Javascript. Your new code should look like this:

<script language="JavaScript" type="text/javascript">
<!-- 
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) {
        var tag = new FlashTag('path/ to/flashMovie.swf', 100, 100); 
	tag.addFlashVar('lcId', lcId);
        tag.write(document);   
	hasRightVersion=true;
  } else {
        var alternateContent = 'Alternate HTML content';
        document.write(alternateContent);
  }
// -->
</script>
<noscript>
  No javascript content  	
</noscript>