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

Custom Context Menus In Flash (AS2)

Posted by Fizix Richard in Tutorials: Flash & Flex on the 12th October, 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 Flash using ActionScript 2. Please click here to see the ActionScript 3 version.

Getting Started

The first thing we need to do is create a new keyframe on frame 1 of your actions layer and use some actionscript to create a new Context Menu object.

var myMenu:ContextMenu = new ContextMenu();

This code creates a new object of the ContextMenu class and calls it "myMenu", which can now receive actions.

To actually replace the standard context menu with our new one we use the attach our new custom context menu object to the root timeline (erm... swap the default one for the custom one). This is a simple line of code code:

_root.menu = myMenu;

If you were to publish your Flash movie now, you will see your custom context menu although at the moment its identical to the default context menu as we haven't actually modified anything; we've just swapped the default one with an identical custom one. So lets have a look at what you can actually do.

Hiding the default options

Hiding the default context menu options such as zoom, quality and so on is easy; all we have to do is use the hideBuiltInItems() action on our custom menu object, like so:

myMenu.hideBuiltInItems();

Now your code should look like this:

stop();

var myMenu:ContextMenu = new ContextMenu();

myMenu.hideBuiltInItems();

_root.menu = myMenu;

If you publish your movie now and right click the movie you will notice all the controls have disappeared leaving only a handful of basic items. If you want the default items to show up and just want to add new items to the list, then simply leave the hideBuiltInItems() action out.

Adding Custom Menu Items

Now we will look at adding custom menu items. You will add two types of menu item; ones that perform an action such as going to a webpage when you click it and ones that do absolutely nothing when you click it.

So the first thing we should really do is add a function for the menu items that do nothing when clicked. So add the following code below the stop() action:

function doNothing() {

}

Now lets create a new menu item that does nothing, the obvious thing would be a copyright statement. So what we will do not is create a new Context Menu item called copyrightNotice, with a copyright statement for text and tell it to do nothing when clicked.

This is done with the following actionscript which should be placed after the myMenu.hideBuiltInItems() action if you used it:



var copyrightNotice:ContextMenuItem = new ContextMenuItem("©2008 Fizix Interactive Studios", doNothing);

Now we have created the new context menu item we need to insert it into the context menu object before it will show up, this is done using:

myMenu.customItems.push(copyrightNotice);

This action pushes any ContextMenuItem's we create into our Context Menu object.

Your code should now look something like this:

stop();

function doNothing () {

}



var myMenu:ContextMenu = new ContextMenu();



myMenu.hideBuiltInItems();



var copyrightNotice:ContextMenuItem = new ContextMenuItem("©2008 Fizix Interactive Studios", doNothing);

myMenu.customItems.push(copyrightNotice);



_root.menu = myMenu;

If you publish the movie and right click it you will see our new context menu with a copyright statement, which when clicked does absolutely nothing.

Now we want to create a new menu item which links to a webpage. So where we set our copyright notice, below that add:

1	var fizixHomepage:ContextMenuItem = new ContextMenuItem("Fizix Studios Home", gotoFizixHome);

This version creates a new ContextMenuItem called fizixHomepage, sets the label to "Fizix Studios Home" and tells Flash that when the user clicks this link it should use the function gotoFizixHome... which we now have to create.

So below our doNothing() function add the following new function:

function gotoFizixHome () {

   getURL("http://www.fizixstudios.com", "_top");

}

This function will take the user to the Fizix homepage when its called by the context menu. We've used "_top", which will open the link in a new window. If you want the link to open in the current window chance "_top" to "_self".

So we have now created a new context menu item which calls a function when clicked, which takes the user to a new page. With this created we need to inject it into the actual context menu.

So go done to the customItems.push action and add the fizixHomepage variable to the list, like so:

myMenu.customItems.push(copyrightNotice, fizixHomepage);

If your adding multiple items to the context menu, you simply separate the variable names with a comma. Remember when creating multiple ContextMenuItem's to give each a unique variable. Also the order that the menu items appear in the context menu is defined by the order you list them in the push action.

Your code should now look something like this:

stop();



function doNothing () {

}



function gotoFizixHome () {

   getURL("http://www.fizixstudios.com", "_top");

}



var myMenu:ContextMenu = new ContextMenu();



myMenu.hideBuiltInItems();



var copyrightNotice:ContextMenuItem = new ContextMenuItem("©2008 Fizix Interactive Studios", doNothing);

var fizixHomepage:ContextMenuItem = new ContextMenuItem("Fizix Studios Home", gotoFizixHome);



myMenu.customItems.push(copyrightNotice, fizixHomepage);

_root.menu = myMenu;

Adding Separators

When you publish the movie now you will see two menu items, which is fine, but you might want to add a separator between them. For example, if you had a copyright notice and then 2 or 3 links, it would make sense to place a separator between the copyright notice and the links.

To add a separator you just use a simple action on the menu item you want the separator to appear above:

stop();



function doNothing () {

}



function gotoFizixHome () {

   getURL("http://www.fizixstudios.com", "_top");

}



var myMenu:ContextMenu = new ContextMenu();



myMenu.hideBuiltInItems();



var copyrightNotice:ContextMenuItem = new ContextMenuItem("©2008 Fizix Interactive Studios", doNothing);

var fizixHomepage:ContextMenuItem = new ContextMenuItem("Fizix Studios Home", gotoFizixHome);



myMenu.customItems.push(copyrightNotice, fizixHomepage);

_root.menu = myMenu;

1	fizixHomepage.separatorBefore = true;

This will put a separator above the Fizix Home link.

Your code should not look like this:

stop();



function doNothing () {

}



function gotoFizixHome () {

   getURL("http://www.fizixstudios.com", "_top");

}



var myMenu:ContextMenu = new ContextMenu();



myMenu.hideBuiltInItems();





var copyrightNotice:ContextMenuItem = new ContextMenuItem("©2008 Fizix Interactive Studios", doNothing);

var fizixHomepage:ContextMenuItem = new ContextMenuItem("Fizix Studios Home", gotoFizixHome);



fizixHomepage.separatorBefore = true;



myMenu.customItems.push(copyrightNotice, fizixHomepage);

_root.menu = myMenu;

Adding Multiple Links

It's probably obvious to most by now how you add several items: create a new ContextMenuItem giving it a unique variable name and assigning it to a function, push it into the context menu object.

But lets just add another link to the context menu so we are clear. This one will go to the Fizix Labs. So add a new ContextMenuItem called fizixLabs and tell it to call the gotoFizixLabs function (which we will create afterwards):

var fizixLabs:ContextMenuItem = new ContextMenuItem("Fizix Labs", gotoFizixLabs);

Then add a function "gotoFizixLabs":

function gotoFizixLabs () {

   getURL("http://labs.fizixstudios.com", "_top");

}

And finally, push it into the context menu object by adding the variable to the list:

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

Your code should then look like:

stop();



function doNothing () {

}



function gotoFizixHome () {

   getURL("http://www.fizixstudios.com", "_top");

}



function gotoFizixLabs () {

   getURL("http://labs.fizixstudios.com", "_top");

}



var myMenu:ContextMenu = new ContextMenu();



myMenu.hideBuiltInItems();



var copyrightNotice:ContextMenuItem = new ContextMenuItem("©2008 Fizix Interactive Studios", doNothing);

var fizixHomepage:ContextMenuItem = new ContextMenuItem("Fizix Studios Home", gotoFizixHome);

var fizixLabs:ContextMenuItem = new ContextMenuItem("Fizix Labs", gotoFizixLabs);



fizixHomepage.separatorBefore = true;



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

_root.menu = myMenu;

Selectively Displaying Specific Default Menu Items

So far in this guide we have been hiding all of the default context menu items. We can however be selective about what we want to hide and show. There are two potential methods to approaching this, you can hide all items and then selectively set items to be shown. Or leave out the hide all items action and instead set specific items to be shown.

Which method you use is really down to keeping your code clean.

If for example you wanted to hide everything except the print option, you would be best hiding everything and explicitly showing the print item.

If however you wanted to only hide one item, you would be best leaving out the hideBuiltInItems() action and explicitly hiding that one item.

To explicitly set an item to be hidden or shown you use the following ActionScript:

myMenu.builtInItems.print = true;

Which would set the "print" menu item to be shown. To hide it change the "true" flag to "false" and the print menu item will disappear. This ActionScript should go below the hideBuiltInItems() action.

Menu Item References
The list below shows all the menu items you can explicitly show or hide:

myMenu.builtInItems.print = true/false;
myMenu.builtInItems.zoom = true/false;
myMenu.builtInItems.quality = true/false;
myMenu.builtInItems.play = true/false;
myMenu.builtInItems.loop = true/false;
myMenu.builtInItems.rewind = true/false;
myMenu.builtInItems.forward_back = true/false;

Notes and Links

Notes

This method will not work with ActionScript 3, please use our ActionScript 3 guide for instructions

HideBuiltInItems(); is an optional action which can be omitted

Links
Click here for more information on the ContextMenu class for AS2.

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

Tutorials