[tutorial] ContextMenu - Klasse (rechtsklick-menü)

[shorty]

Einen wunderschönen guten morgen / nacht @ All ...

Da ich mich gerade mit dem ContextMenue (rechtsklick auf den Player) beschäftigt habe, möchte ich euch meine Erkenntnisse dieser Nacht, wenn auch recht dürftig, nicht vorenthalten.

Seit Player Version 7 ist es nun möglich das ContextMenue voll in die Flash Anwendung zu integrieren. Die daraus resultierenden Möglichkeiten sollten klar auf der Hand liegen, man kann zum Beispiel diverse Einstellungen wie:

- optionale sprachauswahl
- hintergrundfarbe
- background soundauswahl
- copyright
- seiteninfos

u.s.w. in ein Menue verfrachten, für das es meiner Meinung nach wie geschaffen ist.

Die ContextMenue-Klasse bietet uns desweitern die Möglichkeit MovieClips, Buttons & Textfelder direkt mit ihr zu verknüpfen. Im Klartext bedeutet das soviel wie: "... klick mit rechts auf den MovieClip, und wähle dann, im extra für den MC's angelegten ContextMenu, was passieren soll"
Da die Anwendungsmöglichkeiten fast unbegrenzt sind, komme ich nun zur "sache", und überlasse eben jene einfach eurem Sinn & Verstand von Usability o.ä. Los gehts...

Um es allen so einfach wie möglich zu machen, habe ich die ContextMenu Scripte in eine .as datei ausgelagert. Das Einbinden in die Anwendung ist jedem selber überlassen. Die folgenden Beispiele sind include'd & in 3 Bereiche aufgeteilt.

Teil 1 - Standard ContextMenu eintraege entfernen / ausblenden
Teil 2 - Ein eigenes ContextMenu erstellen (standard)
Teil 3 - ContextMenu eintraege an MovieClips, Buttons & Textfelder binden
*das das noch lange nicht alles zur ContextMenu-Klasse sein wird, poste ich alle weiteren geistigen Ergüsse in diesen Thread

Damit Ihr nicht wie "Petra mit'm Butterbrot" neben "Max in der Sonne" dasteht, wenn es um mehr informationen zu den verwendeten Begriffen geht, liste ich euch diese kurz auf. Besonders fette Beute macht man hier:
FlashForum "Suchen & Finden" hier MacroMedia ActionScript Dictionary oder in der Flash internen Hilfe-Datei. Voraussetzung ist allerdings ein MindesLevel an AS b.z.w. AS 2.0 Verständniss (muss wirklich nicht viel sein, ik habs ja auch geschafft )

Suchbegriffe:

• ContextMenu
• ContextMenu-Klasse
• ContextMenuItem-Klasse
• MovieClip.menu
• TextField.menu
• Button.menu

Die entsprechenden ".as" Downloads findet ihr am Ende dieses Beitrag's. Falls nicht, einfach die Scripte mit "Copy & Paste" in eine Textdatei übertragen, Speichern, Dateiendung von .txt in .as umwandel und folgende Zeile in das erste Schlüsselbild eures filmes tippeln:

PHP-Code:

#include "ContextMenuTeilxxx.as" 


Teil 1 - Standard ContextMenu eintraege entfernen / ausblenden

Um die Standardeinträge, aus dem ContextMenue, zu erntfernen b.z.w. auszublenden gibt es 2 Möglichkeiten. Beachtet aber bitte, das die Einträge "Info & Einstellungen " nicht entfernt werden können.

Möglichkeit eins:
1. Ihr erstellt euch ein neues ContextMenu Object mit folgender Zeile

PHP-Code:

// ein neues ContextMenu Object initialisieren
var cm:Object = new ContextMenu(); 


2. Da euer soeben erstelltes ContextMenue die gleichen Einträge wie das Standard Menü aufweist, entfernt ihr diese mit

PHP-Code:

// original ContextMenu elemente entfernen
cm.hideBuiltInItems(); 


3. und fast Fertig, fehlt nur noch die Zuweisung des Objects b.z.w. das Überschreiben des bisheringen ContextMenues mit

PHP-Code:

_root.menu = cm; 


Finales Script zum includen

PHP-Code:

var cm:Object = new ContextMenu();
cm.hideBuiltInItems();
_root.menu = cm; 


Möglichkeit zwei:
Ihr mögt keine Dreizeiler? Ok, dann halt kurz und knap

PHP-Code:

Stage.showMenu = false; 


Teil 2 - Ein eigenes ContextMenu erstellen (standard)

Einschränkungen:
- Das ContextMenu kann maximal 15 einträge (Menüelemente) aufnehmen
- Eine Verschachtelung der Elemente ist nicht möglich

Um ein neues ContextMenue zu erstellen und zu "füllen", gehen wir wie folgt vor.
1. Ihr erstellt euch ein neues ContextMenu Object mit folgender Zeile

PHP-Code:

// ein neues ContextMenu Object initialisieren
var cm:Object = new ContextMenu(); 


2. Da euer soeben erstelltes ContextMenue die gleichen Einträge wie das Standard Menü aufweist, entfernt ihr diese mit

PHP-Code:

// original ContextMenu elemente entfernen
cm.hideBuiltInItems(); 


3. Um neue Einträge im ContextMenue zu generieren, erstellen wir einige Objecte, diese werden später per "push();" unserem neuen CM zu gute geführt.

PHP-Code:

// neue elemente erstellen ---- (titel, rückruffunktion, trennlinie, aktiviert, sichtbar)
var cm_item001:Object = new ContextMenuItem("Item - 001", fncItem001, true, true, true);
var cm_item002:Object = new ContextMenuItem("Item - 002", fncItem002, true, true, true);
var cm_item003:Object = new ContextMenuItem("Item - 003", fncItem003, false, true, true);
var cm_item004:Object = new ContextMenuItem("Item - 004", fncItem004, true, false, true);
var cm_item005:Object = new ContextMenuItem("Item - 005", fncItem005, true, true, false); 


Die Parameter in den Klammern des "ContextMenuItem" Constructors haben folgende Bedeutung:

Parameter 1: der Name oder Titel des Menüelements
Parameter 2: bestimmt die Rückruffunktion bei Klick auf das Menüelement
Parameter 3: aktiviert / deaktiviert eine Trennlinie zwischen den Menüpunkten (true / false)
Parameter 4: aktiviert / deaktiviert das Menüelement (true / false)
Parameter 5: sichtbarkeit / unsichtbarkeit des Menüelements (true / false)

Um die Parameter / Eigenschaften festzulegen, braucht ihr nicht unbedingt in den Constructor zu schreiben, es geht auch umständlicher, mit:

PHP-Code:

// Name / Titel
ContextMenuItem.caption
// Aktivierung des Menüelements
ContextMenuItem.enabled
// Trennlinie
ContextMenuItem.separatorBefore
// Sichtbarkeit
ContextMenuItem.visible 


Für die Ereignissprozedur wenn das entsprechende Menüelement ausgewählt wurde gilt

PHP-Code:

cm_item001.onSelect = function (obj, cm_item) {
  trace(cm_item+" wurde gedrückt / ausgewählt")
} 


4. Wie oben schon erwähnt, müssen die Menüelemente dem ContextMenu zugeführt werden, das geschieht mit

PHP-Code:

cm.customItems.push(cm_item001, cm_item002, cm_item003, cm_item004, cm_item005); 


5. die Rückruffunktionen (handler), wenn ein Element angewählt wurde

PHP-Code:

// deine item handler 
function fncItem001(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
}
function fncItem002(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
}
function fncItem003(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
}
function fncItem004(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
}
function fncItem005(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
} 


6. und wieder fast Fertig, fehlt nur noch die Zuweisung des Objects b.z.w. das Überschreiben des bisheringen ContextMenues mit

PHP-Code:

_root.menu = cm; 


Finales Script zum includen

PHP-Code:

var cm:Object = new ContextMenu();
cm.hideBuiltInItems();
var cm_item001:Object = new ContextMenuItem("Item - 001", fncItem001, true, true, true);
var cm_item002:Object = new ContextMenuItem("Item - 002", fncItem002, true, true, true);
var cm_item003:Object = new ContextMenuItem("Item - 003", fncItem003, false, true, true);
var cm_item004:Object = new ContextMenuItem("Item - 004", fncItem004, true, false, true);
var cm_item005:Object = new ContextMenuItem("Item - 005", fncItem005, true, true, false);
cm.customItems.push(cm_item001, cm_item002, cm_item003, cm_item004, cm_item005);
function fncItem001(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
}
function fncItem002(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
}
function fncItem003(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
}
function fncItem004(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
}
function fncItem005(obj, cm_item) {
    trace(cm_item.caption+" was soll passieren ...?");
}
_root.menu = cm; 


Bis hier hin alles klar ? Eigentlich schon, oder!? Gut, weiter gehts.

Teil 3 - ContextMenu eintraege an MovieClips, Buttons & Textfelder binden

Im Prinzip ist dieser Teil nur die logische erweiterung von Teil 2. Hier erfahrt ihr, wie man ein ContextMenu abhängib vom Object, auf das es referenziert ist anzeigt.Und so gehts.

Schreibt einfach in der letzten Zeile (Zuweisung des Objects) stat _root, den zielpfad zu eurem MovieClip, Button oder Textfeld. Wenn Ihr nun mit der Maus über das zugewiesene Object "fahrt" und rechts klick, erscheint euer eigens für dieses Object erstellte ContextMenu....
das ganze könnte zum Beispiel so aussehen:

PHP-Code:

// Main ContextMenu objeckt erstellen
var cm_main:Object = new ContextMenu();
cm_main.hideBuiltInItems();
_root.menu = cm_main;

// MovieClip spezifisches ContextMenu objeckt erstellen
var cm_movie:Object = new ContextMenu();
cm_movie.hideBuiltInItems();
var cm_movie_item001:Object = new ContextMenuItem("Farbe des MC's ändern", fncItem001);
cm_movie.customItems.push(cm_movie_item001);
function fncItem001(obj, cm_item) {
    trace(cm_item.caption+" # farbe wird geaendert");
    var farbe:Object = new Color(obj);
    var r:Number = Math.random()*255;
    var g:Number = Math.random()*255;
    var b:Number = Math.random()*255;
    farbe.setRGB(r << 16 | g << 8 | b << 32);
}
mc_tester.menu = cm_movie; 


* In diesem Beispiel habe ich, um es besser zu Veranschaulichen, einen MovieClip mit dem Instanznamen "mc_tester" und einer Füllfarbe xxx in die _root des Filmes gepackt, und lasse seine Farbe per Rechtsklick ins ContextMenu ändern (random color).

"... mist, nur 10.000 Zeichen erlaubt, unten gehts weiter..."

[shorty]

"...die restlichen zehntausend..."

So, das solls fürs Erste gewesen sein, ich hoffe es kann wenigstens einer was damit anfangen? Fragen Anregungen Kritik Lob etc. sind ausdrücklich erwünscht!

BTW: Darf ich eigentlich einfach so das Wort [TUTORIAL] vor den Thread schreiben, oder macht das einer der Mod's? Wenn nicht, bzw. wenn ihr meint das ist kein Tut, oder es wurde im falsche Bereich gepostet, dann einfach löschen oder verschieben.

Dachte mir nur es wird mal wieder Zeit, dem FlashForum aka. seinen Usern etwas von dem zurück zu geben, was ich so oft in Anspruch genommen habe.

Ich geh jetzt ins Bett, gute Nacht
peace & fette beute

shorty
*fortsetzung / erweiterung ContextMenu folgt in kürze...

[Nicmare]

wieso erntet der thread nich die aufmerksamkein/respekt, die ihm zusteht? . komischerweise habe ich ihn ja auch selbstständig übersehen ;-).
sehr feines TUT (jawohl, es ist ein tut ^^). schönes ding! und schön idiotensicher erklärt . gut geeignet für perfektionisten hehe.

[shorty]

schön, dass es wenigstens einem weiter geholfen hat strahl, freu, grins ...

[Seedianer]

jop supaa arbeit jetzt muss nur noch an der akzeptanz von dem rechtsklick gefeilt werden.

BTW die datei is leider korrupt.

[shorty]

ui, noch einer is zwar nicht das gleiche, aber sollte ausreichen. da haste. viel spass!

[Seedianer]

mercy werd ich haben

[feinschliff]

ein spätes vielen dank! sehr grossartiges tutorial!!!!!

[Vampire's Party]

gedruckt und abgeheftet -> größtmögliche Ehrung für den Author

[timh]

*bookmark*, *download*
sehr nice, brauch ich sicher mal

EDIT:
achja, fünf sterne *****

[shorty]

ach, ich seid so lieb ^^°.°^^

Nachschlag

PHP-Code:

import com.shortybmc.util.contextmenu.*;
class Ctm {

    /***
     * constructor : Ctm
     *
     * use start
     
     import com.shortybmc.util.contextmenu.*;
     var myIndividualContextmenue:Ctm = new Ctm();
     
     * use end
     */
    function Ctm() {
        init();
    }
    
    /***
     * public method : init
     * parameter's   : none
     *
     * description   : define your individual labels
     * and actions for the contextmenu items
     */
    private function init():Void {
        var cm:Object = new ContextMenu();
        // [f8] var cm:ContextMenu = new ContextMenu();
        cm.hideBuiltInItems();
        //  # your labels ...
        var s0:String = 'Hello World!';
        var s1:String = String('© 2004 - ' + new Date().getFullYear() + ' | www.shorty-bmc.com');
        var s2:String = '';
        var s3:String = '';
        var s4:String = '';
        var s5:String = '';
        var s6:String = '';
        //  #
        var cI000:Object = new ContextMenuItem (s0, fI000, false, true, true);
        var cI001:Object = new ContextMenuItem (s1, fI001, true,  true, true);
        var cI002:Object = new ContextMenuItem (s2, fI002, false, true, true);
        var cI003:Object = new ContextMenuItem (s3, fI003, false, true, true);
        var cI004:Object = new ContextMenuItem (s4, fI004, false, true, true);
        var cI005:Object = new ContextMenuItem (s5, fI005, false, true, true);
        var cI006:Object = new ContextMenuItem (s6, fI006, false, true, true);
        //  #
        cm.customItems.push(cI000, cI001, cI002, cI003, cI004, cI005, cI006);
        //  # your on click actions ...
        function fI000() {
            getURL('mailto:xxx@xxx.xxx');
        }
        function fI001() {
            getURL('http://xxx.xxx', '_blank');
        }
        function fI002() {
            //  do something ...
        }
        function fI003() {
            //  do something ...
        }
        function fI004() {
            //  do something ...
        }
        function fI005() {
            //  do something ...
        }
        function fI006() {
            //  do something ...
        }
        _root.menu = cm;
    }
} 


[jaY-a]

Klar und umfangreich! = Paradebeispiel für TUT`s!

[jaY-a]

argh.. blöde frage (vllt hab ich es auch übersehen):

Ich hab ein eigenes Kontextmenu erstellt und einem MovieClip zugeteilt. Allerdings sind die Buttons aus dem Flash immer eine Ebene höher -> wenn man die Buttons rechte maustaste klickt, kommt das normale menu!

Code:
var lettersCM = new ContextMenu();
lettersCM.hideBuiltInItems();
var dance = new ContextMenuItem("::: © www.pups.com :::",noDance,true,true,true);
var noDance = new ContextMenuItem("Contact",stopDance,true,true,true );
var reload = new ContextMenuItem("Reload",nochmal,false,true,true);
lettersCM.customItems.push(dance, noDance, reload);
submenu.menu = lettersCM;

function noDance(){
}
function stopDance(){getURL("xx", "_blank");
}
function nochmal(){getURL("zz");
}

[shorty]

Hi, jaY-a

bei funktioniert dein code 1A - alles richtig gut währe noch, erst die functionen zu dklarieren, und danach das menu zu zuweisen.

PHP-Code:

var lettersCM = new ContextMenu();
lettersCM.hideBuiltInItems();
var dance = new ContextMenuItem("::: © www.pups.com :::", noDance, true, true, true);
var noDance = new ContextMenuItem("Contact", stopDance, true, true, true);
var reload = new ContextMenuItem("Reload", nochmal, false, true, true);
lettersCM.customItems.push(dance, noDance, reload);

function noDance() {
}
function stopDance() {
    getURL("xx", "_blank");
}
function nochmal() {
    getURL("zz");
}

submenu.menu = lettersCM; 


gruß,
shorty

[jaY-a]

vielen Dank.

Jetzt noch meine letzte Frage:

Wie kann ich eine Grafik über einen Button legen, so dass dieser nicht mehr aktiv ist?

Denn die Buttons in Flash sind obwohl sie unter einer Grafik liegen immer aktiv (also anklickbar)...

Button über Button?

Das wäre nämlich auch hier entscheidend. Das SubMenu funktioniert nur auf einen zugewiesenen MovieClip, der so groß wie die gesamte Arbeitsfläche ist, aber bei rechtsklick auf Buttons unter der Grafik, funktioniert es nicht mehr.