Advertisement
  1. Code
  2. ActionScript
Code

Quick Tip: How to Communicate Between Flash and JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

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.

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.


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():

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.

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:

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:

(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.

(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.

(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.

(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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.