STEP 3 of 3 : Javascript calls Flash
At this point, we’ll finally make good use of the id value of our Flash <object> (and, again, that’s not the id attribute of its placeholder element). We will call Actionscript functions from our *.js file using very basic Document Object Model scripting :
If we’ve used verbatim the code from the preparation section (STEP 1 of 3), our id will have the following value — given that we’ve used either the UFO library, the SWFObject library, or just plain XHTML markup :
| Method | id attribute |
|---|---|
| UFO | ufoElementNodeId |
| SWFObject | swfObjectElementNodeId |
| XHTML markup | flashMovieId |
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 yet another look at the ExternalInterface class. In the Actions panel, in the upper-left corner, look under ActionScript 2.0 classes → flash.external package. The ExternalInterface class has two methods : call and addCallback. Using the method addCallback is like leaving Javascript with a particular business card : If you need to call me because you want me to do this very precise thing, dial that number. You may call me at any time. I am sitting by the phone, not exactly waiting for your call (I have movies to play), but I am ready to pick up. And oh, I have this other number if you need me for this other thing...
In the previous section of this article, we invoked the method call whenever we needed to say something to the browser. With addCallback, we leave our number once. However, we leave as many different numbers as there are tasks we’re ready to perform.
| Method | Description | How to use the method (blueprint) |
|---|---|---|
| addCallback | Exports an Actionscript function so that it becomes callable from the container (i.e. browser in our case). | public static addCallback(functionNameInJavascript:String, instance:Object, method:Function):Boolean |
| call | Calls a function exposed by the Flash Player container (i.e. a named Javascript function), passing zero or more arguments to it, and getting a return value | public static call(functionNameInJavascript:String, [argument1:Object]):Object |
What “public static” means
The “public” keyword means that the call and addCallback methods are exposed to the outside world, and not only used internally in the class definition. The keyword “static” means that we call the methods on the class itself, using the dot syntax : ExternalInterface.method(). We need not create any instance of the ExternalInterface class.
While the first parameter “functionNameInOurJavascript” is a string, and is the phone number we give to our Javascript, myFunction is the name of a function defined in our ActionScript, “only for internal use”. Communication takes place in the following way : whenever our Javascript makes the following “phone call” :
The Flash player, who has that phone registered in its phone book (for the Flash movie with unique id flashMovieId) invokes the corresponding ActionScript function myFunction.
Preparing the ground in our *.js file : creation of a form
Our example will involve actual talk, even if that’s not very original. From our Javascript, we will send some text to display (nicely) in the Flash movie. We need an XHTML form for this, with a text input and a submit button. When the DOM tree is built, we will register an event-handler function on this form onsubmit property.
Here is some basic markup for the form :
<p>
<label for="inputText">Enter some text and press update :</label>
<input type="text" id="inputText" value="some text" />
<input type="submit" id="mySubmit" value="update" />
</p>
</form>
The form is very basic. We should style it using CSS.
In our *.js file, we register our event-handler function on the form’s onsubmit property once the web page is loaded :
function init() {
var myForm = document.getElementById("myForm");
myForm.onsubmit = function() {
var inputText = document.getElementById("inputText").value;
updateFlash(inputText);
return false;
}
The Javascript updateFlash() function needs to be defined. This function will dial-up the phone number associated with a particular Flash task. In our example, this phone number, as it is defined in the Flash *.fla file, will be sendTextToFlash.
document.getElementById("flashMovieId").sendTextToFlash(inputText);
}
Setting the callback in our *.fla file
There are two things we need to do for each task that Flash is ready to accomplish “on call” : give out a card with a phone number, and set up a function to accomplish the corresponding task.
In our example, the Flash movie will have to display text that Javascript will send to it. On the stage, we create a dynamic input text area with the following properties :
On the layer and in the frame where we put our ActionScript code, we type this :
function updateText(someText:String):Boolean {
_root.inputText_txt.text = someText;
return true;
}
Again, “sendTextToFlash” is a phone number, it is to be used by the container, i.e. in the Javascript. Whereas updateText is the name of an Actionscript function, that we need to define — and test locally !
Javascript calling Actionscript with arguments
If Javascript is calling our “phone number” with arguments, we need to mirror the way both these functions are constructed : sendTextToFlash in our Javascript, and updateText in our Actionscript. We set our type-casting in the way that we define the function updateText(). The value someValue sent when calling sendTextToFlash(someValue) in the Javascript — whether that’d be a number or a string — will be type-casted into a String in our ActionScript if we say it so in our function’s definition :