Custom context menu with fullscreen option
March 21st, 2009 in Flash | 3 CommentsLearn how to make changes to the context menu that appears when you right click on a Flash content and add a fullscreen option.
We will add the following functionnalities to our menu:
- A link to our website
- A Go/Exit Fullscreen functionnality
1. Create a new flash file (ActionScript 3.0) and save it as context_menu.fla.
2. Create a layer at the top and name it actions. Paste the following code :
var customContextMenu:ContextMenu = new ContextMenu();
var menuItem1:ContextMenuItem = new ContextMenuItem("www.RiaCodes.com");;
var menuItem2:ContextMenuItem = new ContextMenuItem("Go Fullscreen");
var menuItem3:ContextMenuItem = new ContextMenuItem("Exit Fullscreen");
menuItem3.separatorBefore = true;
menuItem3.enabled = false;
menuItem1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, goToRiaCodes);
menuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, goFullScreen);
menuItem3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,exitFullScreen);
function goToRiaCodes(event : ContextMenuEvent):void{
var url:URLRequest = new URLRequest("http://www.riacodes.com");
navigateToURL(url,"_blank");
}
function goFullScreen(event : ContextMenuEvent):void {
stage.displayState = StageDisplayState.FULL_SCREEN;
menuItem2.enabled = false;
menuItem3.enabled = true;
}
function exitFullScreen(event : ContextMenuEvent):void {
stage.displayState = StageDisplayState.NORMAL;
menuItem2.enabled = true;
menuItem3.enabled = false;
}
customContextMenu.hideBuiltInItems();
customContextMenu.customItems.push(menuItem1,menuItem2,menuItem3);
this.contextMenu = customContextMenu;
3. Let’s explain the code.
First of all we declare a variable customMenu as a ContextMenu and 3 menuItem variables that we initialize with their title that will appear on the menu. At first, we set the Exit Fullscreen menuItem to inactive. Note that we add a separator just before the Go Fullscreen item just for esthetic purpose.
Next we add the event listeners to the MenuItems.
The goFullScreen and exitFullscreen functions manage their respective display mode and the enability of Go/Exit Fullscreen menuItems.
The goToRiaCodes function simply add a link to our website by calling the navigateToURL function.
Finally we add each menuItem to the contextMenu and we also hide all built-in menu items.
Then, we set the contextMenu of the application to the customMenu that we’ve build.
4. In order to make it work, we need to specify that the FullScreen mode is allowed.
To do that go to File->Publish Settings and in the HTML tab put Allow Full Screen.
5. Publish both html and swf files. If you open the html file with an editor you will see that the last manipulation that we did add seome modifications : an allowFullScreen param and a value equal to true.
6. Test your file (Ctrl + Enter for Windows, Cmd + Enter for Mac) to see the context menu in action.
May 18th, 2009
Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com
Waiting for your next tutorial
Jun 3rd, 2009
Excellent code!
Feb 28th, 2010
Awesome code! Thanks for posting this!