Flash: Preloader

Der Preloader zeigt an, wie lange die gesamte Ladezeit eines Filmes noch dauern wird.

Grundlogik

Wenn am Bildschirm nichts passiert, dann ist der Besucher weg. Mit einem Preloader kann dem Besucher angezeigt werden, wie lange es noch dauert, bis der Film kommt.

Der Preloader funktioniert nur über das Internet. Nicht im Testmodus von Flash. Denn dort ist der gesamte Film ja bereits geladen.

• In Bild 1 wird die Gesamtgrösse des Filmes ermittelt
• In Bild 2 werden die Textfelder auf die Bühne gezeichnet
  Mittels einem ActionScript werden die dynamischen Textfelder ausgefüllt
  Mit einer Bedingung wird geprüft ob der Film vollständig geladen wurden. Wenn ja, wird auf Bild 4 verzweigt.
• In Bild 3 wird auf Bild 2 zurück gesprungen
• Ab Bild 4 beginnt der Hauptfilm

Ein Beispiel ist unter PreloaderMW1.swf zu sehen. Die passende Filmdatei ist PreloaderMW1.fla.

Der Preloader

• Erstellen Sie einen neuen Film.
• Benennen Sie die aktuelle, erste Ebene mit dem Namen "ActionScripts".
• Im ersten Schlüsselbild erstellen Sie eine Bildaktion (Doppelklick auf erstes Schlüsselbild)
• Mit Hilfe der Funktion evaluate wird eine Variabel belegt.
  Wählen Sie aus der Gruppe der Aktionen die Funktion evaluate.
• Schreiben Sie in die Zeile Ausdruck: groesse = getBytesTotal()
• Schliessen Sie das Fenster Bildaktionen.
• Erstellen Sie eine neue Ebene und benennen Sie diese mit dem Namen "Textfelder".
• Erstellen Sie auf der Ebene Textfelder in Bild 2 ein Schlüsselbild.
• Erstellen Sie folgende statischen Textfelder in Ebene Textfelder, Bild2:
  - Grösse des Film total
  - Bereits geladene Bytes
  - Geladen in Prozend
• Erstellen Sie neben diesen drei statischen Textfelder drei zusätzliche Dynamische Textfelder von 100 Pixel breite und verknüpfen Sie diese im Bedienerfeld Textoptionen mit den Variabeln:
  - groesse
  - geladen
  - prozentanzeige
• Achten Sie darauf, dass die dynamischen Textfelder breit genug sind, um die Zahl darstellen zu können. Die Breite des Textfeldes kann zum Beispiel im Bedienerfeld Info, W=120 eingestellt werden.
• Fügen Sie in Ebene Textfelder auf Bild 3 ein Bild (Kein Schlüsselbild, nur ein Bild) ein.
• Erstellen Sie in der Ebene "ActionScripts" in Bild 2 ein Schlüsselbild.
• Erstellen Sie entsprechend dem weiter unten folgenden Bild folgendes Script auf Ebene ActionScript in Bild 2. Die Deklaration von Variabeln erfolgt mit dem Befehl evaluate aus der Gruppe Aktionen.
  
  geladen = getBytesLoaded();
  prozent = math.round(geladen/groesse*100);
  prozentanzeige = prozent + " %"
  if (geladen == groesse) {
    gotoAndPlay(4)
  }
• Erstellen Sie auf Ebene ActionScripts in Bild 3 ein Schlüsselbild mit der Aktion "GotoAndPlay 2"
• Schliessen Sie das Fenster Bildaktionen
• Erstellen Sie eine neue Ebene mit dem Namen "Hauptfilm"
• Erstellen Sie in der Ebene "Hauptfilm" in Bild 4 ein Schlüsselbild.
• Zeichnen Sie den Hauptfilm, verwenden Sie ein grosses Bild und ein Sound damit der Film auch einen Moment benötigt um geladen zu werden.
• Der Film muss nun mittels einem FTP-Programm auf den Webserver geladen werden damit Sie ihn testen können.

Sie werden die Ladeanzeige nur einmal sehen können. Danach befindet sich der Film im Arbeitsspeicher und im Cache. Wenn Sie erneut die Ladeanzeige sehen möchten, müssen Sie im Browser im Menü Extras Internetoptionen die Temporären Internetdateien löschen. Danach kann der Film durch aktualisieren erneut vom Internet geladen werden und die Ladeanzeige erscheint wieder, aber auch nur einmal bis das Cache wieder gelöscht wird.

Fortschrittsbalken

• Erstellen Sie auf der Ebene Hauptfilm in Bild 1 ein Schlüsselbild (sofern dort nicht schon ein Schlüsselbild existiert)
• Zeichnen Sie ein liegendes Rechteck mit rotem Rahmen ungefähr 200 Pixel breit und 50 Pixel hoch
• Löschen Sie die Füllung des Rechteck und lassen nur den roten Rahmen stehen
• Konvertieren Sie das Rechteck zu einem Film-Symbol und geben ihm den Namen "Fortschrittsbalken"
• Bearbeiten Sie das Mastersymbol von "Fortschrittsbalken" (Doppelklick auf die Instanz von Fortschrittsbalken)
• Fügen Sie eine neue Ebene ein und benennen diese "Fortschritt"
• Zeichnen Sie in Bild 1 des Mastersymbol, ebene Fortschritt ein grün gefülltes, stehendes  Rechteck auf der linken Seite in den roten Rahmen hinein. Entfernen Sie den Rahmen und lassen nur die Füllung stehen.
• Gruppieren Sie die grüne Füllung
• Fügen Sie in Ebene1 in Bild 100 ein Bild (nicht Schlüsselbild) ein. 100 Bilder sind relevant weil es sich um 100% handelt welche dargestellt werden sollen.
• Fügen Sie Ebene Fortschritt in Bild 100 ein Schlüsselbild ein.
• In Bild 100 skalieren Sie die grüne Füllung so, dass sie den roten vollständig Rahmen ausfüllt.
• Erstellen Sie einen BewegungsTween in Bild 1
• Schrubben Sie, um festzustellen ob der Fortschrittsbalken auch fortschreitet.
• Kehren Sie zur Szene 1 zurück
• Benennen Sie die auf der Hauptbühne liegende Instanz von Fortschrittsbalken mit dem Namen "StatusAnzeige"
• Ergänzen Sie das ActionScript auf der Ebene ActionScript in Bild 2 mit der Funktion evaluate und dem Argument:
  StatusAnzeige.gotoAndStop(prozent);
• Publizieren Sie Ihren Film und stellen Sie ihn ins Internet.

Vergessen Sie nicht, dass Sie vor dem ausprobieren die Temporären Dateien des Internetexplorer wieder löschen.

Einige "grosse" Bilder

Die folgenden Bilder wurden mit Absicht nicht für das Internet optimiert damit der Ladevorgang in Flash länger dauert und die entsprechende Programmierung besser erkannt werden kann. Mittels der rechten Maustaste können die Bilder lokal gespeichert werden.

Probieren Sie aus, wie sich das Ladeverhalten von Flash ändert, wenn Sie die Bilder in einem Programm welches JPG-Dateien verarbeiten kann, mit einer Komprimierung von 20% speichern.

Patrick mit der gerade mal 4 Tage jungen Vanessa. Es ist immer gut, einen Babysitter in der Familie zu haben.

Ja was ist das denn für eine Maschine, die habe ich noch nie gesehen. Mega spannend das Teil!

Hui, drinn sitzen ist viel besser als von aussen schauen...