| ActiveDen | Flash Marketplace |
| ThemeForest | Web & CMS Themes |
| GraphicRiver | Graphics, Vectors & Icons |
| VideoHive | Motion Graphics & Projects |
| AudioJungle | Loops & Effects |
| FreelanceSw | Freelance Jobs & Community |
| Rockable | Books & How-To |
| Creattica | Design Community |
| Mac.AppStorm | Mac Apps |
| Web.AppStorm | Web Apps |
| WorkAwesome | Be Awesome At Work |
| Envato | About Us |
| More Coming Soon! |
ActionScript and Javascript. Both of these languages are great on their own, but have you ever wondered what you could do if they could talk with each other? Well you're in luck! That's where the ExternalInterface Class comes into the picture. Follow me as I teach you the basics.
Photo by Dave Spellman.
Currently the ExternalInterface Class is available in the following browsers:
The ExternalInterface Class allows you to:
We'll jump right into this and start with a really basic example. First we need to create our HTML Page, so fire up your favorite HTML Editor and let's start. Create a form inside your HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ExternalInterface Test 1</title> </head> <body> <div id="testArea"> <form name="myForm"> <label for="output">Text from Flash</label> <input type="text" id="output" name="output" value="" /> </form> </div> </body> </html>
To easily reference the SWF in our HTML, we're going to create a Javascript function so that we can reference the SWF in our code. To accomplish this, place this script between the "head" tags.
<script type="text/javascript">
function flashMovie(movieName)
{
if(window.document[movieName])
{
return window.document[movieName];
}
else
{
return document.getElementById(movieName);
}
}
</script>
This function will return the SWF that is passed as a parameter of the flashMovie() function. For example, "flashMovie('testMovie');" would return the swf with an id of 'testMovie'.
Now we'll create a Javascript function which accepts a value from ActionScript. Place this inside our already made script tags.
function sendToJS(value)
{
document.forms["myForm"].output.value = value;
}
This will take whichever value we get from the ActionScript and place it in our textfield with an id of "output".
Let's open up Flash and start working on the ActionScript. Create a new ActionScript 3.0 File and create a new Document Class named "EIFace1".
I'll be using FDT to write EIFace.as, but you're welcome to use any ActionScript Editor you feel comfortable with. We'll start out by creating a standard Document Class Shell.
package
{
import flash.display.Sprite;
/**
* @author kreativeKING
*/
public class EIFace1 extends Sprite
{
public function EIFace1()
{
}
}
}
Create the textfield we'll be using to send our values.
field1 = new TextField();
field1.type = TextFieldType.INPUT;
field1.width = 300;
field1.height = 20;
field1.border = true;
field1.borderColor = 0x565656;
field1.background = true;
field1.backgroundColor = 0x121212;
field1.defaultTextFormat = new TextFormat("Arial", 14, 0xEFEFEF);
field1.x = stage.stageWidth * .5 - field1.width *.5;
field1.y = stage.stageHeight * .5- field1.height *.5;
stage.addChild(field1);
Create a Button to click. I'm not a fan of using components, so I'll be building a button from scratch using Flash IDE. You're welcome to just create a box or use the SimpleButton component; I'll let you use those creative juices. If you need no further help with building a button, you can skip to Step 11.
Start by creating a rectangle with the Rectangle Primitive Tool. I won't provide specific values, just feel it out to asetting you like.
Convert the rectangle into a MovieClip.
Create a New Layer inside the MovieClip and place "Send To JS" text.
Go into your library, right-click on the button and Export for ActionScript.
We're going to code our button into our Document Class.
button1 = new SendButton(); button1.x = stage.stageWidth * .5 - button1.width *.5; button1.y = field1.y + 30; stage.addChild(button1);
This is how your HTML page should now appear.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExternalInterface Test 1</title>
<script type="text/javascript">
function flashMovie(movieName)
{
if(window.document[movieName])
{
return window.document[movieName];
}
else
{
return document.getElementById(movieName);
}
}
function fromAS(value)
{
document.forms["myForm"].output.value = value;
}
</script>
</head>
<body>
<div id="testArea">
<form name="myForm">
<label for="output">Text from Flash</label>
<input type="text" id="output" name="output" value="" />
</form>
</div>
</body>
</html>
The Document Class should look like this.
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
/**
* @author kreativeKING
*/
public class EIFace1 extends Sprite
{
private var field1 : TextField;
private var button1 : MovieClip;
public function EIFace1()
{
field1 = new TextField();
field1.type = TextFieldType.INPUT;
field1.width = 300;
field1.height = 20;
field1.border = true;
field1.borderColor = 0x565656;
field1.background = true;
field1.backgroundColor = 0x121212;
field1.defaultTextFormat = new TextFormat("Arial", 14, 0xEFEFEF);
field1.x = stage.stageWidth * .5 - field1.width *.5;
field1.y = stage.stageHeight * .5- field1.height *.5;
stage.addChild(field1);
button1 = new SendButton();
button1.x = stage.stageWidth * .5 - button1.width *.5;
button1.y = field1.y + 30;
stage.addChild(button1);
}
}
}
We now need to create the function that sends the data from Flash to Javascript. This will be a simple function which sends a string.
button1.addEventListener(MouseEvent.CLICK, sendToJS);
private function sendToJS(e : MouseEvent) : void
{
if(ExternalInterface.available)
{
ExternalInterface.call("fromAS", field1.text);
}
}
We first add an event listener to our button, inside our Document Classes constructor. Then we create our listener. The ExternalInterface.available property checks to see if our browser is able to use the ExternalInterface Class. This isn't necessary to use as we know our browser can support it, but it's good practice for developing for the web and we're never sure if the client browser is going to becompatible.
The ExternalInterface.call() function is what we use to call our Javascript function. The first parameter is the name of the Javascript function we want to call. It's the name of our function in Javascript as a string. The second parameter is the value we want to pass to the Javascript function. In this case, we're passing the value of our textfield.
Note: You can pass as many parameters as you want, but the first parameter needs to be the name of the Javascript function.
Before we can test, we first have to embed our SWF into the HTML. I must stress that it's best to use SWFObject and not the default method that Flash uses to embed SWF files. Let's publish our SWF, setup SWFObject and embed our file.
Here's the SWFObject Embed code which goes into the head of the HTML file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.allowscriptaccess = "always";
params.allownetworking = "all";
var attributes = {};
attributes.id = "EIFace";
swfobject.embedSWF("EIFace.swf", "flashDiv", "350", "200", "9.0.0", false, flashvars, params, attributes);
</script>
It's also important that you give the SWF an id. This is important with using the ExternalInterface and for us to target it using the Javascript function we created earlier. Let's create our div that will house the SWF file.
<div id="flashDiv"> <p>This will get replaced with a SWF. If not you need to update your Flash Player.</p> </div>
Here are the Document Class and HTML file up to this point:
package
{
import flash.external.ExternalInterface;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
/**
* @author kreativeKING
*/
public class EIFace1 extends Sprite
{
private var field1 : TextField;
private var button1 : MovieClip;
public function EIFace1()
{
field1 = new TextField();
field1.type = TextFieldType.INPUT;
field1.width = 300;
field1.height = 20;
field1.border = true;
field1.borderColor = 0x565656;
field1.background = true;
field1.backgroundColor = 0x121212;
field1.defaultTextFormat = new TextFormat("Arial", 14, 0xEFEFEF);
field1.x = stage.stageWidth * .5 - field1.width *.5;
field1.y = stage.stageHeight * .5- field1.height *.5;
stage.addChild(field1);
button1 = new SendButton();
button1.x = stage.stageWidth * .5 - button1.width *.5;
button1.y = field1.y + 30;
stage.addChild(button1);
button1.addEventListener(MouseEvent.CLICK, sendToJS);
}
private function sendToJS(e : MouseEvent) : void
{
if(ExternalInterface.available)
{
ExternalInterface.call("fromAS", field1.text);
}
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExternalInterface Test 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.allowscriptaccess = "always";
params.allownetworking = "all";
var attributes = {};
attributes.id = "EIFace";
swfobject.embedSWF("EIFace.swf", "flashDiv", "350", "200", "9.0.0", false, flashvars, params, attributes);
</script>
<script type="text/javascript">
function flashMovie(movieName)
{
if(window.document[movieName])
{
return window.document[movieName];
}
else
{
return document.getElementById(movieName);
}
}
function fromAS(value)
{
document.forms["myForm"].output.value = value;
}
</script>
</head>
<body>
<div id="flashDiv">
<p>This will get replaced with a SWF. If not you need to update your Flash Player.</p>
</div>
<div id="testArea">
<form name="myForm">
<label for="output">Text from Flash</label>
<input type="text" id="output" name="output" value="" />
</form>
</div>
</body>
</html>
Now open up your HTML wrapper and test it out. You'll see that the value of the textfield in flash becomes the value on the textfield in our HTML. At a glance, the code behind this is pretty simple and straight forward. Now let's try sending some information from Javascript to ActionScript.
We're going to create additional fields to send information from Javascript to ActionScript.
<label for="input">Send Text To Flash</label>
<input type="text" id="input" name="input" value="" />
<input type="button" value="SendToFlash" onClick="sendToFlash(myForm.input.value);" />
field2 = new TextField();
field2.type = TextFieldType.DYNAMIC;
field2.width = 300;
field2.height = 20;
field2.border = true;
field2.borderColor = 0x565656;
field2.background = true;
field2.backgroundColor = 0xEFEFEF;
field2.defaultTextFormat = new TextFormat("Arial", 14, 0x121212);
field2.x = stage.stageWidth * .5 - field2.width *.5;
field2.y = field1.y - 50;
stage.addChild(field2);
We need to create a function which sends the value from inside our HTML to Flash. This is similar to the function we created to send values from ActionScript to Javascript.
function sendToFlash(value)
{
flashMovie("EIFace").sendToFlash(value);
}
We use the function we created earlier to reference the embedded SWF. Now we must go into our Document Class and set up Flash to receive values from Javascript and create a new function that Javascript will be calling.
To register Javascript functions, we need to add callbacks so that Flash knows what we're trying to send when we call an ActionScript function. Let's finally start calling some ActionScript.
private function addCallbacks() : void
{
if(ExternalInterface.available)
{
ExternalInterface.addCallback("sendToFlash", fromJS);
}
}
The ExternalInterface.addCallback() function registers a function in ActionScript to be called by Javascript. The first parameter is the function name by which Javascript will know the function. The second parameter is the actual function.
Simply put, that means in our Javascript, we would call sendToFlash() and that would invoke the fromJS() function in ActionScript.
Now we're going to create the fromJS() function. This is a very simple function that will assign the value passed to it to the text field.
private function fromJS(value:String) : void
{
field2.text = value;
}
Time for another test and see what we come up with. Here's what the Document Class and HTML look like now:
package
{
import flash.external.ExternalInterface;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
/**
* @author kreativeKING
*/
public class EIFace1 extends Sprite
{
private var field1 : TextField;
private var button1 : MovieClip;
private var field2 : TextField;
public function EIFace1()
{
field1 = new TextField();
field1.type = TextFieldType.INPUT;
field1.width = 300;
field1.height = 20;
field1.border = true;
field1.borderColor = 0x565656;
field1.background = true;
field1.backgroundColor = 0x121212;
field1.defaultTextFormat = new TextFormat("Arial", 14, 0xEFEFEF);
field1.x = stage.stageWidth * .5 - field1.width *.5;
field1.y = stage.stageHeight * .5- field1.height *.5;
stage.addChild(field1);
field2 = new TextField();
field2.type = TextFieldType.DYNAMIC;
field2.width = 300;
field2.height = 20;
field2.border = true;
field2.borderColor = 0x565656;
field2.background = true;
field2.backgroundColor = 0xEFEFEF;
field2.defaultTextFormat = new TextFormat("Arial", 14, 0x121212);
field2.x = stage.stageWidth * .5 - field2.width *.5;
field2.y = field1.y - 50;
stage.addChild(field2);
button1 = new SendButton();
button1.x = stage.stageWidth * .5 - button1.width *.5;
button1.y = field1.y + 30;
stage.addChild(button1);
button1.addEventListener(MouseEvent.CLICK, sendToJS);
addCallbacks();
}
private function addCallbacks() : void
{
if(ExternalInterface.available)
{
ExternalInterface.addCallback("sendToFlash", fromJS);
}
}
private function fromJS(value:String) : void
{
field2.text = value;
}
private function sendToJS(e : MouseEvent) : void
{
if(ExternalInterface.available)
{
ExternalInterface.call("fromAS", field1.text);
}
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExternalInterface Test 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.allowscriptaccess = "always";
params.allownetworking = "all";
var attributes = {};
attributes.id = "EIFace";
swfobject.embedSWF("EIFace.swf", "flashDiv", "350", "200", "9.0.0", false, flashvars, params, attributes);
</script>
<script type="text/javascript">
function flashMovie(movieName)
{
if(window.document[movieName])
{
return window.document[movieName];
}
else
{
return document.getElementById(movieName);
}
}
function fromAS(value)
{
document.forms["myForm"].output.value = value;
}
function sendToFlash(value)
{
flashMovie("EIFace").sendToFlash(value);
}
</script>
</head>
<body>
<div id="flashDiv">
<p>This will get replaced with a SWF. If not you need to update your Flash Player.</p>
</div>
<div id="testArea">
<form name="myForm">
<label for="input">Send Text To Flash</label>
<input type="text" id="input" name="input" value="" />
<input type="button" value="SendToFlash" onClick="sendToFlash(myForm.input.value);" />
<br />
<br />
<label for="output">Text from Flash</label>
<input type="text" id="output" name="output" value="" />
</form>
</div>
</body>
</html>
As you can see, placing text in our newest field and hitting send sends the value into the Flash text field. Using the ExternalInterface class is very simple and can often come in handy when creating API's and applications that can be manipulated outside of the Flash Movie. For example, this can be implemented in Video Player API's for creating and controlling the video with Javascript.
For most of the people out there now, no one is really using classic Javascript; jQuery is the wave of the future. Here's an example of using jQuery instead of classic Javascript.
<script type="text/javascript">
$(
function()
{
$('#sendToFlash').click(function()
{
if($('#EIFace')[0])
{
$('#EIFace')[0].sendToFlash($('#input').val());
}
else
{
$('#EIFace').sendToFlash($('#input').val());
}
});
}
);
function fromAS(value)
{
$('#output').val(value);
}
</script>
Here's the new and updated HTML for use with jQuery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExternalInterface Test 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.allowscriptaccess = "always";
params.allownetworking = "all";
var attributes = {};
attributes.id = "EIFace";
swfobject.embedSWF("EIFace.swf", "flashDiv", "350", "200", "9.0.0", false, flashvars, params, attributes);
</script>
<script type="text/javascript">
$(
function()
{
$('#sendToFlash').click(function()
{
if($('#EIFace')[0])
{
$('#EIFace')[0].sendToFlash($('#input').val());
}
else
{
$('#EIFace').sendToFlash($('#input').val());
}
});
}
);
function fromAS(value)
{
$('#output').val(value);
}
</script>
</head>
<body>
<div id="flashDiv">
<p>This will get replaced with a SWF. If not you need to update your Flash Player.</p>
</div>
<div id="testArea">
<form name="myForm">
<label for="input">Send Text To Flash</label>
<input type="text" id="input" name="input" value="" />
<input type="button" id="sendToFlash" value="SendToFlash" />
<br />
<br />
<label for="output">Text from Flash</label>
<input type="text" id="output" name="output" value="" />
</form>
</div>
</body>
</html>
Hopefully you now have a better grasp on using the ExternalInterface Class. If you have any questions or ideas of what else you would like to learn, just leave a comment or tweet me and I'll see what I can do. I hope you learned the concepts and start using them in your own projects. Thanks for reading!
kreativeKING
Keep reading with more great tutorials and articles!
We'd love your vote!
We pay $150 for user submitted tutorials and articles that we publish. Anyone can send in a contribution
Community Link Feed
Oh Long John
The effects and techniques demonstrated in tutorials on the Tuts network can be used in whatever manner you wish without attribution.
The text, images and tutorials themselves are copyright their respective owners.
You cannot copy whole tutorials, either in English or translated to another language.
Writing a tutorial or article for the site is not only a great way to get exposure and give back to the community, but we'll also give you $150 cash to boot!
This is YOUR site, so if you have suggestions or feedback on how we can improve it for you, please let us know! We do our best to keep up!
User Comments
( ADD YOURS )David July 6th
Could the Javascript to Actionscript form be setup to automatically import the text onKeyUp rather than having to click on send ?
Like Moo do in their business card designer ? http://uk.moo.com/en/make/designback.php?pid=169&bid=1
( )David July 6th
Just had time to try this myself and it does work with only a small change
of entering at the end of the <input line onkeyup=”sendToFlash(myForm.input.value);”
Excellent !
( )Clemente G July 7th
Yup, you answered it before i did =D
André July 6th
Hey dude, this is the best explanation about ExternalInterface i´ve seen so far, really great tutorial…
Thanks for sharing
( )BeMoreDifferent July 6th
great tut. thank you!!!
( )Alex July 6th
Make sure you dont use any of the following in the name/id parameters of your object/embed tags (and by extension, swfobject id param):
. – + * / \
Any of these characters will break ExternalInterface.
Good explination of EI, Clemente.
( )Tim July 6th
What kind of situations would call for using ExternalInterface? Any good examples?
( )André July 6th
An example i´ve used the ExternalInterface.call you can go to:
http://www.balancascascavel.com.br/
and click the link you want
or go to the direct link for example:
http://www.balancascascavel.com.br/#/sistemas
or
http://www.balancascascavel.com.br/#/contato
Also enable the back and next button of the browser (except the IE wich needs a hack with a hidden iframe)
So, there are a lot of situations that it would be usefull, this is just one example of them.
( )Jay July 6th
you can use ExternalInterface to interact with the browser, like the “back” button.
It makes it easier to incorporate flash into older forms build around javascript.
Many other situations. You could have a movie that does not take up the whole page, that is ajaxing back to the server. It can interpret the response in actionscript and can change javascript on the page accordingly.
( )koko August 6th
You have a confusing face… change it NOW…
( )James Robertson July 6th
External interface could be combined with http://www.bolinfest.com/wii/ to make fully interactive wii games in flash!
Awesome tut.
( )Dario Gutierrez July 6th
Excellent tut!! Sometimes is really effective use this combination.
( )chris fidao July 6th
Another great use for this is to hook up to Google analytic’s tracking of actions / page views in flash – This allows you to track metrics such as use of contact forms (or abandonment), how people interact with your flash site, what “pages” people visit, and basically any empirical metric you can think of tracking.
( )Jake Rocheleau July 6th
Very nicely written and easy to follow tutorial. I’m not really an ActionScript developer, but I found this article fascinating and something very enjoyable.
( )Clemente G July 7th
Thanks everyone for the positive feedback, very appreciated. Stay tuned for the next article =D
( )rady July 7th
hi
I open the demo in Mozilla 3.5 and the content in the flash window is not at the right place, when I open it in Safari, it works wonderful.
( )Clemente G July 8th
Really? Looks fine in my Mozilla 3.5 . Just must be a CSS issue I imagine
( )Diego SA July 8th
hmmm… it gives me a lot of ideas!
( )Clemente G July 17th
Let the creative juices flow
( )NMynarcik July 9th
Bravo to Tha King! This works like a charm! Great Tutorial.
( )Clemente G July 17th
=D Glad you found it useful
( )Sarbjit Singh September 29th
Thanks Clemente Gomez
For this great useful tutorial.
( )iresha October 25th
Awsome! thanks
( )amur November 3rd
hi I used your demo but sometimes i have an error called ” flashMovie(”EIFace”).sendToFlash is not a function ” and i used swfobject v 1.5 . is it caused by swfobject version ?
thank you
( )