Actionscript's ExternalInterface class (again)
In the last ActionScript 3.0 tutorial post I was talking about using ActionScript 3.0's ExternalInterface Class to communicate with the browser. In the previous example I set up the Flash SWF file to use the ExternalInterface.call() method to tell the browser to run a JavaScript function called "gimmeAlert". Nothing fancy, but you can probably think of functions in the browser you would love to run from a Flash menu or button bar.In this example we will tell flash to expose an ActionScript function so it can be called from the browser using JavaScript.
First we will start with the flash file and HTML we built in the first example. We have already done much of the setup for this example. We have a text field set to "dynamic" and we not only published the Flash file and placed it in the HTML file, but we added the 'id' and 'name' values to the AC_FL_RunContent() function in step 5. This step was not needed to run the previous example, but it is for this one. Flash can run JavaScript without a name or id placed on the object in HTML, but JavaScript needs it to talk back to Flash.
All that done we are ready to have JavaScript run an ActionScript function.
- Return to the Flash file and go back to your ActionScript on Frame 1 of the "actions" layer.
- At the bottom of that code add a new line and create the following function...
function changeTextBox():void
{
text_txt.text = "You clicked the button in the web page";
}This is the function we will call from the web page.
- At the top of the ActionScript code add the following line...
ExternalInterface.addCallback("changeTextBox", changeTextBox);The first argument in the addCallback function is the name JavaScript will use to call the ActionScript function. The second argument is the function being called within ActionScript itself. These do not have to match. Here is was just easier to use the same name.
That's it for the ActionScript/Flash end of things. On to the JavaScript/HTML.
In the HTML file we are going to add some very basic browser detection (mainly because the makers of the browsers cannot seem to use the same DOM or Document Object Model). This will ensure your JavaScript is referring to the same object when it tries to talk to the Flash file.
- Go to the <script> tag we added to the <head> of the HTML file and add some extra space at the top. Add the following code...
var flashPlayer;
function detectFlashPlayer()
{
if(navigator.appName.indexOf("Microsoft") != -1)
{
flashPlayer = window.eiexample;
} else {
flashPlayer = window.document.eiexample;
}
}This will make it easier to reference the flash file. If the browser is Microsoft Internet Explorer, then the variable flashPlayer is a shortcut to window.eiexample. If it is any other browser then the variable flashPlayer is a shortcut to window.document.eiexample.
Only two more steps (including testing).
- In the HTML file, add a button like you would in a form. You do not need a form tag.
- In the button code, add an onclick property with the value flashPlayer.changeTextBox()
<input type="button" value="Click Me" onclick="flashPlayer.changeTextBox()" />That's it. Upload everything and test your button. The text in the flash file should change to the text in the ActionScript function. The possibilities are endless. You can have a Flash file change page elements in HTML. You can have HTML forms and navigation send information to the Flash file. You could send messages to a Flash video player that send it to defined que points. Wait... I think YouTube/Google Video already do that with Flash. hmmm.
There is only one piece of bad news. I found this note in the online help files at Adobe.
"Note: Adobe AIR currently does not support the ExternalInterface class."
Update on AIR
I love the Flash community. They tend to share knowledge as quickly as they come by it. It had been a while since I had considered the ExternalInterface Class and the fact that it does not work in AIR. There is good reason for this it turns out. It looks like Flash content in AIR files can call JavaScript as part of the AIR file's DOM. If you are interested in more, check out this blog entry... AIR ActionScript / JavaScript Bridge
I love the Flash community. They tend to share knowledge as quickly as they come by it. It had been a while since I had considered the ExternalInterface Class and the fact that it does not work in AIR. There is good reason for this it turns out. It looks like Flash content in AIR files can call JavaScript as part of the AIR file's DOM. If you are interested in more, check out this blog entry... AIR ActionScript / JavaScript Bridge
For now I am going to assume AIR has some other internal system of communicating between a flash file in AIR and an HTML file in AIR. I only recently learned that you can create links in AIR that open an external browser like IE or Firefox.
I'll post with more info as I find out more.
'till then
--Rich
