Teil 3: level1Item - Menüpunkte der ersten Ebene
Nachdem wir eine Klasse haben, die uns bereits eine nette Funktionalität für Menüpunkte bereitstellt, können wir uns darum kümmern wie wir das Menü darstellen möchten. Da es sich um die erste Menüebene handelt nennen wir die Klasse level1Item und leiten diese von der MenuItem-Klasse ab. Die Datei muss wieder level1Item.as heißen. Der Code sieht so aus:
Actionscript
class Level1Item extends MenuItem {
public function Level1Item(values :Array, position :Number){
//Elternkonstruktor
super(values, position);
}
public function draw() :Void {
//MovieClip erstellen und in _mc speichern
var layer :Number = _root.getNextHighestDepth();
_root.attachMovie("menuItem", "menuItem1_"+layer, layer);
this._mc = _root["menuItem1_"+layer];
//Richtig positionieren
this._mc._x = 30;
this._mc._y = 30 + this._position * this._mc._height;
//Text ändern
this._mc.linktext.text = this._values["title"];
//Elternfunktion draw()
super.draw();
}
public function init(id :Number) :Void {
if(this.hasIdOrSub(id)) {
this.rollOver();
break;
}
}
private function press() :Void {
getURL(this._values["link"]);
}
private function rollOver() :Void {
//Falls irgendwo noch leve2Items offen, dann ausblenden
for(var i:String in this._parent._subItems) {
this._parent._subItems[i].rollOut();
}
this._mc.gotoAndStop(2);
this.displaySubItems();
}
private function rollOut() :Void {
this._mc.gotoAndStop(1);
this.hideSubItems();
}
}
Mit dem übergebenen Konstruktor-Parametern wird genau so verfahren wie in der Elternklasse - durch super() wird dieser aufgerufen.
Die draw() Methode wird erweitert. Als Erstes wird ein MovieClip auf der Bühne erzeugt, der eindeutig benannt wird und in der Eigenschaft _mc gespeichert wird. Wie attachMovie() funktioniert findet ihr in der Flashhilfe. Anschließend wird er nach Belieben positioniert - in unserem Beispiel hab ich eine vertikale Navigation gewählt. Im MovieClip gibt es ein dynamisches Textfeld, dass linktext heißt und mit dem Seitentitel aus _values gefüllt wird. Mit super.draw() werden dem _mc die Events zugewiesen und die draw() Funktion der subItems aufgerufen (siehe draw() der Klasse MenuItem).
Wenn die durch init() übergebene Seiten-ID die des aktuellen Objektes bzw. eines seiner Unterobjekte ist, wird die rollOver()-Funktion aufgerufen die in diesem Fall alle SubItems anzeigt und den Menüpunkt grau hervorhebt.
press(), rollOver() und rollOut() sind einfach zu erklären: Wird der Button gedrückt wird press() ausgeführt und die tatsächliche URL des Menülinks augerufen. Bei rollOver() wird das zweite Bild des MoviClips angezeigt (Hintergrundfarbe wird geändert) und alle SubItems eigeblendet. rollOut() macht das Gegenteil.
Der MovieClip
Der MovieClip, der mittels attachMovie erzeugt wird ist unter "menuItem" in der Bibliothek unserer Flashdatei (xml_laden.fla) hinterlegt. Er besteht aus 2 Frames um einen MouseOver-Effekt erzeugen zu können. Siehe Bild:
- Aufbau MenuItem MovieClip
In der as-Ebene (as = actionScript) befindet sich lediglich ein stop(); Befehl, so dass der MovieClip nicht ständig zwischen den beiden Frames hin und her springt. Auf der back-Ebene befindet sich der abgerundete Hintergrund in den zwei unterschiedlichen Farben. Die region-Ebene enthält ein Rechteck, dass etwas größer ist als der Hintergrund. Damit wird der Abstand zwischen den Menüpunkten gehalten. Die Farbe dieser Region sollte entweder die Hintergrundfarbe sein oder 0% alpha haben.
Zu guter Letzt die text-Ebene. Auf ihr ist das dynamische Textfeld mit dem Instanznamen linktext plaziert. Die Schriftart muss eingebunden werden damit Drehungen und Bewegungen des Buttons funktionieren. Dazu klickt man bei den Textfeldeigenschaften auf "Einbetten..." und wählt folgendes:
- Flash Zeicheneinbettung
