Einfache Preloader in Flash MX Teil 1
Das im Web-Jargon häufig als Preloading bezeichnete Vorladen von Flash-Filmen ist eine der bedeutsamsten Funktionen in Flash. Wenn Sie auf größere Datenmengen in Ihren Flash-Filmen nicht verzichten können und dennoch auch in Zukunft auf Ihre Besucher zählen wollen, dann werden Sie früher oder später an einem Preloader nicht vorbeikommen. Die Folgen eines nicht vorhandenen Preloaders sind vielgestaltig. Bedenken Sie, dass auch im Zeitalter der schnellen DSL-Verbindungen ein erheblicher Anteil an Internet-Anwender mit einem Modem oder ISDN-Zugang surfen. Bei einem Modem-Benutzer kommt es bereits ab kleineren Datengrößen von wenigen Kilobyte zu erheblichen Verzögerungen. Erhält der Benutzer keine Informationen über die Dateigröße, so kann er die benötigte Zeit zum Vorladen des Flash-Films nicht einschätzen. Eine häufige Folge ist der Abbruch des Ladevorgangs und somit der Verlust eines Besuchers. Aber auch wenn der Benutzer den Ladevorgang nicht abbricht, macht das Vorladen der notwendigen Daten Sinn. Durch das Preloading können Sie verhindern, dass die Animation während des Abspielens ins Stocken gerät oder aber der Sound asynchron zum Film läuft. Es gibt also genügend gute Gründe einen Preloader zu verwenden.
Ein einfacher Preloader besteht lediglich aus drei Bildern. Das erste Bild überprüft, ob die gewünschten Daten bereits vollständig geladen wurden oder nicht. Sind die Daten noch nicht geladen, so spielt der Film vorerst normal weiter. Im zweiten Bild befindet sich lediglich eine Anweisung, die den Abspielzeiger wieder in das erste Bild springen lässt. Wir gelangen also erneut zur Abfrage des ersten Bildes. Sobald alle Daten geladen wurden, springen wir direkt in das dritte Bild und übergehen so die Rücksprunganweisung vom zweiten Bild.
Kommen wir von der Theorie zur Praxis. Erstellen Sie ein neues Flash-Dokument. Geben Sie der bestehenden Ebene den Namen „Anzeige“. Erstellen Sie nun im ersten Bild für den Benutzer einen Hinweis, dass die benötigten Daten gerade geladen werden. Erzeugen Sie anschließend im zweiten Bild ein Schlüsselbild, sodass der Hinweis ebenso in diesem Bild vorhanden ist. Erstellen Sie nun eine zweite Ebene und benennen Sie diese in „Aktionen“ um. Platzieren Sie im ersten Bild der Ebene folgenden ActionScript:
Das Script verwendet zwei Methoden, die eigentlich für Filmsequenzen gedacht sind. Sie lassen sich jedoch auch problemlos auf die Hauptzeitleiste anwenden. Die Methode getBytesTotal() liefert die Größe der SWF-Datei in Bytes. Mit getBytesLoaded() erhalten wir wiederum die Anzahl der bereits geladenen Bytes. In früheren Flash-Versionen wurde anstelle der Methoden gerne der Befehl „ifFrameLoaded“ verwendet. Dieser Befehl wurde jedoch in Flash MX als „Deprecated“ eingestuft. In naher Zukunft wird der Flash-Player diesen Befehl also nicht mehr unterstützen. Also sollten Sie bereits jetzt auf die Anwendung verzichten. Sobald die Methode getBytesLoaded() die gleiche Bytezahl liefert, wie getBytesTotal() - der Film also geladen ist - führen wir mit „gotoAndPlay(3)“ einen Sprung zum dritten Bild durch. Sollte die Bedingung nicht erfüllt sein, so läuft der Film normal weiter. Im zweiten Bild platzieren wir nun unsere Rücksprunganweisung zu Bild 1. So gewähren wir eine stetige Überprüfung des Ladevorgangs, bis der Film letztendlich vollständig geladen wurde. Fügen Sie hierfür in das zweite Bild ein Schlüsselbild ein und platzieren Sie anschließend folgendes ActionScript in dem Bild:
Der Preloader ist komplett. Bei Bedarf können Sie den Aufbau des hier vorgestellten Preloaders der beigefügten Beispieldatei entnehmen. Der Preloader besitzt bisher keine großen Datenmengen ab dem dritten Bild der Zeitleiste. Derzeit würde sich der Einsatz des Preloaders also noch gar nicht lohnen. Importieren Sie ein paar Bilder oder Sounddateien und fügen Sie diese der Zeitleiste hinzu. Nun wollen Sie Ihren Preloader sicherlich auch testen. Betätigen Sie hierfür die Tastenkombination Strg + Enter. Natürlich wird der Film lokal viel zu schnell geladen, so dass Sie den Preloader vermutlich gar nicht erst zu sehen bekommen. Betätigen Sie erneut die Tastekombination Strg + Enter oder wählen Sie im Menü „Ansicht“ den Menüeintrag „Download simulieren“. Definieren Sie im gleichen Menü unter „Download-Einstellungen“ die zu simulierende Download-Geschwindigkeit. Bei Bedarf können Sie sich weitere Informationen über den Bandbreiten-Profiler anzeigen lassen. Aktivieren Sie hierfür wiederum im Menü „Ansicht“ den Haken unter „Bandbreiten-Profiler“.
Mit dem bisher entworfenen Preloader verhindern wir das besagte Stocken während der Animation bzw. das asynchrone Abspielen von Sound und Film. Die dritte Vorgabe, den Besucher über den Fortschritt des Ladevorgangs aufzuklären, haben wir bisher nicht erfüllt. Dies wollen wir im zweiten Teil des Artikels durch einen erweiterten Preloader mit Prozentanzeige und Ladebalken nachholen.
Beispieldatei: Preloader mit Animation [Einfache_Preloader_in_Flash_MX_Teil1.zip]
Ein einfacher Preloader besteht lediglich aus drei Bildern. Das erste Bild überprüft, ob die gewünschten Daten bereits vollständig geladen wurden oder nicht. Sind die Daten noch nicht geladen, so spielt der Film vorerst normal weiter. Im zweiten Bild befindet sich lediglich eine Anweisung, die den Abspielzeiger wieder in das erste Bild springen lässt. Wir gelangen also erneut zur Abfrage des ersten Bildes. Sobald alle Daten geladen wurden, springen wir direkt in das dritte Bild und übergehen so die Rücksprunganweisung vom zweiten Bild.
Kommen wir von der Theorie zur Praxis. Erstellen Sie ein neues Flash-Dokument. Geben Sie der bestehenden Ebene den Namen „Anzeige“. Erstellen Sie nun im ersten Bild für den Benutzer einen Hinweis, dass die benötigten Daten gerade geladen werden. Erzeugen Sie anschließend im zweiten Bild ein Schlüsselbild, sodass der Hinweis ebenso in diesem Bild vorhanden ist. Erstellen Sie nun eine zweite Ebene und benennen Sie diese in „Aktionen“ um. Platzieren Sie im ersten Bild der Ebene folgenden ActionScript:
001:002:003:
if (getBytesLoaded() == getBytesTotal()) { gotoAndPlay (3); }
Das Script verwendet zwei Methoden, die eigentlich für Filmsequenzen gedacht sind. Sie lassen sich jedoch auch problemlos auf die Hauptzeitleiste anwenden. Die Methode getBytesTotal() liefert die Größe der SWF-Datei in Bytes. Mit getBytesLoaded() erhalten wir wiederum die Anzahl der bereits geladenen Bytes. In früheren Flash-Versionen wurde anstelle der Methoden gerne der Befehl „ifFrameLoaded“ verwendet. Dieser Befehl wurde jedoch in Flash MX als „Deprecated“ eingestuft. In naher Zukunft wird der Flash-Player diesen Befehl also nicht mehr unterstützen. Also sollten Sie bereits jetzt auf die Anwendung verzichten. Sobald die Methode getBytesLoaded() die gleiche Bytezahl liefert, wie getBytesTotal() - der Film also geladen ist - führen wir mit „gotoAndPlay(3)“ einen Sprung zum dritten Bild durch. Sollte die Bedingung nicht erfüllt sein, so läuft der Film normal weiter. Im zweiten Bild platzieren wir nun unsere Rücksprunganweisung zu Bild 1. So gewähren wir eine stetige Überprüfung des Ladevorgangs, bis der Film letztendlich vollständig geladen wurde. Fügen Sie hierfür in das zweite Bild ein Schlüsselbild ein und platzieren Sie anschließend folgendes ActionScript in dem Bild:
001:
gotoAndPlay(1);
Der Preloader ist komplett. Bei Bedarf können Sie den Aufbau des hier vorgestellten Preloaders der beigefügten Beispieldatei entnehmen. Der Preloader besitzt bisher keine großen Datenmengen ab dem dritten Bild der Zeitleiste. Derzeit würde sich der Einsatz des Preloaders also noch gar nicht lohnen. Importieren Sie ein paar Bilder oder Sounddateien und fügen Sie diese der Zeitleiste hinzu. Nun wollen Sie Ihren Preloader sicherlich auch testen. Betätigen Sie hierfür die Tastenkombination Strg + Enter. Natürlich wird der Film lokal viel zu schnell geladen, so dass Sie den Preloader vermutlich gar nicht erst zu sehen bekommen. Betätigen Sie erneut die Tastekombination Strg + Enter oder wählen Sie im Menü „Ansicht“ den Menüeintrag „Download simulieren“. Definieren Sie im gleichen Menü unter „Download-Einstellungen“ die zu simulierende Download-Geschwindigkeit. Bei Bedarf können Sie sich weitere Informationen über den Bandbreiten-Profiler anzeigen lassen. Aktivieren Sie hierfür wiederum im Menü „Ansicht“ den Haken unter „Bandbreiten-Profiler“.
Mit dem bisher entworfenen Preloader verhindern wir das besagte Stocken während der Animation bzw. das asynchrone Abspielen von Sound und Film. Die dritte Vorgabe, den Besucher über den Fortschritt des Ladevorgangs aufzuklären, haben wir bisher nicht erfüllt. Dies wollen wir im zweiten Teil des Artikels durch einen erweiterten Preloader mit Prozentanzeige und Ladebalken nachholen.
Beispieldatei: Preloader mit Animation [Einfache_Preloader_in_Flash_MX_Teil1.zip]
