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

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:

  1. var navItem:Sprite = new Sprite();
  2. var cm:ContextMenu = new ContextMenu();
  3. cm.hideBuiltInItems();
  4. var openNewWindow:ContextMenuItem = new ContextMenuItem("Open Link in New Window");
  5. openNewWindow.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onOpenNewWindowSelect, false, 0, true);
  6. cm.customItems.push(openNewWindow);
  7. 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:

  1. 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.

TypeNav Font Option 1

» Download now (zip)

TypeNav Font Option 6

» Download now (zip)

TypeNav Font Option 8

» Download now (zip)

For more info, see the TypeNav™ page here.

Related posts:

  1. Flash AS3 Contact Form Using PHP
  2. AS3 Dotted Line Class
  3. Free AS3 Scrollbar: Fullscreen and Resizable
  4. Simple Sanity-Saving Tip for All Timeline-Based Flash Projects
  5. 7 Tips to Make Your Flash Site iPhone and iPad Friendly

14 Responses to “Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3”


  1. 1 Atlanta Graphic Design Company

    Very Useful! Thank you very much.

  2. 2 azbeen

    very nice….i will definitely use this method wherever i can.

  3. 3 Jack

    Hi,

    I can’t seem to find the sample that you mentioned…”You can see a working example of what I came up with above in my blog header nav.” I tried searching on the blog section but did not find it, a link to it would be highly appreicated and bit more efficient for finding it, thanks for your info so far!

    JC

  4. 4 Jay

    @Jack

    The example I am referring to is the actual nav in my blog header. The “Home”, “About Me”, “Warm Forest Flash Templates” links – if you right click on them you’ll see they are in Flash.

    -Jay

  5. 5 John

    I really with you would be a little less of a tease with your code. The stuff you posted is really the easy part. In my experience the trick is in passing the URL to the “onOpenNewWindowSelect” function. It would be helpful to see the whole thing.

  6. 6 Mark

    Hi Jay, I was wondering what font did you use for the Sycamore logo name? I need to buy that font but couldn’t find it. Thanks a lot and congrats on your amazing work.

  7. 7 Mark

    Me again Jay, do you include the fonts in your templates? The Sycamore template uses a font in the logo name which I love like crazy. Would I have the font if I buy the template?
    Thanks.

  8. 8 Jay

    @Mark

    The fonts are commercial fonts so they are not included in the download. They are however embedded in the SWFs so you don’t need to own them to use the site. You can download the free version of Sycamore and play with it to see how it works. If you make ActionScript source code customizations and republish the FLAs however you will need to own the fonts. The font names are shown inside the FLAs. Hope that helps.

    -Jay

  9. 9 Mark

    ok, I gotta buy the template to find out the name of the font, thanks.

  1. 1 Creating an Accessible Flash Nav That Functions Like an HTML Nav
  2. 2 CSS Brigit | Creating an Accessible Flash Nav That Functions Like an HTML Nav
  3. 3 Rubén Rojas (rubenmedios) 's status on Friday, 31-Jul-09 17:14:35 UTC - Identi.ca
  4. 4 ActionScriptJobs.com
  5. 5 Best of the Web – July 2009 : Webby Tutos

Leave a Reply