Grundlagen von XML

Was ist XML?

XML bedeutet eXtensible Markup Language und ist eine Metasprache zum definieren von Dokumenttypen. Wenn Dokumente aus denselben Elementen aufgebaut sind, dann gehören sie dem gleichen Dokumenttyp an. Denken sie dabei an HTML-Dokumente, in denen immer bestimmte Tags mit speziellen Attributen verwendet werden. Sie bestehen immer aus denselben Elementen und gehören aus diesem Grund dem Dokumenttyp HTML an. Mit XML kann man nun die Regeln festlegen, nach denen solche Dokumenttypen aufgebaut werden. Dadurch lassen sich Programme schreiben, die definierte Dokumenttypen automatisch verarbeiten können.

Aufbau eines XML-Dokuments

XML-Dokumente besitzen einen hierarchischen Aufbau, eine Art Ordnerstruktur, man spricht dabei von „Knoten“. Unterscheiden lassen sich dabei der „erste Knoten“ (firstChild) und „untergeordnete Knoten“ (childNodes).


 

Aufbau eines XML-Dokuments

Ein XML-Element kann auch Attribute besitzen, die wie folgt ausgewiesen werden:

<pkw bildURL=“images/pic1.jpg“>

Das XML-Objekt

Zum Laden von XML-Dokumenten und zum Arbeiten mit den Dokumentenbäumen, stehen in ActionScript die Methoden und Eigenschaften des XML-Objekts zur Verfügung. Um mit diesem Objekt zu arbeiten muss zuerst eine neue Instanz mit dem Konstruktor new XML() erzeugt werden.
Einige wichtige Methoden und Eigenschaften sind:

XML.load

Diese Methode lädt ein XML-Dokument von der angegebenen URL und ersetzt den Inhalt des angegebenen XML-Objekts durch die heruntergeladenen XML-Daten. Wenn das Herunterladen der XML-Daten abgeschlossen ist, wird die Eigenschaft loaded auf true gesetzt und die Methode onLoad aufgerufen.

Synax:

meinXML.load(url);

Als Parameter werden übergeben:

-> Die url, unter der das zu ladende XML-Dokument zu finden ist. Die URL muss sich
     in der gleichen Subdomain befinden, wie die URL des Films.

XML.onLoad

Diese Methode wird vom Flash Player aufgerufen, wenn ein XML-Dokument vom Server empfangen wird. Wenn das XML-Dokument erfolgreich empfangen wurde, hat der Parameter erfolg den Wert true.

Synax:

meinXML.onLoad(erfolg);

Als Parameter werden übergeben:

-> erfolg ist ein boolescher Wert, der angibt ob das XML-Objekt erfolgreich geladen
    wurde.

XML.firstChild

Diese Eigenschaft wertet das angegebene XML-Objekt aus und verweist auf den ersten Child-Knoten.

Synax:

meinXML.firstChild;

XML.attributes

Diese Sammlung gibt ein assoziatives Array zurück, das alle Attribute des angegebenen XML-Objekts enthält.

Synax:

meinXML.attributes;

XML.childNodes

Diese Sammlung gibt ein Array mit den Child-Knoten des angegebenen XML-Objekts zurück.

Synax:

meinXML.childNodes;


Das XML-Objekt verfügt über viele weitere Methoden, unter anderem auch um XML-Dokumente zu erstellen, diese werden im Beispiel allerdings nicht benötigt.

Beispiel MP3-Player

  ansehen

  Download mp3-Dateien (7,6MB)

Layout

Erzeugen Sie ein dynamisches Textfeld und weisen Sie diesem die Variable „_root.aktSong“ zu. In diesem Textfeld sollen später Titel und Interpret des aktuellen Songs ausgegeben werden. Darunter positionieren Sie den Fortschrittsbalken (Movieclip „balken“) und die Buttons „stop“, „play_pause“, „rew“, „ff“ und „ton“ aus der Bibliothek der Videosteuerung.

Layout des mp3-Players in der Entwicklungsumgebung

Legen Sie nun noch einen neuen Movieclip an und nennen Sie diesen „linkClip“. In diesem Movieclip zeichnen Sie ein gefülltes Rechteck der Größe 320x20 mit den Koordinaten 0/0. Darüber legen Sie ein dynamisches Textfeld der gleichen Größe und nennen dieses „ausgabe“. Dieser Movieclip ist die Vorlage der Buttons für die einzelnen Songs.
Danach klicken Sie mit der rechten Maustaste in der Bibliothek auf den Movieclip „linkClip“ und wählen im Kontextmenü dem Punkt „Verknüpfung…“. Im folgenden Fenster setzen Sie dann einen Hacken vor „Export für ActionScript“ und geben dem Movieclip den Bezeichner „linkClip“.

Verknüpfungseigenschaften des Movieclips „linkClip“

Funktion

Im ersten Schlüsselbild der Hauptzeitleiste soll das XML-Dokument geladen und verarbeitet werden. Dazu dient das folgende Skript:

_root.soundon = false;
_root.balken._width = 0;
_root.soundgeladen = false;
_root.aktSong = "Kein Song geladen.";

xmlMenu = new XML();
xmlMenu.ignoreWhite = true;

xmlMenu.onLoad = function()
{
if (xmlMenu.loaded && xmlMenu.hasChildNodes)
{
   menuPunkt = this.firstChild.childNodes;
   for (var i = 0; i < menuPunkt.length; i++)
   {
     _root.eintrag = _root.attachMovie("linkClip", "linkClip" + i, i);
     _root.eintrag._x = 115;
     _root.eintrag._y = 150+_root.linkClip1._height*i*1.1; _root.eintrag.titel =
                                   menuPunkt[i].attributes.interpret+" - "+menuPunkt[i]
                                  .attributes.titel;
      _root.eintrag.ausgabe.text = _root.eintrag.titel;
      _root.eintrag.meineURL = menuPunkt[i].attributes.url;

      _root.eintrag.onRelease = function()
      {
         if(_root.soundon == true)
         {
            _root.meinSound.stop();
            _root.meinSound.loadSound(this.meineURL, false);
            _root.eintrag.titel = this.titel;

            testSound = function(){

               a = _root.meinSound.getBytesLoaded();
               b = _root.meinSound.getBytesTotal();
               if(a==b){
                  _root.meinSound.start();
                  _root.aktSong = _root.eintrag.titel;
                  _root.play_pause.gotoAndStop(2);

                  clearInterval(intervalID);
               }
               else{
                  _root.aktSong = "Song wird geladen...";
               }
            }
            intervalID = setInterval(testSound,50);

         }
         else
         {
            _root.meinSound = new Sound();
            _root.meinSound.loadSound(this.meineURL, false);
            _root.eintrag.titel = this.titel;

            testSound = function(){

               a = _root.meinSound.getBytesLoaded();
               b = _root.meinSound.getBytesTotal();
               if(a==b){
                  _root.meinSound.start();
                  _root.aktSong = _root.eintrag.titel;
                  _root.soundon=true;
                  _root.soundgeladen = true;
                  _root.play_pause.gotoAndStop(2);

                  clearInterval(intervalID);
               }
               else{
                  _root.aktSong = "Song wird geladen...";
               }
            }
            intervalID = setInterval(testSound,50);

         }
      }
   }
}
}

xmlMenu.load("playlist.xml");


Erklärung:

_root.soundon = false;

„soundon“ ist eine Hilfsvariable, die anzeigt ob ein Sound läuft. Diese wird beim Start des Filmes auf false gesetzt.

_root.balken._width = 0;

Die Breite des Fortschrittsbalkens wird beim Start auf 0 gesetzt.

_root.soundgeladen = false;

Diese Hilfsvariable zeigt an, ob ein Sound geladen ist. Beim Start ist diese Variable false.

_root.aktSong = "Kein Song geladen.";

Im Textfeld "TF_aktSong" wird beim Start des Filmes „Kein Song geladen“ ausgegeben.

xmlMenu = new XML();

Es wird eine neue Instanz des XML-Objekts erzeugt.

xmlMenu.ignoreWhite = true;

Diese Eigenschaft weist an leere Textkonten im XML-Objekt zu ignorieren.

xmlMenu.onLoad = function(){

Diese Funktion wird ausgeführt, wenn die XML-Datei geladen wurde.

if (xmlMenu.loaded && xmlMenu.hasChildNodes) {

Wenn das XML-Objekt geladen wurde und Child-Knoten hat, werden die folgenden Aktionen ausgeführt.

menuPunkt = this.firstChild.childNodes;

Diese Funktion gibt ein Array mit den Child-Knoten im Bezug auf den ersten Knoten zurück.

for (var i = 0; i < menuPunkt.length; i++){

In einer for-Schleife wir das Array durchlaufen.

_root.eintrag = _root.attachMovie("linkClip", "linkClip" + i, i);

Auf der Bühne wird eine Instanz des Movieclips "linkClip" hinzugefügt welche den Instanznamen „linkClip+i“ bekommt, wobei i die Zählvariable der for-Schleife ist.

_root.eintrag._x = 115;

Die Position der X-Koordinate der neuen Movieclipinstanz wird festgelegt.

_root.eintrag._y = 150 + _root.linkClip1._height * i * 1.1;

Die Position der Y-Koordinate der neuen Movieclipinstanz wird berechnet.

_root.eintrag.titel = menuPunkt[i].attributes.interpret+" - "+
menuPunkt[i].attributes.titel;

Interpret und Titel werden aus den Attributen des XML-Dokuments ermittelt.

_root.eintrag.ausgabe.text = _root.eintrag.titel;

Die Variable „titel“ wird im Textfeld "ausgabe" der „linkClip“-Movieclips ausgegeben.

_root.eintrag.meineURL = menuPunkt[i].attributes.url;

Die URL des Sounds wird aus den Attributen des XML-Dokuments ermittelt.

_root.eintrag.onRelease = function(){

Wenn die Movieclip-Instanz angeklickt wird, werden die folgenden Aktionen ausgeführt.

if(_root.soundon == true){

Wenn der Sound bereits läuft, wird folgendes ausgeführt:

_root.meinSound.stop();

Der Sound wird angehalten.

_root.meinSound.loadSound(this.meineURL, false);

Der neue Sound aus der Variablen “meineURL” wird in das Sound-Objekt geladen (streaming ist false).

_root.eintrag.titel = this.titel;

Den aktuellen Titel auslesen.

testSound = function(){

Diese Funktion testet im Intervall ob der Sound geladen wurde.

a = _root.meinSound.getBytesLoaded();

Die bereits geladenen Bytes werden ermittelt.

b = _root.meinSound.getBytesTotal();

Die Anzahl aller Bytes wir ermittelt.

if(a==b){

Wenn alle Bytes geladen wurden, werden die folgenden Funktionen ausgeführt.

_root.meinSound.start();

Der Sound wird wiedergegeben, beginnend bei 0 Sekunden.

_root.aktSong = _root.eintrag.titel;

Die Variable „titel“ wird über die Variable „aktSong“ im Textfeld "TF_aktSong" ausgegeben.

_root.play_pause.gotoAndStop(2);

Es wird ins Bild 2 des MC "play_pause" gesprungen um den Pause-Button anzuzeigen.

clearInterval(intervalID);
}

Das Intervall wir gelöscht.

else{
_root.aktSong = "Song wird geladen...";
}
}

Solange noch nicht alle Bytes geladen sind, wird „Song wird geladen…“ ausgegeben.

intervalID = setInterval(testSound,50);

Die Funktion testSound wird im Intervall von 50 ms abgespielt. Die IntervallID wird von der Funktion setIntervall zurückgegeben und benötigt um das Intervall wieder zu löschen.

}
else
{

Wenn beim Drücken des Movieclips noch kein Sound lief, werden die folgenden Aktionen ausgeführt:

_root.meinSound = new Sound();

Es wird eine neue Instanz des Sound-Objekts erzeugt.

_root.meinSound.loadSound(this.meineURL, false);
_root.eintrag.titel = this.titel;

Der Sound wird geladen und der Titel ermittelt.

testSound = function(){

Diese Funktion testet im Intervall ob der Sound geladen wurde.

a = _root.meinSound.getBytesLoaded();

Die bereits geladenen Bytes werden ermittelt.

b = _root.meinSound.getBytesTotal();

Die Anzahl aller Bytes wir ermittelt.

if(a==b){

Wenn alle Bytes geladen wurden, werden die folgenden Funktionen ausgeführt.

_root.meinSound.start();

Der Sound wird wiedergegeben, beginnend bei 0 Sekunden.

_root.aktSong = _root.eintrag.titel;

Die Variable „titel“ wird über die Variable „aktSong“ im Textfeld "TF_aktSong" ausgegeben.

_root.soundon=true;
_root.soundgeladen = true;

Die Hilfsvariablen „soundon“ und „soundgeladen“ werden gesetzt.

_root.play_pause.gotoAndStop(2);

Es wird ins Bild 2 des MC "play_pause" gesprungen um den Pause-Button anzuzeigen.

clearInterval(intervalID);
}

Das Intervall wir gelöscht.

else{
_root.aktSong = "Song wird geladen...";
}
}

Solange noch nicht alle Bytes geladen sind, wird „Song wird geladen…“ ausgegeben.

intervalID = setInterval(testSound,50);

Die Funktion testSound wird im Intervall von 50 ms abgespielt. Die IntervallID wird von der Funktion setIntervall zurückgegeben und benötigt um das Intervall wieder zu löschen.

}
}}}}

xmlMenu.load("playlist.xml");

Das XML-Dokument „playlist.xml“ wird in das XML-Objekt geladen.


Nun soll sich auch noch der Fortschrittsbalken bewegen, wenn der Sound läuft. Das Skript dafür und zum vor- und zurückspulen platzieren Sie auf der Movieclipinstanz „sound_container“.

onClipEvent (enterFrame)
{

if(_root.soundon == true)
{
   _root.prozent = Math.ceil((_root.meinSound.position/
   _root.meinSound.duration)*100);
   _root.balken._width = _root.prozent*3.2;
}

if(_root.vorlaufSignal)
{
   _root.meinSound.stop();
   _root.soundon=false;
   offset = (_root.meinSound.position + 3000)/1000;
   _root.meinSound.start(offset);
   _root.soundon=true;
}

if(_root.ruecklaufSignal)
{
   _root.meinSound.stop();
   _root.soundon=false;
   offset = (_root.meinSound.position - 3000)/1000;
   _root.meinSound.start(offset);
   _root.soundon=true;
}
}

Erklärung:

onClipEvent (enterFrame) {

if(_root.soundon == true)
{
   _root.prozent = Math.ceil((_root.meinSound.position/
   _root.meinSound.duration)*100);
   _root.balken._width = _root.prozent*3.2;
}

Jedes Mal, wenn der Movieclip abgespielt wird, und die Hilfsvariable „soundon“ true ist, wird aus den Eigenschaften „position“ und „duration“ (Position und Länge des Sounds) der aktuelle Prozentwert des bereits abgespielten Sounds berechnet. Danach wird dieser Wert mit 3,2 multipliziert (weil der Fortschrittsbalken 320 Pixel breit ist) und der Breite des Movieclips „balken“ zugewiesen.

if(_root.vorlaufSignal)
{
   _root.meinSound.stop();
   _root.soundon=false;
   offset = (_root.meinSound.position + 3000)/1000;
   _root.meinSound.start(offset);
   _root.soundon=true;
}

Wenn das Vorlaufsignal gesetzt ist, wird der Sound angehalten und die Hilfsvariable “soundon” auf false gesetzt. Danach werden zur aktuellen Position des Sounds in Millisekunden 3000 ms dazuaddiert und durch 1000 geteilt, um Sekunden zu erhalten. Dieser Wert ist die neue Abspielposition und wird der Variablen „offset“ zugewiesen. Danach wird der Sound an dieser Stelle wieder gestartet und die Hilfsvariable „soundon“ wieder auf true gesetzt.

if(_root.ruecklaufSignal)
{
   _root.meinSound.stop();
   _root.soundon=false;
   offset = (_root.meinSound.position - 3000)/1000;
   _root.meinSound.start(offset);
   _root.soundon=true;
}
}

Ist das Rücklaufsignal gesetzt, wird im Prinzip der gleiche Vorgang durchgeführt, nur das in diesem Fall die Abspielposition um 3 Sekunden verringert wird.


Als nächstes wenden Sie sich am Besten den Steuerungs-Buttons zu. Das folgende Skript ist für den Stopp-Button gedacht:

on (release)
{
_root.meinSound.stop();
_root.soundon=false;
_root.offset_pause = 0;
_root.balken._width = 0;
_root.play_pause.gotoAndStop(1);
}

Erklärung:

Zuerst wird der Sound angehalten und die Hilfsvariable „soundon“ auf false gesetzt. Die Variable „offset_pause“ und die Breite des Movieclips „balken“ bekommen den Wert 0 zugewiesen. Zuletzt wird ins erste Bild des Movieclips „play_pause“ gesprungen um den Play-Button anzuzeigen.
Die Variable „offset_pause“ ist dabei dafür gedacht die Abspielposition zu speichern, sie wird verwendet wenn der Play-Button gedrückt wird.

Das nächste Skript gehört zum Play-Button im Movieclip „play_pause“:

on (press)
{
if(_root.soundgeladen == true)
{
   _root.meinSound.start(_root.offset_pause);
   _root.soundon = true;
   gotoAndPlay(2);
}
}

Erklärung:

Wenn ein Sound geladen ist, dann wird dieser durch Drücken des Buttons an der Position „offset_pause“ fortgesetzt. Danach wird die Hilfsvariable „soundon“ auf true gesetzt und ins zweite Bild dieses Movieclips gesprungen, wo dann der Pause-Button angezeigt wird.

Dieser Pause-Button soll dann folgendes Skript ausführen:

on (press)
{
_root.offset_pause = _root.meinSound.position/1000;
_root.meinSound.stop();
_root.soundon = false;
gotoAndPlay(1);
}

Erklärung:

Beim Drücken des Buttons wird zuerst die aktuelle Abspielposition in der Variablen „offset_pause“ gespeichert. Die Division durch 1000 erfolgt dabei um Sekunden zu erhalten. Danach wird der Sound angehalten, die Hilfsvariable „soundon“ auf false gesetzt uns zurück ins erste Bild des Movieclips gesprungen, wo wieder der Play-Button angezeigt wird.


Den Button zum Zurückspulen belegen Sie mit dem folgenden Skript:

on (press)
{
if(_root.soundon == true)
{
   _root.ruecklaufSignal = 1;
   _root.vorlaufSignal = 0;
}
}

on (release)
{
if(_root.soundon == true)
{
   _root.ruecklaufSignal = 0;
   play_pause.gotoAndStop(2);
}
}

on (releaseOutside)
{
if(_root.soundon == true)
{
   _root.ruecklaufSignal = 0;
   play_pause.gotoAndStop(2);
}
}

Erklärung:

Wenn dieser Button gedrückt wird und der Sound gerade läuft, wird das Rücklaufsignal auf true gesetzt. Dadurch werden die dafür vorgesehenen Aktionen des Movieclips „sound_container“ ausgeführt. Beim Loslassen des Buttons, egal ob innerhalb oder außerhalb der Schaltfläche, wird das Rücklaufsignal wieder auf false gesetzt und ins zweite Bild des Movieclips „play_pause“ gesprungen. Dadurch wird der Pause-Button angezeigt.

Das Skript für den Vorlauf-Button funktioniert analog zum vorherigen, nur dass diesmal das Vorlaufsignal true gesetzt wird:

on (press)
{
if(_root.soundon == true)
{
   _root.ruecklaufSignal = 0;
   _root.vorlaufSignal = 1;
}
}

on (release)
{
if(_root.soundon == true)
{
   _root.vorlaufSignal = 0;
   play_pause.gotoAndStop(2);
}
}

on (releaseOutside)
{
if(_root.soundon == true)
{
   _root.vorlaufSignal = 0;
   play_pause.gotoAndStop(2);
}
}


Jetzt fehlen nur noch die Buttons des „ton“-Movieclips. Für den Button „ton_an“ verwenden Sie folgendes Skript:

on (release)
{
_root.meinSound.setVolume(0);
gotoAndPlay(2);
}

Erklärung:

Durch die Funktion setVolume(0) wird die Lautstärke des Sound-Objekts auf 0% gesetzt. Danach wird ins zweite Bild des Movieclips gesprungen.
Um den Sound mit dem Button „ton_aus“ nun wieder anzuschalten muss dieser mit dem folgenden Skript belegt werden:

on (release)
{
_root.meinSound.setVolume(100);
gotoAndPlay(1);
}

Erklärung:

Hier wird die Lautstärke des Sound-Objekts wieder auf 100% gesetzt und ins erste Bild zurückgesprungen.

Damit sind nun alle Funktionen des MP3-Players programmiert und Sie können den Film veröffentlichen.

MP3-Player

  Download mp3Player.fla (7,6MB)