[TUTORIAL] Rechtermuisknop Menu

Wat mij de laatste tijd vaak opvalt, zelfs bij professionele flash-websites is dat ze het rechtermuisknop-menu van flash laten voor wat het is. Dit geeft je het recht om in en uit te zoomen, de kwaliteit van je movie te bepalen, voor en achteruit in frames te gaan. Ik vind dit persoonlijk erg onprofessioneel en onhandig. Daarbij kan je ook je eigen items toevoegen, voor zowel algemeen, maar ook wanneer je rechtermuisknop klikt op een movieclip. In deze tutorial gaan we een eigen rechtermuisknop menu in elkaar zetten.

Build-in-Items

Voordat je begint met testen zal ik je vast van een hoop geprobeer af helpen: bij het testen van je movie (ctrl+enter) zie je rechtermuisknop menu NIET! Je moet je bestand dus openen in een 'gewone' flashplayer voor je het resultaat kan zien!

De standaard items zoals hierboven al aangegeven zijn gemakkelijk uit te schakelen. Eerst maak je een ContextMenu aan met de ContextMenu klasse, daarna ken je hem toe aan het menu. In onderstaand voorbeeld zie je hoe je ook weer bepaalde items aan kan zetten. In dit geval de print functie:

var my_cm:ContextMenu = new ContextMenu();

my_cm.hideBuiltInItems();

my_cm.builtInItems.print = true;

this.menu = my_cm;

Op deze manier is het dus ook makkelijk bijvoorbeeld alleen de zoom functie uit te schakelen. Het is dus niet de bedoeling alles uit te schakelen, en dan weer alles in te schakelen behalve een bepaald item!

var my_cm:ContextMenu = new ContextMenu();

my_cm.builtInItems.zoom = false;

this.menu = my_cm;

Custom Items

Het is ook mogelijk om eigen items toe te voegen aan het menu, met zelf gemaakte functies. Zo is het bijvoorbeeld mogelijk om een items toe te voegen om Een website te bekijken. Dit is bijvoorbeeld handig in flash signatures. Je menu bestaat uit een array, gevult met ContextMenuItems. Onderstaand voorbeeld laat zien hoe je een link naar www.google.nl toevoegt aan je menu:

var menu:ContextMenu = new ContextMenu();

menu.hideBuiltInItems();

var siteItem:ContextMenuItem = new ContextMenuItem("Visit Google", openSite);

menu.customItems.push(siteItem);

this.menu = menu;

function openSite() {

getURL("http://www.google.nl/", _blank);

}

Deze custom-items zijn ook toe te kennen aan MC's. Je kan hier leuke dingen mee doen, hier een voorbeeldje van hoe je hem kan laten roteren.

var menuMc:ContextMenu = new ContextMenu();

var hoofdMenu:ContextMenu = new ContextMenu();

hoofdMenu.hideBuiltInItems();

var siteItem:ContextMenuItem = new ContextMenuItem("Rotate 90 degrees", rotate);

menuMc.customItems.push(siteItem);

mc1.menu = menuMc;

this.menu = hoofdMenu;

function rotate(target:MovieClip) {

target._rotation += 90;

}

onSelect()

Het onSelect() event geeft ons de mogelijkheid een actie uit te voeren wanneer de rechtermuisknop is ingedrukt, nog voordat het menu zichtbaar word. Als laatste voorbeeld heb ik hier een script om door middel van het indrukken van je rechtermuisknop om op die plek een vierkantje aan te Stage toe te voegen:

this.createEmptyMovieClip("square", this.getNextHighestDepth());
square.lineStyle(1, 0x000000, 100);
square.moveTo(-5, -5);
square.lineTo(5, -5);
square.lineTo(5, 5);
square.lineTo(-5, 5);
square.lineTo(-5, -5);
square._x = 1000;

var n:Number = 0;

var xm:Number = new Number();
var ym:Number = new Number();

var my_cm:ContextMenu = new ContextMenu();
var addsquare:ContextMenuItem = new ContextMenuItem("Add Square", addSquare);
my_cm.customItems.push(addsquare);
my_cm.onSelect = save;
this.menu = my_cm;

function save(obj:Object, menu:ContextMenu) {

xm = _root._xmouse;
ym = _root._ymouse;

}

function addSquare() {

n++;
square.duplicateMovieClip("square"+n, _level0.getNextHighestDepth());
_level0["square"+n]._x = xm;
_level0["square"+n]._y = ym;

}

Wanneer je een site maakt, of iets anders in Flash, raad ik toch echt aan van deze mogelijkheden gebruik te maken. De gebruiker kan anders ongewenste acties laten uitvoeren, waardoor je movie niet meer goed werkt!