Creating interaction with the External API

You can create interaction between the browser and a SWF file that's embedded on a web page. The following procedure sends text to the HTML page that contains the SWF file, and the HTML sends a message back to the SWF file at runtime.

To create the Flash application:

Create a new Flash document and save it as extint.fla.
Drag two TextInput components onto the Stage and give them instance names of in_ti and out_ti.
Drag a Label component onto the Stage, assign it an instance name of out_lbl, position it above the out_ti TextInput instance, and set the text property in the Parameters tab of the Property inspector to Sending to JS:.
Drag a Button component onto the Stage, position it next to the out_lbl label, and give it an instance name of send_button.
Drag a Label component onto the Stage, assign it an instance name of in_lbl, position it above the in_ti TextInput instance, and set its text property in the Parameters tab to Receiving from JS:.
Add the following ActionScript to Frame 1 of the main Timeline:
```
import flash.external.ExternalInterface;

ExternalInterface.addCallback("asFunc", this, asFunc);
function asFunc(str:String):Void {
    in_ti.text = "JS > Hello " + str;
}

send_button.addEventListener("click", clickListener);
function clickListener(eventObj:Object):Void {
    trace("click > " + out_ti.text);
    ExternalInterface.call("jsFunc", out_ti.text);
}
```
The previous code is split into three sections. The first section imports the ExternalInterface class so you don't have to use its fully qualified class name. The second section of code defines a callback function, asFunc(), which is called from JavaScript in an HTML document created in an upcoming example. This function sets the text within a TextInput component on the Stage. The third section of code defines a function and assigns it as an event listener for when the user clicks the Button component instance on the Stage. Whenever the button is clicked, the SWF file calls the jsFunc() JavaScript function in the HTML page and passes the text property of the out_ti text input instance.
Select File > Publish Settings and then select the Formats tab and make sure that Flash and HTML are both selected.
Click Publish to create the HTML and SWF files.
When you're finished, go on to the next procedure to create the container for the SWF file.

Before you can test the previous Flash document, you need to modify the generated HTML code and add some additional HTML and JavaScript. The following procedure modifies the HTML container for the SWF file so the two files can interact when they run in a browser.

To create the HTML container for the SWF file:

Complete the previous procedure.
Open the extint.html file that Flash creates when you publish the application.
It's in the same folder as the Flash document.
Add the following JavaScript code between the opening and closing head tags:
```
<script language="JavaScript">

</script>
```
This JavaScript code defines three methods. The first method returns a reference to the embedded SWF file based on whether the user's browser is Microsoft Internet Explorer (IE) or a Mozilla browser. The second function, makeCall(), calls the asFunc() method that you defined within the Flash document in the previous example. The "extint" parameter in the thisMovie() function call refers to the object ID and embed name of the embedded SWF file. If you saved your Flash document with a different name, you need to change this string to match the values in the object and embed tags. The third function, jsFunc(), sets the value of the inField text field in the HTML document. This function is called from the Flash document when a user clicks the send_button Button component.
Add the following HTML code before the closing </body> tag:
```
<form name="outForm" method="POST" action="javascript:makeCall(document.outForm.outField.value);">
    Sending to AS:<br />
    <input type="text" name="outField" value="" /><br />
    <input type="submit" value="Send" />
</form>

<form name="inForm" method="POST" action="">
    Receiving from AS:<br />
    <input type="text" name="inField">
</form>
```
This HTML code creates two HTML forms similar to the forms created in the Flash environment in the previous exercise. The first form submits the value of the outField text field to the makeCall() JavaScript function defined in an earlier step. The second form is used to display a value that gets sent from the SWF file when the user clicks the send_button instance.
Save the HTML document and upload both the HTML and SWF files to a web server.
View the HTML file in a web browser, enter a string in the out_ti TextInput instance, and click the Send button.
Flash calls the jsFunc() JavaScript function and passes the contents of the out_ti text field, which displays the contents in the HTML form inForm inField input text field.
Type a value into the outField HTML text field and click the Send button.
Flash calls the SWF file's asFunc() function, which displays the string in the in_ti TextInput instance.

For a sample source file, ExtInt.fla, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/ExternalAPI folder to access this sample.