Actionscript Javascript Communication | ExternalInterface call and addCallback Tutorial

February 1, 2008 • 16,661 views

Overview:

Using ExternalInterface.addCallback() we can expose an actionscript function and make it available to javascript. This would be helpful to have your webpage with embedded flash communicate to your flash swf file and even control it with javascript! Say we wanted to have buttons in the html page that would control an object in the flash. Communication is a two-way road so wouldn’t it be great to be able to go the other way as well, you can! That is the main function of ExternalInterface! In this example/tutorial I will explain both directions of communication with flash and javascript! Communication between flash and javascript isn’t just a myth or mystery!

Steps:

Be sure to import flash.external.*;
Set up the javascript to actionscript lane of your communication road. (ExternalInterface.addCallback(methodName, instance, method);)
Write your javascript function.
Set up the actionscript to javascript lane. (ExternalInterface.call(functionNameInJavascript);)

We will follow the text’s journey on our road of communication…

The One way: I type in ‘Johnny Appleseed’ in the html text box and press the Send Text To Flash button. The onclick javascript event finds the flash element and calls it’s function (sendTextFromHtml) and then clears the text in the html box. This function has been set up and is exposed to javascript (in actionscript lines 4-7) with the methodName ’sendTextFromHtml’ while the method it calls is recieveTextFromHtml() in the actionscript. So ‘Johnny Appleseed’ is received as the parameter of the recieveTextFromHtml() function and is assigned to the text of the theText text box.

And back: Now I delete ‘Johnny Appleseed’ since he’s only a fable and enter ‘Paul Bunyan’ in the swf text box and press the Send From Flash to Javascript button. This calls the onRelease function associated with this button. ExternalInterface.call calls the ‘recieveTextFromFlash’ function in the javascript of the page and passes ‘Paul Bunyan’ as the parameter. The javascript function finds the html text box using getElementById() and assigns the parameter to the value of that text box!

This technique will even work if you’re not sending folklore character down the road.

Example:

View the live example here: ActionscriptJavascriptCommunication.html

NEW live example with swfobject2 works in IE! ActionscriptJavascriptCommunication2.html

Actionscript:

import flash.external.*;
 
//Set up Javascript to Actioscript
var methodName:String = "sendTextFromHtml";
var instance:Object = null;
var method:Function = recieveTextFromHtml;
var wasSuccessful:Boolean = ExternalInterface.addCallback(methodName, instance, method);
 
//Actionscript to Javascript
//ExternalInterface.call("recieveTextFromFlash", _root.theText.text);
 
function recieveTextFromHtml(t) {
_root.theText.text = t;
}
 
_root.button.onRelease = function() {
ExternalInterface.call("recieveTextFromFlash", _root.theText.text);
_root.theText.text = "";
}

Javascript:

function recieveTextFromFlash(Txt) {
document.getElementById('htmlText').value = Txt;
}

HTML: view Source of sample page

Download:

Download all source files (.fla, .html, .swf): ActionscriptJavascriptCommunication.zip

Categories: tutorial
Tags: actionscript, as2, download, flash, html, interactive, javascript, open source, tutorial, web design

30 Responses to “ Actionscript Javascript Communication | ExternalInterface call and addCallback Tutorial ”

i-e Feb 14th, 2008 at 10:58 am

hi,

great sollution, but in does it also works in IE ?
Evan Mullins Feb 15th, 2008 at 5:06 pm

Good Question, half of this works in IE…
You can communicate from flash to javascript just fine. But getting from the javascript to the flash is giving me trouble. I get the “Object doesn’t support this property of method” error.

Any insight would be helpful!
Guro Khundadze Feb 24th, 2008 at 4:50 pm

i have the same problem in IE
“Object doesn’t support this property of method�?
neerJ Mar 20th, 2008 at 2:21 am

hav a flv fullscreen player,inside a html page,

in that html page one button is there,

that button should be invisible until

user click & watch half of the flv movie,

after watching that half of the movie,
that html button should be automatically active,

any idea how to do this type of thing

using javascript in flash

plz mAIL ME AT neeraj8585@gmail.com
Evan Mullins Mar 20th, 2008 at 12:01 pm

If I understand your question and situation correctly, You have a button in your html that you want to only be visible after a user has watched a certain amount of the movie?

I’d put a function in your player that would check to see the amount of video the user has watched, and then, once it reached 50% (or whatever percent you need) have it call a jsfunction with ExternalInterface.call(). You’d have to have this javascript function in your html page and have it hide/show the specific button… (help with that here: Javascript Code to show a hidden element)
Let me know if that helps!
neeraJ Mar 24th, 2008 at 1:37 am

hii Evan Mullins

thanks for ur reply,

i am able to trace the flv cue points,but getiing confusion in calling that function,can u help me to calling that function, just tell how do i call that function from flash to hide that html button in start & when it will reach to that particular point that html button will automatically shown, it will be very helpful for me.

////////////////////////////////////////////////
import flash.external.*;

// for calling javascript external class

// plaese writr that function here that all

/**
Requires:
- FLVPlayback component on the Stage with an instance name of my_FLVPlybk
- TextArea component on the Stage with an instance name of my_ta
*/

import mx.video.*;
my_FLVPlybk.contentPath = “http://www.helpexamples.com/flash/video/water.flv”;
my_ta.visible = false;
// create cue point object
var cuePt:Object = new Object();//create cue point object
cuePt.time = 1.444;
cuePt.name = “elapsed_time”;
cuePt.type = “actionscript”;
my_FLVPlybk.addASCuePoint(cuePt);//add AS cue point
// add 2nd AS cue point using time and name parameters
my_FLVPlybk.addASCuePoint(5.3, “elapsed_time2″);
var listenerObject:Object = new Object();
listenerObject.cuePoint = function(eventObject:Object):Void {
my_ta.text = “Cue at: ” + eventObject.info.time + ” occurred” ;
my_ta.visible = true;
};
my_FLVPlybk.addEventListener(”cuePoint”, listenerObject);
///////////// script end ///////////////////////

regards,
Neeraj
Evan Mullins Mar 24th, 2008 at 9:48 am

//actionscript function this goes in your flash
function call jsfunction() {
ExternalInterface.call(”showButton”);
}

//javascript function (this needs to be on the html page.
//you’ll need to give the button you want to show an id of myButton
//or change this to whatever you have… and set it’s style=”display: none;”
function showButton() {
document.getElementById(”myButton”).style.display = “”;
}
saga Mar 26th, 2008 at 12:37 am

hi

The sample is nice and I changed the code to work in IE also ……the code

change the html code as follows………..

in javascript change like this

if (navigator.appName.indexOf(”Microsoft”) != -1)
{
document.getElementById(’IEflash’).sendTextFromHtml(document.getElementById(’htmlText’).value);
} else
{ document.getElementById(’flash’).sendTextFromHtml(document.getElementById(’htmlText’).value);
}
document.getElementById(”htmlText”).value = “”;

I hope this may help for some one………
Michael Mar 31st, 2008 at 11:01 am

Looks great! How would you go about sending data from multiple text boxes?
Evan Mullins Mar 31st, 2008 at 4:27 pm

With ExternalInterface.call, the first argument is the name of the js function you want to call in your HTML document, and the rest are arguments you want to pass in to it. You can send many, just separate them with a comma.
so: ExternalInterface.call(”recieveTextFromFlash”, _root.theText.text);
becomes: ExternalInterface.call(”recieveTextFromFlash”, _root.theText2.text, _root.theText.text, _root.theText3.text);
Check the documentation of ExternalInterface.call from Adobe
call (ExternalInterface.call method)
public static call(methodName:String, [parameter1:Object]) : Object
Parameters

methodName:String - The name of the function to call in the container. If the function accepts parameters, they must appear following the methodName parameter.

parameter1:Object [optional] - Any parameters to be passed to the function. You can specify zero or more parameters, separating them by commas. The parameters can be of any ActionScript data type. When the call is to a JavaScript function, the ActionScript types are automatically marshalled into JavaScript types. When the call is to some other ActiveX container, the parameters are encoded in the request message.
Returns

Object - The response received from the container. If the call failed (for example if there is no such function in the container, or the interface was not available, or a recursion occurred, or there was a security issue) null is returned.
nmduc073 Apr 4th, 2008 at 4:27 am

Hi saga,
Please post your full html code. Where is IEflash?
Michael Apr 7th, 2008 at 12:30 pm

I’ve got the html/javascript submitting multiple inputs but it’s the actionscript side that I am completely clueless about.
ashok Apr 24th, 2008 at 3:37 am

hi,thanks for your hlep
raghavender Apr 24th, 2008 at 3:39 am

thanks,this help me a lot
Jonah Jun 3rd, 2008 at 7:31 pm

Quite clear and thorough instructions. Thanks for writing this.
Auz Jul 30th, 2008 at 6:04 am

Hi saga …

Can you explain where the IEFlash object is coming from on your fix for IE …

is the object embedded in a different way to flash ???

Thanks …
polluxx42 Aug 26th, 2008 at 1:07 pm

No such luck, original example does not work in IE7.
Roland Sep 10th, 2008 at 4:09 am

Can anybody help me. I need to Get value from flash to js by calling js method.
oxyde Sep 10th, 2008 at 4:14 am

great stuff. I think this might be the solution I looking for.
I have a website in flash and html. The homepage is a flash image gallery with large picture preview related to a vertical scrolling thumbnails and a small menu at the bottom.
When you click on one of the item of the menu you are send on a html page with a css replica of the flash picture gallery.
I would like to click on a thumb located on the html page and be send back to the homepage and have the homepage gallery remember which image i’ve just clicked and display that one in my large image box.

how do i tell the flash xml image gallery which one was clicked on the html page?

cheers,
oxyde
Evan Mullins Sep 10th, 2008 at 9:25 am

Thanks for the comments everyone, I took a minute recently and worked with this IE issue. I tried saga’s suggestion, but it didn’t seem complete. Then I decided to update my embed codes, and I used my favorite embed option swfobject2! Doing this alone fixed the IE bug! Now we have actionscript javascript communication in any browser, IE included.
NEW live example with swfobject2 works in IE! ActionscriptJavascriptCommunication2.html

@Roland - to do that, if I understand your question correctly, you’d have to just expose an actionscript function to javascript with addCallback and have it return the value you need and call that from javascript like any other function. Good luck!
Robert Green Sep 17th, 2008 at 12:28 pm

Object doesn’t support this property or method.

I am able to communicate from Flash to JavaScript, NO PROBLEM. However, the inverse is not true. From JavaScript to Flash, I get the above error. There is no explanation for this all code is correct. All are set, the tag is there also.

Can anyone help?
YVR Sep 22nd, 2008 at 6:47 pm

Evan - You said you fixed the codecs for that IE problem….did oyu update the zip file with that change ?
Evan Mullins Sep 22nd, 2008 at 9:55 pm

@YVR - I fixed the embed codes for IE so the javascript can now “find” the flash element on the page correctly. Nothing in the flash source changed- only the HTML. I didn’t include that in the zip file, but it is in the html page here ActionscriptJavascriptCommunication2.html, just view source. My apologies for the confusion
YVR Sep 22nd, 2008 at 11:08 pm

Wonderful…Thank you Evan for your quick reply…this helps me a lot..let me try tonight..
YVR Sep 23rd, 2008 at 12:39 am

Hi Evan….This works perfectly as expected…but need a help on one step further down.
I just added another function in the javascript function which looks like this (hope this comments will allow me to paste JS syntax…)

function recieveTextFromFlash(Txt) {
document.getElementById(’htmlText’).value = Txt;
DisplaySettingsPage();
}

In my Javascript page..
DisplaySettingsPage {
ajaxpage(’products.asp’ ,’centerarea’)
}

Now when I click the Flash button it perfectly display the products.asp (which just does a select recordset from a mysql table) in the correct “centerarea” div..
Now my question is..how do I modify the code so that the resultset is not displayed in DIV but rather in a nice formated textbox in FLASH (instead of centerarea DIV) ?
-Let me know if I have confused you.
-V
Eric Sep 24th, 2008 at 10:57 am

Do you know if this also works with AC_RunActiveContent.js. I tried using swfobject and it blows my design apart.

thanks
Evan Mullins Sep 24th, 2008 at 12:40 pm

@Eric - I would think so, as long as IE can still address the flash content with the getElementById(). Let us know if it does work!

@YVR - I admit, I’m confused. Not sure what you mean. You want the function coming from flash to send text back to flash? That just seems redundant…
motu Oct 4th, 2008 at 1:34 am

Hi, is there a fairly easy way to get the text sent from flash
to simply send the text as a javascript call to the web page?

I’m fairly green & it would help with my learning.
Thanks
motu
ABU-SOUZEY Oct 23rd, 2008 at 5:07 pm

hi
first sorry for my bad language
i am hamada frpm jordan i tried to write a combination with javascript and flash 8
but it doesn’t work only if it was published to web server
why i can’t do it at home ???
please reply
Jake Nov 6th, 2008 at 2:14 am

Is it as simple to set a cue point in a video and pass a ? variable?

I have built many flash players, but honestly I like Jeoring’s player but I would like to load different content into my side column from a database like ads that are relational to the content of the video.

I am currently looking into AMPHP but saw this post. Very informative stuff.

Can you shoot me an email if you respond please?