INTERACTION WITH JAVASCRIPT


One of the more wonderful Flash capability is its ability to communicate with JavaScript.  This example is intended to show various JavaScript methods (functions) that can be used to interact with a Flash movie.  

Your browser must be JavaScript enabled to see this example.  This tutorial has been tested on Netscape 4.7, Netscape 7, Internet Explorer 5, Internet Explorer 6, Firefox 1.04, and Opera 8, for the PC.  Other browsers and Macintosh browsers might have problems running this.  Flash 4 player or newer is required.  This tutorial is intended for Flash 4 or better.     

Below, you see a Flash movie, and a JavaScript controller.  The controller buttons are all standard html <form> element.  The buttons are associated with JavaScript function calls.  When a button is clicked, it "connects" to the Flash movie.  Try it and then please read on.

Flash Movie

JavaScript Controller
 
Form Data:

 

How It Works


Within the html page, a Flash movie is just an "object," much like a window, a form elements, or an image.  (In Internet Exporer (IE), a Flash object as actually an COM object or an ActiveX object.)  Read more about it here.  The Flash movie object can be referenced several ways depending to the browsers.  

window.document[movieName]      // (on Mozilla browsers such as Netscape)
window[movieName]               // (on Internet Explorer as of ver 5)
document.embeds[movieName]      // Mozilla Netscape, Firefox or Opera

Here's a function that retrieves the Flash movie.  Ideally, it should not be this complicated, but if you're having problems, first check this other tutorial.

function getFlashMovieObject(movieName)
{
  if (window.document[movieName]) 
  {
      return window.document[movieName];
  }
  if (navigator.appName.indexOf("Microsoft Internet")==-1)
  {
    if (document.embeds && document.embeds[movieName])
      return document.embeds[movieName]; 
  }
  else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
  {
    return document.getElementById(movieName);
  }
}

 

Most modern browsers support using getElementById(movieName) .  While this can be used to retrieve the Flash movie on Internet Explorer; on other browsers (such as Opera or Firefox), it does not work as expected.  The reason is because those browsers need to use the element in the <embed> tag, whereas getElementById will retrieve the element in the <object> tag. 

 


Associated with the Flash movie object, are several predefined functions (methods) that can be used to "connect" or communicate with the movie.  These methods can be called from within scripting languages such as JavaScript or VBScript.  

Far from just being able to control the playback of the movie, Flash also provides methods that can be used to send and receive data from the Flash movie.  So, a html page can send and receive data from a Flash movie.  To see this capability:


Receiving data from a Flash movie:
- Enter some text in the Flash movie's Data field, then press Receive Data.  The data from the Flash movie is then transferred to the html form.


Sending data to a Flash movie:
- Enter some text in the html Form Data field, then press Send Data.  The data from the html form field is then transferred to the Flash movie.

In the above example, JavaScript is used to create the interface for the Controller panel.  The Controller panel itself consists of standard html <form> buttons; and each button has an "onClick()" method.  (Note: onClick() is a JavaScript method.)  The "onClick()" event is associated with a function call, which in turns will call one or more Flash methods.   Below are the list of the Flash methods used in this example:

  • Play Button
    Flash method being used: Play()
  • Stop Button
    Flash method being used: StopPlay()
  • Rewind Button
    Flash method being used: Rewind()
  • NextFrame Button
    Flash method being used: TGetProperty(nameOfTargetMovieClip, propertyIndex) and GotoFrame(frameNum)
  • Zoomin Button & Zoomout Button
    Flash method being used: Zoom(relative percentage)
  • Send Data
    Flash method being used: SetVariable(variableName, variableValue)
  • Receive Data
    Flash method being used: GetVariable(variableName)

For example, the Send Data button is calling a user defined JavaScript function named sendDataToFlashMovie().  This function is shown below and it can be viewed by viewing the source of this html page.  This function when called, will in turn call the SetVariable() method of the Flash movie object:

function SendDataToFlashMovie()
{
     var flashMovie=getFlashMovieObject("myFlashMovie");
     flashMovie.SetVariable("/:message", 
          document.controller.Data.value);
}

This function obtain the Flash movie object by calling getFlashMovieObject("myFlashMovie"). Note that "myFlashMovie" is the id and the name that I assigned to the Flash movie (as shown below).  

SendDataToFlashMovie() then sets a variable in the Flash movie called "message" located in the movie's main scene timeline.  The value of the variable is obtained from Form Data.  The Form Data is a <textarea> named "Data".  The <form> itself is named "controller".  So the object "document.controller.Data.value" refers to the value of the Form Data <textarea>.  Examine the <form> portion of this html page's source to see more detail.

EMBED and OBJECT tag requirement
Both <embed> and <object> actually does the same thing, but most people use both because one is only recognized by Mozilla browsers (Netscape, Firefox), and the other only by Internet Explorer.  Internet Explorer browsers uses <object> tag; Mozilla browsers (such as Netscape and Firefox) use <embed> tag. 

To enable communication with JavaScript, below are some additional requirement for each tag.  First, though, and example of how a Flash movie is inserted on a html page.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="" id="myFlashMovie" width=481 height=86>
<param name=movie value="flips2.swf">
<embed play=false swliveconnect="true" name="myFlashMovie" 
src="flips2.swf" quality=high bgcolor=#FFFFFF 
width=481 height=86 type="application/x-shockwave-flash" 
....>
</embed >
</object >

In this example, the Flash movie name and id is "myFlashMovie".  (This name is arbitrary.  It is recommended to use the same value for both the id and name within the same Flash movie; but you must make sure that no other element uses the same name and id.  Also, use alphanumeric characters only, and do not start with a number.)    Here're some requirements to make them scriptable.

The <object> tag:
- the Flash movie must have an id.  For example, in this the example above, the id is set by id="myFlashMovie"

The <embed> tag:
- the Flash movie must have a name.  For example, in the example above, the name is set by name="myFlashMovie"
- the <embed> tag must include swliveconnect="true" attribute, to turn-on the ability to "connect" with the scripting language (JavaScript).

It is recommended to use the same value for that both the id and name within the same Flash movie.



Further Reference

These are just some of the examples of the available Flash methods that can be used to control a Flash movie.  For a complete list, consult: the Macromedia reference.

If you're having problems, I suggest reading the tutorial about Referencing Flash Movie Object elsewhere on this site.

 

<<INDEX>>

(C) 2000 F. Permadi
May 2000

permadi@permadi.com

Terms of Use