OOP: Windows XP Style Menu-Bar

[borisp]

Sodele, da ich mich auch des öfteren hier im Forum "inspiriere", hier mal ei richtig feines Schmankerl als Tribut an das Flashforum.

Die Windows XP Menus komplett in Actionscript zusammengebastelt und leicht erstellbar als Objekt getarnt

Guggst Du hier

Holst Du da


Ok, noch nicht ganz fertig, aber erst mal ein Waypoint. (Submenus müssen halt noch rein.)

Ein kleiner Bug: Ich musste für die menupunkte erst mal hittest() nehmen, da ein verschachteltes mc.onRelease irgendwie nicht geht - wenn es jemand zufällig rausbekommt - bitte ich doch alle dran teilhaben zu können.

Hier erst mal der Code für die Basis:

Object.prototype.Toolbar = function() {
    
    T_CONTAINER     = _root.createEmptyMovieClip("MXToolbarContainer",1);
    T_BACKGROUND    = T_CONTAINER.createEmptyMovieClip("MXToolbarBackground",1);
    
    with(T_BACKGROUND) {
        clear();
            moveTo(0,0);
            beginFill(0xDEDED6,100);
            
                lineStyle(1,0x888888,100);
                lineTo(Stage.width+4, 0);
                lineTo(Stage.width+4, 20);
                lineTo(0, 20);
                lineTo(0,0);
            
            endFill;
    }
 
    T_CONTAINER.T_MENUITEMS = new Array();
 
    this.buttons = 0;   
}
Toolbar.prototype.addMenuFolder = function(Caption) {
 
    T_CONTAINER.T_MENUITEMS[Caption] = new Array();
 
    T_TEXTFORMAT = new TextFormat();
    T_TEXTFORMAT.font = "Tahoma";
    T_TEXTFORMAT.size = 11;
    
    T_TEXT_DIMENSION = T_TEXTFORMAT.getTextExtent(Caption);
    T_TEXT_WIDTH = T_TEXT_DIMENSION.width+10;
    
    T_BUTTON = T_CONTAINER.createEmptyMovieClip("MXToolbarMenuButton"+this.buttons,this.buttons+2);
    
    T_BUTTON.Caption = Caption;
    
    T_BUTTON.onRelease = function() {
 
        if(T_CONTAINER.overme[0] != undefined) {
            _root[T_CONTAINER.overme[2][2]](T_CONTAINER.overme[2][3]);
        }
 
        this.T_MENUCONTENT = T_CONTAINER.T_MENUITEMS[this.Caption];
 
        if(this.T_MENUCONTENT.length != 0) {
 
            this.clear();
            if(len == undefined) {
            len = this._width;
            }
            hei = (this.T_MENUCONTENT.length)*20;
 
 
            /* Jetzt die Schatten */
            this.moveTo(len+6,6);
            this.beginFill(0x000000,30);
                this.lineStyle(0,0xDBD7D1,0);
                this.lineTo(len+9,6);
                this.lineTo(len+9,18);
                this.lineTo(len+6,18);
                this.lineTo(len+6,6);
            this.endFill();
 
            this.moveTo(len+151,25);
            this.beginFill(0x000000,30);
                this.lineStyle(0,0x000000,0);
                this.lineTo(len+154,25);
                this.lineTo(len+154,hei+20);
                this.lineTo(len+151,hei+20);
                this.lineTo(len+151,25);
            this.endFill();
    
            this.moveTo(7,hei+19);
            this.beginFill(0x000000,30);
                this.lineStyle(0,0x000000,0);
                this.lineTo(len+154,hei+19);
                this.lineTo(len+154,hei+22);
                this.lineTo(7,hei+22);
                this.lineTo(7,hei+20);
            this.endFill();
 
            /* Rahmen */
            this.moveTo(2,2);
            this.beginFill(0xDBD7D1,100);
                this.lineStyle(1,0x888888,100);
                this.lineTo(len+5,2);
                this.lineStyle(1,0x888888,100);
                this.lineTo(len+5,18);
                this.lineStyle(1,0xFFFFFF,100);
                this.lineTo(2,18);
                this.lineStyle(1,0x888888,100);
                this.lineTo(2,2);
            this.endFill();
 
            this.moveTo(3,18);
            this.beginFill(0xF8F8F7,100);
                this.lineStyle(1,0xFFFFFF,100);
                this.lineTo(len+5,18);
                this.lineStyle(1,0x888888,100);
                this.lineTo(len+150,18);        
                this.lineTo(len+150,hei+18);        
                this.lineTo(2,hei+18);    
                this.lineTo(2,18);    
            this.endFill();
            
            this.moveTo(3,19);
            this.beginFill(0xDBD7D1,100);
                this.lineStyle(0,0x888888,0);
                this.lineTo(23,19);
                this.lineTo(23,hei+18);
                this.lineTo(3,hei+18);
            this.endFill();
            
            this.lineStyle(0,0x888888,0);
 
 
            for(this.T_ITEMCOUNT = 0; this.T_ITEMCOUNT <= this.T_MENUCONTENT.length-1; this.T_ITEMCOUNT++) {
 
                this.T_TEXTFORMAT2 = new TextFormat();
                this.T_TEXTFORMAT2.font = "Tahoma";
                this.T_TEXTFORMAT2.size = 11;
    
                this.T_TEXT_DIMENSION2 = this.T_TEXTFORMAT2.getTextExtent(this.T_MENUCONTENT[this.T_ITEMCOUNT][0]);
                this.T_TEXT_WIDTH2 = this.T_TEXT_DIMENSION2.width+10;
 
                this.T_TMPBUTTONNAME = "Menuitem"+this.T_ITEMCOUNT;
                this.T_TMPBUTTONTEXTID = "Text"+this.T_TMPBUTTONNAME;
                this.T_TMPBUTTON = this.createEmptyMovieClip(this.T_TMPBUTTONNAME,1000+this.T_ITEMCOUNT);
                
                this.T_TMPBUTTON._x = 2;
                this.T_TMPBUTTON._y = 20+(this.T_ITEMCOUNT*19);
 
                this.T_TMPBUTTON.createTextField(this.T_TMPBUTTONTEXTID,100+this.T_ITEMCOUNT,25,2,this.T_TEXT_WIDTH2,20);
                this.T_TMPBUTTON[this.T_TMPBUTTONTEXTID].text = this.T_MENUCONTENT[this.T_ITEMCOUNT][0];
                this.T_TMPBUTTON[this.T_TMPBUTTONTEXTID].border = false;
                this.T_TMPBUTTON[this.T_TMPBUTTONTEXTID].selectable = false;
                this.T_TMPBUTTON[this.T_TMPBUTTONTEXTID].setTextFormat(T_TEXTFORMAT);
 
                this.T_TMPBUTTON.doAction = this.T_MENUCONTENT[this.T_ITEMCOUNT];
 
                with(this.T_TMPBUTTON) {
                    clear();
                    beginFill(0xB5BDD6,0);
                        lineStyle(0,0x08216B,0);
                        moveTo(2,2);
                        lineTo(145+len,2);
                        lineTo(145+len,19);
                        lineTo(2,19);
                    endFill();
                }
 
                this.T_TMPBUTTON.onEnterFrame = function() {
                    if(this.hitTest(_xmouse,_ymouse)) {
                            this.clear();
                            this.beginFill(0xB5BDD6,100);
                                this.lineStyle(1,0x08216B,100);
                                this.moveTo(2,2);
                                this.lineTo(145+len,2);
                                this.lineTo(145+len,19);
                                this.lineTo(2,19);
                            this.endFill();
                            T_CONTAINER.overme = this.doAction;
                    } else {
                        this.clear();
                        this.beginFill(0xB5BDD6,0);
                            this.lineStyle(0,0x08216B,0);
                            this.moveTo(2,2);
                            this.lineTo(145+len,2);
                            this.lineTo(145+len,19);
                            this.lineTo(2,19);
                        this.endFill();
                    }
                }
            }
        }
    }
 
    T_BUTTON.onRollOver = function() {
 
        len = this._width;
 
        this.moveTo(1,1);
        this.lineStyle(1,0xFFFFFF,100);
        this.lineTo(len+5,1);
        this.lineStyle(1,0x444444,100);
        this.lineTo(len+5,19);
        this.lineTo(1,19);
        this.lineStyle(1,0xFFFFFF,100);
        this.lineTo(1,1);
    }
    T_BUTTON.onRollOut = T_BUTTON.onReleaseOutside = function() {
        this.T_MENUCONTENT = T_CONTAINER.T_MENUITEMS[this.Caption];
        
        for(this.T_ITEMCOUNT = 0; this.T_ITEMCOUNT <= this.T_MENUCONTENT.length-1; this.T_ITEMCOUNT++) {
            this["Menuitem"+this.T_ITEMCOUNT]["TextMenuitem"+this.T_ITEMCOUNT].removeTextField();
            this["Menuitem"+this.T_ITEMCOUNT].removeMovieClip();
        }
        this.clear();
        T_CONTAINER.overme = undefined;
    }
 
    T_BUTTON_NAME = "Button"+this.buttons;
    
    T_BUTTON._x = T_BUTTON_POS;
    
    T_BUTTON.createTextField(T_BUTTON_NAME, 1, 5, 2, T_TEXT_WIDTH, 20);
    T_BUTTON[T_BUTTON_NAME].text = Caption;
    T_BUTTON[T_BUTTON_NAME].border = false;
    T_BUTTON[T_BUTTON_NAME].selectable = false;
    T_BUTTON[T_BUTTON_NAME].setTextFormat(T_TEXTFORMAT);
 
    T_BUTTON_POS += (T_TEXT_WIDTH+5);
    this.buttons++;
}
 
Toolbar.prototype.addMenuItem = function(Folder,ItemText,ItemAction,Icon) {
 
    T_CONTAINER.T_MENUITEMS[Folder][T_CONTAINER.T_MENUITEMS[Folder].length]=[ItemText,ItemAction,Arguments];
 
} 

Entwas unübersichtlich, wird aber noch überarbeitet ...

Wie erstellt man nun das Menu? zum Beispiel hiermit:

function Click(argc) {
    _root.result = argc;    
}
 
function Goto(argc) {
    getURL(argc,"_blank");           
}
 
TB = new Toolbar();
TB.addMenuFolder("File");
    TB.addMenuItem("File","Open","Click","Du Hast 'Open' geklickt");
    TB.addMenuItem("File","Test","Click","Du Hast 'Test' geklickt");
    TB.addMenuItem("File","Hallo","Click","Du Hast 'Hallo' geklickt");
    TB.addMenuItem("File","WinXP","Click","Du Hast 'WinXP' geklickt");
    TB.addMenuItem("File","FlashMX","Click","Du Hast 'FlashMX' geklickt");
    TB.addMenuItem("File","Gefällts?","Click","Du Hast 'Gefällts?' geklickt");
TB.addMenuFolder("Edit");
    TB.addMenuItem("Edit","Lalelu","Click","Du Hast 'Lalelu' geklickt");
    TB.addMenuItem("Edit","Ein Man im Mond","Click","Du Hast 'Ein Man im Mond' geklickt");
    TB.addMenuItem("Edit","Schaut Dir zu","Click","Du Hast 'Schaut Dir zu' geklickt");
    TB.addMenuItem("Edit","abcefghijkl","Click","Du Hast 'abcefghijkl' geklickt");
TB.addMenuFolder("Ansicht");
    TB.addMenuItem("Ansicht","MX Actionscript","Click","Du Hast 'MX Actionscript' geklickt");
    TB.addMenuItem("Ansicht","Von borisp","Click","Jawohl, der war's !!");
    TB.addMenuItem("Ansicht","Für das Flashforum(.de)","Click","Viel Spass damit !");
TB.addMenuFolder("About");
    TB.addMenuItem("About","Der Autor","Goto","http://www.gamate.com");
    TB.addMenuItem("About","Zeit?","Click","Hat mich ca. 4 Stunden gekostet :)");
    TB.addMenuItem("About","Fertig?","Click","Noch nicht soooo ganz ...");
    TB.addMenuItem("About","Was fehlt denn?","Click","Submenus"); 

Damit setzt sich das Teil nach oben im Flash und ist genauso breit wie die Bühne und bastelt sein Menu zusammen. Recht flott wie ich finde.

TB.addMenuItem(Foldername, Beschriftung, Funktion die aufgerufen werden soll, Argument für die Funktion);



BE INSPIRED

[michael]

du hast aber auch einen output derzeit

klasse

gruss
michael

[hOk]

Hammer borisp,
das ist ja sehr genial!
netten Gruß, Holger

[astaroth]

Tja, was osll ich da noch zu sagen ??

EINFACH GOIL !!!!

[nky]

Spitzensache - Sieht sehr fein aus !
Gruss nky

[k7c4]

gefällt! gekauft!

Fehlt nur noch eine Shortcut und Alt-Taste-Steuerung :gier:

[borisp]

Shortcuts, joa - mal rumexperimentieren. Was mir noch eingefallen ist, das menu sollte sich schließen wenn man drauf geklickt hat...

Wird demnächst noch aktualisiert.

[k7c4]

Vielleicht schaffst Du ja auch ein zweites FlashOS

( FlashOS )

Vielleicht noch den StringWidthCalculator dazufügen

[borisp]

String Width Calculator? Wozu das kann doch MX:

T_TEXTFORMAT = new TextFormat();
    T_TEXTFORMAT.font = "Tahoma";
    T_TEXTFORMAT.size = 11;
    
    T_TEXT_DIMENSION = T_TEXTFORMAT.getTextExtent(TextVariable);
    T_TEXT_WIDTH = T_TEXT_DIMENSION.width; 

(Wird auch in der Bar verwendet - nur die Menus haben noch eine Stadardbreite.

[beachmeat]

Macht er das nicht bereits mit
T_TEXT_DIMENSION = T_TEXTFORMAT.getTextExtent(Caption);
oder was meinsde?


edit:
na wieda zu spät

[k7c4]

Oops, sorry, bin wegen Kunden immer noch zu sehr den Flash5-Beschränkungen verhaftet

[Madokan]

k7c4: Ich glaub davor sind wir alle nicht sicher.

borisp: Ich glaub da wird mal wieder ein Daumen fällig und bin sicher, dass diese Umsetzung eine gute Grundlage für eine GUI darstellt.

Liebe Grüsse
Matze K.

[borisp]

Soldele ein Update

Anschauen
Download

--

Neu:
* Es gibt keine .hitTest() mehr (bessere performance)
* Menu schließt, wenn Menupunkt gedrückt wurde.
* Exaktere zeichnung
* Menu bleibt offen bei onRollOut (wie in windows) und schließt sich bei Rollover von der Menubar

Todo:
* Menu schließen bei klick auf die Bühne
* Tastenkombinationen: Schwer, da CTRL+? oftmals schon im Browser definiert ist.

[rOb]

schön. kleine anregung noch. wenn du bei xp einmal geklickt
hast, und dann über die rubriken fährst, gehen die schon
onRollover auf, nicht erst on click, ist ein bisschen ungewohnt.

schick isses auf jeden fall

[:: RK ::]

hi,

ich als kompletter OOP DAU, weis nicht was der Vorteil bei so einem Menue ist, OOP ein zu setzen,
anstelle ganz normal zu programmieren. sorry da fehlt das Vertändnis
(oder weil ich kein plan von hab )


kann mir bitte einer sagen wo die Vorteile sind ???


PS : geil ist es aber trozdem







CU, :: RK ::