ExternalInterface Call with AS3 and Javascript

Problem

I recently came along this problem with Flash ActionScript and JavaScript. How do you send commands to JavaScript or to the document object model (DOM) from inside of Flash?

The getUrl() method of Flash throws tons of security warnings in Internet Explorer. As a Web Developer, highly unfortunately, you still might have to consider Internet Explorer if you intend to keep your job.

Other alternatives to getUrl() like, for instance the fscommand action doesn't work either. fscommand is a depreciated action for telling ActiveX or your Web browser what to do. Moreover, fscommand is almost 7 generations of Flash old. So let's forget about it quickly again.

Solution

As it turns out in Flash with ActionScript 3 we can make use of another object and its method, namely the

ExternalInterface.call

Pitfalls

To be able of invoking the method correctly, there are a few things we have to consider first.

A major issue is that you have to put your Flash and the HTML site into a live server environment. A friendly reminder to all the lazy ones out there to finally set up that IIS (seriously?), apache or nginx locally.

Code

After you make sure you have your application running in a real Web server environment, we can move on to some coding examples. We need to define a Javascript function that can be called by Flash.

Let's give it the name JSTestFunction. We can also pass our JSTestFunction a string or an object.

Luckily with AS3 everything has become significantly better. Loose typing and global variables by default are long gone. In the code above we used some of AS3's new feautures. We did import the flash.external package and declared the type of JSvalue. Then we used the call method of the ExternalInterface class and are passing it the name of our JavaScript function and a String.

Return a value back to Flash

This is how JavaScript returns a value back to Flash.

Now if you run your Flash application and invoke the method call of the class ExternalInterface, the variable return_JS will then contain the returned value from JavaScript.

You can verify this by using a decent debugging tool, I used Arthropod years ago, but the package is not available anymore, therefore I would recommend Thunderbolt AS3

Why am I not using a built-in tracer? In my opinion the days of annoying trace(); or alert(); pop-ups are long gone.

Initiate from JavaScript

To complete this tutorial, let's see if we can also do this the other way around and initiate the communication between the two programming languages from inside JavaScript. Again, in the first step we make sure to prepare everything properly in Flash.

Back in JavaScript you would simply call the function callFlash. The name of the function is not important, just make sure you call the method addCallback of the class ExternalInterface. We pass two variables to that class, the name of the function that JavaScript will call and the name of the function that Flash should execute internally.

From inside JavaScript you can call the Flash method like this:

flashObject.callFlash (1);

The flashObject is the unique identifier I gave my SWF object inside of HTML. I passed the integer 1 over to Flash which then will get passed on to the object myObj of the function JS_Phonebooth.

Compatibility

I successfully tested this with all major browsers like Firefox, Internet Explorer, Chrome and Opera on Windows as well as on Mac. When we are using this technique we should consider the synchronous way in which the call is working, this means Flash or JavaScript can tend to show hanging issues depending on the complexity of our application.

As always I welcome you to drop any suggestions in the comments below or link to this article as a token of your appreciation for my work.

Sources

http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7cb2.html