Customize the Right-click menu in Flash | ContextMenuItem Tutorial

Google Buzz

Overview:

Flash give publishers the opportunity to customize the right-click menu which pops up in the swf file with a context menu item in actionscript.

ContextMenuItem

1
ContextMenuItem(caption:String, callbackFunction:Function, [separatorBefore:Boolean], [enabled:Boolean], [visible:Boolean])

Creates a new ContextMenuItem object that can be added to the

1
ContextMenu.customItems

array.

Steps:

The menu item has a caption, which is displayed to the user in the right click menu. It also has a a callback function handler by naming the function in the code to be invoked once the menu item is selected. It then has three boolean values which specify whether the item has a separator before it, is enabled, and is visible.

To add a new context menu item to a context menu, you simply create the context menu items and then push them into the customItems array.
You can enable or disable specific menu items, make items visible or invisible, or change the caption or callback handler associated with a menu item at any time.
In the example here the menu items about clearing and rewriting the text are set to toggle each other, so you can’t rewrite the text if it hasn’t yet been cleared and vice versa.

To further customize the context menu flash allows us to hide the built in items in the menu with hideBuiltInItems(). This hides all the built in item from view (except ’settings’) by setting their visibility to false.

Example:

Get Adobe Flash player


Actionscript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();
var ccs:ContextMenuItem = new ContextMenuItem("Visit Circle Cube Studio", visitCCS, false, true, true);
var pog:ContextMenuItem = new ContextMenuItem("Visit Interactive Flash Portfolio", visitPOG, false, true, true);
var ct:ContextMenuItem = new ContextMenuItem("Clear Text", clearText, true, true, true);
var rw:ContextMenuItem = new ContextMenuItem("Rewrite Text", rwText, true, false, true);
var mt:ContextMenuItem = new ContextMenuItem("Move Text", moveText, false, true, true);

myMenu.customItems.push(ccs, pog, ct, mt, rw);
_root.menu = myMenu;

function visitCCS () {
getURL("http://blog.circlecube.com", "_blank");
}
function visitPOG () {
getURL("http://www.circlecube.com/test/", "_blank");
}
function clearText() {
myText = "";
ct.enabled = false;
rw.enabled = true;
}
function rwText() {
myText = "Rewrite: \nRight-click to see the customized menu";
ct.enabled = true;
rw.enabled = false;
}
function moveText() {
theText._y += 10;
}

Download:

Download the Zip file (right-clickMenu.zip)

  • del.icio.us
  • Digg
  • email
  • Facebook
  • FriendFeed
  • Google Bookmarks
  • Hexosearch
  • LinkedIn
  • Mixx
  • Print
  • PDF
  • StumbleUpon
  • Technorati
  • Twitter
  • RSS
This entry was posted in tutorial and tagged , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

4 Comments

  1. fossx
    Posted 13 March 2008 at 11:25 pm | Permalink

    Simple and straightforward. Thanks.

  2. Posted 10 April 2008 at 12:16 pm | Permalink

    Can you tell me how to implement this in my index.htm?
    I have a swf file and I want to hide the right-click menu…

  3. Posted 10 April 2008 at 12:27 pm | Permalink

    Hello,
    can you tell me how to implement this?

    I have a script:

    function AC_AddExtension(src, ext)
    {
    if (src.indexOf(‘?’) != -1)
    return src.replace(/\?/, ext+’?');
    else
    return src + ext;
    }

    function AC_Generateobj(objAttrs, params, embedAttrs)
    {
    var str = ”;
    for (var i in params)
    str += ‘ ‘;
    str += ”;

    document.write(str);
    }

    function AC_FL_RunContent(){
    var ret =
    AC_GetArgs
    ( arguments, “.swf”, “movie”, “clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″
    , “application/x-shockwave-flash”
    );
    AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
    }

    function AC_SW_RunContent(){
    var ret =
    AC_GetArgs
    ( arguments, “.dcr”, “src”, “clsid:166B1BCA-3F9C-11CF-8075-444553540000″
    , null
    );
    AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
    }

    function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
    var ret = new Object();
    ret.embedAttrs = new Object();
    ret.params = new Object();
    ret.objAttrs = new Object();
    for (var i=0; i < args.length; i=i+2){
    var currArg = args[i].toLowerCase();

    switch (currArg){
    case “classid”:
    break;
    case “pluginspage”:
    ret.embedAttrs[args[i]] = args[i+1];
    break;
    case “src”:
    case “movie”:
    args[i+1] = AC_AddExtension(args[i+1], ext);
    ret.embedAttrs["src"] = args[i+1];
    ret.params[srcParamName] = args[i+1];
    break;
    case “onafterupdate”:
    case “onbeforeupdate”:
    case “onblur”:
    case “oncellchange”:
    case “onclick”:
    case “ondblClick”:
    case “ondrag”:
    case “ondragend”:
    case “ondragenter”:
    case “ondragleave”:
    case “ondragover”:
    case “ondrop”:
    case “onfinish”:
    case “onfocus”:
    case “onhelp”:
    case “onmousedown”:
    case “onmouseup”:
    case “onmouseover”:
    case “onmousemove”:
    case “onmouseout”:
    case “onkeypress”:
    case “onkeydown”:
    case “onkeyup”:
    case “onload”:
    case “onlosecapture”:
    case “onpropertychange”:
    case “onreadystatechange”:
    case “onrowsdelete”:
    case “onrowenter”:
    case “onrowexit”:
    case “onrowsinserted”:
    case “onstart”:
    case “onscroll”:
    case “onbeforeeditfocus”:
    case “onactivate”:
    case “onbeforedeactivate”:
    case “ondeactivate”:
    case “type”:
    case “codebase”:
    ret.objAttrs[args[i]] = args[i+1];
    break;
    case “width”:
    case “height”:
    case “align”:
    case “vspace”:
    case “hspace”:
    case “class”:
    case “title”:
    case “accesskey”:
    case “name”:
    case “id”:
    case “tabindex”:
    ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
    break;
    default:
    ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
    }
    }
    ret.objAttrs["classid"] = classid;
    if (mimeType) ret.embedAttrs["type"] = mimeType;
    return ret;
    }

    Can I implement it in here somewhere?

  4. steve
    Posted 17 August 2008 at 1:31 am | Permalink

    Can you customoize a right click to have customized menus on different areas of a screen instead of having those options only available globaly?

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>