Preloader für externe swf's

[Harris]

Da oft gefragt und immer wieder schwer gefunden, poste ich hier mal eben noch ein Tutorial für eine Preloadervariante zum laden externer swf dateien. Der Vorteil ist nicht nur, dass alles von einem Hauptfilm gesteuert wird, sondern es werden auch sämtliche sounds, eingebettete Schriftarten etc mit im Preloader angezeigt (wenn sich der Preloader in den ersten frames des zu ladenden Films befindet, läd der Flashplayer automatisch alle Sounds, eingebettete Schriftarten etc bevor der erste Frame abgespielt wird. Dies bedeutet, dass man in einigen Fällen erst ab der hälfte des Ladevorgangs oder später den Preloader sieht, da sounds in vielen swf's den Löwenanteil belegen).

Zuerst betrachten wir uns den Hauptfilm (bei mir "main.fla"). Was dieser bei jedem einzelnen tut, sei im Bsp. egal. Entscheident ist im ersten frame (bzw. bevor der Loader das erste mal gebraucht wird) das erzeugen 2er leerer mc's. Einen für unseren Peloader in Level 10 (möglichst weit oben) und einen für die zu ladenden Filme (z.B. Level 5).

_root.createEmptyMovieClip("mccontainer5", 5);
_root["mccontainer5"]._x=0;
_root["mccontainer5"]._y=0;

_root.createEmptyMovieClip("loadercontainer", 10);
_root["loadercontainer"]._x=0;
_root["loadercontainer"]._y=0;

Im beispiel sind beide am Punkt x=0;0 ausgerichtet. Ihr könnt diese natürlich nach bedarf anders platzieren.

Im Zweiten Frame (oder wo ihr auch immer wollt......z.B. auch als event beim drücken eines Buttons) nun den Preloader in den leeren MC in Ebene 10 laden ("loadercontainer") und dann den clip, der abgespielt werden soll in den "mccontainer5".

_root.loadercontainer.loadMovie("preloader.swf");
_root.mccontainer5.loadMovie("start.swf");

In meinem Hauptfilm habe ich im 3. Frame ein stop(); gesetzt um das loopen des Filmes zu verhindern (wichtig). Der kann natürlich wie ihr möchtet weiterlaufen bzw. per skript später in einen Frame hinter die Stopmarke gesetzt werden.

 

[Harris]

Nun zum Preloader ("preloader.swf"). Dieser ist ähnlich aufgebaut wie viele andere .... nur eben als eigenständige swf. Hierzu einen neuen Film erzeugen. Nun eine Hintergrundebene mit einem Hintergrund anlegen (optional) und eine Ebene für die Skripts. In den ersten 3 Frames Schlüsselbilder einfügen.
Zwischen die beiden habe ich nun 4 Ebenen eingefügt (für die gesamtbytes, geladenen bytes, prozent und einen Ladebalken........um alles zu erklären).

Für die Anzeige der Gesamtbytes erstellt ihr in einer der eben angelegten Ebenen ein Textfeld. Nun in dessen Eigenschaftenmenu Schriftart, Farbe, etc einstellen. Wichtig ist in das Feld "var" "bytes_gesamt" eintragen und die Eigenschaft "static text" auf "dynamic text" ändern.
Selbiges für die geladenen Bytes (in das Var Feld "bytes_geladen") und Prozentanzeige (Var Feld: prozent) erstellen. Erwähnen sollte ich hier wohl, dass man gegebenenfalls die Schriftart bzw. Teile davon anhängen muss (im gleichen Eigenschaftenfenster unter dem Button "character").

Für den Ladebalken erstellt man einen neuen mc (Strg+F8). Hier einfach ein Rechteck in der gewünschten Länge des Balkens erstellen. Im frame 100 ein Schlüsselbild einfügen und dann einen Bewegungstween erstellen. nun im ersten Frame den Balken auf Breite 1px stellen. Nun habt ihr quasi ein animiertes Rechteck, was innerhalb von 100 Frames von größe 1px auf eure Wunschgröße "wächst". Nun im ersten Frame noch ein stop(); setzen damit der balken nicht alleine loslegt.
Wichtig ist nun, dass ihr dem gerade erstellten MC den Instanzname "balken" gebt.

Nun solltet ihr 3 dynamische Textfelder haben (mit Var: bytes_gesamt, bytes_geladen, prozent) und den mc für den balken, den ihr jetzt in die noch lehre Ebene auf die Bühne zieht.

Nun geht ihr in den ersten Frame der am anfang erstellten Skriptebene. Hier muss folgendes Skript hinein:

bytes_gesamt = _root.mccontainer5.getBytesTotal();
bytes_geladen = _root.mccontainer5.getBytesLoaded();
prozent = Math.round((bytes_geladen/bytes_gesamt)*100);
balken.gotoAndStop(prozent);

if (prozent == "100") {
gotoAndPlay (3);
}

Die ersten beiden Zeilen fragen im mccontainer5 (wo der eigentlich abzuspielende Film geladen wird) die Gesamtgröße in Bytes bzw. die davon schon geladenen Bytes ab. Die dritte Zeile berechnet draus die geladene Menge in Prozent. Die vierte Zeile steuert unseren balken anhand des Prozentwertes (springt je nach prozentwert in das jeweilige Bild des Blken MC's). Die if - Anweisung ist wichtig für die erforderliche Schleife (soll ja so lange anzeigen, bis alles geladen ist). GotoAndPlay(3) bedeutet, dass wenn die if - anweisung zutrift im 3. Frame des Preloaders weiterabgespielt wird....ansonsten natürlich im 2.Frame.
In eben diesen 2. Frame in der Skriptebene kommt nun der zweite Schleifenteil (Rücksprung in den ersten Frame).

gotoAndPlay(1);

Nun schauen wir noch in den 3. Frame in der Skriptebene. Hier entscheidet sich ja nun was passieren soll, wenn der Film komplett geladen ist. Nun muss unser Preloader sozusagen auf den Müll, da wir ja den eigentlichen Film einige Ebenen darunter laden. Dies tun wir mit der Anweisung:

unloadMovie(_root.loadercontainer(this));

Nun ist unser Preloader enlich fertig. Bleibt nur noch unser eigentlicher, zu ladender Film.

 

[Harris]

Und last but not least der zu ladende Film ("start.swf"). Hierfür nehmt ihr einfach einen Clip den ihr laden wollt. Nun ist auch egal ob ihr einen größeren Sound oder Bilder anhängt um alles zu testen (wird ja nun alles vom Preloader erfasst ).

Wichtig ist in diesem clip nur, dass er nicht loslegt, bevor er komplett geladen ist. Dies kann z.B. mit einer Stopanweisung im ertsen frame bewerkstelligt werden. Den Clip müsst ihr dann nur vom preloader aus im dortigen 3. Frame (vor dem unload) mit einem _root.mccontainer5.gotoAndPlay(2); hinter die Stopanweisung setzen.
Dies würde also für den 3. Frame in der Preloader.swf bedeuten:

statt nur
unloadMovie(_root.loadercontainer(this));

muss nun
_root.mccontainer5.gotoAndPlay(2);
unloadMovie(_root.loadercontainer(this));



Ihr könnet natürlich auch in diesem clip eine kleine Schleife machen.
Frame 1:

var bytesgel = this.getBytesLoaded();
var bytestot = this.getBytesTotal();

if (bytesgel >= bytestot) {
gotoAndPlay (3);
}

Frame 2:

gotoAndPlay (1);

Diese funktioniert dann quasi ähnlich wie die im Preloader.........nur das die werte nicht angezeigt werden.

eleganter ist hier natürlich die erste variante......>)

Nun braucht man im Prinzip nur bei jedem event oder was auch immer, im Hauptfilm (main.swf) die beiden loadanweisungen zum Laden des Preloaders und zum Laden des eigentlichen Films (der allerding in dieser art und weise immer in den mccontainer5 geladen werden muss) einfügen und im zu ladenden Film am anfang ein stop(); (bzw die kleine Schleife) einfügen.


Wenn es noch fragen gibt dann an mich.........mfg
Harris

 

[Harris]

Aufgrund von Nachfrage sind hier noch mal Beispiel - fla's ....... in die start.fla einfach in eine neue ebene ab Bild 2 (hinter den Frame mit der Stop-Marke) ein paar größere jpg's einfügen und auf einen Webserver hochladen.

Vieleicht könnte ja auch irgend ein Admin ein Tutorial draus machen.

mfg Harris

 

[kleinestigerle]

Hallo Harris,

danke für den super Preloader & die tolle Beschreibung! Habe verstanden wie es geht. Ein bischen angepasst & das layout geändert...
Habe jetzt nur das Problem, daß ich nicht weiß, wie ich es machen muß, daß ich statt einer festen (z.B.: .x = 10 bzw. .y=10) Positionierung eine browserabhängige Positionierung hin bekomme.
Mein Flash-Film ist 900 x 575 pixel groß, soll nicht skaliert werden, aber bei allen Bildschirm-Auflösungen und auch beim Ändern der Größe des Browserfensters immer zentriert stehen.
Geht das? Hast Du einen Tipp nach welchen Stichwörtern ich suchen muß?
Danke! mfg kleinestigerle