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".
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.
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.
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:
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.
