So soll es aussehen ...So soll es aussehen ...
Abb.1: Aussehen
Enthält nun einer dieser Menüpunkte weitere Untermenüs, so ist das wiederum durch ein Plus-Zeichen gekennzeichnet, wenn nicht, dann erscheint ein Kreis-Symbol daneben und durch Klick auf den Menüpunkt wird der entsprechende Content geladen.
Das Menü ist momentan so ausgelegt, dass die nächsten Untermenüpunkte keine weiteren beinhalten können
und dass pro 1. Untermneüpunkt immer zwei 2. Untermenüpunkte vorhanden sein müssen,
d.h. die Anzahl der 2. Untermnüpunkte dividert durch zwei ergibt die Anzahl der 1. Untermenüpunkte. So, und ehe es jetzt noch komplizierter wird, machen wir mal ganz schnell weiter :-)
BeispielSo wird es aufgebaut ...
Jede dieser MovieClip-Instanzen enthält diverse Clip-Parameter:
- die Bezeichnung für das Hauptmenü
- ein Array für das erste Ausklappmenü (beliebig viele Einträge)
- ein Array für das zweite Ausklappmenü (hier müsen immer je zwei Menüpunkte stehen)
Die Untermenüpunkte werden jeweils per "attach Movie" erst dann auf der Bühne platziert,
wenn sie tatsächlich benötigt werden.
Die Haupt-Filmsequenz.
Der MovieClip "mainmenu_complete" bzw. mehrere davon befinden sich zu Anfang auf der Bühne. Ihm werden die ganzen nötigen Clipparameter/Variablen zugewiesen:
seine eigene Bezeichnung, die Bezeichnungen der Untermenüpunkte.
Abb.2: Die Clipparameter.
Abb.2+3: Die Werte für Untermenü 1 und 2.
Der 'Unter'-MovieClip.
Der MovieClip "main" befindet sich innerhalb von "mainmenu_complete"
Auf ihm befinden sich die "on load"-Befehle, die ausgeführt werden sollen, wenn "mainmenu_complete" auf der Bühne erscheint.
onClipEvent (load) {
_parent.count_sub1 = _parent.title_sub1.length;
_parent.height = _parent.count_sub1*20;
_parent.name = _parent._name;
_parent.number = int(_parent.name.substr(-1, 1));
_parent.number_next = int(_parent.name.substr(-1, 1))+1;
}
Erklärung: Die Anzahl der Menüpunkte des 1. Ausklappmenüs wird ermittelt.
Anhand der Anzahl kann die Höhe des 1. Ausklappmenüs errechnet werden.
Der Instanzname wird ausgelesen und das letzte Zeichen,
das die Position des Menüs innerhalb der anderen angibt, wird extrahiert.
Die darauffolgende Nummer, die das nächste Menü bestimmt wird in einer Variablen festgehalten.Der Aufbau des MovieClips "main" sieht folgendermassen aus:
Zunächst stop auf Frame 1, bei Klick auf das Pluszeichen wird zu "minus" gesprungen.
Frame 1: 'plus' onClipEvent (load) { _parent.height_sub = 0; stop (); }Erklärung: 'height_sub' steht für die Höhe des zweiten Ausklappmenüs; wird später noch klarer.
Frame 5: 'minus' for (i=1; i<_parent.count_sub1+1; i++) { if ((_parent.title_sub2[i+(i-1)] eq "") && (_parent.title_sub2[i+(i-2)] eq "")) { _parent.attachMovie("sub1_kreis", "sub"+_parent.number+"_"+i, 100*i); } else { _parent.attachMovie("sub1_plus", "sub"+_parent.number+"_"+i, 100*i); } } for (k=_parent.number_next; k<_parent.count_sub1+1; k++) { eval("_root.mainmenu"+k)._y += _parent.height; } stop ();Erklärung: Die Schleife wird so lange durchlaufen wie Untermenüpunkte vorhanden sind:
Hat ein Untermenüpunkt nicht selbst noch Untermenüpunkte, dann wird das Symbol "sub1_kreis" platziert, ansonsten das Symbol "sub1_plus" Die Hauptmenüpunkte, die sich unterhalb des aktuellen befinden, werden nach unten verschoben.
Button 'minus' on (release) { for (i=1; i<_parent.count_sub1+1; i++) { _parent["sub"+_parent.number+"_"+i].removeMovieClip(); } for (k=_parent.number_next; k<_parent.count_sub1+1; k++) { eval("_root.mainmenu"+k)._y -= _parent.height; eval("_root.mainmenu"+k)._y -= _parent.height_sub; } gotoAndStop ("plus"); }Erklärung: Die Schleife wird so lange durchlaufen wie Untermenüpunkte vorhanden sind:
Die zuvor plaztierten MovieClips werden entfernt. Die Hauptmenüpunkte, die sich unterhalb des aktuellen befinden, werden wieder nach oben verschoben. Hier taucht nun auch wieder die Variable height_sub auf, die für die Höhe des zweiten Ausklappmenüs steht.
Die Untermenüpunkte
Die MovieClips für die Untermenüpunkte befinden sich lediglich in der Bibliothek.
Es gibt drei verschiedene MovieClips:
sub1_kreis_complete exportiert als sub1_kreis ('Endpunkt' des 1. Ausklappmenüs)
sub1_plus_complete exportiert als sub1_plus ('Menüpunkt' des 1. Ausklappmenüs)
sub2_kreis_coomplete exportiert als sub2_kreis ('Endpunkt' des 2. Ausklappmenüs)
Jeder MovieClip beinhaltet einen weiteren, der die 'on load'-Actions verwaltet. Sie heißen sub1_kreis, sub1_plus, sub2_kreis.
Untermenü 1 'kreis'
Der MovieClip 'sub1_kreis_complete' enthält den MovieClip 'sub1_kreis', der die 'on load'-Actions verwaltet:
onClipEvent (load) {
_parent.name = _parent._name;
_parent.number = _parent.name.substr(-1, 1);
this._x = _parent._parent.main._x;
this._y = _parent._parent.main._y+(20*_parent.number);
this.title = _parent._parent.title_sub1[_parent.number-1];
}
Erklärung: Beim Erscheinen auf der Bühne ....Der Instanzname wird ausgelesen und das letzte Zeichen wird extrahiert. Die X-Position wird der des Hauptmenüpunktes gleich gesetzt.
Die Y-Position wird um ein Vielfaches von 20 zu der des Hauptmenüpunktes dazugezählt.
Der Titel des Menüpunktes wird aus dem Array ausgelesen.
on (release) {
movie = _parent._parent.title_sub1[_parent.number-1] + _parent._parent.number;
loadMovieNum (movie+".swf", 50);
}
Erklärung: Die Bezeichnung der Content-SWFs enthält den Namen des Menüpunktes und die Nummer des Hauptmenüpunktes:
z.B. Menu 13 (Menu 1 des dritten Hauptmenüpunktes).Diese Bestandteile werden hier ermittelt und der Variablen "movie" zugeordnet.
Laden des SWFs.
Untermenü 1 'plus'
Der MovieClip 'sub1_plus_complete' enthält den MovieClip 'sub1_plus', der die 'on load'-Actions verwaltet:
onClipEvent (load) {
_parent.height = 40;
_parent.number = int(_parent._name.substr(-1, 1));
_parent.number_next = int(_parent._name.substr(-1, 1))+1;
this.title = _parent._parent.title_sub1[_parent.number-1];
this._x = _parent._parent.main._x;
this._y = _parent._parent.main._y+(20*_parent.number);
_parent.count_sub2 = (_parent._parent.title_sub2.length) / (_parent._parent.title_sub1.length);
}
Erklärung: Beim Erscheinen auf der Bühne ....Der Abstand von diesem zum nächsten Untermenüpunkt wird festgelegt.
Aus dem Instanznamen wird das letzte Zeichen (die Nummer) extrahiert und so die Nummer des darauffolgenden Menüpunktes ermittelt.
Der Titel des Menüpunktes wird aus dem Array ausgelesen.
Die X-Position wird der des Hauptmenüpunktes gleich gesetzt.
Die Y-Position wird um ein Vielfaches von 20 zu der des Hauptmenüpunktes dazugezählt.
Es wird ermittelt, wiviele Untermenüpunkte ein solcher Menpunkt hat, indem die Anzahl der 2. Untermenüpunkte durch die Anzahl der ersten Untermenüpunkte geteilt wird.
(... für den Fall, dass die Funktionalität dahingehend erweitert wird, dass auch mehr als 2 Untermenüpunkte für das 2. Ausklappmenü eingegeben werden können.)
Der Aufbau des MovieClips 'sub1_plus' gestaltet sich wie der der Hauptmenüpunkte:
Frame 1: 'plus' for (i=1; i<_parent.count_sub2+1; i++) { _parent.attachMovie("sub2_kreis", "sub2_"+i, i); } for (k=_parent.number_next; k<_parent._parent.count_sub1+1; k++) { _parent._parent["sub"+_parent._parent.number+"_"+k]._y += _parent.height; } for (k=_parent._parent.number_next; k<_parent._parent.count_sub1+1; k++) { eval("_root.mainmenu"+k)._y += _parent.height; } stop ();Erklärung: Es werden so viele Untermenüpunkte platziert, wie inm Array eingegeben sind.
Die Untermenüpunkte 'sub1_X', die sich unterhalb des aktuellen befinden werden verschoben.
Die Hauptmenüpunkte 'mainmenuX' werden ebenso verschoben.
Frame 5: 'minus' on (release) { for (i=1; i<_parent.count_sub2+1; i++) { _parent["sub2_"+i].removeMovieClip(); } for (k=_parent.number_next; k<_parent._parent.count_sub1+1; k++) { _parent._parent["sub"+_parent._parent.number+"_"+k]._y -= _parent.height; } for (k=_parent._parent.number_next; k<_parent._parent.count_sub1+1; k++) { eval("_root.mainmenu"+k)._y -= _parent.height; } gotoAndStop ("plus"); }Erklärung: Die Untermenüpunkte 'sub2_X' werden wieder entfernt.
Die 1. Untermenüpunkte 'sub1_X' werden wieder nach oben verschoben.
Die Hauptmenüpunkte 'mainmenuX' werden wieder nach oben verschoben.
Untermenü 2 'kreis'
Der MovieClip 'sub2_kreis_complete' enthält den MovieClip 'sub2_kreis', der die 'on load'-Actions verwaltet:
onClipEvent (load) {
_parent._parent._parent.height_sub += 20;
_parent.number = _parent._name.substr(-1, 1);
this._x = _parent._parent.sub1_plus._x;
this._y = (_parent._parent.sub1_plus._y)+20*_parent.number;
if (_parent.number eq 1) {
this.title = _parent._parent._parent.title_sub2[int(_parent._parent.number)*2-2];
} else {
this.title = _parent._parent._parent.title_sub2[int(_parent._parent.number)*2+1-2];
}
}
onClipEvent (unload) {
_parent._parent._parent.height_sub -= 20;
}
Erklärung: Beim Erscheinen auf der Bühne ....Die Variable "height_sub" wird um 20 erhöht.
Aus dem Instanznamen wird das letzte Zeichen (die Nummer) extrahiert.
Die X-Position wird der des Hauptmenüpunktes gleich gesetzt.
Die Y-Position wird um ein Vielfaches von 20 zu der des 1. Untermenüpunktes dazugezählt.
Wenn es sich bei diesem Menüpunkt um den ersten der beiden möglichen handelt, dann lese das entsprechende Feld im Array aus, andernfalls, lese das darauffolgende Feld aus.
Beim Enfernen von der Bühne ...
Erniedrige die Variable "height_sub" um 20.
Schlusswort
So, ... dann hoffe ich mal, dass das alles so einigermassen zu verstehen ist/war.
Sollten noch irgendwelche Fehler drin sein ... hab's nämlich auch noch nicht bis zum Umfallen getestet ... dann bitte Feedback, ja?
Ich werde natürlich noch weiter daran entwickeln, damit man auch irgendwann mal beliebig viele Einträge im 2. Ausklappmenü vornehmen kann und damit es auch sonst noch einfacher zu ändern sein wird.
We'll see :-)