STEP 2 of 3 : Flash calls Javascript

At this point, we should have scribbled on a post-IT the id value of our Flash <object> (and not the id attribute of its placeholder element). But the thing is, we won’t need this value just yet. We will need it in the next section, when our Javascript will talk to our Actionscript.

If we’ve used verbatim the code from the preparation section (STEP 1 of 3), this id will have the following value — given that we’ve used either the UFO library, the SWFObject library, or just plain XHTML markup :

Using the ExternalInterface “package” in our Actionscript

Open your *.fla file in Flash 8. Find the layer and frame where you put your ActionScript code. Type in this line :

Let’s take a look at the ExternalInterface class. In the Actions panel, in the upper-left corner, look under ActionScript 2.0 classes → flash.external package. We have only two methods at our disposal : call and addCallback. We can do anything with them. Call-ing is picking up the phone to reach Javascript, whereas addCallback is leaving Javascript with a business card : If you need to call me, here’s my number. You may call me at any time. That number is for asking me how I’m doing. I am sitting by the phone, not exactly waiting for you, but always ready to pick up. I have this other number if you need me to ask you how you’re doing. In this section, we will use the method call.

What “public static” means

The “public” keyword means that we can call these methods from outside of the class definition (i.e. we can use them, period). The keyword “static” means that we call these methods on the class itself. We need not create any instance of the ExternalInterface class. It really is just like the Math class : we use the class Math by calling methods on Math, such as Math.random(). With the ExternalInterface, it’s the same thing.

Dipping a toe in the water with a simple Javascript function

So many things can turn sour when trying to use the ExternalInterface... At this point, we ought be able to call a built-in-core Javascript function such as alert(), to engage the browser into a one-way conversation. Try this before anything else :

If the Javascript function requires one or several arguments

We can pass any number of arguments, required by our Javascript function, to the method ExternalInterface.call(). Arguments have to be separated by a comma. The second argument passed to the ExternalInterface.call() method will become the first argument used by our Javascript function. The third argument passed to ExternalInterface.call() will become the second argument used in our Javascript function. And so on.

It doesn’t need to be a one-way call

In addition to this, we may record whatever value is returned by our Javascript function. To do this, we simply record the value returned by the call method. The method is ready to return an Object, that is, anything at all :

public static call(functionNameInJavaScript:String, [argument1:Object]):Object

Again, let’s try something ultra-simple. Core Javascript comes with a prompt() function, that prompts the “user”, through a dialog box, for a value.

We call the function prompt like this : prompt(question, defaultAnswer);

• question : the plain-text (not HTML) to be displayed in the dialog box. In here we ask the user to enter some information we want.
• defaultAnswer : the plain-text that’s displayed as default input in the dialog box. We pass "" (empty string) to make prompt() display an empty input box.
• prompt() returns a string, the value typed in (or not typed in) by the user in the dialog box after the user has pressed ok. If the user pressed cancel, prompt() returns null.

Let’s call that built-in function and display the value provided by the user in the Flash movie. On the stage, create a dynamic input text area with the following properties :

Then type in the following code in your *.fla file :

Republish the movie (making sure not to overwrite your html file), clear the cache in your browser and reload the web page. A dialog box will pop up. Try cancelling the dialog box ; reload the page, and try to ok the dialog without changing the default value ; and finally, reload and change the value then press ok.

We first determine if the value returned is defined. If it is, we “type-cast” that value into the type (String, Number) that was used by the Javascript function. Thereafter, the value is “ready to use” in our Actionscript.

Calling our own Javascript functions

There is absolutely nothing special about calling custom Javascript functions, compared to what we’ve seen so far. We have to define these functions in our Javascript file, a file with extension *.js (and link in that file in the web page <head>). That’s the only extra step. In the next section, we’ll make sure that a function defined on the Actionscript side of the communication bridge works “as is”, i.e. behaves as it should when called in our Actionscript code. In the same way, we really should make sure that our Javascript functions work on their own, when called from the *.js file, before we attempt any communication back and fro. That’s it for this section !