Flash Tutorial Part 3: The Context Menu

In this next tutorial we will cover the demanding and often times troublesome Context (or right-click) menu. You access this in any browser by right-clicking (or ctrl-click on a Mac) in the Flash movie area. Ever wish you could add your own stuff in there, or remove other things? Well, read on!

Goal: The goal of this tutorial is to introduce the basic methods for making and utilizing a personal context (right-click) menu for your Flash movies.

Why: Context menus are more and more becoming an essential part of everyday browsing. In Flash the built in context menu can be detrimental to your applications or games. There are default actions such as play, rewind, loop, etc that can actually do damage to your movie/game. If you have a large movie and lots of action script and a user clicks "play" before it is fully loaded they can cause errors or the action script to even stop loading! Sometimes using the context menu players of your games can cheat through some frames!

How: Using basic action script and some built-in features you can place some very nice and non-detrimental items to your context menu.

The Build: Okay, let's get started. Open a new document and make 2 layers, scripts and stage we will name them. on the scripts layer frame 1 is where we will be spending our time. Open the actions panel for frame 1 of the scripts layer. We will start with a heading (for reference) and some functions.

Code:

---

/**** My Context Menu*****/
function noClick() {
}
function getMySite() {
        getURL("http://dynamicdrive.com/", "_blank");
}

---

the first line will never show anywhere but in the actions layer, it will be greyed out. This is just for you to know when things start and stop. it is not needed, but often times helpful.

The first function is a blank function (no code inside) so it basically does.. well nothing. (and it does nothing well) We have named the function noClick.

The second function (named getMySite) adds a getURL function to our mess. Simple enough. We have a heading and some functions. but now we need to tell Flash we want to make our own context menu. add this on the next line:

Code:

---

var myMenu:ContextMenu = new ContextMenu();

---

Here we have made a new variable named myMenu, gave it a declaration as a Context Menu and told Flash that myMenu is a new Context Menu. Now we need to let Flash know we do NOT want it's standard crap (we will put our own crap in there). One single line of code will do that...

Code:

---

myMenu.hideBuiltInItems();

---

This standard code tells Flash that the item myMenu does not want to show the standard built in context menu items. (now you COULD go through and name each one - .zoom = false; .play= false; etc.. but why?)

One important note... Flash has 2 (or 3 if you use Flash 8 or later) items that you can NOT get rid of. Those would be settings, and About Flash player (and redraw groups in 8+) There is nothing we can do about that as those are instrumental in making sure the swf handles the codes correctly for the Flash Player. So don't worry that they still appear.

Next we will add something of our own. This can be anything really, so we will start with a standard copyright notice. Flash can put their About Flash on the CM, we can put ours! This will also be a great place to use the noClick function!

Code:

---

var copyrightNotice:ContextMenuItem = new ContextMenuItem("© 2005 - 2008 BLiZZaRD's Tutorials", noClick);

---

Here we tell Flash we are making a new variable named copyrightNotice for the context menu (original huh?) we tell it that this is a new CM item and that this item says what ever is in quotes. and finally to utilize the noClick function for handling it.

Basically that's how this works, you can add whatever you want to the CM using the code above. So let's do one more and add a link to your website!

Code:

---

var mySiteLink:ContextMenuItem = new ContextMenuItem("Dynamic Drive's Web Site", getMySite);

---

As you can see things are pretty much the same. new variable named mySiteLink for the CM it will read in the CM what is in quotes, only this time we want it to use the getMySite function.

Simple enough. We could stop here and publish and notice.. there is NO new context menu! That's be cause we haven't told Flash that out new context menu needs to be seen. So we do that by attaching it to the root timeline.

Code:

---

_root.menu = myMenu;

---

Now if you test you will notice you have a context menu that does not show the standard items, but it also does not show your new items either! We have to push those through to Flash using the push feature.

Code:

---

myMenu.customItems.push(mySiteLink, copyrightNotice);

---

Here we are telling Flash that all the customItems we created need to be shown on the context menu named myMenu. Note that THIS is where you put the context menu in order, left to right = top to bottom on the CM. In this instance we did the copyright notice first, but it will show up under our link. NOW you are done. You can save and publish and be happy with your new context menu.

OR you can clean things up a bit. Stay with me...

I like tidy, and I hate how those unrelated items in my new CM aren't separated. So I am going to add a separator between them.

Code:

---

copyrightNotice.separatorBefore = true;

---

Since my copyright notice is last, I will put a separator before it with the above line. Now we are pretty! Add a closing comment tag, organize my code and I am a happy camper!

Code:

---

/**** My Context Menu*****/
function noClick() {
}
function getMySite() {
        getURL("http://dynamicdrive.com/", "_blank");
}
var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();
var copyrightNotice:ContextMenuItem = new ContextMenuItem("© 2005 - 2008 BLiZZaRD's Tutorials", noClick);
copyrightNotice.separatorBefore = true;
var mySiteLink:ContextMenuItem = new ContextMenuItem("Dynamic Drive Web Site", getMySite);
myMenu.customItems.push(mySiteLink, copyrightNotice);
_root.menu = myMenu;
/***********/

---

Until next time -

BLiZZ