Cómo personalizar el menu contextual con Actionscript 3

Este es un Tip de como podemos personalizar el menú contextual del click derecho del mouse con ActionScrip 3.

Comencemos por crear un nuevo documento .fla, lo guardamos como menuContextual.fla, luego el primer paso sera crear un nuevo objeto en el escenario, abrimos la ventana acciones F9, y escribimos el siguiente código:

Código :

//creamos el objeto y lo agregamos al escenario
var square:Sprite = new Sprite();
stage.addChild(square);
square.graphics.lineStyle(1,0);
square.graphics.beginFill(0x0099CC);
square.graphics.drawRect(-25,-25,50,50);
square.graphics.endFill();
square.x = stage.stageWidth/2;
square.y = stage.stageHeight/2;

probamos la pelicula Ctrl+Enter, y nos dará como resultado un nuevo objeto, ya creado el objeto le diremos que al dar click sobre el, nos muestre un nuevo ítem en el menú contextual, para este caso le vamos a decir que nos rote el objeto 30º, abrimos la ventana acciones F9, y adjuntamos el siguiente código:

Código :

//creamos el nuevo item para el menucontextual.
var menuSquare:ContextMenu=new ContextMenu  ;
var itemRotar:ContextMenuItem=new ContextMenuItem("Rotar 30º");
itemRotar.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rotar);
// el método (hideBuiltInItems) oculta sólo los elementos de menú que aparecen en el menú contextual estándar.
menuSquare.hideBuiltInItems();
//Añadimos el nuevo elemento creado (itemRotar) al nuevo menucontextual.
menuSquare.customItems.push(itemRotar);
square.contextMenu=menuSquare;

function rotar(event:ContextMenuEvent):void
{
   square.rotation=square.rotation + 30;
}

probamos Ctrl+Enter, veremos que al dar click sobre el objeto nos muestra un nuevo ítem "Rotar 30º", ya sabemos personalizar el menú contextual del click derecho... Genial!! Ahora si queremos personalizar el menú contextual de tal forma que al dar click derecho sobre el escenario nos muestre un nuevo ítem, en el mismo documento menuContextual.fla, abrimos ventana de acciones y adjuntamos el siguiente código:

Código :

var menuStage:ContextMenu=new ContextMenu  ;
var itemgotoPage:ContextMenuItem=new ContextMenuItem("www.cristalab.com");
itemgotoPage.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,gotoPage);
menuStage.hideBuiltInItems();
menuStage.customItems.push(itemgotoPage);
this.contextMenu=menuStage;

function gotoPage(event:ContextMenuEvent):void
{
   var targetURL:URLRequest=new URLRequest("www.cristalab.com");
   navigateToURL(targetURL);
}

Probamos película Ctrl+Enter y tendremos como resultado que al dar click derecho sobre el objeto nos mostrara en el menu contextual un nuevo ítem "Rotar 30º", si seleccionamos el ítem nos ejecutara la acción programada, de la misma forma hacemos click derecho en el escenario y tendremos que nos muestra el nuevo ítem.

También lo podemos hacer creando una clase, el primer paso sera crear un nuevo documento .as, lo guardarmos en una carpeta como newMenu.as, vamos a crear la clase, escribimos este código:

Código :

package 
{
   import flash.display.Sprite;
   import flash.ui.ContextMenu;
   import flash.ui.ContextMenuItem;
   import flash.events.ContextMenuEvent;
   import flash.net.navigateToURL;
   import flash.net.URLRequest;

   public class newMenu extends Sprite
   {
      public var square:Sprite;
      public var menuSquare:ContextMenu;
      public var menuStage:ContextMenu;
      public var ItemRotar:ContextMenuItem;
      public var ItemgotoPage:ContextMenuItem;

      public function newMenu()
      {
         square=new Sprite  ;
         addChild(square);
         square.graphics.lineStyle(1,0);
         square.graphics.beginFill(0xFFCC00);
         square.graphics.drawEllipse(-50,-25,100,50);
         square.graphics.endFill();
         square.x=stage.stageWidth / 2;
         square.y=stage.stageHeight / 2;

         menuSquare=new ContextMenu  ;
         ItemRotar=new ContextMenuItem("Rotar 45º");
         ItemRotar.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rotar);
         menuSquare.hideBuiltInItems();
         menuSquare.customItems.push(ItemRotar);
         square.contextMenu=menuSquare;

         menuStage=new ContextMenu  ;
         ItemgotoPage=new ContextMenuItem("www.cristalab.com");
         ItemgotoPage.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,gotoPage);
         menuStage.hideBuiltInItems();
         menuStage.customItems.push(ItemgotoPage);
         this.contextMenu=menuStage;
      }

      public function rotar(event:ContextMenuEvent):void
      {
         square.rotation=square.rotation + 45;
      }
      public function gotoPage(event:ContextMenuEvent):void
      {
         var targetURL:URLRequest=new URLRequest("www.cristalab.com");
         navigateToURL(targetURL);
      }
   }
}

Proseguimos con crear un nuevo documento .fla, lo guardamos como newMenu.fla, lo dejaremos en la misma carpeta donde esta la clase creada anteriormente, ahora abrimos la ventana propiedades y en el campo clase de documento , escribimos newMenu, ya solo nos queda probar la pelicula Ctrl+Enter.

Fácil verdad!! de esta manera ya podemos personalizar nuestro menú contextual, espero les sea de mucha utilidad...

 

Tweet