FIZIX Labs

Custom Context Menus in Flash (AS3)

  • Custom Context Menus in Flash (AS3)

    Custom Context Menus in Flash (AS3)

    Posted by FIZIX Richard on Sat 15th November 2008 2:22pm

    When you right click a Flash movie you will see a standard context menu with options such as quality, zoom and so on. You can actually customize this menu to add new items and hide items. So you could add a copyright statement that links back to your copyright policy or you could hide the standard controls. It's all quite useful really & there are a few things you can do.

    You can hide standard items, define which standard items to show, add custom items such as copyright statements, clickable links that do anything from lead to webpages to interface with your Flash application; telling it to do something.



    The Code


    The code for this is quite simple, so we will show you it in full and then explain what's going on and how to customize it. Those who are a bit more savvy may notice that it could be coded in a more dynamic way; for the purpose of this tutorial we just want to show how it works without complicating matters, so be aware that in implementation the methods could be implemented better.

    Code:

    stop(); // Method to go to site homepage function gotoFizixHome(e:ContextMenuEvent):void { var url:String = "http://www.fizixstudios.com"; var request:URLRequest = new URLRequest(url); navigateToURL(request, '_blank'); } // Method to go to labs function gotoFizixLabs(e:ContextMenuEvent):void { var url:String = "http://www.fizixstudios.com/labs"; var request:URLRequest = new URLRequest(url); navigateToURL(request, '_blank'); } // Create a new context menu object and set which items to show var myMenu:ContextMenu = new ContextMenu(); myMenu.hideBuiltInItems(); // Hides standard items myMenu.builtInItems.print = true; // Set the print button to visible // Set our custom items var copyrightNotice:ContextMenuItem = new ContextMenuItem("©2008 Fizix Interactive Studios"); var fizixHomepage:ContextMenuItem = new ContextMenuItem("Fizix Studios Home"); var fizixLabs:ContextMenuItem = new ContextMenuItem("Fizix Labs"); // Add event listeners for clickable items fizixHomepage.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, gotoFizixHome); fizixLabs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, gotoFizixLabs); // Add a separator fizixHomepage.separatorBefore = true; // Push our custom items into the context menu myMenu.customItems.push(copyrightNotice, fizixHomepage, fizixLabs); // Set the actual context menu to our custom menu object this.contextMenu = myMenu;



    If you're familiar with ActionScript this code should explain itself perfectly well, but for completeness we'll run over it quickly.


    The first two blocks of code are functions that are fired off when the two clickable items in our menu are clicked. These work in exactly the same way as any button. These could do all manner of things, we've kept them simple such as going to a webpage; however in practice you could do all manner of things with these kinds of context menu items; for example you could use context menu items to make your Flash application do something, such as providing moderation controls in a Flash chat application; so the context menu could be used to interface directly with your application.



    The next thing we do is to create a new ContextMenu object in the variable myMenu: var myMenu:ContextMenu = new ContextMenu(); this simply gives us a custom context menu object to work with, which we will later assign to the actual ContextMenu.


    There are a bunch of different things we can then do with the standard items, detailed listings of which can be found on Adobe's AS3 Reference. In our example we are hiding the standard item (which will hide all of the standard items) and then telling Flash to show the print item.


    Next we create ContextMenuItem objects for each of our custom items, followed by event listeners for each of them.


    The following line of code adds a seperator before the fizixHomepage item; so you can effectively group your items.
    fizixHomepage.separatorBefore = true;


    The following line of codes inserts our custom items into the custom ContextMenu object.
    myMenu.customItems.push(copyrightNotice, fizixHomepage, fizixLabs);


    And finally, the last line of code sets the context menu to our custom context menu object.