More Flash Site Navigation

Some additional thoughts on the site navigation in Flash. I have a deployed version that you can check out at a great place for postcard printing - actually, make it a two-fer and checkout a mail roi calculator that Alex and I created (Alex made it pretty). (Quick aside, I am responsible it seems for a lot of the facets of SEO at imageMEDIA, so I am pretty much obliged to give the link).

I ran into a few problems at deployment that were aggravating, yet solvable. So, for my own recollection and the potential to help someone else, here we go:

Problems:

  1. Firefox: When the swf loses focus, particularly with scrolling and other page interaction, the drop down menus will not display until the swf is re-focused by clicking.
  2. Firefox: A border will sometimes appear around the swf; particularly after you click it to re-activate the drop downs.
  3. IE: Browser lose track of the swf and not align mouse event with the flash.

Solutions:

1 & 2 have the same solution. I added a mouseover event handler to the DIV containing the Flash that added focus to the div and a mouseout that defocused the menu. This solved the first problem. However, by programmatically adding the focus, I was necessarily getting the border. While this might have been acceptable, though probably not, I found an easy way to solve this problem. After adding focus to the menu, I immediately blurred it.


<!-- BlogCFC is choking on the script tag so I had to break it up - if I weren't so busy I would probably have switched to Mango or Wordpress by now -->
<scr ipt>
function focusToMenu() {
menu = document.getElementById("imFlashMenuContent");
menu.focus();
deFocusMenu();
}

function deFocusMenu() {
menu = document.getElementById("imFlashMenuContent");
menu.blur();
}    
</script>


<div id="imFlashMenuContainer" onmouseover="focusToMenu()" onmouseout="deFocusMenu()" >
<!-- I use swfobject to inject the Flash movie into this div -->
<div id="imFlashMenuContent">
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" />

</a>
</p>
</div>
</div>

For styling concerns, I use a pair of DIVs to contain my swf. The short of it is that my swf must be positioned absolutely in order to remain external to the page layout, yet I want to be able to gracefully center it into the stage. While there might be a better way to accomplish this, the following worked for me:

<style>
#imFlashMenuContainer {
position:absolute;
top:121px;
height:24px;
width:100%;
text-align:center;
z-index:1000;
}

#imFlashMenuContent {
position:relative;
width:900px;
margin-left: auto;
margin-right: auto;
}
</style>

And this brings me to the Internet Explorer issue. It was styling concerns that shifted the movie such that IE no longer realized the mouse was over the swf. For instance, right clicking on the movie gave the Internet Explorer context menu, instead of the Flash menu. Interestingly, the sub-menus still worked, but required the user to slide the mouse down on a visible menu item to invoke. Cleaning up the placement of the movie resolved the issue, but it does server as a reminder that IE is a PITA.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
BlogCFC was created by Raymond Camden. This blog is running version 5.9.1.001. Contact Blog Owner