Syndicate

Feed

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 :

document.getElementById("flashMovieId").functionNameInOurJavascript(someValue);

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 :

import flash.external.*;

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.

ExternalInterface.addCallback("functionNameInOurJavascript", this, myFunction);

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” :

document.getElementById("flashMovieId").functionNameInOurJavascript(someValue);

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 :

<form id="myForm">
<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 :

window.onload = init;
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.

function updateFlash(inputText) {
  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 :

The properties of the dynamic text input

On the layer and in the frame where we put our ActionScript code, we type this :

ExternalInterface.addCallback("sendTextToFlash", this, updateText);
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 :

function updateText(someText:String):Boolean { ... }

 

AttachmentSizeHitsLast download
JScallsAS.zip6.73 KB235 years 44 weeks ago
Last edited by Caroline Schnapp about 6 years ago.

One file is attached to this posting. Login or register to download this file.


Comments

thanks and good luck.

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck.

Let’s take yet another

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 e-papierosy class has two methods : call and addCallback. Using the method addCallback is like leaving e-papierosy Javascript with a particular business card : "If you need to call me because you want me to do this very e-papierosy 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..."

Very Clear

This is the clearest sample/explanation so far I have found.

This is a very good tips

This is a very good tips especially to those new to blogosphere, brief and accurate information… Thanks for sharing this one. A must read article

http://topiarysg.com

java script and flash is fantastic. Hedges Park Condo, Topiary EC, Twin Fountains Woodlands

It really has been excellent

It really has been excellent undergoing your blog. You really get managed to portray away this kind of javascript. It truly has filled in my bookmark referrals. Thank you!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <css> <html> <javascript> <mysql> <php> <span> <a> <b> <i> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <sup> <sub> <dd> <del> <blockquote> <img> <q> <p> <div>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <css>, <html>, <javascript>, <mysql>, <php>, <rails>, <ruby>.

More information about formatting options

CAPTCHA
I have to wonder if you're a human spammer or a machine, or less likely someone who cares to leave his or her thoughts behind.