Home / Articles / Adobe Flash / External Communications with Flash 8: How to Use the ExternalInterface

External Communications with Flash 8: How to Use the ExternalInterface

Article Description

Kris Hadlock explores the use of the ExternalInterface class in Flash 8. With ExternalInterface, you can build robust object-oriented Flash applications that can be connected to the outside world and tied to databases and other server-side processes.

Like this article? We recommend

Macromedia Flash 8: Training from the Source

Macromedia Flash 8: Training from the Source

$44.99

The JavaScript Connection

The JavaScript included in this project is part of an AJAX engine that requests an XML file containing mortgage company statistics. This information is then displayed in the content div. While the companies are added to the content div, they’re given mouseover and mouseout events that are used later to highlight items in the bar chart. Once all of the mortgage companies have been displayed, we add them to a Flash bar chart by passing an array of names and rates. In Firefox, the chart in the Flash movie is not fully instantiated by the time all the JavaScript that’s trying to add the items has been executed in the page. Therefore, I added an onFlashLoaded method that’s called from Flash once the chart is instantiated, and which then adds the items to the chart. On the other hand, IE instantiates the chart and executes the ActionScript before the JavaScript is fully executed; therefore, we need to check the browser type after we’ve completed executing the JavaScript. If the current browser is IE, we need to add the items. Here’s the code:

function processReqChange()
{
 if(xmlhttp.readyState == 4)
 {
  if(xmlhttp.status == 200)
  {
   var response = xmlhttp.responseXML.documentElement;
   var lenders = response.getElementsByTagName(’lender’);
   for(var i=0; i<lenders.length; i++)
   {
    names.push(lenders[i].getAttribute(’name’));
    rates.push(response.getElementsByTagName(’rate’)[i].firstChild.data);
    var payment = response.getElementsByTagName(’payment’)[i].firstChild.data;
    var origination = response.getElementsByTagName(’origination’)[i].firstChild.data;
    var items = "<div id=’"+ names[i] +"’><span class=’title’>"+ names[i] +"</span> <a href=\"#\" onmouseover=\"javascript:highlightItem(’"+ names[i] +"’, ’#ebebeb’);\" onmouseout=\"javascript:highlightItem(’"+ names[i] +"’, ’#ffffff’);\" >Chart</a><hr><b>Rate:</b> <span class=’main’>"+ rates[i] +"</span><b>Payment:</b> <span class=’main’>"+ payment +"</span><b>Origination:</b> <span class=’main’>"+ origination +"</span></div><br/>";
     document.getElementById(’content’).innerHTML += items;
   }
  }
  else
  {
   alert("There was a problem receiving the XML data:\n" + xmlhttp.statusText);
  }
 }
 if(navigator.appName.indexOf("Microsoft") != -1) flashMovie(’chart’).addAllItems(names, rates);
}

function onFlashLoaded()
{
 flashMovie(’chart’).addAllItems(names, rates);
}

In order to call a method in the Flash movie from JavaScript, we need to create a JavaScript method that retrieves the Flash object by name, by checking the browser type and returning the object to the calling method. This is the method that we use to reference the important name and id attributes in the Flash object that I discussed earlier.

function flashMovie(name)
{
 if(navigator.appName.indexOf("Microsoft") != -1)
 {
  return window[name];
 }
 else
 {
  return document[name];
 }
}
5. The ActionScript Connection | Next Section Previous Section