Dynamische Bildgalerie
Wie oft haben wir schon vor unseren Flash Filmen gesessen und erschrocken feststellen müssen, dass der Film selbst als SWF viel zu gross ist, um noch eine ausreichend grosse Zielgruppe anzusprechen. Noch gehören die DSL- und Standleitungen nicht zum Standard, und daher sollte auch für Flash Designer und Entwickler die Devise lauten, die SWF so klein wie möglich zu halten.
In den meisten Fällen führt dies zu einem Spagat zwischen Qualität und Quantität. Es steht uns jedoch noch eine Alternative zur Verfügung: wie wäre es, wenn man die Inhalte, wie Bilder, Sound und zusätzliche Flash Filme dynamisch und in Echtzeit einbindet?
Der eigentliche Flash Film wird somit lediglich als Ladeplattform genutzt. Ein weiterer Vorteil liegt in der Tatsache, dass nicht sämtliche Inhalte auf einmal geladen werden müssen und somit die Wartezeit wesentlich verkürzt werden kann. Die Zeiten der endlosen Preload-Vorgänge gehören der Vergangenheit an.
Dynamisch Bilder und Flash Filme
Was das einlesen von Bildern und Flash Filmen (SWF) in Echtzeit betrifft, steht die Methode loadMovie() zur Verfügung.
loadMovie(„bild1.jpg“,this);
Die veraltetet Methode loadMovieNum() sollte nicht mehr verwendet werden. Da das Einlesen von Inhalten auf unterschiedlichen Ebenen (_level0-_levelN) durchaus zu Problemen führen kann.
loadMovieNum(„bild1.jpg“,1);
Natürlich können wir auch ohne weiteres Flash Filme (SWF) dynamisch einlesen.
loadMovie(„flashfilm.swf“,“film_mc“);
Achtung: Ohne zusätzliche Hilfsmittel lassen sich in Flash lediglich Bilder im Standard-JPEG Format und Flash Filme (SWF-Dateien) einlesen. Sollte eine JPEG-Datei sich mal nicht einlesen lassen, wäre ein Blick auf das Format sicher nicht falsch. Es könnte sich um eine Progressive JPEG-Datei handeln. Diese kann Flash nicht verarbeiten!
Sollten noch zusätzliche Inhalte, wie Texte benötigt werden, kommen wir im nächsten Abschnitt zu einem interessanten Punkt.
Flash und das XML-Objekt
Nachdem nun geklärt ist, welche Methode uns beim einlesen der externen Daten behilflich sein wird, sollten wir uns nun einem weiteren Schwerpunkt zu wenden nämlich dem Einsatz einer XML gestützten Lösung für unser Projekt.
Der Aufbau unserer XML-Datei für das Projekt ist nicht besonders komplex ausgefallen. Das muss jedoch auch nicht. Die Datei liefert uns die benötigten Zusatzinformationen, wie die Struktur, Anzahl der Bilder (Einträge), Bildnamen und Bildpfad. Als diese Daten können innerhalb des Flash Films eingelesen und verarbeitet werden. Hierbei wird uns das XML-Objekt behilflich sein, welches übrigens bereits seit Flash 5 zur Verfügung steht.
Es bietet uns zahreiche Eigenschaften und Methoden, mit denen wir eine solche XML-Datei samt Struktur verwalten und verarbeiten können. Wir werden als erstes klären, wie die XML-Datei eingelesen wird.
mein_xml = new XML();
// Störende Leerzeichen ignorieren
mein_xml.ignoreWhite = true;
// XML-Datei einlesen
mein_xml.load(„bilddaten.xml“);
Natürlich haben wir auch die Möglichkeit den Lesevorgang zu überprüfen und die ankommenden Daten zu verarbeiten. Zur Überprüfung steht uns aus dem XML-Objekt die onLoad-Ereignisprozedurmethode samt status-Parameter zur Verfügung und die Eigenschaft loaded.
mein_xml.onLoad = function(status) {
if (status && this.loaded) {
…
}
};
Nachdem nun die XML-Daten dynamisch eingelesen wurden, können diese verarbeitet werden. Innerhalb der onLoad-Ereignisprozedurmethode stellen sich die Anweisungen wie folgt dar:
mein_xml.onLoad = function(status) {
if (status && this.loaded) {
anzahl = mein_xml.firstChild.childNodes.length;
geladen = true;
aktbild = 0;
ladeBild(aktBild);
}
};
Mit Hilfe der Eigenschaft firstChild und childNodes lassen sich die Strukturen des XML-Objekts verarbeiten. Die Variablenanzahl erhält die Anzahl der im XML-Objekt enthaltenen Einträge. Diese werden auch als Knoten (nodes) bezeichnet.
Hinweis: Die XML-Eigenschaft childNodes verhält sich wie ein Array, d.h. sie enthält sämtliche Einträge eines übergeordneten XML-Knotens. In unserem Fall enthält der übergeordnete XML-Knoten
Funktion zur Verarbeitung der XML-Daten
Wir kommen nun zur weiteren Verarbeitung der XML-Daten durch eine benutzerdefinierte Funktion ladeBild(). Der Aufruf der Funktion hat übrigens bereits im Lesevorgang stattgefunden (siehe ladeBild(aktBild)).
function ladeBild(paktBild) {
status_mc._visible = 1;
bild = mein_xml.firstChild.childNodes[paktBild].attributes.pic;
bildname = mein_xml.firstChild.childNodes[paktBild].attributes.name;
loadMovie(bild, „bild_mc“);
titel_txt.text = bildname;
}
Wie wir sehen, enthält die Funktion die loadMovie-Methode – und noch etwas ist interessant: die Verarbeitung der XML-Daten aus unserem XML-Objekt.
bildname = mein_xml.firstChild.childNodes[paktBild].attributes.name;
Die beiden Variablen bild und bildname enthalten nach der Verarbeitung des jeweiligen XML-Unterknoten den Bildnamen (Titel) und Bildpfad (Pfad+Dateiname). Hierbei werden die Attribute des jeweiligen XML-Unterknoten mit Hilfe der XML-Anweisung attributes verarbeitet. Der Zugriff auf die Inhalte der Attribute erfolgt über den Attributsnamen (z.B. pic und name).
Falbeispiel – erster Unterknoten:
bildname = mein_xml.firstChild.childNodes[0].attributes.name;
Resultat:
bildname = „bilder/bild1.jpg“;
Falbeispiel – zweiter Unterknoten:
bildname = mein_xml.firstChild.childNodes[1].attributes.name;
Resultat:
bildname = „bilder/bild2.jpg“;
Hinweis: Der Parameter unsere Funktion ladeBild – paktBild sorgt im Zusammenspiel mit childNodes dafür, das wir pro Bild-Ladevorgang das passende Bild erhalten und die zugehörigen XML-Daten verarbeitet werden.
Navigation der Dynamischen Bildgalerie
Als nächstes sollte die Navigation der dynamischen Bildgalerie umgesetzt werden. Wir wollen schliesslich mehr als nur ein Bild abrufen können. Zur Navigation werden zwei Schaltflächen benötigt. Deren Instanznamen lauten weiter_btn und zuruck_btn. Die Codezeilen für die Schaltflächen lauten:
weiter_btn.onRelease = function() {
if (geladen && aktbild
ladeBild(aktBild);
}
};
// Zurück Schalter
zuruck_btn.onRelease = function() {
if (geladen && aktbild>0) {
aktbild–;
ladeBild(aktBild);
}
};
Die Abfrage und die Variable geladen verhindert, dass die Navigation vom Nutzer zu früh aktiviert werden kann. Schliesslich muss sicher gestellt sein, dass die XML-Datei vollständig eingelesen wurde. Zusätzlich wird die Bedingung der Abfrage um eine weitere Bedingung erweitert, die dafür sorgt, dass die Interaktion der Schaltflächen dafür sorgt, dass die Navigation lediglich von ersten bis zum letzten Bild erfolgt und der Nutzer anschliessend den Zurück-Schalter betätigen muss, um wieder zurück zu kommen.
Hinweis: Bis zu diesem Punkt sollten sämtliche Codezeilen im ersten Bild der Hauptzeitleiste angelegt werden.
Bildbehälter – MovieClip
Was zur Realisierung des Projekts benötigt, wird ist ein MovieClip, in dem die eingelesenen Bilder oder Flash Filme angezeigt werden können. Der Instanzname des MovieClips wurde bereits innerhalb der benutzerdefinierten Funktion ladeBild festgelegt (siehe loadMovie(bild, „bild_mc“);) – bild_mc.
Die Bibliothek stellt sich durch die Ordner recht übersichlich dar:
Auf dem MovieClip selbst befinden sich zusätzliche Codezeilen, welche für die Realisierung der Visualisierung unseres Ladevorgang sorgen. Hierfür werden neben einem Statusbalken MovieClip (status_mc) zusätzlich zwei dynamische Textfelder (counter_txt und loading:_txt) benötigt.
if (this._url != this._parent._url && !this.loaded) {
var kilobytes = Math.ceil(this.getBytesTotal()/1024);
var prozent = Math.ceil((this.getBytesLoaded()/this.getBytesTotal())*100);
this._parent.counter_txt.text = „Lade „+prozent+“% of „+kilobytes+“k“;
this._parent.loading_txt.text = „Bild wird geladen – Bitte warten!“;
this._parent.status_mc._width = prozent*2;
if (prozent == 100) {
i++;
if (i == 20) {
this.loaded = true;
this._parent.counter_txt.text = „“;
this._parent.loading_txt.text = „“;
this._parent.status_mc._visible = 0;
delete i;
}
}
}
}
Hinweis: Was die onClipEvent-Ereignisprozedurmethoden betrifft, dürfen wir ruhig auch noch zu Flash MX und Flash MX 2004 Zeiten darauf zurückgreifen – lassen Sie sich also nichts einreden.
Nachdem die Codezeilen auf dem MovieClip abgelegt wurden, können wir uns dem Layout zuwenden – schliesslich isst das Auge mit.
Der Inhalt der Zeitleisten Ebenen stellt sich wie folgt dar:
Natürlich stellt der Aufbau der Zeitleisten Ebenen lediglich ein Modell von vielen dar. Wie heisst es so schön: Ordnung ist das halbe Leben – aber auch ein geordnetes Chaos kann entzücken.
Fazit
Wie man sieht, ist ein dynamisches Projekt in Flash nichts Utopisches, und vor allem, was die Optimierung der Filmgrösse betrifft, haben wir mit dem vorliegenden Beispiel sicher das Optimum rausgeholt. Die SWF-Datei ist gerade mal 2 Kilobytes gross und wäre mit sämtlichen Bildern sicher um einiges grösser ausgefallen! Viel Erfolg bei der Realisierung!
