ActionScript’s ExternalInterface is a powerful tool, allowing you to execute and retrieve results from JavaScript in the browser.

Recently however, a strange bug was encountered where Flash running in one part of a page was exhibiting strange rendering issues, such as pieces of the background failing to draw, and Sprites flickering when ExternalInterface calls were made. To make things even more puzzling, the Flash exhibiting the rendering issues was not the one making the calls.

At first it seemed the issue was caused by css, as it only appeared when adding DOM nodes to a parent node styled overflow: auto. After further investigation, it was found found that manipulating the DOM within the ExternalInterface callback was the culprit.

In order to prevent the flickering, it was necessary to decouple the ExternalInterface call from the DOM work. The fix itself was simple.

var client = new Client();
function notifyClient() {
  var arg = arguments[0];
  setTimeout(function() { client.notify(arg); }, 0);
}

Notice how a local is explicitly created to lift out the first argument passed to the JavaScript function instead of using a named argument. In some browsers it was found that named locals were not threaded through to the client.

Using setTimeout with a delay of 0 simply schedules the provided anonymous function to be executed as soon as the singly-threaded JavaScript interpreter is available.

Whenever the result of an ExternalInterface call is not needed for consumption by ActionScript, consider using setTimeout to decouple the work performed by each component.

Leave a Comment

Enclose code in <code lang="ruby"></code> if you care.
Preview your comment using the button below.