Wednesday, 22 July 2009

Custom context menu in Actionscript 3

I previously created a tutorial on disabling the context menu in AS3. This time I will be adding custom menu items to the context menu. The custom menu items are basically captions that are displayed in the context menu in Flash. You will need to use the ContextMenuItem class for this tutorial more information can be found AS3 ContextMenuItem component reference. There are some restrictions when using the ContextMenuItem class, below is a list of some of them:

* Maximum of 15 custom items in a context menu.
* Custom items must contain at least one character.
* Maximum of 100 characters.
* Each caption cannot be the same or it will be ignored.
* Certain words cannot be used. E.g. save, paste, Adobe, settings, open… (Full list can be found at the ContextMenuItem component reference)

The majority of the code below should look familiar from the disable context menu in AS3, so be sure to have looked at the code from that tutorial.


Custom context menu in Actionscript 3.0

1. Add one custom item

Open a new Flash AS3 file.
Select F9 to open up the Actions panel and add the following code:

//1.
var my_cMenu:ContextMenu = new ContextMenu();

//2.
my_cMenu.hideBuiltInItems();

//3.
var my_name = new ContextMenuItem("ilike2flash");

//4
my_cMenu.customItems.push(my_name);

//5.
contextMenu = my_cMenu;

Code:
1. Creates an instance of the ContextMenu class with the variable ‘my_cMenu’.
2. The hideBuilt items method hide the existing default items in the context menu.
3. Creates a contextMenu item with the caption ‘ilike2flash’.
4. Adds contextMenu item to the array.
5. This sets the item to the context menu which will disable the custom caption.


Test your custom context menu Ctrl + Enter and you should see the following when you right click on the stage.




2. Add multiple custom items

You can repeat the process above and add multiple customs items. Open up your actions panel and enter the following code:
var my_cMenu:ContextMenu = new ContextMenu();
my_cMenu.hideBuiltInItems();

var my_name = new ContextMenuItem("ilike2flash");
var my_tut = new ContextMenuItem("tutorials");
var my_sub= new ContextMenuItem("subscribe");
var my_con = new ContextMenuItem("contact");
my_cMenu.customItems.push(my_name,my_tut,my_sub,my_con);

contextMenu = my_cMenu;

You should get the following context menu below:




3. Change the properties of the context menu

There are three main properties you adjust in the context menu which are:

* separatorBefore – This specifies whether a separator bar should appear above a menu item. The default value is false.
* Visible – This specifies whether the context item is visible. The default value is false.
* Enabled – This specifies whether the context menu will be disabled or enabled. The default value is true.


The properties above are all Boolean values, so to use them you have to states whether they are true or false. Below is an example of the separatorBefore property. Open up your Actions panel and enter the following code:
var my_cMenu:ContextMenu = new ContextMenu();
my_cMenu.hideBuiltInItems();

var my_name = new ContextMenuItem("ilike2flash");
var my_tut = new ContextMenuItem("tutorials");
var my_sub= new ContextMenuItem("subscribe");
var my_con = new ContextMenuItem("contact");
my_cMenu.customItems.push(my_name,my_tut,my_sub,my_con);

my_tut.separatorBefore = true;
my_sub.separatorBefore = true;

contextMenu = my_cMenu;

You should get the following custom menu below. Try experimenting with the visible and enable properties.



Checkout Custom context menu part 2 for adding custom context menu to a sprite/movie clip object, and adding link functionality.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP