@codenerd på twitter Mit seneste tweet:

Egne context menuer (højrekliks menuer) i Flash

Artiklen her er originalt skrevet til Eksperten.dk – men da jeg ikke længere er aktiv på det site frigiver jeg den nu her på min blog

Det kan i nogle tilfælde være ønskværdigt at have sin egen højreklik menu, i stedet for den indbygget Zoom in, Show all, quality osv som man bliver præsenteret for ved højreklik på en flash animation. Dette er fra Flash MX 2004 blevet muligt.

Du kan lave dine egne menuer for hele siden, eller du kan sætte dem på elementer af flash siden (fx et movieclip eller et tekstfelt).

Eksempel 1 – fjern de indbyggede elementer
I vores første eksempel laver vi vores egen menu på siden uden nogen funktionalitet, det eneste mål er at fjerne de indbyggede elementer (på nær settings og about som ikke kan fjernes).

Det første vi gør, er at oprette et instans af contextMenu klassen, og gemmer dette i en variabel, dette gøres således:

var minMenu:ContextMenu = new ContextMenu();

Nu kan vi arbejde frit med minMenu som en ny contextmenu. Således fjerner vi de indbyggede elementer:

minMenu.hideBuiltInItems();

Vi kalder simpelthen metoden hideBuiltInItems på vores gemte contextmenu instans.

Herefter mangler vi bare at tilføje menuen det gør vi ved at skrive:

_root.menu=minMenu;

Herefter vil standardmenuen kun indeholde Settings og About.

Eksempel 2 – Den mere brugbare
Eksempel 1 er jo ikke det mest brugbare, så derfor vil vi nu tilføje punkterne Afspil og pause til samme menu.

Før _root.menu=minMenu skrives følgende:

var startPunkt=new ContextMenuItem("Afspil",afspil,false,true,true);

Her opretter vi en instans af contextMenuItem klassen og gemmer den i variablen startPunkt. Hvis vi ser lidt nærmere på denne kode, så består den af 5 elementer (opstillet i parentesen).
Første værdi : Det label som skal vises i menuen
Anden værdi : Den funktion der skal kaldes når der klikkes på
menuen
Tredje værdi : Skal sættes til true eller false, denne bestemmer
om der kommer en separator linie over punktet.

Fjerde og femte værdi er ikke krævet, de bestemmer henholdsvis om punktet skal være aktivt (klikbart) samt om punktet skal vises eller ej, igen er værdien enten true eller false.

Ligeledes tilføjer vi et stop punkt:

var stopPunkt=new ContextMenuItem("Pause",stopAfspil,false,true,true);

Nu har vi oprettet punkterne som variabler, for at tilføje dem til menuen skal vi have fat på customItems metoden på contextMenu variablen således:

minMenu.customItems.push(startPunkt,stopPunkt);

Nu skulle vores fulde kode gerne se sådan her ud:

PHP
1
2
3
4
5
6
var minMenu:ContextMenu = new ContextMenu();
var startPunkt=new ContextMenuItem("Afspil",afspil,false,true,true);
var stopPunkt=new ContextMenuItem("Pause",stopAfspil,false,true,true);
minMenu.hideBuiltInItems();
minMenu.customItems.push(startPunkt,stopPunkt);
_root.menu=minMenu;

For at dette skal virke er det nødvendigt at funktionerne afspil og stopAfspil eksisterer i dokumentet. I dette tilfælde laver vi dem ganske enkelt så de afspiller og stopper filmen:

PHP
1
2
3
4
5
6
function afspil() {
play();
}
function stopAfspil() {
    stop();
}

Nu skulle menuen gerne virke og bestå af Afspil, Pause, Settings og About.

Eksempel 3 – udbygning af funktionerne
Nu spørger du måske hvorfor vi skal vise både afspil og pause i menuen, den ene burde vel erstatte den anden. Ja det kan der jo være noget om. Her giver flash os muligheden for enten at slå et punkt fra så det ikke er klikbart eller fjerne det helt (læs gør det usynligt), dette gøres ved at bruge metoden enabled eller visible på den variabel som indeholder punktet. Derved får vi følgende nye funktioner:

PHP
1
2
3
4
5
6
7
8
9
10
function afspil() {
    play();
    startPunkt.visible=false;
    stopPunkt.visible=true;    
}
function stopAfspil() {
    stop();
    startPunkt.visible=true;
    stopPunkt.visible=false;
}

Og så husker vi også lige at sætte den femte parameter i stopPunktet til false således det ikke vises pr default.

Eksempel 4 – det virker også på movieclips
Hvis vi ikke ønsker at sætte vores menu på _root kan som tidligere nævnt også sætte den på et movieclip. Dette gøres simpelthen ved at bruge instans_navn_på_mc.menu=minMenu; i stedet for _root.menu. Derudover skal funktionerne selvfølgelig ændres så de passer, derved får vi følgende færdige kode (hvor instans navnet på movieclippet er mit_mc:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var minMenu:ContextMenu = new ContextMenu();
minMenu.hideBuiltInItems();
var startPunkt=new ContextMenuItem("Afspil",afspil,false,true,false);
var stopPunkt=new ContextMenuItem("Pause",stopAfspil,true,true,true);
minMenu.customItems.push(startPunkt,stopPunkt);
mit_mc.menu=minMenu;
function afspil() {
    mit_mc.play();
    startPunkt.visible=false;
    stopPunkt.visible=true;
}
function stopAfspil() {
    mit_mc.stop();
    startPunkt.visible=true;
    stopPunkt.visible=false;
}

The end
Og så ikke alligevel her er et par links:

Eksempler i denne artikel – Her ligger desuden et lidt mere avanceret eksempel som kombinerer alle de brugte koder.

Macromedia Live docs om custom context menuer

Skriv en kommentar

Krævede felter er markeret med *.

*