IT-Academy Logo
Sign Up Login Help
Home - Internet - Webdesign - Flash - Einfacher Preloader in Flash



Einfacher Preloader in Flash

Der einfache Weg, dem Benutzer mitzuteilen, dass gerade das Flash-File geladen wird. Die gesamten und die bereits geladenen Bytes werden angezeigt.


Autor: Andreas Sackl (murl)
Datum: 17-03-2003, 08:26:19
Referenzen: keine
Schwierigkeit: Anfänger
Ansichten: 7987x
Rating: 8.67 (6x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]





Einleitung:

Jeder kennt das: Man hat ein cooles Flashmovie erstellt und veröffentlicht es im Internet. Doch beim Öffnen der Site stellt man fest, dass das Laden doch länger dauert. Es ist erwiesen, dass User nur 7 Sekunden auf einer Seite verweilen, bis sie wechseln, da sie nichts Interessantes finden können. Dies kann unter Umständen vermieden werden. Informiert einfach eure User, dass das Flash-File geladen wird, und wie lange es noch ungefähr dauern wird. Natürlich spricht nichts dagegen, den Ladenvorgang mit kleinen Grafikeinlagen aufzubessern. Alles, was den User abhalten könnte den Ladevorgang (und dieser ist ohne Preloader ja nicht gerade unterhaltsam) abzubrechen, ist erlaubt und erwünscht.

Der hier vorgestellte Preloader ist DER Standard-Preloader und sollte eigentlich weit verbreitet sein. Da ich ihn aber auf dieser Seite jedoch nicht gefunden habe, könnt ihr euch nun hier das Tutorial dazu anschauen.

Tutorial

So soll das Ganze im Endeffekt ausschauen:



Dem User werden die Gesamtgröße des Flash-Files, die Anzahl der geladenen Bytes und die prozentuale Anzahl (errechnet aus der Gesamtgröße und der geladenen Bytes) angezeigt.

Es werden insgesamt 4 Layer benötigt:



In den Layer "geladen" fügt ihr ein dynamisches Textfeld ein:



Einfach das Textfeldtool auswählen, ein Textfeld in den Arbeitsbereich ziehen und im Properties-Fenster "Dynamic Text" auswählen. Außerdem müsst ihr im Feld "Var" "geladen" einfügen. Nun habt ihr dem dynamischen Textfeld eine Variabel zugewiesen (wird später im Actionscript benötigt).

Im Layer "zuladen" macht ihr genau das Gleiche, nun benennt ihr das dynamische Textfeld mit "zuladen".

Im Layer "prozent" fügt ihr ein weiteres dynamisches Textfeld ein und benennt es mit "prozent".

Im Layer eurer Wahl könnt ihr nun auch beliebigen satischen Text platzieren. Das ganze sollte dann so aussehen:



Fügt nun in Frame Nummer 2 in jeden Layer ein Bild mit "F5" ein. Klickt nun wieder in den Frame Nummer 1. Nun müsst ihr folgende Actionsscript-Befehle in die einzelnen Layer schreiben:

Layer "prozent":
prozent = Math.round((_root.getbytesloaded()/_root.getbytestotal())*100);
Ihr dividiert die geladenen Bytes (_root.getbytesloaded()) durch die noch zu ladenden Bytes (_root.getbytestotal()). Das ganze mit 100 multipliziert ergibt den prozentuellen Anteil. Wir wollen dem User nur ganze Prozentwerte zeigen, also wird die "Math.round"-Funktion verwendet. Sie rundet auftretende Dezimalzahlen auf ganze Zahlen. Die Variabel "prozent" stellt das dynamische Textfeld da. Der Wert wird im Textfeld angezeigt.

Layer "geladen":
geladen = _root.getbytesloaded();
Die geladenen Bytes werden im dynamischen Textfeld angezeigt.

Layer "zuladen":
zuladen = _root.getbytestotal();
Die Gesamtgröße des Movies wird angezeigt. Ok, der User wird nun über den aktuellen Ladestand informiert. Jetzt müssen wir uns noch darum kümmern, dass das Flash-File erst dann abgespielt wird, wenn es fertig geladen wurde.

Im Layer "preloader" müsst ihr einen zusätzlichen Keyframe (mit der Taste F6) einfügen.

Im ersten Frame fügt ihr folgende Actionscript-Befehle ein:
if (prozent == 100) {
gotoAndPlay (3);
}

Hat die Variabel "prozent" den Wert 100 (=alle Bytes wurden geladen), begibt sich Flash zum Frame Nummer 3. Euer eigentliches Flash-Movie könnt ihr ab dem 3.Frame einfügen. Die ersten 2 Frames sind für den Preloader vorgesehen.

Im 2. Frame des Layers "preloader" fügt ihr folgenden Code ein:
gotoAndPlay(1);

Sollte das File noch nicht fertig geladen sein, springt Flash wieder zum ersten Frame. Im ersten Frame kontrolliert Flash wieder, ob das File fertig geladen wurde. Sobald das File fertig geladen wurde, endet diese "Schleife" und der eigentliche Film wird abgespielt.

Abschluss

Das wars eigentlich schon. Natürlich kann dieser Preloader nach Belieben erweitert werden. Ihr könntet eine eigene, animierte Grafik einfügen. Ihr könntet einen sich ständig ändernden Text einbinden, um den Besucher bei Laune zu halten. Wie gesagt, alles was den Besucher daran hindert, den Download abzubrechen, ist erlaubet! :-))) Ich hoffe, ich konnte euch mit diesem Tutorial weiterhelfen. Sollte etwas unklar sein, so schickt mir bitte eine Mail. Viel Spaß beim Ausprobieren!!!


sheikari
Rookie
Beitrag vom:
29-08-2003, 16:00:26

Toll erklärt!

Das erste Mal, dass ich was von Anfang an verstanden hab und nicht stundenlang rumrätseln musste, was das nun bedeuten könnte, was der Autor meinen könnte! Echt, Kompliment!

-----------------------------------------------------
sheikari


gggggggggg
Rookie
Beitrag vom:
18-03-2003, 16:52:46

swf

Hallo Andreas, soweit so gut ... hat mich auch ein Stück weiter gebracht. Vielleicht kannst Du mir auch darin helfen: Wie bekomme ich das SWF mit der Hintergrundfarbe transparent ? Ich habe zu dem führenden index.html eine MASS + GRAVITY Mouse als html Code dazu gegeben. Dieser verschwindet jedoch hinter das SWF und ist daher nur am Rand sichtbar. Also wie bekomme ich das HTML vor dem SWF oder wie bekomme ich den Hintergrund vom Flash transparent oder weiter: Wie bekomme ich das SWF als veränderbare Datei zu lesen ???? Kann Ja dann die Farbe #010101 im geöffnetem SWF anstatt #FFFFFF eingeben.

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


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04511
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06248
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1158
Comments: 0