AS3 Javascript Communication
October 29, 2008 by jared
I was searching high and low for a solid example of how Javascript and AS3 talk to each other, and couldn’t really find one, so here it is.
Actionscript 3 to Javascript
In this example we’ll use Javascript to create a popup window from Flash.
If you click on the “Pop up!” button, the following code from JavascriptPopup.fla is executed inside the click button event handler.
var jscommand:String = "window.open
('http://jared.simplistika.com','win','height=170,width=350,
toolbar=no,scrollbars=yes');";
var url:URLRequest = new URLRequest("javascript:" + jscommand + " void(0);");
navigateToURL(url, "_self");
Only thing is if you do a CTRL + Enter locally on your computer, nothing will work. To test it you’ll have to upload it to a server which I’ve done here. Pretty easy to just replace your own Javascript from here on.
Javascript to Actionscript 3
Still inside JavascriptPopup.fla, we have
ExternalInterface.addCallback("changeText", changeTheText);
which basically sets up Flash to communicate with the HTML page. Two things to note:
changeText refers to the Javascript function we will be calling from the HTML. Give this any name you want but remember it because we’ll be using it later.
changeTheText refers to the Actionscript function which is exactly right below that line of code.
function changeTheText(t:String):void {
txtText.text = t;
}
And what this function does is simply set up the textbox in our Flash project named txtText to a String value which will be sent via Javascript later on.
And so to set up the link in our HTML page, we use this line
<p><a href=”#” onClick=”JavascriptPopup.changeText(‘it works!’);”>Click me!</a></p>
Where JavascriptPopup refers to the id (look for an id attribute in the generated HTML file) of your flash movie, in this case it is JavascriptPopup, changeText is our function defined earlier, and ‘it works!’ is our text that we are sending into Flash.
Thanks for this, very useful!!!
Thanks, I’ve always found it best and easiest to learn through summarized tutorials and actual working Fla files instead of just snippets of code or sitting through 30minutes of video..
THanks bro, I cannot believe there is not way more on this subject on Google. I am glad you popped up in the top, and the example ACTUALLY worked!! Thanks for taking the time to school us.
I love you.
me too.
As simple as that.
Merci !
ExternalInterface should be used to call javascript as well, instead of getURL (AS2) or navigateToURL(AS3). It’s also more flexible, since you can pass arguments to javascript functions easily. The syntax is:
ExternalInterface.call( jsFunctionName:String, … arguments );
thanks, useful!
men! that was good!) thx
man, thanks!! very very useful
Thanks so much for this, it really opens up the possibilities of combining flash within an accessible / unobtrusive page layout.
Can this be adapted so that the flash is embedded using SWFObject? If so what is the best way to go around doing it as I gave it a try but I didn’t have much luck.
Cheers
Rich
Ok I can answer my own question.. I dont know what I was doing before, but it is extremely easy to transfer the above method into a SWFObject setup. The ID where the flash is written to needs to correspond correctly.
Cheers
Wonderful and working very fine!
I love this blog..
Thank again!