by
kirupa |
11 April 2011
Have questions? Discuss this Flash / ActionScript tutorial
with others on the forums.
While Flash is a great environment for an application to run happily
in its own self-contained world, there may be times when you will want
to use Flash to communicate with the HTML document at large. One of the
primary ways of doing that is through using JavaScript which can
effortlessly manipulate the HTML DOM as well as be easily invoked via
Flash.
Click on the Go button in the following example to see
what I am talking about:
[ click the
Go button to see a JavaScript alert pop-up! ]
When you press the Go button, a JavaScript alert is
displayed with the contents of the Flash input text as its
content. For kicks, you can change the text to something
else and press the Go button to see that text displayed
instead.
For this tutorial, as you can imagine by the title, you need a
JavaScript function that you can call in the HTML page hosting your
Flash application. If you don't have a JavaScript function, feel free to
use mine:
- <script>
- function
displayAlert(message)
- {
- window.alert(message);
- }
- </script>
The displayAlert function takes some text as its
argument, and it spits that text back as part of a
JavaScript alert. It's pretty simple really.
There is only one AS3 function that you need to famliarize
yourself with when it comes to calling JavaScript. That line
is ExternalInterface.call().
The way you use this function is by passing your function
name as part of the argument to the call function:
- ExternalInterface.call("myFunctionName()");
If your JavaScript function contains arguments, you have
two ways of specifying the argument. Let's say that our
JavaScript function has a signature that looks as follows
where one argument needs to be specified:
- <script>
- function
displayAlert(message)
- {
- ...
- }
- </script>
The most direct way would be to simply pass in the
argument directly as part of your function call:
- ExternalInterface.call("displayAlert('"
+
inputField.text
+"')");
Note that the value of the argument is something I
provide for evaluation at runtime, and I am using simple
string concatenation techniques to make this happen.
The other approach is by chaining the arguments as a part
of your call function
itself:
- ExternalInterface.call("displayAlert",
inputText.text);
Your first argument will always be the JavaScript
function you wish to call. The subsequent arguments will map
in order to the arguments you wish to pass to the JavaScript
function itself.
You can use ExternalInterface to call JavaScript
functions that happen to return a value as well. Let's say
you have a function that returns the current date:
- <script>
- function
displayCurrentTime()
- {
- var
date
=
new Date();
- return
date.toLocaleTimeString();
- }
- </script>
You can call this function just like you always would,
but simply call it like you would any other kind of a getter
function where you store the returned value as part of some
variable:
- var
currentTime:string
=
ExternalInterface.call("displayCurrentTime()");
When this code runs, Flash will call the
displayCurrentTime
JavaScript function and store the returned value from it in
the currentTime variable.
Well, that's
all there is to this short article on using
ExternalInterface.call to call the appropriate JavaScript
function. The only frustrating thing about working with
Flash to call JavaScript is the whole experience in actually
building and testing an application that uses it.
You can't have Flash publish the HTML for you, because
the HTML Flash publishes will not contain the JavaScript
code. Any attempt at adding it will automatically overwrite
your changes the next time you Publish. Beyond this, your
Flash Player will more than likely not allow you to execute
scripts running on your computer due to security reasons. If
your SWF and HTML file containing the script online, things
become "easier". The downside is that your browser will
cache the SWF file. Uploading a new SWF and overwriting the
old SWF with any updates will only display the updated
version if you clear your cache first. Ugh!
Besides these minor inconveniences developing
Flash/JavaScript interoperability, there is nothing at all
difficult about using Flash to call JavaScript functions or
to have the JavaScript function return some data back.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|