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.

Step 8: Create a Send Button

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.

Step 9: Continue the Button Creation

Convert the rectangle into a MovieClip.

Create a New Layer inside the MovieClip and place "Send To JS" text.

Step 10: Export For ActionScript

Go into your library, right-click on the button and Export for ActionScript.

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.

Step 14: Testing Time

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:

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>

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.

Step 15: Make Additional Fields

We're going to create additional fields to send information from Javascript to ActionScript.

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.

Step 17: Adding Callbacks

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.

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.

Step 18: Creating fromJS()

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:

Step 19: Results

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.

Step 20: Who Uses Classic Javascript Anymore?

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.

Conclusion

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!