Right Click Menu Tutorial – Part II

In this installment, we will add some menu items and give them some functionality. This can actually get pretty cool, as you will soon see.

1. The ContextMenu object contains an array called “customItems”. These are your custom menu items.
2. Each new menu item is an instance of ContextMenuItem. The basic constructor for this is:

   new ContextMenuItem(caption, callBack);

3. The basic sequence is to create your menu items and push them onto the array. You can do this in one step, like so:

   
   myMenu.customItems.push(new ContextMenuItem(“Info”, getInfo));
   

4. The callback is the name of a function that will be called when that menu item is chosen. This function is passed two parameters: the name of the object that was clicked on, and the instance of ContextMenuItem that chosen. It would look like this:

   
   function getInfo(obj, item){
   &nbsp&nbsp&nbsp&nbsptrace(obj);
   &nbsp&nbsp&nbsp&nbsptrace(item);
   }

OK. let’s create something real.

1. Create a movie clip with a simple square in it. Put an instance of it on stage, with the instance name “box”.
2. Set up the ContextMenu for the box:

   
   var boxMenu:ContextMenu;
   boxMenu = new ContextMenu();
   box.menu = boxMenu;
   boxMenu.hideBuiltInItems();

3. Next we’ll add three items to the box’s menu. Each one will have a caption and a callback function defined.

   
   boxMenu.customItems.push(new ContextMenuItem(“Red”, changeColor));
   boxMenu.customItems.push(new ContextMenuItem(“Green”, changeColor));
   boxMenu.customItems.push(new ContextMenuItem(“Blue”, changeColor));

4. Note that they all have the same callback handler. This function checks the item’s caption, which will be “Red”, “Green” or “Blue”, and changes the color of the object accordingly:

   
   function changeColor(obj, item) {
   &nbsp&nbsp&nbsp&nbspswitch (item.caption) {
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspcase “Red” :
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspvar col = new Color(obj);
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspcol.setRGB(0xff0000);
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspbreak;
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspcase “Green” :
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspvar col = new Color(obj);
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspcol.setRGB(0x00ff00);
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspbreak;
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspcase “Blue” :
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspvar col = new Color(obj);
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspcol.setRGB(0x0000ff);
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspbreak;
   &nbsp&nbsp&nbsp&nbsp}
   }

5. We can add some more. The ContextMenuItem constructor has some additional options. The third parameter will add a separater above the item if true, and the fourth will specify if the item is enabled or not. Using these, we can add two more items to the menu:

   
   boxMenu.customItems.push(new ContextMenuItem(“Drag”, drag, true, true));
   boxMenu.customItems.push(new ContextMenuItem(“Drop”, drop, false, false));

6. Note that items will not show up on the menu if the callback is not actually defined. So let’s define them:

   
   function drag(obj, item) {
   &nbsp&nbsp&nbsp&nbspboxMenu.customItems[4].enabled = true;
   &nbsp&nbsp&nbsp&nbspitem.enabled = false;
   &nbsp&nbsp&nbsp&nbspobj.startDrag(false);
   }
   function drop(obj, item) {
   &nbsp&nbsp&nbsp&nbspboxMenu.customItems[3].enabled = true;
   &nbsp&nbsp&nbsp&nbspitem.enabled = false;
   &nbsp&nbsp&nbsp&nbspobj.stopDrag();
   }

7. That last one may need some explanation. It starts out that the “Drag” item is enabled, and the “Drop” item is disabled. Selecting “Drag” runs the drag callback. This disables its associated item, and enables boxMenu.customItems[4], which is “Drop”. The “Drop” item does exactly the opposite. There is probably a more concise way of doing this without hardcoding in the array element numbers, but this is a quick and dirty way that works for a simple example.

Well, that’s a pretty good start. I think the biggest hurdle now is educating the end user that there might be something there when they right click. They are used to the same old built-in items, and won’t bother to look unless you mention there’s something there. Hopefully if enough people start coding with this feature, people will catch on and start checking for right-click options.