Someone asked me once about loading external SWF movies from a Flex app and having trouble with unloading them. It had something to do with the audio in the loaded SWF file continuing to play after the SWF was unloaded. I didn’t quite understand the details, but I was asked if I knew how to fix the problem or work around it.

I suggested using ExternalInterface in Flex to interact with a JavaScript function in the HTML page to make Fancybox (a lightbox that is most familiar to me) display an iframe over the Flash SWF file. I saw in the Fancybox FAQ that it could appear over Flash content (with a caveat) so this gave me confidence that my idea would work. So I sent an e-mail to the person trying to fix this problem and described how to implement the solution with referenced links.

I received a response that basically amounted to, “This does not look possible,” which in my mind translated to, “I don’t know what to do (because I don’t really understand it).” My comments aside, this bothered me so much that I ended up throwing something together just to prove this person wrong despite all the evidence I had previously sent.

In my Flex app, I hooked up a button click handler to make a call to my JavaScript function via ExternalInterface.

ExternalInterface.call( "show_fancybox_thing" );

I’m not too, too familiar with jQuery so I had figure out how to create an element (a link specifically in this case) and trigger a click event on that element.

function show_fancybox_thing() {
$('<a href="http://www.jquery.com/">jQuery</a>').fancybox(
{'type': 'iframe'} ).trigger('click');
}

That’s the simplest implementation you could do using minimal Fancybox configuration. This code will display the jQuery website within an iframe after clicking a button in the Flex application. The example could easily be changed to pass a web address from ExternalInterface into the JavaScript function call.

For the embedded Flash, the window mode needs to be “opaque” within the HTML file. For the <object> tag, the following needs to be added under it:

<param name="wmode" value="opaque">

The <embed> tag requires an attribute:

wmode=opaque

Other than that, as long as Fancybox is set up properly there isn’t too much to it. I’ve put a demo online of calling Fancybox from Flash.