Over the years I’ve come up with many tricks to help deal with this – some more effective than others. Today I found the best solution to date. It’s not 100% effective, but it’s much better than any of the other options that I used.

I decided to try using the jQuery hover method to detect when the mouse leaves the Flash’s containing DIV element in the DOM.

The AJAX code looked something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$('document').ready(function()
{
    $('#flashNavReplace').hover(
        function()
        {
	    //rollover functionality here
        },
        function()
        {
            getFlashMovie("flashNavReplace").jsCloseNavigation();
        });
});
 
function getFlashMovie(movieName) 
{
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];
}

and then the Flash side uses some code like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import flash.external.ExternalInterface;
 
/**************************************************************************
* 
* CONSTRUCTOR
* 
**************************************************************************/
public function TopNavigation()
{
    //setup the JS callback
    ExternalInterface.addCallback("jsCloseNavigation", jsClose);
}
 
function jsClose():void
{
    Logger.log("CALLED FROM JS");
    //close the nav
}

This works for me pretty much all of the time… I can break it if I really try, but it works great for normal usage.

URL: http://www.rebusfarms.com
AGENCY: Freelance
LAUNCH: August, 2008
ROLE: Lead Developer
TECHNOLOGIES: Flash, Python + Django, XHTML + CSS, jQuery

URL: http://www.nike6.com
AGENCY: Nemo
LAUNCH: July 2008
ROLE: Senior Developer
TECHNOLOGIES: Flash, jQuery, & Wordpress

There’s a lot of AJAX that binds the two halves of this site together – one side represents that brand message, and it built in Flash. The other side represents “The Insider” showcasing the latest news and information about the athletes. The two sides interact and use tagged content as a way to display relevant content based on what is currently shown on the opposite side.

This site was featured on http://www.commarts.com/.