Calling JavaScript from Flash using AS3
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.

Getting Started
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.

The AS3 to call JavaScript
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.

Conclusion
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!