REFERENCING FLASH MOVIE USING JAVASCRIPT


 
FastClick Ad Network


This tutorial discusses several approaches to referencing a Flash movie from within an html document. 

Your browser must be JavaScript enabled to see the examples.   Tests are conducted on PC browsers only.   Macintosh and other systems might NOT support JavaScript and Flash communications.   In Opera, Java plug-in might need to be installed for Javascript->Flash communication.  
Click here for Java information.

Background
Referencing an element is necessary to be able to modify the element.  Referencing a Flash movie is usually done to send "commands" to the movie.  An analogous example is the need to reference a <form> element to check whether the user has entered a valid data.  For example, in this code, the variable myElement references the element named "myElement".

var myElement=getElementById("myElement") 

Another example: I have this form. 

<form method="POST" id="myForm" >
   <input type="text" id="myTextField" size="20">
</form>

If I want to modify the text field in the above form, then I need to reference the text field like below:

document["myForm"]["myTextField"].value="some new text"; 

Or

document.getElementById("myTextField").value="some new text"; 

With a Flash movie, there are some commands that can be sent to the movie.   Some of the common ones are: StopMovie(), Play, SetVariable(), or GetVariable().  These commands are useful as ways to allow interaction between the Flash movie and other web page elements.  This subject is discussed in more details here.

Options
Within its html document, a Flash movie is an element of the html document.  An element (such as <form>, <table>, or <img>) can be referenced as a JavaScript object.   In Internet Explorer (IE), a Flash movie as also a COM object or an ActiveX object.   There are many different ways to reference an element using JavaScript:

Method Variation Notes
window.document[movieId] window.document.movieId
document.movieId
Mozilla browsers such as Netscape, also works on IE) 
window[movieId] window.movieId IE as of ver 5 
document.embeds[movieId] document.embeds.movieId
embeds.movieId
Mozilla browsers (Netscape, Firefox, Opera) 
document.getElementById(movieId)   Most modern browsers

As you can see, there are plenty of choices.  The question is, which one works best? 

The most common nowadays is to use the function: getElementById().   Unfortunately, this method does not always work as expected.  It works on Internet Explorer, but on other browsers (such as Opera or Firefox), it might not work as you expected.   Some of the possible reasons are explained later in this tutorial.

Example
Below is an example of how a Flash movie is placed within a html page.  This movie is very simple movie with a stop action at the beginning.  The movie is shown below under Test Runs subject.  This particular html code was auto generated by FlashMX's Publish command.  Notice that the Flash movie file is simplemovie.swf; and an id and a name have been assigned automatically by Flash to match the movie filename (minus the .swf extension).   In reality, the name and id could be anything (but do not use exoteric names, especially, do not start with a number), as long as it has not been used by any other element in the same page.   

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  WIDTH="150" HEIGHT="75" id="simplemovie" ALIGN="">
  <PARAM NAME=movie VALUE="simplemovie.swf"> 
  <PARAM NAME=quality VALUE=medium> 
  <PARAM NAME=bgcolor VALUE=#FFFFFF> 
  <EMBED src="simplemovie.swf" 
    quality=medium 
    swliveconnect="true" 
    bgcolor=#FFFFFF WIDTH="150" HEIGHT="75" 
    name="simplemovie" 
    ALIGN=""
    TYPE="application/x-shockwave-flash" 
    PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
  </EMBED>
</OBJECT>

To reference this movie using Javascript, a simple code will look like
document.getElementById("simplemovie")
.  Suppose we want to use JavaScript to ask this movie to continue playing, then the code may look like this:

document.getElementById("simplemovie").play();

This approach however does not work in some browsers, you can see the result of using this code in Method 5 below.

Test Runs

All the tests are done using WindowsXP machine.  The Flash movie is shown below along with a table consisting some test runs.  Test the method by clicking the Test button on each row.  If the test is successful, the movie will play once then stop.  You can do the different tests once the movie stops.


 
  Method Test IE6 Firefox 1.04 Opera 8 Netscape 7 Notes
1
window.document["simplemovie"]
window.document.simpleMovie
Y Y Y Y  
2
document.simpleMovie 
document["simpleMovie"]
Y Y Y Y Variation of 1
3
window["simplemovie"]
window.simplemovie
Y N N N  
4
document.embeds.simplemovie
document.embeds["simplemovie"]
N Y Y Y  
5
document.getElementById("simplemovie")
Y N N N  
6
document.getElementsByName("simplemovie")[0]
Y Y N Y Returns the 1st named element. 

The cells in yellow indicate that the method had failed.  A failed method do not necessarily mean that the method is not supported.  The most common reason for failure is getting a wrong element.  For example, Firefox and Opera supports getElementById().  But what happens was, getElementById() returned the element under the <object> tag.  Since these browsers use the <embed> tag, instead of the <object> tag, they're getting the wrong element.   Another anomaly is Opera 8.  Opera 8 identifies itself as "Microsoft Internet Explorer" in the navigator.appName .  It is however; does not appear to support the <object> tag, but it uses the <embed> tag instead.  What's up with that?  Also notice another weird thing in Method 6: it works on Internet Explorer, even though there's no name attribute assigned to the <object> tag. 

Conclusion
Based on these tests, window.document[movieName] is the most reliable way to retrieve a Flash movie.  The function below is written to reflect this.  It should work on the browsers tested above.  However, I am adding some extra code to anticipate problems.  Since the document.embeds is the second most supported method, it is added when the first try using window.document[movieName] failed (but we need to make sure that the browser is not Internet Explorer, because Internet Explorer will not use EMBED tags).  Finally, when both failed, we use getElementById() as the last resort.

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);
  } 	
}	
 

Some Notes About the Testing Method
The code below shows the Javascript code associated with the buttons on the text matrix.  This function takes a string as a parameter.  The string is a command that will be executed. 

function testEval(stringToEval)
{
  var movie=eval(stringToEval);
  if (movie)
  {
    if (movie.PercentLoaded())
    {
      if (movie.PercentLoaded()==100)
      {
        movie.Play();
      }
      else
      {
        alert("movie is still loading, try again soon");
      }
    }
    else
    {
      alert("movie object found-but unable to send command"); 
    }
  }
  else
  {
    alert("movie object not found");
  }
}

A call to the testEval function may look like this:

testEval('document.getElementById(\'simplemovie\')')

In testEval(), eval(stringToEval) is called. 

eval('document.getElementById(\'simplemovie\')')  

eval() is a handy function to execute it's parameter, so it executes the command passed to it, which in this example:

document.getElementById('simplemovie')  

If successful, an object will be returned.  We then make sure the movie has loaded 100%, then call the Play() method on the movie.   

Bare bone Sample
Here's a simple html file with minimal code that can be used for testing.  The html page loads a swf file named simplemovie.swf and plays the movie when the button is clicked.  You can use this html file and replace the swf filename with the file that you want to test. 
html file
swf file

 

Things to Watch For

  • id and name are case sensitive.
  • Do not use exotic characters within a name or an id.  Always start with an alphabet letter; avoid using <space>; avoid using special characters such as $, #, (,),+, - ;.  Do not start with a number.
  •  My suggestion is to stick with alphabet letters.  If you encounter a problem, this is the first thing you should check. 
  • Avoid re-using an id or a name that are already used.  If you do, you might get a wrong element when you're trying to retrieve the movie.
  • Avoid assigning a name to the Flash <object> tag, similarly, avoid assigning id to the <embed> tag. 
  •  

    <<INDEX>>

    (C) F. Permadi
    permadi@permadi.com
    Terms of Use