Beispiel 10: Dynamische Bildergalerie mit XML und Text Anschauen
Zum Abschluß der AS2-Bildergalerien hier noch ein Beispiel, wie man sowohl die Bilder-URLs als auch Begleittexte mit XML nachladen kann.
Schritt 1: Wir erstellen uns ein XML-File mit den URLs und Begleittexten (bitte Unicode UTF-8-codiert abspeichern, sonst gibt es Probleme mit den Umlauten):
Code:
<?xml version="1.0" encoding="UTF-8"?>
<galerie>
<bild url="feuerschiff-weser.jpg" text="Feuerschiff Weser" />
<bild url="hafenanlage.jpg" text="Hafenanlage" />
<bild url="hafenschlepper-langeness.jpg" text="Hafenschlepper Langeness" />
<bild url="kw-bruecke.jpg" text="KW-Brücke" />
<bild url="marinemuseum.jpg" text="Marinemuseum" />
<bild url="minensucher-weilheim.jpg" text="Minensucher Weilheim" />
<bild url="seglerhafen.jpg" text="Seglerhafen" />
<bild url="suedstrand.jpg" text="Südstrand" />
<bild url="uboot-u10.jpg" text="UBoot U10" />
<bild url="unterderkw-bruecke.jpg" text="Unter der KW-Brücke" />
<bild url="wattenmeer.jpg" text="Wattenmeer" />
<bild url="wattenmeerhaus.jpg" text="Wattenmeerhaus" />
<bild url="zerstoerer-moelders.jpg" text="Zerstörer Mölders" />
</galerie>
Schritt 2: Wir ändern unser letztes Script ab und lassen über ein XML-Objekt das XML-File einlesen:
PHP-Code:
var bilderXML:XML = new XML();// Neues XML-Objekt anlegen
bilderXML.ignoreWhite = true;// whitespace in XML ignorieren (z.B. CRLF etc)
bilderXML.onLoad = onload;//onLoad-Handler zuweisen
bilderXML.load("bilderliste.xml");
Schritt 3: Im onLoad-Handler lesen wir die Liste der XML-Knoten aus:
PHP-Code:
function onload(erfolgreich) {
if(erfolgreich) {
var knotenliste:Array = new Array();
knotenliste = this.firstChild.childNodes;//der jeweilige erste Eintrag in den Knoten
}
else {
trace("Fehler beim Laden");
}
}
Über diese Knotenliste können wir jetzt auf die einzelnen Einträge und deren Attribute zugreifen:
PHP-Code:
function onload(erfolgreich) {
if(erfolgreich) {
var knotenliste:Array = new Array();
knotenliste = this.firstChild.childNodes;//der jeweilige erste Eintrag in den Knoten
//Anzahl der Bilder ermitteln über Länge der Knotenliste
var len:Number = knotenliste.length;
_root.len = len;
//alle Einträge durchwandern und die Attribute in die Arrays setzen
for(var i:Number=0;i<_root.len;i++){
_root.urls[i] = knotenliste[i].attributes.url;
_root.labellist[i] = knotenliste[i].attributes.text;
}
//jetzt erst die Bilder laden:
_root.startLoader();
}
else {
trace("Fehler beim Laden");
}
}
Schritt 4: Damit haben wir wieder unsere Liste mit den URLs. Jetzt können wir noch denTextfeld-MC unter dem Hauptbild zufügen:
PHP-Code:
//leeren MC erstellen
this.createEmptyMovieClip("con",1);
//und 3 weitere MCs einbetten
var border_mc:MovieClip = con.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = con.createEmptyMovieClip("image_mc",2);
var text_mc:MovieClip = con.createEmptyMovieClip("text_mc",3);
Da der ganze Container-MC über Alpha-Tweens ein- und ausgefadet wird, benötigt der Player die Vektorinformationen des genutzten Fonts. Dazu wird der Font über "neue Schriftart" in die Bibliothek geladen und mit dem Verknüpfungsbezeichner "Arial" versehen. Jetzt können wir das Textfeld erstellen und mit embedFonts=true einbetten:
PHP-Code:
//großes Bild ist geladen und MC wurde befüllt:
_root.mclListener2.onLoadInit = function(mc:MovieClip) {
_root.rechteck(_root.con.border_mc,"0xFFFFFF",0,mc._width+20,0,mc._height+20,1,0,100);
_root.con.image_mc._x = 10;
_root.con.image_mc._y = 10;
//MC auf die Bühnen-Mitte setzen:
_root.con._x = int((Stage.width - _root.con._width)/2);
_root.con._y = int((Stage.height - _root.con._height)/2)-120;
_root.shadows(_root.con);
//Text unter das Bild setzen
var format:TextFormat = new TextFormat();
format.align = "center";
_root.txt = _root.text_mc.createTextField("txt",1,0,_root.con.border_mc._height+10,_root.con.border_mc._width,40);
_root.txt.html = true;
_root.txt.wordWrap = true;
_root.txt.multiline = true;
_root.txt.embedFonts = true;
if(_root.starter){
_root.starter = false;
_root.index = 0;
}
_root.txt.htmlText = "<font face='Arial' size='16' color='#000000'>"+_root.labellist[_root.index]+"</font>";
_root.txt.setTextFormat(format);
_root.fader(_root.con,true);
}
Schritt 5: Eine kleine Anpassung im Script sorgt dafür, dass die Vorwärts-/Rückwärtsschaltflächen-Klicks auf die Menge der Thumbs begrenzt werden:
PHP-Code:
zurueck_mc.onRelease = function(){
trace("Klick auf zurück");
//Ende der Liste erreicht? Dann begrenzen...
if(_root.thumbs._x > -2700) _root.thumbs._x -= 250;
}
weiter_mc.onRelease = function(){
trace("Klick auf weiter");
//Ende der Liste erreicht? Dann begrenzen...
if(_root.thumbs._x < 50) _root.thumbs._x += 250;
}