Customize the Right-click menu in Flash | ContextMenuItem Tutorial

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

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

Creates a new ContextMenuItem object that can be added to the

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:

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://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)

This entry was posted in tutorial and tagged , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

5 Comments

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

    Simple and straightforward. Thanks.

  2. Posted April 10, 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 April 10, 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 August 17, 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?

  5. Naresh kumar
    Posted July 21, 2010 at 8:42 am | Permalink

    I try this same tutorials in action script 3.0. I got all the menu.
    But I am not able to give a email link to my “email me” item.

    So can you create a this same tutorials in action script 3

    Thanks.

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>

  • Recent Posts

    WordCamp Presentation Slides: From Photoshop PSD to WordPress Theme

    Here are my slides for my WordCamp Atlanta presentation, From PSD to WordPress Theme: Under the skin: PSD to WP on Prezi Tweet

    wordpress_wordcamp_atlanta_2012_feb_2_3

    Speaker at WordCamp Atlanta 2012

    I’m proud to announce that I’ve been asked to speak at WordCamp Atlanta this year! WordCamp will be held this weekend and hosted at SCAD Atlanta! My session is titled: From PSD to WordPress Theme: Under the skin. Obviously, I’ll be focusing on themes. We’ll look at what they are, what they can do, how [...]

    Adobe-like Arrow Headers | CSS-Tricks

    Zero images is something that always gets me excited, I really like these arrow button styles! I like the css used more and the hover/active states too, nice css3 transitions. via Adobe-like Arrow Headers | CSS-Tricks. Tweet

    snow

    Snow via Javascript & Canvas – Tis the Season

    After playing with the settings in my experiments I found a few settings I liked and wanted to develop further. The first was snow! An added bonus I was able to work on a project just for the holidays and used much of this code in it! I looked around the web and saw a [...]

  • Recent Shares

    bio

    An Event Apart Notes: Ethan Marcotte, Responsive Web Design

    Ethan Marcotte has become the father of Responsive Web Design and spent this whole day focused on principles, techniques, gotchas, examples, … all about building and how to build responsive sites. With a sprinkle of mobile first. For Ethan, it all started with this article: http://www.alistapart.com/articles/dao/ Think of architecture, the whole design phase is established [...]

    sammyj

    An Event Apart Notes: Ethan Marcotte, Rolling Up Our Responsive Sleeves

    Henry Adams (Descendant of 2 presidents: great-grandson to John Adams and grandson to John Quincy Adams). He lived between the civil war and world war 1. He witnessed the industrial revolution. Chaos was the law of nature, Order was the dream of man Samuel Johnson – funniest man in the 17th Century… Responsive Design: 1. [...]

    Webcomm_Montreal

    An Event Apart Notes: Jared Spool, The Curious Properties of Intuitive Web Pages

    Senseless waste of asterisks… Avis used an asterisk to denote optional fields. This means that there is a lot of baggage that comes with an asterixk. Somewhere this symbol got meaning, it’s not in the bible! We can control when something goes from unintuitive to intuitive. A design is intuitive (although technically and grammatically speaking [...]

    untitled-158-2

    An Event Apart Notes: Marco Arment, Bridging the App Gap

    The iPhone changed our industry in 2007: first mobile to have a desktop class web browser and it made people start using their mobile phones as computers! All apps other than apple provided ones were web browser apps. Most of the first apps were branded web browsers. No real difference between using mobile site or [...]

  • Recent Comments

    Lori Newman

    Lori Newman

    Just wanted to thank you for your presentation. It was extremely informative and just what I...
    Karl

    Karl

    I have been using for some time this nice Banner, from developer FX. They have a really nice Live...
    Karl

    Karl

    Thank you for this wonderful link… recommend it! Fast, simple, easy… :-)
    Gabriel

    Gabriel

    Hi Valerie, I don’t know if you are still following this post, but I tried seeing if it is...
    avinash

    avinash

    Hi Evan, I am using the same code and trying it on chrome/firefox it is not working on neither...
    Matt

    Matt

    I needed to store url variables from advertising tracking servers – this method works like a...