[Stuff] dynamisches Menu

[jeypack]

Hi zusammen,

ich habe mal so ein dynamisches Menu gebastelt. Gab es hier natürlich schon.
Aber ich dachte mir, eins mehr oder weniger kann ja nicht schaden.

Natürlich handelt es sich nur um das Grundgerüst, den Rest muss man noch ergänzen.

Zur Erklärung:
Es gibt zwei Arrays für die Menuinhalte. Ein eindimensionales für die Oberbegriffe und ein zweidimensionales für die Unterpunkte.
Das Einzige was man für den Einstieg braucht sind zwei Movieclips (einer ginge auch - ich hab mal für die Unterpunkte einen anderen verwendet) mit jeweils einem Button mit Instanznamen 'main_btn' und einem Textfeld mit Instanznamen 'textfeld_name'. Wichtig wäre auch noch den Registrierungspunkt bei diesen Movieclips auf die Mitte zu stellen. Zudem müssen diese Movieclips auf Verknüpfung gestellt werden. Rechte Maustaste auf das Symbol in der Bibliothek - Export für Actionscript anklicken. Der Movieclip für die Oberbegriffe sollte 'menu_main' und der für die Unterbegriffe 'menu_sub' heißen. Kann natürlich geändert werden, wenn man das dann auch im AS ändert.
Ich habe einen Container-Clip erstellt in dem das Menu errichtet wird, ich denke das macht die Sache flexibler.
Außerdem habe ich versucht alle Variablen als Eigenschaften des Movieclipobjekts zu definieren - wegen der Übersichtlichkeit.

PHP-Code:

stop();
_root.createEmptyMovieClip("menu", 5);
menu._x = 0;
menu._y = 0;
menu.over = false;
menu.mp = 0;
menu.scale_max = 125;
// arrays einrichten
menu.ob = ["home", "aktuell", "service"];
menu.ub = [["home1", "home2"], ["aktuell1", "aktuell2"], ["service1", "service2", "service3", "service4"]];
// menu bauen
for (var i = 0; i<=menu.ob.length-1; i++) {
    menu["ob"+i] = menu.attachMovie("menu_main", "oberbegriff"+i, i+10);
    menu["ob"+i]._x = menu["ob"+i].x=100+(i*120);
    menu["ob"+i]._y = menu["ob"+i].y=50;
    menu["ob"+i].weite = menu["ob"+i]._width;
    menu["ob"+i].over = false;
    menu["ob"+i].textfeld_name.text = menu.ob[i];
    // individuellen instanznamen zuweisen
    menu["ob"+i].main_btn._name = "main_btn"+i;
    // button functionen
    // rollOver
    menu["ob"+i]["main_btn"+i].onRollOver = function() {
        for (var d = 0; d<=menu.ub[menu.mp].length-1; d++) {
            menu["ub"+d].removeMovieClip();
        }
        menu.mp = this._name.substr(8);
        menu["ob"+this._name.substr(8)].over = true;
        for (var d = 0; d<=menu.ub[this._name.substr(8)].length-1; d++) {
            menu["ub"+d] = menu.attachMovie("menu_sub", "unterbegriff"+d, d+100);
            menu["ub"+d]._x = 100+(d*120);
            menu["ub"+d]._y = 100;
            menu["ub"+d].textfeld_name.text = menu.ub[this._name.substr(8)][d];
        }
        // scale function aufrufen
        menu.scale = 125;
        menu.over = true;
        menu_change();
    };
    // rollOut
    menu["ob"+i]["main_btn"+i].onRollOut = function() {
        // normalzustand
        menu["ob"+this._name.substr(8)].over = false;
        var over = this._name.substr(8);
        menu["ob"+over].onEnterFrame = function() {
            menu["ob"+over]._xscale += Math.ceil((100-menu["ob"+over]._xscale)/3);
            if (menu["ob"+over]._xscale == 100) {
                delete this.onEnterFrame;
            }
        };
        // originalzustand
        menu.scale = 100;
        menu.over = false;
        menu_change();
    };
    menu["ob"+i]["main_btn"+i].onRelease = function() {
        // hier die gewünschte function eintragen
    };
}
// 
menu.abstand = ((menu["ob"+0].weite*menu.scale_max/100)-menu["ob"+0].weite)/2;
menu_change = function () {
    _root.onEnterFrame = function() {
        for (var i = 0; i<=menu.ob.length-1; i++) {
            if (menu.over) {
                if (!menu["ob"+i].over) {
                    if (i<menu.mp) {
                        // nach links
                        menu["ob"+i]._x += Math.ceil(((menu["ob"+i].x-menu.abstand)-menu["ob"+i]._x)/3);
                    } else if (i>menu.mp) {
                        // nach rechts
                        menu["ob"+i]._x += Math.ceil(((menu["ob"+i].x+menu.abstand)-menu["ob"+i]._x)/3);
                    }
                } else {
                    menu["ob"+i]._x += Math.ceil((menu["ob"+i].x-menu["ob"+i]._x)/3);
                }
            } else {
                menu["ob"+i]._x += Math.ceil((menu["ob"+i].x-menu["ob"+i]._x)/3);
            }
        }
        menu["ob"+menu.mp]._xscale += Math.ceil((menu.scale-menu["ob"+menu.mp]._xscale)/3);
        if (menu["ob"+menu.mp]._xscale == menu.scale) {
            delete this.onEnterFrame;
        }
    };
}; 


Gruß!

Vielleicht gibt es ja Verbesserungsvorschläge.

[Fuery3302]

schönes teil. kann man immer gebrauchen nur im submenü bleiben der 3. und 4. punkt stehn und wird nicht gelöscht.
aber sonst gefällts mir.
lg, Füry

[jeypack]

stimmt!
Wenn man sowas macht, sollte mans auch richtig machen. Hüstel, habs mal schnell berichtigt. Flöt...

[barsch]

Hallo,

versuche die onrelease Funktion zu implentieren, um mal
diese if Funktionen zu verstehen. Bekomme es aber leider
irgendwie nicht hin. Hat vielleicht jemand einen Tip was ich
falsch mache?

das war einer der versuche...

PHP-Code:

menu["ob"+i]["main_btn"+i].onRelease = function() 
{if (menu["ob"+i]["main_btn"+i] == "menu.main") loadMovie("test.swf","container_mc");

        // hier die gewünschte function eintragen
    }; 


gruss

[jeypack]

Zitat von barsch

Hallo,

versuche die onrelease Funktion zu implentieren, um mal
diese if Funktionen zu verstehen. Bekomme es aber leider
irgendwie nicht hin. Hat vielleicht jemand einen Tip was ich
falsch mache?

das war einer der versuche...

PHP-Code:

menu["ob"+i]["main_btn"+i].onRelease = function() 
{if (menu["ob"+i]["main_btn"+i] == "menu.main") loadMovie("test.swf","container_mc");

        // hier die gewünschte function eintragen
    }; 


gruss

Was willst du mit dieser if-Abfrage erreichen

Das ist das onRelease-Ereignis des main-Buttons. Da brauchst du einfach nur
das loadMovie eintragen.
Die letzten Stellen vom Instanznamen des Buttons kannst du auslesen und weißt somit immer welcher Hauptmenupunkt gedrückt wurde.
Das Gleiche kannst du natürlich für die Unterpunkte einrichten. Die sind ja noch gar nicht mit einem onRelease versehen.
Ich habe das mal für die Hauptmenupunkte vorgemacht:

menu["ob"+i]["main_btn"+i].onRelease = function() {
        trace("this._name.substr(8) = "+this._name.substr(8));
        trace("menu.currentMenu = "+menu.currentMenu);
        // hier die gewünschte function eintragen z.B.
        container_mc.loadMovie("test"+this._name.substr(8)+".swf");
        menu.currentMenu = this._name.substr(8);
    }; 

Damit kann man auch auf einfachste Weise einen Downstate des jeweils gedrückten Main-Buttons realisieren.

Gruß

[barsch]

Vielen Dank für die schnelle Hilfe, aber sehe schon, hiervon bin ich
noch ein gutes Stück entfernt, um das alles nachvollziehen zu können.^^

Dennoch klasse menu und eben faszinierend, wie man sowas mit einem
script hinbekommen kann.

grüsse

[jeypack]

Zitat von barsch

Vielen Dank für die schnelle Hilfe, aber sehe schon, hiervon bin ich
noch ein gutes Stück entfernt, um das alles nachvollziehen zu können.^^

Dennoch klasse menu und eben faszinierend, wie man sowas mit einem
script hinbekommen kann.

grüsse

Frohe Weihnachten.
Also vielleicht noch mal zur Erklärung.
Ab MX kannst du AS dynamisch zur Laufzeit für bestimmte Objekte, wie MC's generieren.
Wenn nun in einer 'for-Schleife' (for (var i = 0; i<=menu.ob.length-1; i++) {) dynamisch das AS für die Buttons erzeugt wird, dann wird ja die Zählervariable 'i' in der 'for-Schleife' hochgezählt (i++).
Daraus ergibt sich, dass beim ersten Schleifendurchlauf (i ist 0) die erste Zeile so aussieht:

menu["ob"+0] = menu.attachMovie("menu_main", "oberbegriff"+0, 0+10); 

und ausgewertet:

menu.ob0 = menu.attachMovie("menu_main", "oberbegriff0", 10); 

Das dynamisch durch die Schleife erzeugte AS für die Buttons muss ja jederzeit funktionieren. Kann es aber nicht, wenn du in diesem AS die Zählervariable für eine Zuweisung etc. benutzt. Die Zählervaribale 'i' steht beim Verlassen der Schleife in diesem Fall auf 'menu.ob.length-1=3-1=2'. Man kann sie für eine 'if-Abfrage' innerhalb des Buttons nicht benutzen, da der Wert ja immer=2 ist.
Deshalb wertet man bei einem Klick immer die letzten STellen des Instanznamen des Buttons aus. Diese Zahl entspricht dann immer der entsprechenden Stelle des Menu-Arrays.