Control Flash from Javascript

Posted byProsoxi.com Webmaster Leave a comment on Control Flash from Javascript

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.

http://www.permadi.com/tutorial/flashjscommand/

Leave a comment