.
.
 
JavaScript Integration, Part 1

This is the beginning of a whole new dimension to the possibilites of using Flash. We will begin our tutorial series with learning how to use JavaScript to pass variables to Flash movies.

Download JavaScript1.zip used in this tutorial.

Dissymmetry Intermediate Flash Tutorials (5,214 bytes)

1) Create a movie with a text box that displays the contents of a variable called "text". Save the movie as "JavaScript1.fla" and publish both .swf and .html files using the Publish feature of Flash.

2) Insert the following JavaScript in the <head> tag of the html page that Flash generated. It is a sample function which sets a variable named "text" to the value "Hello World":

<script language = "javascript">
<!--
function JavaToFlash()
{
  window.document.JavaScript1.SetVariable("text", "Hello World");
}
//-->
</script>
Notice the "JavaScript1" object. the next step will show where and how this object is defined.

3) The movie object is setup using the following locations in the HTML page containing the Flash movie:

<OBJECT classid= "clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=4,0,2,0" ID=JavaScript1 WIDTH=550 HEIGHT=400> <PARAM NAME=movie VALUE="Movie1.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED name="JavaScript1" src="Movie1.swf" quality=high bgcolor=#FFFFFF WIDTH=550 HEIGHT=400 swLiveconnect=true TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED> </OBJECT>
It is imperative that all three locations the <object> ID parameter, the <embed> name parameter and the object specification (as shown in step 2) are identical for this to work in both Netscape and IE. Also note the presence of the "swLiveConnect=true" parameter, this is also necessary for use with the Flash Plug-In for Netscape.

4) Then add the following code to the end of the html code:

<a href="#" onClick="JavaToFlash()">Pass the Variable to Flash</a>

5) Open the HTML document and click the hyperlink at the bottom to see the interaction work.

6) For a complete listing of available Flash specific JavaScript Methods see Macromedia's Scripting with Flash 4.

These can all be used in the same manner as the SetVariable() method, by simply replacing the SetVariable() in the code given in step 2 with another of the methods and passing it the appropriate variables and parameters.

 

.
Right-Bottom 006699.gif (866 bytes)

"The Internet is the foundation for a new industrial order. ... If you don't believe deeply, wholly...that the Net is going to change your business, you're going to lose."  - Fortune Magazine

All graphics on this site are copyrighted by their respective distributors and may not be duplicated, modified in any fashion or used in any way without consent.

Last Updated: 12/5/07

Home |  Tutorials |  Basic |  Intermediate |  Advanced |  Contact Us