Main Content

You are here:

Custom right-click menu in Flash

Welcome to another Foundation Flash tutorial, in which I will be teaching you how to create a custom right-click menu for your Flash movie or game. Why would you want to do this? Well, if you have some bitmap images in your movie, you don't want the user to just zoom right in and make it all look horrible, do you? Also,what if you are making a game? The user could possibly use these controls to cheat. As well as the functionality given by removing the default right-click menu items, you can add extra menu items which can display copyright text or even link to your website. So basically, what we will be making is this (or something similar to this):

Let's get started then. Open up a new Flash document, or open an existing one, as this will work in any Flash document. Click in frame 1 of your timeline. Hopefully you have a dedicated layer for ActionScript, if not create one. Then on that frame, press F9 to open your actions panel. This is where all the code will go, so let's begin writing it. The first thing we want to do is create a new context menu for us to put all our things in:

var myMenu:ContextMenu = new ContextMenu();

This code creates a new object of the ContextMenu class, and names it "myMenu". This will be the right-click menu we want to show in our movie. At the moment, it has all its default menu items, but we can change that:

myMenu.hideBuiltInItems();

Write that underneath the initial creation of our menu. In this line of code we use a built in function in the ContextMenu class, called "hideBuiltInItems". This hides all the built in menu items of our menu, i.e. Zoom in/out, Play, Loop, etc. So now we have our empty menu (except for the "About Flash Player..." text, which you can't get rid of). Now, though, we need to add our copyright text and a link to our website. So, we first want to create the function to link to our website. At the top of all your code. Type:

function visitSite() {
        getURL("https://foundation-flash.com", "_top");
}

This creates a new function named "visitSite" which will open https://foundation-flash.com in a new window. Now we can create the menu item which will display the copyright text and link to our website:

var copyrightText:ContextMenuItem = new ContextMenuItem("� 2007 Foundation Flash", visitSite);

Now we are using the ContextMenuItem class and creting a new object of this class, called "copyrightText". This takes in the parameters caption (What will be written on the menu), and function when clicked, in this case, our visitSite function. Now we have to add our item to an array in our ContextMenu, named "custom items", so type:

myMenu.customItems.push(copyrightText);

If you aren't familiar with the push function of an array, it takes in the parameters of whatever you want to store in an array and adds it to the end of the array. Originally the array was empty, but now we have added our copyright text to it. So now we have our completed menu, so all we have to do it attach it to our root timeline. At the end of your code, write the following:

_root.menu = myMenu;

This makes the root timeline's main right-click menu equal to "myMenu". Test your movie and right click. You should see your copyright text, and when you click it it will open a new browser window taking you to the link specified in the visitSite function. Congratulations, you have created your first custom right-click menu. In case you need it, the final code is this:

function visitSite() {
        getURL("https://foundation-flash.com", "_top");
}
var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();
var copyrightText:ContextMenuItem = new ContextMenuItem("� 2007 Foundation Flash", visitSite);
myMenu.customItems.push(copyrightText);
_root.menu = myMenu;

Thanks for reading,

Leon

Comments