Calypso88

or – Asynchronous Communication and the AS3 ExternalInterface

I just deleted four paragraphs of this post, since they could be summed up as “I hate ExternalInterface because it's slow,” which isn’t even an accurate grievance. ExternalInterface is pretty quick. It's the function’s being called by it that are slow.

My real frustration is that communication between Flash and JS is synchronous. That is, whenever Flash calls out to run a javascript function, all action inside Flash halts until the JS function is completed. This makes sense if you’re using getters and setters, but try anything bigger than that and you’ll start to see problems. At the very shallowest level, you’ll see your animation stutter every time you call out to a JS function that takes more than a couple milliseconds, at deeper levels you’ll enjoy long unexplained freezes and dropped calls.

Before the good stuff, a couple caveats: I’m not a JavaScript guy. I rely on two devs who work wonders with JS – whereas I curl up and stop functioning, the second I lose strict data-typing and custom classes. A lot of the credit for this method goes to them.

Second, the point of this workaround is to decouple AS and JS and let them run at the same time. Doing this sacrifices the return value you get if you wait for a function to complete before jumping back to the other side of the EI.

Step 1. Fix the outbound calls.
The good news first: JS is multithreaded. So if we can get our JS function to run in a different thread than the one targeted by Flash, we can get back to running ActionScript while JS worries about the real work. The secret (thanks to my JS guys!) is JavaScript's setTimeout() function. Here's how it works:

Normally to call a JS function you'd write something like this:

const JS_FUNCTION:String = 'myJSFunction';
const ARG:String = 'foo';
 
//  myJSFunction('foo');
ExternalInterface.call(JS_FUNCTION, ARG);

All we need to do is manually construct our JS function signature, and use that as setTimeout’s target:

const JS_FUNCTION:String = 'myJSFunction';
const ARG:String = 'foo';
const JS_CALL:String = JS_FUNCTION + '("' + ARG + '")';
 
//  setTimeout(myJSFunction('foo'), 0);
ExternalInterface.call('setTimeout', JSCALL, 0);

What does this accomplish? In the first example Flash stops running until foo runs its course. In the second example, Flash is waiting on setTimeout to complete instead. JavaScript will automatically call foo in another thread and return control to Flash, which allows AS to start running again while the foo function can run slowly on the JS side without gumming things up. To see this in action try calling a large empty loop or an alert in JS while you've got some animation going inside Flash.

Next post: Inbound calls, custom events, and data validation, oh my!

continued: Unfucking the ExternalInterface (2 of 2) ⇢