phihochzwei
Moderator
Threadersteller
Dabei seit: 08.06.2006
Ort: Mülheim an der Ruhr
Alter: 46
Geschlecht: 
|
Verfasst Di 24.07.2007 14:10
Titel "Alle meine Kinder" oder mit XML dynamisch Bilder |
  |
|
Mal wieder aus aktuellem Anlass:
Wir alle kennen das(naja, zumindest die, die das hier lesen denke ich  ). Wir bauen eine Flash-Seite und haben dort lustige Sachen. Menüpunkte, Bilder, Texte, Sounds, Videos und und und. Die Seite ist fertig, wir laden sie hoch, fertig ist die Laube. Dummerweise ist es doch meist so, daß der Kunde dann ein anderes Bild haben will, oder es sollen mehr Bilder rein, oder es soll noch ein Menüpunkt hinkommen, oder ein Film oder was weiss ich denn .
Wie ich in einem vorherigen Tutorial schonmal erwähnt habe, bin ich chronisch Faul bei solchen Sachen. Und deswegen ist XML mein Freund. Denn mit XML kann ich mir lustige Datenstrukturen schaffen und jederzeit an einem internetfähigen Rechner bearbeiten und so eine Seite anpassen, OHNE das ich Flash auch nur aufmachen bräuchte (okay, in manchen extremen Fällen bzw. wenn man es vorher nicht richtig gemacht hat schon ).
Grundsätzlich zum Thema Flash und XML:
XML baut sich aus sogenannten Knoten auf. Jeder Knoten hat einen Elternknoten(parentNode) und kann unter Umständen Geschwisterknoten, also Knoten die den selben Elternknoten haben, besitzen. Und wenn der Mamaknoten und der Papaknoten sich ganz doll lieb haben, kann jeder Knoten auch einen Kindknoten (bekannt aus dem örtlichen Kindergarten) besitzen, die ihrerseits wiederum Kinder, Eltern und Geschwister haben können usw. usw usw. Wie eure XML-Datei aufgebaut ist, könnt ihr vorteilhafterweise ganz alleine entscheiden, je nachdem was ihr braucht.
Ein Knoten sieht beispielsweise so aus:
| Code: | | <Knoten attributA="100" attributB="horst">WERT</Knoten> |
- "Knoten" ist der Name des Knoten (?!?).
- "attributA" und "attributB" sind Attribute, also Eigenschaften dieses Knotens.
- "WERT" ist der Text den dieser Knoten mit sich rumschleppt
- "/Knoten" sagt uns "Hier ist der Knoten zu Ende
Es gibt 2 Arten von Knoten: Elementknoten und Textknoten. Jeder Elementknoten KANN Textknoten enthalten, muss aber nicht. Ein Textknoten hingegen MUSS einen (Elternknoten) Elementknoten haben, in dem er steht. Bei unserem obrigen Beispiel ist "<Knoten ...> </Knoten>" der Elementknoten und "WERT" ist der Textknoten.
Um das ganze einmal zu veranschaulichen hier mal folgende XML-Struktur um ein paar Bilder zu laden, zu positionieren und mit einer Bildunterschrift zu versehen:
| Code: |
<?xml version="1.0" encoding="utf-8"?>
<Bilder>
<Bild>
<File xpos="50" ypos="50" width="200" height="200">bild1.jpg</File>
<Quote xpos="50" ypos="255" width="200" height="50" size="13" color="0x000000" align="left">Das der Jogi</Quote>
</Bild>
<Bild>
<File xpos="300" ypos="50" width="200" height="200">bild2.jpg</File>
<Quote xpos="300" ypos="255" width="200" height="50" size="13" color="0xff0000" align="left">Das ist der Jogi wenn er flashed</Quote>
</Bild>
<Bild>
<File xpos="550" ypos="50" width="200" height="200">bild5.jpg</File>
<Quote xpos="550" ypos="255" width="200" height="50" size="13" color="0x00ff00" align="left">Das der Jogi wenn die Kiste nicht so will wie er. Klingt komisch, is aber so</Quote>
</Bild>
<Bild>
<File xpos="50" ypos="300" width="200" height="200">bild3.jpg</File>
<Quote xpos="50" ypos="505" width="200" height="50" size="13" color="0x0000ff" align="left">Das der Jogi nachdem aus Frust ein Bambi ausgestopft hatr</Quote>
</Bild>
<Bild>
<File xpos="300" ypos="300" width="200" height="200">bild4.jpg</File>
<Quote xpos="300" ypos="505" width="200" height="50" size="13" color="0xff00ff" align="left">Seit dem lebt er in einem dunklen Keller und bellt die dunkle Seite des Mondes an</Quote>
</Bild>
<Bild>
<File xpos="550" ypos="300" width="200" height="200">bild6.jpg</File>
<Quote xpos="550" ypos="505" width="200" height="50" size="13" color="0xff00ff" align="left">Das der Jogi</Quote>
</Bild>
</Bilder>
|
Das ist also die XML-Struktur. Nun brauchen wir ja auch noch ein Flash-Script, damit da auch was mit passiert. Hierzu legen wir eine neue FLA an, erzeugen ein Font-Objekt mit dem Namen "schrift1" und aktivieren die Verwendung in ActionScript und den Export in den ersten Frame. Danach kopieren wir einfach folgendes in einen Keyframe:
| Code: |
var Bilder_arr:Array = new Array() // Als Erstes erzeugen wir ein Array wo wir alles schön reinschreiben
var Bilder_xml:XML = new XML(); // Dann das XML-Object, daß unsere XML-Datei lädt und parst
Bilder_xml.ignoreWhite = true; // Hier sagen wir dem XML-Object, das es Leerstellen und Umbrüche zwischen den Knoten ignorieren soll
Bilder_xml.onLoad = function(success:Boolean){ // Hier definieren wir, was passieren soll, wenn die Daten geladen und geparsed sind
switch(success){
case true:
for(var i:Number = 0; i < this.firstChild.childNodes.length; i++){ // Tue X sooft, wie der erste Knoten Kinder ("Bild"-Knoten)hat
var _node1:XMLNode = this.firstChild.childNodes[i];
Bilder_arr.push(new Object()); // Hier erzeugen wir ein Object für den ersten Bildknoten
var _obj:Object = Bilder_arr[i] // Hier machen wir eine Referenz auf das erzeugte Object, weil ich kürzer zu schreiben :)
for(var n:Number = 0; n < _node1.childNodes.length; n++){ // Tue X sooft, wie der Bildknoten Unterknoten hat
var _node2:XMLNode = _node1.childNodes[n];
var _item:Object = _obj[_node2.nodeName] = new Object() // Hier erzeugen wir für jeden Unterknoten ein Object, das die Daten aufnimmt
for(prop in _node2.attributes){ // Tue X mit jedem Element/Attribut des Unterknotens
switch(prop){
case "align":
case "color":
_item[prop] = _node2.attributes[prop];
break;
default:
_item[prop] = parseFloat(_node2.attributes[prop]); // Hier wandeln wir die Werte, welche noch als Strings gelten in Zahlen um
break;
}
}
_item.Inhalt = _node2.firstChild.nodeValue; // Hier lesen wir den Inhalt des Textknoten aus, der in jedem Unterknoten steckt
}
}
ladeBild() // Wir haben alle Daten umgewandelt, jetzt geht´s ans Laden
break;
}
}
Bilder_xml.load("bilder.xml");
var ImageCount:Number = 0; // Diese Variable sagt uns, welche Nummer als nächstes geladen werden soll
var Image_loader:MovieClipLoader = new MovieClipLoader(); // Ein MovieClipLoader
var Image_listener:Object = new Object(); // Dem MovieClipLoader sein Listener
Image_listener.onLoadInit = function(Ziel:MovieClip){ // Wenn die geladene Datei initialisiert ist tue folgendes.....
var _objBild:Object = Bilder_arr[ImageCount].File; // Eine Referenz auf das Object, welches die Informationen für das Bild bereit hält
/////////////////////////////////////////////////////////
// Nun die Position des Bildes und dessen Größe
/////////////////////////////////////////////////////////
Ziel._x = _objBild.xpos;
Ziel._y = _objBild.ypos;
Ziel._width = _objBild.width;
Ziel._height = _objBild.height;
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
//// Als nächstes der Text unter dem Bild
///////////////////////////////////////////////////////
var _objText:Object = Bilder_arr[ImageCount].Quote;
var Quote:TextField = _root.createTextField("Quote" + ImageCount, 200 + ImageCount, 1,1,1,1);
Quote.multiline = true;
Quote.wordWrap = true;
Quote.autoSize = false;
Quote.embedFonts = true;
Quote._x = _objText.xpos;
Quote._y = _objText.ypos;
Quote._width = _objText.width;
Quote._height = _objText.height;
var Quote_format:TextFormat = new TextFormat();
Quote_format.font = "schrift1"
Quote_format.size = _objText.size;
Quote_format.color = _objText.color;
Quote_format.align = _objText.align;
Quote.setNewTextFormat(Quote_format);
Quote.text = _objText.Inhalt;
///////////////////////////////////////////////////////
switch(ImageCount < Bilder_arr.length){ // Wenn der Wert der Variable niedriger ist, als die Anzahl der Bilder dann tue.....
case true:
ImageCount++;
ladeBild();
break;
}
}
Image_loader.addListener(Image_listener); // Hier sagen wir dem MovieClipLoader was sein Listener ist
var ladeBild:Function = function(){
var _img:MovieClip = _root.createEmptyMovieClip("Bild" + ImageCount, 100 + ImageCount); // Hier erzeugen wir einen leeren MC für ein Bild
Image_loader.loadClip(Bilder_arr[ImageCount].File.Inhalt, _img); // Hier laden wir das Bild in den eben erzeugten Clip
}
|
Wenn ihr jetzt in der XML-Datei die positionen ändert, oder die Größe oder den Text oder die Schriftfarbe oder was weis ich denn, ändert sich das im Flash ebenso.
Wie gesagt, daß ist EIN Beispiel. Die Möglichkeiten des Ganzen sind, sofern die XML-Struktur gut durchdacht und der ASvernünftig ist, nahezu endlos.
Das obige Beispiel mal zur Ansicht HIER und zum Download DORT
Abschliessend noch:
A) Hoffe ich es verstehen alle
B) Sorry falls das wem zu breit ist, beim Codehighlight kann man die Schriftgröße nicht ändern 
C) Gruß an den Jogi für den das hier primär ist
|
|
Willkommen auf dem Portal für Mediengestalter
