Teil 5: Die Objekte befüllen und Menü anzeigen
Wir haben nun alle Klassen die wir für das Menü brauchen. Wenn ihr Tutorial 1-4 befolgt habt, müsstet ihr nun einen Ordner haben, in dem sich die Dateien xml_laden.fla, MenuItem.as, Level1Item.as und Level2Item.as befinden.
In Tutorial Teil 1 haben wir die XML-Daten lediglich in der Konsole ausgegeben, diese müssen wir nun unseren Objekten übergeben. Darum wird die xml_laden.fla angepasst:
ActionScript
var xml = new XML();
xml.onLoad = load;
xml.ignoreWhite = true;
xml.load("http://www.mortox.de/index.php?id=7");
_root.error._visible = false;
function load(success:Boolean) {
_root.loading._visible = false;
if(success) {
var rootMenu = new MenuItem();
//Knoten anzeigen
create(xml.firstChild.childNodes, rootMenu, 1);
rootMenu.draw();
rootMenu.init(11);
rootMenu.testTrace();
}
else {
_root.error._visible = true;
}
}
function create(array:Array, menuItem:MenuItem, depth:Number) {
var myItem :MenuItem;
for(var i:String in array) {
var position :Number = Number(i);
switch(depth) {
case 1:
myItem = new Level1Item(array[i].attributes, position);
break;
case 2:
myItem = new Level2Item(array[i].attributes, position);
break;
default:
myItem = null;
break;
}
if(array[i].hasChildNodes()) {
create(array[i].childNodes, myItem, depth+1);
}
//Item zum Parent-Item fügen
menuItem.addItem(myItem);
}
}
Erläuterung
Nach dem erfolgreichen Laden der XML-Datei wird das rootMenu-Objekt angelegt, welches lediglich als Container für alle Menüpunkte der ersten Ebene dient.
Die frühere display()-Methode heißt jetzt create() und nimmt zusätzlich ein Attribut vom Typ MenuItem an. Innerhalb der Funktion wird zunächst überprüft welche Ebene gerade aktuell ist und das passende Objekt myItem erzeugt (siehe switch()-Anweisung). myItem wird anschließend dem mitgegebenen menuItem hinzugefügt.
Durch rootMenu.init(_root.initID) wird dem Menü die aktuelle Seiten-ID mitgegeben. In diesem Beispiel hab ich einfach mal die id 11 (also für die Seite about/Bilder) verwendet - laut unserer Definition in Level1Item bewirkt die init()-Funktion also ein Ausklappen aller Untermenüpunkte eines Menüpunktes der ersten Ebene, wenn dieser selbst die id 11 oder eines seiner Untermenüpunkte die id 11 hat (hasIdOrSub(11))- in diesem Fall muss also about ausklappen.
Mit rootMenu.draw() wird das komplette Menü letztendlich auf der Bühne gezeichnet.
So sollte es aussehen
Download
Den kompletten Code für obige Flashdatei könnt ihr euch auf der rechten Seite durch einen klick auf DOWNLOAD ziehen.















