Flash Preloader von A bis Z

Was ist ein Preloader?

Ein Preloader ist eine Technik in Flash um Daten eines zu ladenden Filmes vorzuladen. Angewandt wird diese Technik bei Flash-Filmen, bei deren Darstellung alle Bilder für eine flüssige Darstellung geladen sein müssen oder bestimmte Bilder erst dann angezeigt werden sollen, wenn sie geladen sind. Bei alle dem ist aber nicht zu vergessen, dass Flash ein Streaming-Format ist. Dies bedeutet, dass Flash bereits geladene Bilder abspielt, während im Hintergrund die restlichen Bilder geladen werden. Insofern ist gerade bei der Erstellung von Filmen, die lange Animationssequenzen auf der Hauptzeitleiste enthalten, der Einsatz eines Preloaders genau zu überlegen.

In dieser Lektion lernen Sie einige beispielhafte Preloader-Techniken kennen, die Ihnen bei der Erstellung eines Preloader helfen. Die hier vorgestellten Lösungen sind Ansatzpunkte für Ihre eigene Kreativität. Es gibt neben einigen grundlegenden Techniken sicher eine Vielzahl von Variationen, wie Daten eines oder mehrerer Flash-Filme vorgeladen werden können.


--------------------------------------------------------------------------------

Theorie und die einfachste Variante eines Preloader

Um einen einfachen Preloader zu gestalten ist es wert, sich einmal in Theorie mit einem Preloader zu beschäftigen. Mittels eines Preloader soll der abzuspielende Film solange an einer Stelle verharren, bis eine gewisse Menge an Daten des Flash-Filmes (oder gar der ganze Flash-Film) vorgeladen ist. Aber wie definieren Sie diese Datenmenge? Hier hilft das in Flash 5 integrierte ActionScript weiter, welches eine Aktion bereitstellt, mit der diese Datenmenge bestimmt werden kann. Diese Aktion ist:

ifFrameLoaded ()

Dabei ist ifFrameLoaded () eine klassische Aktion. Mit ifFrameLoaded () kann abgefragt werden, ob ein bestimmtes Bild bereits geladen worden ist. Dabei kann im Klammerausdruck eine Bildnummer der Hauptzeitleiste oder eine Bildbezeichnung angegeben werden. Hierzu zwei Beispiele:

ifFrameLoaded ("Szene 1", 200) {
tue irgendwas;
}

In diesem Beispiel wird abgefragt, ob Bildnummer 200 aus der Szene 1 bereits geladen ist. Sollte dies der Fall sein, werden die Aktionen innerhalb der geschweiften Klammern ausgeführt. Eine andere Variante wäre:

ifFrameLoaded ("Start") {
tue irgendwas;
}

Hier wird nicht nach der Bildnummer, sondern nach einer Bildbezeichnung gefragt. Es wird überprüft, ob das Bild mit der Bezeichnung "Start" bereits geladen ist. Auch hier werden die in den geschweiften Klammern stehenden Aktionen ausgeführt, wenn dies der Fall sein sollte. Mit dieser Aktion lässt sich die einfachste Variante eines Preloader gestalten. Ich empfehle immer die zweite Variante zu nehmen (also über die Bildbezeichnung), da diese sich auch späteren Änderungen Ihres Filmes anpasst. Aber wie realisieren Sie dies nun in der Praxis?

Ich empfehle für den Preloader, sei er noch so kurz, immer die erste Szene zu nehmen. Erst ab Szene 2 würde ich die eigentlichen Inhalte des Flash-Filmes integrieren. Aber das ist Geschmackssache. Bevor Sie diesen Preloader bauen, sollten Sie wissen, bis zu welchem Bild Ihr Film vorgeladen werden soll. Nehmen wir an, Sie wollen den kompletten Film vorladen, d.h. alle Bilder müssen geladen sein, bevor der Film aus Sicht des Betrachters startet. Um dies zu realisieren, muss das letzte Bild geladen sein, bevor der Film loslegt. Dieses Bild muss also in der ifFrameLoaded ()-Aktion eingebunden werden. Markieren Sie dieses Bild durch einen einfachen Mausklick und weisen dem Bild über das Bedienfeld Bild (zu erreichen über Fenster-Bedienfelder-Bild oder über STRG + F) einen eindeutigen (also einer nur einmal im Film vorkommenden) Bildbezeichnung zu.


Nun wechseln Sie in das erste Bild der ersten Szene und weisen diesem Bild folgende Aktion zu:

ifFrameLoaded ("Szene 4", "Ende") {
gotoAndPlay ("Szene 2", 1);
}

Da sich in obigen Beispiel das letzte Bild in Szene 4 befindet, ist der Ausdruck in der ifFrameLoaded ()-Aktion entsprechend erweitert. Um diese Aktion dem Bild hinzuzufügen, klicken Sie doppelt mit der Maus auf dieses Bild. Es öffnet sich der Aktionen-Editor, in dem Sie die Aktion aus dem linken Teil des Editors per Doppelklick auswählen.



Im unteren Teil des Aktionen-Editor erfolgt die Parametereingabe. Ferner fügen Sie innerhalb der geschweiften Klammern eine Aktion ein, die ausgeführt werden soll, wenn das Bild "Ende" der Szene 4 geladen ist. Im Beispiel eine einfache gotoAndPlay-Aktion, die den Film zu Bildnummer 1 der Szene 2 lenkt und von dort abspielt. Nun ist ein Flash-Film ein Film, d.h. alle Bilder des Filmes werden nacheinander abgespielt, mit Ausnahme es wird durch eine Aktion etwas anderes definiert. In obigen Beispielfilm würde diese Aktion einmal abgespielt und der Film würde dennoch weiterlaufen und die nachfolgenden Bilder abspielen. Damit der Film immer wieder in diese Abfrage zurückkehrt, muss im Bild nach dieser Aktion eine weitere Aktion integriert werden. Markieren Sie dazu das Bild mit der Maus und wandeln es durch F6 in ein Schlüsselbild um. Nun können Sie diesem Bild wie oben beschrieben, über den Aktionen-Editor folgende Aktion zuweisen:

gotoAndPlay (1);

Damit wird der Film wieder zurück in die Abfrage gelenkt und abgespielt. Dies erfolgt solange, bis das letzte Bild (Bildbezeichnung "Ende" in Szene 4) geladen ist, denn dann wird der Film zum ersten Bild der Szene 2 verwiesen. Dies wird auch als Loop bezeichnet, zu deutsch Schleife, da der Film immer um die Bildnummern 1 und 2 dieser Szene abspielt. In einer weiteren Ebene können Sie noch eine kleine Animation einbauen, die den Betrachter wissen lässt, dass Daten geladen werden. Dies ist die einfachste Variante eines Preloader, der schnell nachgebaut werden kann.


--------------------------------------------------------------------------------

Preloader mit Statusanzeige

Der Nachteil des oben beschriebenen Preloader ist, dass der Betrachter nicht erkennen kann, wie lange noch geladen werden muss, bzw. wie weit der Fortschritt des Ladevorganges ist. Eine klassische Variante eines Preloader, der den Status des Ladens anzeigt, ist ein Preloader mit einem Fortschrittsbalken. Dies ist eine Animation eines Balken, der sich erweitert, solange Daten geladen werden und voll zu sehen ist, wenn alle Daten geladen wurden. In nachfolgender Abbildung ist solch ein Fortschrittsbalken zu ersehen.



Um solch einen Preloader zu erstellen, bedarf es noch weiterer Aktionen. Diese sind:

_framesloaded
_totalframes

Diese Aktionen gehören zu den Eigenschaften. _framesloaded gibt in einem Flash-Film an, wie viele Bilder aus der Zeitleiste bereits geladen wurden. _totalframes gibt an, wie viele Bilder der Film insgesamt beinhaltet. Diese Eigenschaften sind Grundlage zur Berechnung des Ladestatus. Um diesen auszurechnen, ist das Prozentrechnen erforderlich. Allgemein kann dies so formuliert werden: Geladene Bilder geteilt durch Gesamtzahl Bilder multipliziert mit 100 ergibt als Prozentwert den Status geladener Bilder. Dieser errechnete Wert kann zur Steuerung des Fortschrittbalkens genutzt werden. Wenn noch kein Bild geladen ist, ist der Status 0% und der Fortschrittsbalken nicht zu sehen. Sind alle Bilder geladen, ist der Status 100% und der Fortschrittsbalken ist ganz zu sehen. Soviel zur Theorie, wie setzen Sie dies in Flash um?

Widmen wir uns zuerst der Erstellung des Fortschrittsbalkens. Zeichnen Sie dazu mit dem Rechteckwerkzeug ein schmales, horizontales Rechteck.



Löschen Sie die evtl. mitgezeichneten Außenlinien und markieren den Balken durch einfachen Mausklick. Erstellen Sie durch Drücken der Taste F8 aus diesem Rechteck ein Symbol mit dem Verhalten als Filmsequenz. Dazu nehmen Sie im erscheinenden Dialog folgende Einstellungen vor:



Klicken Sie nun mit der Maus doppelt auf diese neue Filmsequenz, um in deren Zeitleiste zur Bearbeitung zu wechseln. Schieben Sie nun durch Anfassen mit gedrückter Maustaste am linken Rand des Rechteckes diesen Rand an den Mittelpunkt der Filmsequenz.



Im nächsten Schritt weisen Sie dieser Filmsequenz im ersten Bild eine stop ()-Aktion hinzu. Anschließend markieren Se das 100. Bild der Zeitleiste mit einfachen Mausklick und wandeln dieses Bild mit F6 in ein Schlüsselbild um.



Damit haben Sie die Grundlage für den animierten Fortschrittsbalken gelegt. Die Animation an sich erstellen Sie, in dem Sie nun ein beliebiges Bild zwischen Bildnummer 1 und Bildnummer 100 mit der Maus markieren. Rufen Sie das Bedienfeld Bild (STRG + F) auf. Wählen Sie unter Tweening die Auswahl Form aus.



Gehen Sie zum ersten Bild dieser Filmsequenz. Dort markieren Sie den Balken und wählen das Skalierwerkzeug aus. Das Skalierwerkzeug aktivieren Sie durch Klick mit der Maus auf unten zu ersehende Schaltfläche der Optionen des Pfeilwerkzeuges. Am rechten, mittleren Anfasser packen Sie mit der Maus den Balken und verkleinern ihn horizontal, bis nur noch ein schmaler Streifen erkennbar ist. Fertig ist Ihre Animation des Fortschrittsbalken. Kehren Sie in die Hauptzeitleiste des Filmes zurück und platzieren den Fortschrittsbalken an die gewünschte Position.



Jetzt folgt die Integration des erforderlichen ActionScript zur Berechnung des Ladestatus und zur Steuerung des eben erstellten Fortschrittsbalken. Gehen wir auch hier davon aus, dass der gesamte Film vorgeladen werden soll, bevor er abspielt wird und dem Betrachter die Inhalte angezeigt werden. Also müssen auch hier alle Bilder geladen sein, bevor der Film startet. Um diese Abfrage mit den oben kennengelernten Eigenschaften zu realisieren, ist folgendes ActionScript erforderlich:

if (_framesloaded >= _totalframes) {
tue irgendwas;
}

Hier wenden wir eine if-Aktion an. Diese Aktion führt die in den geschweiften Klammern stehenden Aktionen aus, sobald der Ausdruck in den runden Klammern hinter dem if wahr ist, ansonsten wird diese Aktion ignoriert. In diesem Beispiel muss die Anzahl geladener Bilder (_framesloaded) größer oder gleich der Gesamtzahl Bilder (_totalframes) des Filmes sein, damit die in den geschweiften Klammern stehenden Aktionen ausgeführt werden. Die Anzahl der geladenen Bilder ist dann gleich oder größer der Gesamtzahl Bilder des Filmes, wenn alle Bilder geladen sind. Also muss hier innerhalb der geschweiften Klammern die Aktion stehen, die ausgeführt werden soll, wenn der Film geladen ist. Also wahrscheinlich wieder eine goto ()-Aktion, die den Film zu den eigentlichen Inhalten verweist. Nehmen wir an, diese Inhalte sind ab dem 1. Bild der Szene 2 enthalten, muss die gesamte Anweisung wie folgt lauten:

if (_framesloaded >= _totalframes) {
gotoAndPlay ("Szene 2", 1);
}

Diese Aktion weisen wir dem ersten Bild unserer ersten Szene des Filmes zu. Dabei empfiehlt es sich, im Flash-Film eine neue Ebene, die Sie mit Aktionen bezeichnen einzufügen. Damit haben Sie direkt auch Ordnung in Ihrem Film und können später direkt erkennen, wo was untergebracht ist. Um eine neue Ebene einzufügen, klicken Sie auf das kleine Symbol mit dem Plus-Zeichen unterhalb der Ebenenbezeichnungen in Ihrer Zeitleiste. Aber damit haben wir noch nicht den Status ermittelt und den Fortschrittsbalken beeinflusst. Diese Aktionen kommen in das Bildnummer 2 der ersten Szene. Dazu müssen Sie dieses erst mit F6 in ein Schlüsselbild umwandeln. In dieses Bild fügen wir nun das Actionscript ein, welches ausrechnet, wie viel Prozent der Bilder bereits geladen sind und steuern damit den Fortschrittsbalken. Ferner benötigen wir wieder eine goto ()-Aktion, welche den Film wieder an das erste Bild zurückschickt, damit geprüft werden kann, ob alle Bilder geladen sind.

Allgemein haben Sie bereits oben kennen gelernt, wie der Prozentwert ausgerechnet wird. Mit den Eigenschaften _framesloaded und _totalframes wird dies folgendermaßen in ActionScript umgesetzt:

prozent = math.ceil ((_framesloaded/_totalframes)*100);

Wenn Sie dieses ActionScript über die Aktion set variable einfügen, ist darauf zu achten, dass die Eingabe unter Wert als Ausdruck definiert wird. Dazu markieren Sie die Checkbox hinter dieser Eingabezeile.



Hier lernen Sie gleichzeitig eine weitere Aktion kennen, das math-Objekt, auf die die Eigenschaft ceil angewendet wird. Dies rundet den errechneten Prozentwert auf die nächste volle Ganzzahl auf. Also aus z.B. 11.34673 wird 12 oder aus 45,56478 wird 46. Diese Rundung benötigen Sie, weil Sie mit dem errechneten Prozentwert später Ihren Fortschrittsbalken steuern werden und da gibt es keine Bilder mit Nachkommazahlen. Noch mal zur Wiederholung: Es werden die geladenen Bilder durch die Gesamtanzahl Bilder des Flash-Filmes geteilt und mit 100 multipliziert. Dieser errechnete Wert wird auf die nächste Ganzzahl aufgerundet und der Variablen prozent zugewiesen. Als Ergebnis kommt hier ein Wert zwischen 0 und 100 heraus. Diesen Wert benötigen wir nun zur Steuerung des Fortschrittsbalken, damit auch dieser sich entsprechend dem Prozentwert der geladenen Bilder vergrößert.

Sie wollen also die Zeitleiste einer Instanz auf Ihrer Bühne beeinflussen. Dazu muss die zu steuernde Instanz einen eindeutigen Instanznamen zugewiesen bekommen. Markieren Sie die Filmsequenz mit dem Fortschrittsbalken auf Ihrer Bühne und öffnen das Bedienfeld Instanz (Fenster-Bedienfelder-Instanz oder STRG + I). In diesem Bedienfeld können Sie den Instanznamen festlegen. In der folgenden Abbildung wurde "Balken" gewählt.



Wir erinnern uns, diese Animation des Fortschrittsbalken besteht aus 100 Bildern, in denen sich der Fortschrittsbalken durch ein Formtweening vergrößert. Jedes Bild entspricht also einem errechneten Prozentwert. Um die Zeitleiste dieser Filmsequenz zu steuern, benötigen Sie folgende Aktion:

Balken.gotoAndStop(prozent);

Um diese Aktion einzugeben, verwenden Sie die Aktion evaluate, mit dieser können Sie einen frei definierten Ausdruck in Ihr ActionScript einfügen.



Mit dieser Aktion wird die Filmsequenz mit dem Instanznamen Balken gesteuert und immer an das Bild mit der Bildnummer verwiesen, die dem gerade aktuellen errechneten Prozentwert entspricht. Zur Vervollständigung des Preloader benötigen Sie im zweiten Bild noch eine Aktion, die den Film wieder zum ersten Bild verweist, damit die dort enthaltene ActionScript-Abfrage erneut ausgeführt werden kann:

gotoAndPlay (1);

Damit haben Sie wieder eine Schleife (Loop) erstellt, der solange abgespielt wird, bis die Bedingung in Bildnummer 1 erfüllt ist und der Film zu den Inhalten in Szene 2 gelenkt wird. Dieser Preloader auf Basis des Verhältnisses von geladenen Bildern zu den Gesamtbildern eines Filmes ist aber nur sinnvoll, wenn eine ausreichend große Anzahl Bildern mit unterschiedlichen Inhalten im Film vorhanden ist. Hat der Film z.B. nur zwei Bilder mit effektiven Inhalt, eignet sich der Preloader nicht, da es nur zwei zu errechnende Prozentwerte gibt und der Fortschrittsbalken zu große Sprünge macht. In solchen Fällen ist die nächste Variante eines Preloader, eines Byte-genauen Preloader wesentlich besser geeignet.


--------------------------------------------------------------------------------

Preloader auf Basis der geladenen Bytes

Ein Preloader auf Basis der geladenen Bytes stellt die Edelvariante eines Preloader dar. Musste für solch einen Preloader in Flash 4 noch mit Javascript/FSCommand getrickst werden oder mit Hilfe zusätzlicher Tools gearbeitet werden (FlaBYTE von Flashtool), bietet Flash 5 in seinem ActionScript die Grundlagen zur Realisation eines solchen Preloader rein in Flash. Dazu benötigen Sie die Aktionen:

getBytesLoaded ()
getBytesTotal ()

Mit diesen Methoden lassen sich die Gesamtbytes und die bereits geladenen Bytes eines Flash-Filmes oder einer Filmsequenz auslesen. Mit diesen beiden Werten kann man nun im Flash-Film arbeiten und rechnen. Die geladenen Bytes sind mit der Methode getBytesLoaded und die Gesamtbytes mit der Methode getBytesTotal auslesbar. Leider lässt sich nicht direkt mit diesen Methoden rechnen, sondern Sie müssen die Werte Variablen zuweisen:

Dies geschieht mit:

bytes_geladen = this.getBytesLoaded();
bytes_gesamt = this.getBytesTotal();

Die Bezeichnung this bedeutet, dass Sie sich auf die Zeitleiste beziehen, in der dieses ActionScript untergebracht ist, wenn dies die Hauptzeitleiste Ihres Flash-Filmes ist, könnten Sie auch _root nehmen.

Mit diesen Variablen können Sie nun rechnen:

prozent = (bytes_geladen/bytes_gesamt)*100;

Leider gibt auch diese Rechnung sehr krumme Werte raus, z.B. 45,98756464, das ist für die Darstellung und Steuerung nicht brauchbar, wir wollen nur ganzzahlige Ausdrücke anzeigen, das heißt, wir müssen auch hier math.ceil anwenden:

prozent = math.ceil((bytes_geladen/bytes_gesamt)*100);

Damit ist die Grundlage schon gesetzt, doch jetzt soll der Film solange die Prozentangabe aktualisieren und den Film nicht abspielen, solange dieser nicht zu 100 Prozent vorgeladen ist. Hier gibt es jetzt zwei Möglichkeiten:

1. Der Preloader läuft solange, bis alle Bilder geladen sind.

2. Der Film läuft solange, bis die Variable prozent den Wert 100 hat.

In beiden Fällen muss eine Bedingung überprüft werden und je nachdem, ob diese Bedingung erfüllt oder nicht erfüllt ist, eine Aktion geschehen. Dies bedeutet, dass sich der Preloader wie in den obigen Beispielen über mindestens zwei aufeinander folgende Bilder erstreckt.

Im ersten Bild wird die Bedingung geprüft, im zweiten Bild wird der Film wieder in das erste Bild verwiesen. Ab dem dritten Bild des Flash-Filmes kann dann der eigentliche Inhalt des Filmes folgen. Wie sieht nun die Bedingung im 1. Fall aus? Es soll geprüft werden, ob alle Bilder des Filmes geladen sind. Wir erinnern uns, dass die Grundlage in den Eigenschaften _framesloaded und _totalframes enthalten sind. Diese Werte müssen also miteinander verglichen werden. Um eine Bedingung zu prüfen, wenden wir die if-Aktion an, diese Aktion muss dem ersten Bild des Filmes zugewiesen werden (wir gehen hier mal anders wie im Preloader mit Statusanzeige vor, um zu demonstrieren, welche Spielarten möglich sind):

if (_framesloaded>=_totalframes) {
gotoAndPlay (3);
}

Wenn ich das mit Worten ausdrücke, heißt diese Anweisung: Wenn die geladenen Bilder größer oder gleich den im Film enthaltenen Gesamtbildern sind, dann gehe zu Bildnummer 3 und spiele den Film ab. Gut, jetzt weiß der Flash-Film also was zu tun ist, wenn alle Bilder geladen sind. Doch was soll er tun, wenn dies nicht der Fall ist? Dann soll er natürlich die Prozentangabe aktualisieren und weiter loopen. Dazu muss das Actionscript folgendermaßen erweitert werden:

if (_framesloaded>=_totalframes) {
gotoAndPlay (3);
} else {
bytes_geladen = this.getBytesLoaded();
bytes_gesamt = this.getBytesTotal();
prozent = math.ceil((bytes_geladen/bytes_gesamt)*100);
}

Die else-Anweisung heißt soviel wie "sonst tue dies", wenn die Bedingung unter if nicht gegeben ist. Wäre dies der Fall, wird die Prozentanzeige aktualisiert und der Film geht zu Bildnummer 2. Für den Loop muss dort dann eine gotoAndPlay-Aktion stehen, die den Film wieder auf das Bildnummer 1 lenkt:

gotoAndPlay (1);

Fertig ist im Prinzip Ihr Preloader. Um die Prozentanzeige zu visualisieren, können Sie eine weitere Ebene einfügen, die in Bildnummer 1 bis 2 ein dynamisches Textfeld enthält, dem Sie den Variabelennamen prozent zuweisen. Ferner können Sie wieder einen Fortschrittsbalken, wie oben beschrieben, in Ihren Flash-Film einfügen, der dann über eine Aktion gesteuert wird. Dazu würde das komplette ActionScript wie folgt lauten:

if (_framesloaded>=_totalframes) {
gotoAndPlay (3);
} else {
bytes_geladen = this.getBytesLoaded();
bytes_gesamt = this.getBytesTotal();
prozent = math.ceil((bytes_geladen/bytes_gesamt)*100);
Balken.gotoAndStop(prozent);
}

Es gab aber auch noch den 2. Fall, in dem die Bedingung überprüft wird, ob die Variable prozent den Wert 100 hat. In diesem Fall muss das Actionscript im ersten Bild folgendermaßen lauten:

bytes_geladen = this.getBytesLoaded();
bytes_gesamt = this.getBytesTotal();
prozent = math.ceil((bytes_geladen/bytes_gesamt)*100);
Balken.gotoAndStop(prozent);
if (prozent == 100) {
gotoAndPlay (3);
}

Wird die Bedingung if (prozent == 100) nicht erfüllt, geht der Film weiter zu Bildnummer 2 und wird dort wieder auf Bildnummer 1 verwiesen. Ist die Bedingung erfüllt, geht der Film zu Bildnummer 3 und Ihr Film startet durch. Natürlich können Sie auch wieder den Preloader in einer eigenen Szene unterbringen und die Inhalte erst ab Szene 2 integrieren. Dazu muss dann nur die gotoAndPlay (3)-Aktion entsprechend angepasst werden.

Damit haben Sie jetzt alle Grundlagen zur Erstellung eines Preloader in Flash 5 kennen gelernt. Die Variante des Preloader auf Basis der geladenen Bytes ist dabei die technisch fortschrittlichste Lösung und findet in meinen eigenen Webprojekten die meiste Verwendung.


--------------------------------------------------------------------------------

Erweiterter Preloader mit Angabe der Restzeit

Neben der prozentualen Angabe des Ladestatus über ein Textfeld oder einen Fortschrittsbalken kann mit ActionScript auch eine Variante realisiert werden, die Ihnen die Restzeit bis zur Beendigung des Ladevorganges anzeigt. Für diese Variante wird die Übertragungsgeschwindigkeit ermittelt und mit den geladenen Bytes und den Gesamtbytes ins Verhältnis gesetzt. Diese Methode zur Realisierung eines Preloader ist eine Version für fortgeschrittene Flash-Benutzer. Gehen wir zuerst die erforderlichen Algorithmen in Theorie durch.

Es soll ein Film komplett vorgeladen werden. Dieser Film hat eine bestimmte Dateigröße, die mit der Methode getBytesTotal ausgelesen werden kann. Während des Ladevorganges werden Daten des Filmes geladen. Wie viele Bytes des Filmes bereits geladen worden sind, ist mit der Methode getBytesLoaded ermittelbar. Die Differenz zwischen diesen beiden Werten ergibt die Anzahl noch zu ladender Bytes.

Zum anderen muss berechnet werden, mit welcher aktuellen Übertragungsgeschwindigkeit die Daten aus dem Internet an den Betrachter des Filmes übertragen werden. Dazu benötigen wir zwei Messpunkte. An diesen muss gemessen werden, wie viele Bytes bereits übertragen worden sind. Ferner muss an beiden Messpunkten eine Zeit ermittelt werden. Die Differenz der übertragenen Bytes im Verhältnis zu der verstrichenen Zeit ist dann die Übertragungsrate. Diese Übertragungsrate wird dann auf die noch zu ladenden Bytes angewendet, um die Restzeit der Übertragung zu ermitteln.

Da ein Preloader aus mindestens zwei Bildern besteht (zwei Bilder sind erforderlich für die Schleife), ist es offensichtlich, dass wir diese Bilder als Messpunkte nutzen. Zur Ermittlung der Zeit verwenden wir die Aktion getTimer (). Mit dieser kann die Zeit in Millisekunden ausgelesen werden, die seit Start des Filmes vergangen ist. Bildnummer 1 stellt also den Messpunkt 1 dar. Dort müssen folgende Werte ermittelt werden:

zeit1 = getTimer ();
bytes_geladen1 = getBytesLoaded ();

Der Variablen zeit1 wird mit der Aktion getTimer () eine Zeit in Millisekunden zugewiesen. Der Variablen bytes_geladen1 werden die bis dahin geladenen Bytes zugewiesen. Bildnummer 2 ist der zweite Messpunkt, auch dort müssen folgende Werte ermittelt werden:

zeit2 = getTimer ();
bytes_geladen2 = getBytesLoaded ();

Die Ermittlung erfolgt analog Bildnummer 1, allerdings werden die ermittelten Werte anderen Variablen zugewiesen. In Bildnummer 2 werden auch die weiteren Berechnungen durchgeführt. Zum einem muss ermittelt werden, wie viele Bytes zwischen diesen beiden Messpunkten geladen wurden:

geladene_bytes = bytes_geladen2 - bytes_geladen1;

Zum anderen muss die Zeitdifferenz ermittelt werden, die zwischen diesen beiden Messpunkten vergangen ist:

zeit_differenz = zeit2 - zeit1;

Mit diesen Werten kann die Übertragungsgeschwindigkeit ermittelt werden. Dazu müssen die geladenen Bytes ins Verhältnis zu der verstrichenen Zeit gesetzt werden:

geschwindigkeit = geladene_bytes / zeit_differenz;

Mit dieser aktuellen Übertragungsgeschwindigkeit lässt sich nun die Restzeit der Übertragung ermitteln, indem wir diese ins Verhältnis zu den noch zu übertragenen Bytes setzen. Diese können ermittelt werden mit:

bytes_gesamt = getBytesTotal ();
noch_zu_laden = bytes_gesamt - bytes_geladen2;

In der nächsten Aktion setzen wir die noch zu ladenden Bytes ins Verhältnis mit der Übertragungsgeschwindigkeit:

rest_zeit = noch_zu_laden / geschwindigkeit;

Da wir aber die Restzeit dem Benutzer anzeigen möchten und der oben ermittelte Wert in Millisekunden ist, müssen wir diesen Wert noch in Sekunden umrechnen und aufrunden. Verwenden wir dazu ruhig wieder die oben kennen gelernte Methode math.ceil, auch wenn damit eigentlich nicht richtig gerundet wird, sondern auf den nächst höheren Wert aufgerundet wird. Dieser kleine Fehler ist aber nicht so relevant:

rest_zeit = math.ceil((noch_zu_laden / geschwindigkeit) / 1000);

Dieses ActionScript muss noch in die bereits oben beschriebenen Preloader-Techniken eingebunden werden. Für Bildnummer 1 ergibt sich dadurch folgendes komplettes ActionScript:

if (_framesloaded>=_totalframes) {
gotoAndPlay (3);
} else {
zeit1 = getTimer ();
bytes_geladen1 = getBytesLoaded ();
}

Für Bildnummer 2 muss folgendes ActionScript eingesetzt werden:

zeit2 = getTimer ();
bytes_geladen2 = getBytesLoaded ();
geladene_bytes = bytes_geladen2-bytes_geladen1;
zeit_differenz = zeit2-zeit1;
geschwindigkeit = geladene_bytes/zeit_differenz;
bytes_gesamt = getBytesTotal();
noch_zu_laden = bytes_gesamt-bytes_geladen2;
rest_zeit = math.ceil((noch_zu_laden/geschwindigkeit)/1000);
gotoAndPlay (1);

Was sie nun noch zur Visualisierung der Restzeit benötigen ist ein Textfeld, dem Sie den Variabelennamen rest_zeit zuweisen. Wenn Sie diesen Preloader austesten, werden Sie merken, dass er noch nicht ganz perfekt ist. Es kann vorkommen, dass Sie zwischendurch anstatt der Angabe der Restzeit ein "Infinity" sehen. Dies kann vorkommen, wenn Sie mit Bildraten größer als 10 BpS arbeiten. Dann werden die beiden Messpunkte so schnell hintereinander abgespielt, dass die Zeit zwischen den beiden Punkten 0 ist. Da mit diesem Wert eine Division durchgeführt wird, ist dies eine mathematisch nicht gültige Operation und es erscheint der Wert "Infinity". Daher ist es sinnvoll, zwischen diesen beiden Messpunkten ein paar leere Bilder einzufügen. Ich habe gute Erfahrungen gemacht, wenn die Aktionen des Bildnummer 2 sich erst in Bildnummer 11 befinden. Dies bedeutet, dass die eigentlichen Inhalte ab Bildnummer 12 folgen können. Ferner ist neben der Angabe der Restzeit noch die Angabe der aktuellen Übertragungsgeschwindigkeit ein nettes Feature, sowie die Einbindung eines Fortschrittsbalken, wie Sie ihn bereits weiter oben kennen gelernt haben. Wenn Sie diese Features noch einbauen möchten sieht der Preloader folgendermaßen aus. In Bildnummer 1 ist folgendes ActionScript untergebracht:

if (_framesloaded>=_totalframes) {
gotoAndPlay (12);
} else {
zeit1 = getTimer ();
bytes_geladen1 = getBytesLoaded ();
}

Wie Sie sehen, ist die Aktion, die ausgeführt wird, wenn alle Bilder des Filmes geladen wurden geändert auf gotoAndPlay (12). Ab dem 12. Bild kann also der wirkliche Inhalt Ihres Filmes eingefügt werden. In Bildnummer 11 (welches Sie zuvor mit F6 in ein Schlüsselbild umgewandelt haben) wird das folgende ActionScript eingefügt:

zeit2 = getTimer ();
bytes_geladen2 = getBytesLoaded ();
geladene_bytes = bytes_geladen2-bytes_geladen1;
zeit_differenz = zeit2-zeit1;
geschwindigkeit = geladene_bytes/zeit_differenz;
bytes_gesamt = getBytesTotal();
noch_zu_laden = bytes_gesamt-bytes_geladen2;
rest_zeit = math.ceil((noch_zu_laden/geschwindigkeit)/1000);
prozent = math.ceil((bytes_geladen2/bytes_gesamt)*100);
Balken.gotoAndStop(prozent);
rate = int((geladene_bytes/1024)/(zeit_differenz/1000)*100)/100;
gotoAndPlay (1);

In dieses ActionScript ist noch die Steuerung des Fortschrittsbalken sowie die Ermittlung der Übertragungsrate in KB/s implementiert. Diese Übertragungsrate wird in der Variablen rate ermittelt und auf zwei Nachkommastellen gerundet ausgegeben. Die geladenen Bytes werden in dieser Aktion mit 1024 dividiert um diese in Kilobyte umzurechnen (1 Kilobyte = 1024 Bytes). Sie benötigen zur Visualisierung lediglich ein weiteres Textfeld, dem Sie den Variabelennamen rate zuweisen. Dies ist sicher nicht die eleganteste Lösung für die Realisierung eines Preloader mit Angabe der Restzeit, jedoch denke ich, dass Sie so die Chance hatten, diese Technik eines Preloaders nachzuvollziehen.


--------------------------------------------------------------------------------

Einfache Variante zum Vorladen externer Filme

In diesem Abschnitt möchte ich Ihnen erläutern, wie Sie den Preload eines Filmes realisieren, den Sie über die Aktion loadMovieNum () in eine Stufe Ihres Hauptfilmes laden. Dieses Problem wird oft nachgefragt, dabei ist die Lösung ganz einfach. Auch in dem zu ladenden Film kann einer der oben beschriebenen Preloader eingebaut werden. Wird der Film dann vom Hauptfilm aus aufgerufen, lädt sich dieser Film mittels einem in ihm enthaltenen Preloader ebenso vor, wie der Hauptfilm. Das gilt auch, wenn Sie einen Film per loadmovie () in eine Filmsequenz des Hauptfilmes laden.

Unter Umständen kann es aber für Sie wichtig sein, dass der Hauptfilm (ist der im HTML-Code eingebettete Film, liegt immer in der Stufe 0) Kenntnis über die Beendigung des Ladevorganges des aufgerufenen Filmes hat. Dazu ein Beispiel: Sie rufen aus dem Hauptfilm per loadMovieNum () einen weiteren Film in Stufe 1 auf. Wenn dieser komplett geladen ist, soll automatisch der Hauptfilm an ein bestimmtes Bild gelenkt werden. Für diesen Beispielfall ist es erforderlich, dass der Hauptfilm merkt, wann der Ladevorgang des aufgerufenen Filmes zu Ende ist. Hier gibt es primär zwei Möglichkeiten zur Lösung:

1. Im aufgerufenen Film wird bei vollendetem Ladevorgang eine goto-Aktion eingefügt, die den Hauptfilm beeinflusst.

2. Es wird eine Prüfvariable im Hauptfilm gesetzt, die dann bei beendetem Ladevorgang vom geladenen Film geändert wird.

Betrachten wir den 1. Fall mal für das Beispiel des Preloader auf Basis der geladenen Bytes. Ist dieser Preloader im aufzurufenden Film integriert, muss das ActionScript im Bildnummer 1 des Preloaders angepasst werden. Bei Beendigung des Ladevorganges muss zusätzlich zu der Aktion, dass der geladene Film zu seinen Inhalten verwiesen wird, der Hauptfilm an eine bestimmte Stelle gelenkt werden. Nehmen wir an, der Hauptfilm soll zu dem Bild mit der Bildbezeichnung "Start" gelenkt werden. Die Aktion, die dazu in dem aufgerufenen Film eingefügt werden muss, sieht folgendermaßen aus:

_level0.gotoAndStop("Start");

Wird diese Aktion in das ActionScript des Preloader eingefügt, sieht dessen ActionScript wie folgt aus:

if (_framesloaded>=_totalframes) {
gotoAndPlay (3);
_level0.gotoAndStop("Start");
} else {
bytes_geladen = this.getBytesLoaded();
bytes_gesamt = this.getBytesTotal();
prozent = math.ceil((bytes_geladen/bytes_gesamt)*100);
Balken.gotoAndStop(prozent);
}

Eingefügt wird diese Aktion an die Stelle des ActionScript, welches ausgeführt wird, wenn der Ladevorgang beendet ist. Aber es gab ja noch den 2. Fall, das Arbeiten mit einer Prüfvariablen. Dies klingt jetzt kompliziert, ist es aber nicht. Beim Aufruf des zu ladenden Filmes per loadMovieNum () wird eine Variable, z.B. geladen auf den Wert nein gesetzt, das ActionScript könnte lauten:

geladen = "nein";
loadMovieNum ("film.swf", 1);

Im nächsten Bild des Hauptfilmes findet eine Überprüfung der Variablen geladen statt. Hat diese den Wert "ja", wird der Hauptfilm zum Bild mit der Bezeichnung Start verwiesen:

if (geladen == "ja") {
gotoAndPlay ("Start");
}

Im dem darauf folgendem Bild wird wieder auf das vorherige Bild mit der Prüfung der Variablen geladen verwiesen. Nehmen wir an, dies wäre z.B. Bildnummer 12, dann muss die Aktion lauten:

gotoAndPlay (12);

Damit haben wir eine Schleife erstellt, die solange läuft, wie die Variable geladen nicht den Inhalt "ja" hat. Und diese Variable geladen wird vom aufgerufenen Film auf "ja" gesetzt, wenn der aufgerufene Film komplett geladen ist. Sie können sicher jetzt schon die Stelle des ActionScript bestimmen, an die diese Aktion eingefügt werden muss:

if (_framesloaded>=_totalframes) {
gotoAndPlay (3);
_level0.geladen = "ja";
} else {
bytes_geladen = this.getBytesLoaded();
bytes_gesamt = this.getBytesTotal();
prozent = math.ceil((bytes_geladen/bytes_gesamt)*100);
Balken.gotoAndStop(prozent);
}

Die Aktion _level0.geladen = "ja" wird auch wieder an die Stelle des ActionScript eingefügt, welches ausgeführt wird, wenn der Film geladen wurde.


--------------------------------------------------------------------------------

Technik zum Vorladen komplexer Flash-Projekte

Unter komplexen Flash-Projekten verstehe ich Projekte, bei denen mehrere Flash-Filme per loadMovie () und loadMovieNum () ineinander verschachtelt sind. Bei solchen Projekten kann es erforderlich sein, einen Preloader zu integrieren, der für alle Filme gilt, die bei Bedarf durch das Auslösen einer Schaltfläche nachgeladen werden. Ihr Flash-Projekt könnte z.B. einen Fortschrittsbalken beinhalten, der in die von Ihnen erstellte grafische Oberfläche fest eingebettet ist oder einen Preloader der beim Nachladen eines Filmes immer on Top erscheint und dem Betrachter den Fortschritt des Ladevorganges signalisiert. Solch ein Preloader ist z.B. im Flash Operating System (http://www.partylogger.de) integriert. Bei Auswahl eines Menüpunktes der Navigation wird ein Film nachgeladen, der über einen zentralen Preloader verwaltet wird.

Um solch einen Preloader zu realisieren, ist es sinnvoll die Animation des Preloader nicht in den einzelnen Filmen, sondern als eigenen Film zu gestalten. In Ihren Filmen ist dann lediglich das zur Steuerung enthaltene ActionScript zu integrieren. Damit sparen Sie auch, je nach grafischen Aufwand Ihrer Preloader-Animation wertvolle Bytes, die übertragen werden müssen. Aber nun zur Praxis.

Erstellen Sie einen Film, der lediglich Ihre Preloader-Animation enthält. Diese sollte in Bildnummer 2 in einer eigenen Filmsequenz untergebracht werden. Dieser Filmsequenz weisen Sie dann noch einen Instanznamen zu, z.B. "preloader_ani". Bildnummer 1 der Hauptzeitleiste muss leer sein und eine stop ()-Aktion beinhalten (Sie wollen ja nicht, dass diese Animation läuft, wenn gar nichts geladen wird). Dem Bildnummer 1 weisen Sie noch die Bildbezeichnung "pause", dem Bildnummer 2 die Bildbezeichnung "laden" hinzu. Diesen Film speichern Sie unter dem Namen "preloader.fla" ab und veröffentlichen das zugehörige *.swf.

Damit haben Sie nun einen eigenen Flash-Player Film, der lediglich eine Preloader-Animation enthält. Im Hauptfilm laden Sie diesen Film am Anfang per loadMovieNum () in eine Stufe, die über allen anderen Stufen der zu ladenden Filme liegt, z.B. Stufe 10:

loadMovieNum ("preloader.swf", 10);

Je nach Dateigröße des exportierten Preloader-Filmes kann es empfehlenswert sein, diesen Preloader auch vorzuladen (ab ca. 10 KB). Wenden Sie dazu die Technik, wie unter Einfache Variante zum Vorladen externer Filme an. Dieser geladene Preloader-Film ist nicht zu sehen, da ja im ersten Bild dieses Filmes kein Inhalt ist und dort eine stop ()-Aktion untergebracht war.

Wenn Sie nun eine Schaltfläche in Ihrem Hauptfilm haben, über die ein weiterer Film mit anzuzeigenden Inhalten geladen werden soll, z.B. der Film produkte.swf, dann fügen Sie dieser Schalfläche folgende Aktion hinzu:

_level10.gotoAndStop ("laden");
loadMovieNum ("produkte.swf", 2);

Mit diesem ActionScript weisen Sie den Film in Stufe 10 (Ihren Preloader) an, zu dem Bild mit der Bezeichnung "laden" zu gehen und an dieser Stelle der Zeitleiste zu stoppen. Das heißt, nun wird Ihre Preloader-Animation angezeigt. Im nächsten Teil laden Sie den weiteren Film (produkte.swf) in Stufe 2. Dieser Film muss in seinem ersten Bild folgende Aktion beinhalten:

if (_framesloaded >= _totalframes) {
_level10.gotoAndStop ("pause");
gotoAndPlay ("Szene 2", 1);
}

In dem darauf folgenden Bildnummer 2 fügen Sie noch eine Aktion für die Erstellung einer Schleife hinzu:

gotoAndPlay (1);

Was geschieht in dem ActionScript des ersten Bildes? Es wird überprüft ob alle Bilder dieses Filmes geladen sind. Ist dies der Fall, wird der Film in Stufe 10 (wieder Ihr Preloader) an das Bild mit der Bezeichnung "pause" verwiesen und gestoppt. Das heißt Ihre Preloader-Animation verschwindet von der Bildfläche. Des weiteren wird der geladene Film zu dem ersten Bild seiner 2. Szene verwiesen und von dort abgespielt. Ab dieser Stelle sollten Sie Ihre Inhalte einfügen. Sind noch nicht alle Bilder geladen, geht der Film zum nächsten Bild mit der Aktion gotoAndPlay (1), d.h. der Film wird wieder zu dem Bildnummer 1 mit der Abfrage gelenkt. Dies können Sie nun mit allen anderen Filmen Ihres Flash-Projektes ebenso gestalten. Damit haben Sie einen filmübergreifenden Preloader realisiert.

In der nächsten schwierigeren Stufe können Sie dies auch mit einem Fortschrittsbalken realisieren. Dieser Fortschrittsbalken ist dann die in Bild 2 des Preloader-Filmes enthaltene Filmsequenz mit dem Instanznamen "preloader_ani". Der Aufruf eines weiteren Filmes per loadMovieNum () aus Ihrem Hauptfilm ist identisch mit dem oben angegebenen ActionScript. Lediglich in den zu ladenden Filmen muss folgendes ActionScript in Bildnummer 1 angegeben werden:

if (_framesloaded>=_totalframes) {
_level10.gotoAndStop("pause");
gotoAndPlay ("Szene 2", 1);
} else {
bytes_geladen = this.getBytesLoaded();
bytes_gesamt = this.getBytesTotal();
prozent = math.ceil((bytes_geladen/bytes_gesamt)*100);
_level10.preloader_ani.gotoAndStop(prozent);
}

Analog zu oben muss im zweiten Bild zur Vervollständigung der Schleife wieder die Aktion:

gotoAndPlay (1);

eingefügt werden. Jetzt wird in dem zu ladenden Film das prozentuale Verhältnis der geladenen Bytes ermittelt und mit diesem Wert wieder der Fortschrittsbalken gesteuert. Dieser liegt aber in der Filmsequenz mit dem Namen "preloader_ani" in Stufe 10 daher die Aktion:

_level10.preloader_ani.gotoAndStop(prozent);

Damit haben Sie die wesentlichsten und auch einige komplexere Techniken zum Vorladen von Filmen in Flash kennengelernt.


--------------------------------------------------------------------------------

Offline-Test des erstellten Preloader

Flash bietet bedingt die Möglichkeit, den erstellten Preloader Offline zu testen. Dazu wählen Sie aus dem Hauptmenü den Punkt Steuerung-Film testen (STRG + ENTER). Damit starten Sie den in Flash integrierten Flash-Player, der den temporär exportierten Flash-Player Film abspielt. Mittels diesem Player können Sie eine Datenübertragung aus dem Internet simulieren und dabei eine Übertragungsgeschwindigkeit festlegen.

Die Übertragungsgeschwindigkeit für die Simulation legen Sie im Testmodus unter dem Menüpunkt Fehlersuche fest. Dort stehen Ihnen schon vordefinierte Geschwindigkeiten zur Auswahl:

- 14,4 (1,2 KB/s)
- 28,8 (2,4 KB/s)
- 56K (4,7 KB/s)

Ferner besteht die Möglichkeit, eigene benutzerdefinierte Übertragungsgeschwindigkeiten festzulegen. Dazu wählen Sie den Punkt Fehlersuche-Anpassen aus. In dem erscheinenden Dialog können Sie die Menüpunkte unter Fehlersuche entsprechend anpassen.



Um die Simulation zu starten, wählen Sie im Test-Modus den Menüpunkt Ansicht-Streaming anzeigen. Der Film startet dann erneut mit der Simulation der gewählten Übertragungsgeschwindigkeit. Mit dieser Methode kann allerdings nur ein Preloader getestet werden, der in dem zu testenden Film selbst integriert ist. Werden von diesem Film weitere Filme per loadMovie () oder loadMovieNum () in den Film geladen und sind dort Preloader integriert, funktioniert diese Methode nicht, da der Player auf diese Filme leider nicht das Streaming anwendet. In diesen Fällen kommen Sie nicht darum herum, die Filme auf Ihren Server aufzuspielen und Online zu testen.


--------------------------------------------------------------------------------

Vorladen von einzulesenden Textdateien

Neben dem Vorladen von Flash-Filmen selbst kann es in Flash-Projekten erforderlich sein, auch Textdateien, die per loadVariables () in den Flash-Film geladen werden, vorzuladen. Dies ist insbesondere dann wichtig, wenn die einzulesenden Variablen aus der Textdatei für Berechnungen o.ä. im Film gebraucht werden. Sind diese Variablen dann noch nicht geladen, kann es zu fehlern kommen. Um solch einen Text-Preloader zu erstellen, bedienen wir uns einer Hilfsvariablen, die wir am Ende der Textdatei einfügen. Solch eine Datei kann dann beispielsweise so aussehen:

var1=text1
&var2=text2
&var3=text3
....
&ende=wahr

Die Hilfsvariable ist die Variable ende, die in der Textdatei den Inhalt "wahr" zugewiesen bekommt. Wichtig ist, dass Sie nach dieser Variablen keinen weiteren Zeilenumbruch in der Textdatei haben oder hinter dem wahr noch ein kaufmännisches Und (&) unterbringen. Ansonsten kann der im Flash integrierte Preloader nicht richtig arbeiten. Im Flash-Film fügen Sie nach dem loadVariables () folgende Aktion hinzu:

loadVariablesNum ("test.txt", 0);
ende = "falsch";

Das darauf folgende Bild lassen Sie leer. Im dem wieder darauf folgenden Bild bringen Sie folgende Aktion unter:

if (ende == "Wahr") {
gotoAndPlay (Hier die Bildnummer/-bezeichnung wo es weitergehen soll);
} else {
gotoAndPlay (Hier die Bildnummer des vorherigen Bildes);
}

So haben Sie wieder eine Schleife, die solange läuft, bis der gesamte Text geladen ist (dann wird durch die Textdatei der Inhalt der Variable ende auf wahr gesetzt).