Wie erstelle ich einen Preloader?

Ihr habt ein Bild oder sogar einen Videoclip, den Ihr ins Internet stellen wollt? Und leider benötigt der Download etwas länger und Ihr wollt die Besucher nicht auf die Folter spannen und im Dunkeln tappen lassen? – Dann ist der Preloader genau das Richtige ;-)

In diesem Tutorial werde ich zeigen, wie man recht leicht einen einfachen Preloader zusammenbastelt, der auch ohne großartige Effekte auskommt.

Wir wollen ja nicht, dass man einen Preloader für den Preloader braucht!

Als Programmversion benutze ich übrigens Adobe Flash CS3 in Deutsch auf dem PC unter Windows XP.

1. Zu Beginn erstellt Ihr ein leeres Actionscript 2.0 Flash Dokument (FLA-Datei).

2. Ändert den Namen der „Ebene 1“ in „Loader Bar“ bzw. „Ladebalken“ um, um später nicht den Überblick zu verlieren.

3. Klickt auf das 2. Frame der Ebene und fügt unter „Einfügen > Zeitleiste > Bild“ (F5), oben im Menü, ein Bild ein.

4. Wählt das Rechteckwerkzeug in der Werkzeugleiste aus.

5. Erstellt damit einen schmalen Balken auf der Arbeitsfläche.

6. Wählt eine beliebige Farbe für die Fläche und die Kontur aus.

7. Falls das „Eigenschafts-Fenster“ geschlossen ist, öffnet es oben im Menü unter:  „Fenster > Eigenschaften > Eigenschaften“

8. Dort legt Ihr nun Eure gewünschte Breite und Höhe des Balkens fest. In diesem Beispiel: Breite > 150 Pixel / Höhe > 10 Pixel

Wichtig: Falls Ihr euch für eine andere Breite entscheidet, müsst Ihr im Script (siehe Punkt 31) den Wert von 150 in der 4. Zeile dementsprechend umändern!

9. Sowie die Breite des Rahmens. (Im Beispiel: 2px)

10. Zieht nun den Balken mit dem Auswahlwerkzeug (V) möglichst in die Mitte der Arbeitsfläche.

11. Falls der Balken nun sehr klein erscheint, wählt die Lupe in der Werkzeugleiste aus und vergrößert damit den Ausschnitt mit dem Rechteck.

12. Nun wählt Ihr das Rechteck mit dem Auswahlwerkzeug aus wählt im Menü oben unter Modifizieren den Punkt „Teilen“ aus. „Modifizieren > Teilen“ (Strg+B)

Nun müssten überall weiße Punkte auf dem Rechteck erscheinen. Somit könnt ihr nun den Rahmen und die Fläche separat auswählen.

13. Nun drückt Ihr die Shift-Taste und klickt dabei auf die Fläche innerhalb des Rahmens, so dass diese keine weißen Punkte mehr hat.

14. Anschließend schneidet Ihr den Rahmen übers Menü oben unter „Bearbeiten > Ausschneiden“ (Strg+X) aus.

15. Als nächsten Schritt erstellt ihr eine neue Ebene mit dem Namen „Loader Outline“ bzw. „Rahmen“.

16. Nun fügt Ihr den Rahmen über den Menüpunkt „Bearbeiten > An Position einfügen“ wieder an der richtigen Position ein.

17. Anschließend wählt Ihr wieder den Balken aus und konvertiert ihn in ein Symbol: „Modifizieren > In Symbol konvertieren“ (F8)

18. Im nun erscheinenden Fenster gibt Ihr als Namen „Loader Bar“ bzw. „Ladebalken“ an und wählt den Type „Movieclip“ aus. Als Registrierung wählt Ihr den oberen linken Punkt aus.

19. Dann klickt Ihr: OK

20. Bei den Eigenschaften des Movieclips gibt ihr ein Instanznamen ein: myBar

21. Als nächsten Schritt erstellt Ihr wieder eine neue Ebene mit dem Namen „Text“.

22. Wählt das Textwerkzeug aus der Werkzeugleiste aus.

23. Zieht auf der Arbeitsfläche ein schmales Textfeld unterhalb des Balkens auf. Es muss wenigstens so groß sein, dass folgende Ziffern dort reinpassen: 100% (Testet dies am besten einmal in der gewünschten Schriftart, Farbe und Größe aus!)

24. Stellt den Texttyp auf „Dynamischer Text“.

25. Gibt bei der Variable (Var) rechts unten bei den Eigenschaften „myText“ an. (Nicht zu verwechseln mit dem Instanznamen!)

26. Falls die Prozentanzeige genau mittig unter dem Balken erscheinen soll, zieht das Textfeld so breit wie den Balken und stellt bei den Eigenschaften die Textausrichtung auf Zentrieren.

27. Als nächsten Schritt erstellt Ihr eine neue Ebene mit dem Namen „Actions“.

28. Klickt in der Ebene auf das 2. Frame und fügt über „Einfügen > Zeitleiste > Schlüsselbild“ ein Schlüsselbild ein.

29. Wählt das 2. Frame aus und öffnet das Fenster „Aktionen“ (F9). „Fenster > Aktionen“ (F9)

30. Kopiert das folgende Script und fügt es im Aktionen-Fenster ein:

myLoaded = Math.round(getBytesLoaded());
myTotal = Math.round(getBytesTotal());
myPercent = myLoaded/myTotal;
myBar._width = myPercent*150;
myText = Math.round(myPercent*100)+"%";
if (myLoaded == myTotal) {
gotoAndStop(3);
} else {
gotoAndPlay(1);
} 

Die einzelnen Punkte des Scripts erläutere ich später.

(Falls das Einfügen nicht funktioniert, deaktiviert die Skripthilfe!)

31. Erstellt nun eine neue Ebene und nennt sie „Content“ bzw. „Inhalt“.

32. Wählt das 3. Frame der Ebene aus und fügt über das Menü unter „Rechtsklick > Leeres Schlüsselbild einfügen“ ein leeres Schlüsselbild ein.

33. Nun müsst Ihr nur noch euer Objekt in die Bühne importieren, für das der Preloader dient, also z.B. ein größeres Bild. „Datei > Importieren > In Bühne importieren…“ (Strg+R)

34. Falls das Objekt zu groß für die Arbeitsfläche ist, wählt „Frei transformieren“ in der Werkzeugleiste aus und skaliert das Objekt mit Hilfe der Shift-Taste runter.

35. Zum Schluß spielt Ihr eueren Flash-Film über den Menüpunkt „Steuerung > Film testen” (Strg+Enter) ab.

36. Geht im neuen Fenster auf „Ansicht > Download-Einstellungen > 56K” und anschließend auf „Ansicht > Download simulieren”.

37. Somit wird der Download mit einer 56K-Internetverbindung simuliert und ihr dürftet nun sehen wie der Preloader das Bild lädt. Falls es Euch zu lange dauert, könnt Ihr auch gerne eine schnellere Verbindung, wie z.B. DSL auswählen.

38. Nun ist der Preloader fertig und ich hoffe es hat auch alles gut geklappt.

Falls es eventuell nicht klappen sollte, überprüft nochmal die Schreibweise der Eingaben bei dem Instanzname des Movieclip (myBar) und bei der Variable beim Textbalken (myText). Es ist auch auf die Groß- und Kleinschreibung dabei zu achten!

Tipp: Wundert Euch nicht, dass der Preloader bei einer höheren Zahl und nicht bei 1% beginnt, da der Preloader selbst einen Anteil von der gesamten Flash-Datei ausmacht. Wichtig ist nur, dass die Besucher nun sehen können, wielange es noch dauern wird, bis das Bild oder Video geladen wurde.

Jetzt kann man den Preloader noch mit Texten und weiteren Animationen ausschmücken. Nur man sollte dabei auch darauf achten, dass er nicht selbst zu groß wird und ein Preloader für den Preloader notwendig wird!

Viel Erfolg!

Hier findet Ihr das Tutorial als PDF:

Preloader.pdf

Und hier findet Ihr die Quelldatei:

preloader.zip

Zur Erläuterung des Scripts:

myLoaded = Math.round(getBytesLoaded());
myTotal = Math.round(getBytesTotal());
myPercent = myLoaded/myTotal;
myBar._width = myPercent*150;
myText = Math.round(myPercent*100)+"%";
if (myLoaded == myTotal) {
gotoAndStop(3);
} else {
gotoAndPlay(1);
} 

1. Zeile: myLoaded = Math.round(getBytesLoaded());

Diese Variable hat zwei Funktionen:

  • Sie Findet heraus wie viele Bytes bis jetzt geladen wurden. (getBytesLoaded)
  • Sie rundet diese Zahl in eine ganze Zahl auf. (Math.round)

2. Zeile: myTotal = Math.round(getBytesTotal());

Findet die totale Anzahl an Bytes heraus und rundet diese Zahl in eine ganze Zahl auf.

3. Zeile: myPercent = myLoaded/myTotal;

Erstellt eine neue Variable mit dem Namen “myPercent”, die die geladenen Bytes durch die totalen Bytes dividiert.

4. Zeile: myBar._width = myPercent*150;

Hier wird Bezug auf den Movieclip mit dem Instanznamen “myBar” genommen. Diese Variable kontrolliert die Breite des Balkens. In diesem Fall muss er 150 Pixel breit sein, damit diese Variable funktioniert.

5. Zeile: myText = Math.round(myPercent*100)+”%”;

Hier wird Bezug auf das Textfeld genommen (Var = myText). Diese Variable kontrolliert welche Prozentzahl dargestellt wird. Die „100“ kontrolliert, dass die Prozentzahl nicht über die 100 hinaus geht. Das +“%“ fügt das Prozentzeichen ans Ende der Zahl hinzu.

6. Zeile: if (myLoaded == myTotal) {

Diese Zeile stellt eine Bedingung auf. Falls die geladenen Bytes genauso viele wie die totalen Bytes sind, dann wird die Funktion aus der 7. Zeile ausgeführt.

7. Zeile: gotoAndStop(3);

Der Flash-Film springt nun auf das dritte Frame und stellt das fertig geladene Bild dar.

8. Zeile: } else {

Andererseits, falls die Bedingung aus der 6. Zeile noch nicht erfüllt ist, wird die Funktion aus der 9. Zeile ausgeführt.

9. Zeile: gotoAndPlay(1);

Diese Funktion erstellt einen Loop, der den Flash-Film immer aufs 1. Frame zurückspringen und es bis zum 2. Frame abspielen lässt, bis die Bedingung aus der 6. Zeile erfüllt wird. Dieser Loop bewirkt, dass der Balken und das Textfeld beständig mit der letzten Information aktualisiert werden.

10. Zeile: }

Schließt die “else”-Funktion.

Dieser Eintrag wurde veröffentlicht in Übungen mit Actionscript und getagged , , , , . Bookmarken: Permanent-Link. Kommentieren oder ein Trackback hinterlassen: Trackback-URL.

13 Kommentare

  1. Erstellt am 1. Februar 2009 um 20:37 | Permanent-Link

    Hallo Joscha,

    super Tutorial. Du hast wirklich an alles gedacht und die Scripterklärung sogar noch nachgeschoben. Damit hast du das erste Tutorial mit Actionscript geschrieben ;)

    Liebe Grüße,
    Felix

  2. Mathias
    Erstellt am 17. Februar 2009 um 11:27 | Permanent-Link

    Hi! Dein Tutorial klappt echt super. Nur der Ladebalken fängt an sich von der Mitte aus zu füllen und nicht von links nach rechts. Woran könnte das denn liegen?

    Beste Grüße, Mathias

  3. Erstellt am 17. Februar 2009 um 14:58 | Permanent-Link

    Hi Joscha,

    Danke für diese genaue Anleitung.
    Hat mir sehr weitergeholfen.

    Hätte aber noch eine kleine Frage.
    Ich möchte den Ladebalken auch für ein Video verwenden. Jetzt wäre es gut wenn das Video schon wärend des Download laufen würde und es mir trotzdem den Ladebalken anzeigt. Wie mache ich das?

    lg deedee

  4. MR.X
    Erstellt am 6. März 2009 um 15:45 | Permanent-Link

    Vielen Dank,

    für diesen coolen Tip mit dem Preloder
    hatte einen von Flash MX und hat in CS3 nicht gefunzt!!

  5. Betty
    Erstellt am 18. Juli 2009 um 11:28 | Permanent-Link

    Wow, ich bin total beeindruckt.
    War schon fast am Verzweifeln, aber mit diesem super detaillierten Tutorial hab sogar ich meinen Preloader hingekriegt.

    Vielen vielen Dank!

  6. Erstellt am 20. Oktober 2009 um 22:25 | Permanent-Link

    Sollte der Preloader sich von der Mitte aus füllen, liegt das daran, dass ihr vergessen habt beim Erstellen des ladebalken Movieclips, die Registrierung auf oben links zu stellen. Ist in Schritt 18 erklärt ;)

    Liebe Grüße,
    Felix

  7. Erstellt am 20. Oktober 2009 um 22:30 | Permanent-Link

    Für das Streamen eines Video-Inhaltes ist diese Art von Preloader nicht wirklich geeignet, das müsste man sehr viel komplizierter lösen. Dazu wäre es Sinnvoll den Film als externe Datei in einen Programmierten Player zu laden. Dazu sollte man etwas über das Video Objekt und die NetStream Klasse lesen.
    Dieser Preloader könnte einen kleinen, internen Film laden und dann abspielen.

    Liebe Grüße,
    Felix

  8. Martin
    Erstellt am 26. Dezember 2009 um 01:00 | Permanent-Link

    Hallo Felix,

    vielen herzlichen Dank dafür, dass du dein Wissen auf diese leicht verständliche Weise teilst. Du hast damit schon zweimal heute meinen Tag gerettet. Ein paar schöne Feiertage und einen guten Rutsch!
    Ich freue mich auf weitere tolle Anleitungen!

    Gruß, Martin

  9. Ludowika
    Erstellt am 8. Mai 2010 um 23:26 | Permanent-Link

    Danke, für das tolle Tutorium! Hab nach deiner Anleitung alles nachgebastelt, funktioniert super und ist auch sehr liebevoll beschrieben! Vielen Dank!

  10. aggrotroll
    Erstellt am 10. Juni 2010 um 18:24 | Permanent-Link

    super anleitung! sehr verständlich

    der lade-balken klappt super, nur das mit der prozent-zahl will bei mir nicht hinhauen, auch wenn ich das komplett aus deiner fla in mein projekt kopiere…

  11. aggrotroll
    Erstellt am 10. Juni 2010 um 19:06 | Permanent-Link

    ah, ich habs rausgefunden. mein flash (cs5 as2) will zwischen variablen und pluszeichen ein leerzeichen haben, so muss das aussehen:

    myText = Math.round(myPercent*100) + “%”;

    jetzt funktionierts prima :-)

  12. Michaela
    Erstellt am 16. Dezember 2010 um 19:46 | Permanent-Link

    Hallöchen,

    leider klappt das bei mir nur halb. Nachdem alles geladen ist, springt er zwar auf den 3. Frame, aber der Ladebalken macht nichts und es steht auch keine Prozentangabe unten, außer bei vollen 100%. :(
    Dazu muss ich sagen, dass ich statt der Ebene “Content” mehrere Ebenen habe (das Ganze soll ein Dress Up-Game werden).

    Ich arbeite mit Adobe Flash CS3.

  13. sssssss
    Erstellt am 25. Januar 2011 um 09:49 | Permanent-Link

    was für ein dreck sowas kann man garnicht lesen!!!!!!!!!! voll das drecksloch hier!!!!!!!
    :D

Ihr Kommentar

Ihre E-Mail wird niemals veröffentlicht oder verteilt. Benötigte Felder sind mit * markiert

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>