Syndicate

Feed

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 :

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

Method Description How to use the method (blueprint)
addCallback Registers an ActionScript function as callable from the container (i.e. browser). public static addCallback(functionNameInJavascript:String, instance:Object, method:Function):Boolean
call Calls a function exposed by the Flash Player container, passing zero or more arguments to it. public static call(functionNameInJavascript:String, [argument1:Object]):Object

 

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.

ExternalInterface.call("functionNameInOurJavascript", "Hello baby");
ExternalInterface.call("alert", "Bonjour");
ExternalInterface.call("otherFctNameInOurJavascript", "Hi", 13);
ExternalInterface.call("yetOtherFctNameInOurJavascript", "Caroline", 13, "blue");

 

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 :

ExternalInterface.call("alert", "Hellllloooo baby");

 

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 :

The properties of the dynamic text input

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

import flash.external.*;
var someValue:Object;
someValue = ExternalInterface.call("prompt", "Who is the sexiest actor alive?", "Mmm...");
if (someValue.valueOf() == null) {
  inputText_txt.text = "The call either failed because the Javascript function is not defined or there was a security issue, or the user pressed cancel.";
} else {
  inputText_txt.text = "The sexiest actor alive is " + String(someValue);
}

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.

The type we want “Type cast”
String String(someValue)
Number Number(someValue)

 

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 !

AttachmentSizeHitsLast download
AScallsJS.zip7.18 KB168 years 39 weeks ago
Last edited by Caroline Schnapp about 9 years ago.

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


Comments

Example

This has been the best example I thought of explaining the ExternalInterface function quick and easy although I did have a little trouble with my javascript this is why

Here is my as
checkJavaScriptReady();
function checkJavaScriptReady():void {
var someValue:Object;
someValue = ExternalInterface.call("getID");
txtText.text = "HI " + String(someValue);
}

javascript:
function getID():String {
var url = parent.document.location.href;
var urlparts = url.split('//')[1];
var hostPort = urlparts.split('/')[6];
var getId = hostPort.split('=')[1];
return getId;
}

pretty basic, although still not working... So I removed the return type in the javascript code to read:
function getID(){
var url = parent.document.location.href;
var urlparts = url.split('//')[1];
var hostPort = urlparts.split('/')[6];
var getId = hostPort.split('=')[1];
return getId;
}
and like magic it works :) Thanks!

Let’s take a look at the

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 http://e-papierossy.com.pl/en/e-papierosy/61-e-papierosy-gombit-5353h.html 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 http://e-papierossy.com.pl/en/e-papierosy/65-e-papierosy-gombit-543567.html 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 e-papierosy 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.

http://twinfountainsec-woodlands.com

Download BHIM UPI App :

Download BHIM UPI App : Prime Minister Narendra Modi Released Aadhaar Based Payment Mobile App Called BHIM App. BHIM App is Bharat Interface for Money, it a re branded version of UPI (Unified Payment Interface) and USSD (Unstructured Supplementary Service Data). PM Launched BHMI aadhar Payment App Today on December 30th, 2016 at digi dhan Mela Event in tatikonda Stadium in New Delhi. PM Narendra Modi Announced Lucky Grahak Yojana Scheme Winners list in the Event. People can download BHIM Mobile App from Google Playstore.

HAPPY MOTHERS DAY WISHES

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.