====== Tutorials ======

{{tag>flashjs tutorial}}

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

  * [[http://www.communitymx.com/content/article.cfm?cid=D7491&print=true|Using the Flash / JavaScript Integration Kit]] - Community MX, with example code.
  * [[projects:flashjs:tutorials:ffnyc05|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.


==== Integrating FlashJS Kit with Flash Detection Kit ====

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 **[[http://www.macromedia.com/software/flashplayer/download/detection_kit|Flash Player Detection Kit]]**. Just follow these steps:  
=== Setup you flash content page following Flash Player Detection Kit ===
Just follow the steps indicated in [[http://www.macromedia.com/devnet/flash/articles/fp8_detection.html|this tutorial]] 
=== Add Flash JavaScript Integration Kit code to your web page ===
I asumed that you have read all the instructions in [[projects:flashjs:documentation]].

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

<code javascript>
<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>
</code>

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

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

=== Modify the FlashTag.js file. ===

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:
<code javascript>function FlashTag(src, width, height)
{
    this.src       = src;
    this.width     = width;
    this.height    = height;
    this.id        = null;
    this.bgcolor   = 'ffffff';
    this.flashVars = null;
}
</code>
Delete setVersion method.

<code javascript>FlashTag.prototype.setVersion = function(v)
{
    this.version = v;
}</code>

In class ''FlashTag.prototype.toString'' replace the line:
<code javascript> flashTag += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='+this.version+'" ';</code>
by this line:
<code javascript>
        flashTag += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" ';</code>


=== Merge Flash JavaScript Integration Kit and Flash Detection Kit Javascript codes. ===

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:

<code javascript>
<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> </code>

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:

<code javascript>
<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> </code>