Fizix Labs » Tutorials » Flash & Flex » Custom Context Menus In Flash (AS3)

Custom Context Menus In Flash (AS3)

Posted by Fizix Richard in Tutorials: Flash & Flex on the 15th November, 2008

When you right click a Flash movie you will see a standard context menu with options such as quality, zoom and so on. You can actually customize this menu to add new items and hide items. So you could add a copyright statement that links back to your copyright policy or you could hide the standard controls. It's all quite useful really & there are a few things you can do.

This guide is for customizing the Flash context menu using ActionScript 3, Please click here to see the ActionScript 2 version.

The ActionScript 2 Method

We have already written a guide on how to customize the Flash Context Menu with ActionScript 2, a guide which goes into step by step instrutions explaining things as we go. If you already know how to customize the context menu in ActionScript 2 & just want to know the new syntax, feel free to press on. If you don't I advise reading the ActionScript 2 guide first because you do exactly the same thing in AS3 as you do in AS2, you just have to change the code slightly.

Basically if we wrote how to customize the menu in ActionScript 3 in detail, it would be virtually identical to the ActionScript 2 version with a couple of minor changes along the way and would be annoying to read for those who already know how to do this in ActionScript 2.

So this is really an ActionScript 3 update for the previous ActionScript 2 guide.

The ActionScript 3 Method

In the ActionScript 3 method we have to change a few things.

Firstly we have to change the functions for any links we add to the context menu. In ActionScript 3 GetURL is depreciated, we have to use the navigateToURL() function instead. We also have to change our ContextMenuItem() action as we cannot call the onclick function from within this action anymore, we have to use an eventlistener for each link we place in the menu.

Finally, in the AS2 version we set our custom menu to the root timeline using the _root statement which is also depreciated in AS3, so we have to change that bit of code also. If you understand the AS2 version the new code for AS3 should make complete sense.

stop();

function gotoFizixHome(e:ContextMenuEvent):void {
var url:String = "http://www.fizixstudios.com";
var request:URLRequest = new URLRequest(url);
navigateToURL(request, '_blank');
}

function gotoFizixLabs(e:ContextMenuEvent):void {
var url:String = "http://labs.fizixstudios.com";
var request:URLRequest = new URLRequest(url);
navigateToURL(request, '_blank');
}

var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();

myMenu.builtInItems.print = true;

var copyrightNotice:ContextMenuItem = new ContextMenuItem("©2008 Fizix Interactive Studios");
var fizixHomepage:ContextMenuItem = new ContextMenuItem("Fizix Studios Home");
var fizixLabs:ContextMenuItem = new ContextMenuItem("Fizix Labs");

fizixHomepage.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, gotoFizixHome);
fizixLabs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, gotoFizixLabs);

fizixHomepage.separatorBefore = true;

myMenu.customItems.push(copyrightNotice, fizixHomepage, fizixLabs);

this.contextMenu = myMenu;

As you can see, we still have two functions at the top for the links, we have just swapped the gotoURL() action for 3 lines of code, which assigns url to the page we are going to and sends the user to this new page using the navigateToURL action.

The rest up to the 3 ContextMenuItem statements, where we set the custom menu items is the same also, the ContextMenuItem actions are almost the same as the AS2 version; we've just removed the function calls from them and placed addEventListener() actions below them instead, these call the functions when the items are clicked.

The seperator addition and pushing the menu items into the context menu object also remains the same.

The final statement where we assign our custom context menu to the root timeline has altered, we use this.contextMenu now, instead of _root.menu

As you can see, not a lot of difference between the two. If you don't understand it, please read the AS2 guide as the process is exactly the same and the functions, aside from a few small bits here and there are the same.

Post New Comment

You must be a registered member of the labs to post comments or contribute.

Registration is free so click here to sign up.

Comments

There are currently no comments on this article.

Login or Register

Fizix Studios

Articles