Einfache Preloader in Flash MX Teil 2
Mit dem aus dem ersten Teil vorgestellten Preloader gehören stockende Animationen und asynchrone Animations- und Soundverläufe der Vergangenheit an. Bisher bekommt der Benutzer jedoch keine Informationen über das Voranschreiten des Ladevorgangs. In einer erweiterten Version des Preloaders wollen wir den Benutzer stetig über den prozentual geladenen Anteil informieren. Zur Unterstützung soll zudem ein Ladebalken das Voranschreiten des Ladevorgangs visualisieren.
Erstellen Sie ein neues Flash-Dokument. Wie zuvor im ersten Teil benötigen wir erneut die beiden Ebenen „Anzeige“ und „Aktionen“. Fügen Sie der bestehenden Ebene eine Zweite hinzu und benennen Sie die Ebenen entsprechend um. Die Ausgabe der Prozentzahl erfolgt in einem dynamischen Textfeld. Erstellen Sie auf der Ebene „Anzeige“ zu diesem Zweck ein Textfeld. Weisen Sie dem Textfeld den Typ „Dynamischer Text“ zu und vergeben Sie unter „Var“ den Variablennamen „prozentTxt“. Zeichnen Sie mit dem Rechteckswerkzeug zur Visualisierung des Ladebalkens ein längliches Rechteck. Markieren Sie anschließend das Rechteck und konvertieren Sie es in ein Movieclip-Symbol. Bitte beachten Sie dabei, dass Sie den Registrierungspunkt auf links setzen. Dies ist entscheidend für die korrekte Animation des Ladebalkens. Geben Sie der gegenwärtigen Instanz des Movieclip-Symbols den Namen „ladebalken“. Klicken Sie hierfür auf die Instanz und nehmen Sie anschließend im Bedienfeld „Eigenschaften“ links oben die Benennung vor.
Das Bedienfeld „Eigenschaften“:
Damit das Textfeld und der Ladebalken über das Vorladen hinaus sichtbar sind, fügen Sie mit F6 im zweiten und dritten Bild ein Schlüsselbild ein. Die Bilder sollten nun ebenfalls den Ladebalken und das Textfeld besitzen. Platzieren Sie anschließend im Bedienfeld „Aktionen“ im ersten Bild folgendes ActionScript:
bytesGeladen = getBytesLoaded();
bytesGesamt = getBytesTotal();
Die Methoden getBytesLoaded() und getBytesTotal() kennen Sie bereits. Im Gegensatz zum letzten Script schreiben wir die Anzahl der geladenen Bytes zunächst in die Variable „bytesGeladen“ und die Bytezahl des gesamten Flash-Films in die Variable „bytesGesamt“. Im nächsten Schritt berechnen wir den prozentual geladenen Anteil des Films und weisen den erhaltenen Wert der Variable „prozent“ zu. Mit „Math.round“ runden wir diesen Wert auf eine Ganzzahl ab, fügen dem Wert das Zeichen für Prozent „%“ hinzu und übergeben alles der Variable „prozentTxt“. Sie erinnern sich, dass wir unser Textfeld so benannt haben. Durch die Zuweisung des Variablennamens im Textfeld wird Flash den Wert der Variable für uns automatisch im Textfeld ausgeben.
Zur Visualisierung des Ladebalkens bedienen wir uns der Eigenschaft „_xscale“ zur horizontalen Skalierung der Ladebalken-Instanz „ladebalken“. Da „_xscale“ nicht auf diskrete Werte angewiesen ist, weisen wir der Eigenschaft lediglich den prozentualen Wert aus der Variable „prozent“ zu. Die letzten Zeilen sollten Ihnen wieder vertraut vorkommen. Wie im ersten Preloader überprüfen wir, ob der Film bereits vollständig geladen wurde. Im Erfolgsfall springen wir direkt in das dritte Bild. Ansonsten setzen wir mit dem Abspielen der Zeitleiste normal fort. Ebenfalls wie im ersten Preloader müssen wir im zweiten Bild der Ebene „Aktionen“ unsere Rücksprunganweisung zum ersten Bild platzieren. Erstellen Sie zu diesem Zweck in der Ebene ein Schlüsselbild im zweiten Bild und rufen Sie anschließend das Bedienfeld „Aktionen“ auf. Schreiben Sie in das Bedienfeld folgende Anweisung:
Der Abspielcursor wird wieder in das erste Bild gesetzt und somit ist unser Preloader komplett. Sobald der Film vollständig geladen wurde, überspringen wir mit Hilfe der If-Bedingung im obigen ActionScript in gewohnter Manier diese Rücksprunganweisung. Sollten Sie Probleme beim Nachvollziehen des vorgestellten Preloaders haben, so empfehle ich Ihnen die beigefügte Beispieldatei zu betrachten. Vergessen Sie nicht, dem Preloader größere Datenmengen ab dem dritten Bild hinzuzufügen.
Beispieldatei: Preloader mit Prozentanzeige und Ladebalken [Einfache_Preloader_in_Flash_MX_Teil2.zip]
Erstellen Sie ein neues Flash-Dokument. Wie zuvor im ersten Teil benötigen wir erneut die beiden Ebenen „Anzeige“ und „Aktionen“. Fügen Sie der bestehenden Ebene eine Zweite hinzu und benennen Sie die Ebenen entsprechend um. Die Ausgabe der Prozentzahl erfolgt in einem dynamischen Textfeld. Erstellen Sie auf der Ebene „Anzeige“ zu diesem Zweck ein Textfeld. Weisen Sie dem Textfeld den Typ „Dynamischer Text“ zu und vergeben Sie unter „Var“ den Variablennamen „prozentTxt“. Zeichnen Sie mit dem Rechteckswerkzeug zur Visualisierung des Ladebalkens ein längliches Rechteck. Markieren Sie anschließend das Rechteck und konvertieren Sie es in ein Movieclip-Symbol. Bitte beachten Sie dabei, dass Sie den Registrierungspunkt auf links setzen. Dies ist entscheidend für die korrekte Animation des Ladebalkens. Geben Sie der gegenwärtigen Instanz des Movieclip-Symbols den Namen „ladebalken“. Klicken Sie hierfür auf die Instanz und nehmen Sie anschließend im Bedienfeld „Eigenschaften“ links oben die Benennung vor.
Das Bedienfeld „Eigenschaften“:
Damit das Textfeld und der Ladebalken über das Vorladen hinaus sichtbar sind, fügen Sie mit F6 im zweiten und dritten Bild ein Schlüsselbild ein. Die Bilder sollten nun ebenfalls den Ladebalken und das Textfeld besitzen. Platzieren Sie anschließend im Bedienfeld „Aktionen“ im ersten Bild folgendes ActionScript:
bytesGeladen = getBytesLoaded();
bytesGesamt = getBytesTotal();
001:002:003:004:005:006:007:
prozent = (bytesGeladen / bytesGesamt) * 100; prozentTxt = Math.round(prozent) + " %"; ladebalken._xscale = prozent; if (bytesGeladen == bytesGesamt) { gotoAndPlay (3); }
Die Methoden getBytesLoaded() und getBytesTotal() kennen Sie bereits. Im Gegensatz zum letzten Script schreiben wir die Anzahl der geladenen Bytes zunächst in die Variable „bytesGeladen“ und die Bytezahl des gesamten Flash-Films in die Variable „bytesGesamt“. Im nächsten Schritt berechnen wir den prozentual geladenen Anteil des Films und weisen den erhaltenen Wert der Variable „prozent“ zu. Mit „Math.round“ runden wir diesen Wert auf eine Ganzzahl ab, fügen dem Wert das Zeichen für Prozent „%“ hinzu und übergeben alles der Variable „prozentTxt“. Sie erinnern sich, dass wir unser Textfeld so benannt haben. Durch die Zuweisung des Variablennamens im Textfeld wird Flash den Wert der Variable für uns automatisch im Textfeld ausgeben.
Zur Visualisierung des Ladebalkens bedienen wir uns der Eigenschaft „_xscale“ zur horizontalen Skalierung der Ladebalken-Instanz „ladebalken“. Da „_xscale“ nicht auf diskrete Werte angewiesen ist, weisen wir der Eigenschaft lediglich den prozentualen Wert aus der Variable „prozent“ zu. Die letzten Zeilen sollten Ihnen wieder vertraut vorkommen. Wie im ersten Preloader überprüfen wir, ob der Film bereits vollständig geladen wurde. Im Erfolgsfall springen wir direkt in das dritte Bild. Ansonsten setzen wir mit dem Abspielen der Zeitleiste normal fort. Ebenfalls wie im ersten Preloader müssen wir im zweiten Bild der Ebene „Aktionen“ unsere Rücksprunganweisung zum ersten Bild platzieren. Erstellen Sie zu diesem Zweck in der Ebene ein Schlüsselbild im zweiten Bild und rufen Sie anschließend das Bedienfeld „Aktionen“ auf. Schreiben Sie in das Bedienfeld folgende Anweisung:
001:
gotoAndPlay(1);
Der Abspielcursor wird wieder in das erste Bild gesetzt und somit ist unser Preloader komplett. Sobald der Film vollständig geladen wurde, überspringen wir mit Hilfe der If-Bedingung im obigen ActionScript in gewohnter Manier diese Rücksprunganweisung. Sollten Sie Probleme beim Nachvollziehen des vorgestellten Preloaders haben, so empfehle ich Ihnen die beigefügte Beispieldatei zu betrachten. Vergessen Sie nicht, dem Preloader größere Datenmengen ab dem dritten Bild hinzuzufügen.
Beispieldatei: Preloader mit Prozentanzeige und Ladebalken [Einfache_Preloader_in_Flash_MX_Teil2.zip]
