Quick Tip: How to Communicate Between Flash and JavaScript

In this Quick Tip, we'll look at how to use the ExternalInterface class. This allows us to write AS3 which can run JavaScript code, and vice-versa. That means you can use Flash to alter parts of the webpage in which it's running!

Step 1: Set up the Flash Document

Create a new Flash ActionScript 3 document. Resize the stage to be 600x300. With the rectangle tool, draw out a rectangle that is the size of the stage. Give it a color of #CCCCCC. Also, give it a black stroke of 2px.

Step 2: Set up the Flash UI

Here's the layout we'll be working towards:

Open the Components Panel (Window > Components) and, from the User Interface folder, drag a ColorPicker component onto the stage. Give it an instance name of 'cp'.

Next create a dynamic text field called 'resizeText'; place and size it however you please (you can't see the one in my image; it's empty, and in the top-right of the stage.)

Now, create another dynamic text field. Give it an instance name of 'jsText'. Then create a button symbol and give it an instance name of 'prompt'. After that, create another button and give it an instance name of 'change'.

Finally, create two input text fields. Place one next to your 'prompt' button, and give it a name of 'promptText'. Take the second text field, move it next to your 'change' button and name it 'changeText'.

Also, add any labels you want; refer to my image to see how I set it up.

Step 3: Set up the HTML UI

In order for the ExternalInterface to work, the document has to be on the internet. First, create a new text file, and save it as 'externalInterface.html'. Next, open a text editor and add all the code below. Save the HTML file.


<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>externalInterface</title>
<style type="text/css">

body {
	font-family:Arial;
}

#asSend {
	padding-top:20px;
	font-size:12px;
}
#htmlWrap {
	margin-top:10px;
	width:578px;
	padding-left:20px;
	border-width:1px;
	border-style:solid;
}
#sender {
	margin-top:10px;
}
#textChange {
	font-size:13px;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:20px;
}

</style>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="600" height="300" id="externalInterface" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="externalInterface.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="externalInterface.swf" quality="high" bgcolor="#ffffff" width="600" height="300" name="externalInterface" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="htmlWrap">
<div id="asSend">
  <label for="textArea">Send to actionscript:</label><br />
  <textarea cols="50" rows="4" id="textArea" name="textArea"></textarea>
  <br />
  <button id="sender" name="sender">Send</button>
</div>
<div id="textChange">Use Actionscript to change me!</div>
</div>
</body>
</html>

The key areas are:

The <object> section, which embeds the SWF you'll create from the Flash file.
The <div>s and <textarea>, which have id properties so that we can access them from the SWF.

Your HTML should appear as below:

When the code has been replaced, upload the file to your webserver, so we can get started with the ActionScript.

Step 4: Set up a Document Class

Create a document class for your Flash file; call it Main.as. If you're not familiar with document classes, read this Quick Tip.


package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			
		}
	}
}

Step 5: Calling JavaScript Functions from Flash

The first thing we'll do with the ExternalInterface is call a JavaScript function that will change the background color of our webpage. So, attach an event listener to our ColorPicker component. When the color changes, it will send the hex value to a javascript function called receiveColor():


package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);	//calls receiveColor(event.target.hexValue) in the javascript
		}
	}
}

Now we have to write this receiveColor() function. In the head of our HTML document, we start the javascript by defining this function. It simply takes the value sent to it from Flash and changes the background color.


<script type="text/javascript">
function receiveColor(value) {
	document.bgColor = "#" + value;
}
</script>

Put that right after <head> in your HTML file. If all's well, when you run the HTML page in a browser and change the color in the ColorPicker, it should change the background color of the webpage.

Step 6: Calling ActionScript Functions from JavaScript

The next example will be to send data from JavaScript to Flash. In the HTML document, paste the following code within the <script> tag you added in the last step:


window.onload = function() {
	var sender = document.getElementById("sender");		//getElementById finds an element according to its "id" property
	sender.onclick = function() {
		var ta = document.getElementById("textArea");
		document['externalInterface'].receiveText(ta.value);
		ta.value = "";
	};
};

Here's what this does: after the document is loaded, we get the 'sender' button and attach an event listener to it. When the 'sender' button is clicked, it will call the receiveText() function in Flash that we will set up now.

Back in Flash, we tell the ExternalInterface to register the ActionScript function so that it can be called from JavaScript. Then we set up our receiveText() function:


package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);	//allows JavaScript to access the receiveText() function.
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		//this is the new receiveText function
		public function receiveText(value:String):void {
			jsText.text = value;
		}
	}
}

(New lines are 5, 9 and 16-19.)

Step 7: Calling JavaScript Alerts, Confirms and Prompts from ActionScript

We can also call alerts very easily from ActionScript. Here we simply tell the ExternalInterface to call a 'prompt'. We can also use the ExternalInterface to pass parameters to functions. Here we tell the 'prompt' function to ask the user his or her name. When our user enters the info, it's passed back to the 'promptText' text field.


package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);	//makes promptClick() run when prompt button is clicked
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		public function receiveText(value:String):void {
			jsText.text = value;
		}
		
		//function to be called when prompt button is clicked. Will ask for user's name using a JS prompt.
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
	}
}

(New lines are 10 and 21-24.)

Step 8: Calling Anonymous JavaScript Functions

Another thing we can do is write our own JavaScript functions as strings, then call them from the ExternalInterface. Here we create a JavaScript function that receives a parameter. We take that parameter and assign its value to the innerHTML attribute of our 'textChange' div in the HTML document. You'll notice that there are no external JavaScript functions being called - it is all contained within the ActionScript.


package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);	//makes changeClick() run when change button is clicked
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		public function receiveText(value:String):void {
			jsText.text = value;
		}
		
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
		
		//changes text inside the HTML to match text field inside Flash
		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}
	}
}

(New lines are 11 and 26-30.)

Step 9: Calling Anonymous JavaScript and ActionScript Functions

Finally, we can call anonymous functions on both sides. In the 'anonymous' function, we register an anonymous ActionScript function with the ExternalInterface. The function fills in some text, then starts a timer. Next, we call an anonymous JavaScript function. This function tells the window, when it's been resized, it must call back to our anonymous ActionScript function.


package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);
			
			//create a new timer with a one second tick, and add an event listener
			var timer:Timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, onTimer);
			
			anonymous();   //set up the anonymous functions
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		public function receiveText(value:String):void {
			jsText.text = value;
		}
		
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
		
		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}
		
		//clear the text after one second has passed
		public function onTimer(event:TimerEvent):void {
			resizeText.text = "";
			timer.stop();
		}
		
		public function anonymous():void {
			//see how we're defining a function inside another function?
			ExternalInterface.addCallback("anon", function(){
				resizeText.text = "The window has been resized.";
				timer.start();
			});
			
			//same applies here
			ExternalInterface.call("function(){ window.onresize = function(){ document['externalInterface'].anon(); }; }");
		}
	}
}

(New lines are 13-17 and 37-52.)

Conclusion

The ExternalInterface is an extremely powerful and useful class. With it, you can receive values and events, all outside of the SWF. Have fun with it and thanks for reading!