Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3

warmforest — Mon, 13 Jul 2009 23:51:48 +0000

For a recent project I needed to create a Flash navigation menu for use in a HTML site that functioned as close as possible to a normal HTML nav. In HTML you can right-click links to open them in a new window/tab but normally with Flash menus you can’t do this. Therefore I had to try to create that functionality from scratch with ActionScript.

You can see a working example of what I came up with above in my blog header nav.

Flash links inside of text fields (usually set with CDATA and XML) support right-clicking to open links in new windows by default but setting up a nav that way usually doesn’t make sense and you would lose a lot of functionality doing it that way. So the trick I found was to take advantage of the fact that you can add a custom right-click context menu not just to the Flash stage but also to each individual sprite itself.

Here is some sample code that you can add to each of your nav items to achieve this:

var navItem:Sprite = new Sprite();
var cm:ContextMenu = new ContextMenu();
cm.hideBuiltInItems();
var openNewWindow:ContextMenuItem = new ContextMenuItem("Open Link in New Window");
openNewWindow.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onOpenNewWindowSelect, false, 0, true);
cm.customItems.push(openNewWindow);
navItem.contextMenu = cm;

I also tried to mimic the browser functionality of command (control on a PC) clicking to open links in new tabs and shift-clicking to open them in new windows. Using keyboard listeners I was able to get this working in Safari but sadly it doesn’t seem to work at all in Firefox for some reason. In Opera, shift-clicking opens a new tab but command-clicking just triggers the normal right-click menu. I guess it just depends on how the browser wants to handle the keyboard events.

I also added the ability to copy the URL to the clipboard for copying and pasting. Here is a quick snippet of code that will copy text to the system clipboard:

System.setClipboard("Your text to copy");

So why create a menu in Flash at all if HTML natively supports these features? The main reason would be nice typography – no more using the same system fonts over and over again. Plus you can create lots of neat dividers/selected state graphics/rollovers without having to open up Photoshop.

Here are three versions of the Flash right-click nav that you can download for free below.

Warm Forest Flash Blog » navigation

Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3