Bilder dynamisch laden in Flash MX

  Was bringt die neue Möglichkeit?

  Bilder dynamisch laden

  Bilder in leere Movieclips laden


Was bringt die neue Möglichkeit?

Die neue Möglichkeit, Bilder (jpgs) dynamisch in Flash hineinzuladen, hat beispielsweise den Vorteil, nicht mehr den umständlichen Weg über "Datei/Importieren..." zu gehen. Der exportierte swf Film bleibt sehr klein und wird schnell geladen. Bilder können zur Laufzeit geladen werden, wenn sie benötigt werden. Die Aktualisierung von Bildergalerien etc. gestaltet sich viel einfacher. Man braucht nicht mehr den Flash Film zu öffnen und darin Anpassungen vornehmen, um Bilder auf den aktuellsten Stand zu bringen, sondern spielt einfach immer nur die neuen Bilder auf....Und so weiter...

BEISPIEL FILM

In diesem Tutorial stelle ich die neue Möglichkeit vor, besonders in Hinblick auf die Erstellung von eigenen Funktionen, die das Laden und Manipulieren der Bilder vereinfacht. (Bei allen Beispielen wird davon ausgegangen, dass der Film und die Bilder im gleichen Ordner liegen)



Bilder dynamisch laden

Bilder werden mit dem Befehl
loadMovie("bildbezeichnung.jpg",1);
geladen. Wenn dieser Befehl im ersten frame auf der Hauptzeitleiste steht, geschieht Folgendes: Das Bild wird in Ebene 1 geladen und an der linken oberen Ecke ausgerichtet. Nennt man als Ziel jedoch einen Movieclip wird das Bild an der linken oberen Ecke des Ziel-Movieclips ausgerichtet, z.B.
loadMovie ("bild1.jpg",meinmc);
Voraussetzung ist hier, dass es einen mit "meinmc" benannten Movieclip auf der Bühne gibt, sonst läuft die Zielangabe ins Leere. Um die Positionen der zu ladenden Bilder bestimmen zu können, ist es einfach, vorher entsprechend viele movieclips auf der Bühne zu haben, die als Ziel für die Bilder herhalten. Jeder Movieclip muß dabei eindeutig benannt werden, damit jedem einzelnen Bild einen eigenen "Container" zugewiesen werden kann. Außerdem hat diese Variante den Vorteil, dass den Movieclips alle gewohnten Aktionen zugewiesen werden können. Die Bilder verhalten sich sozuagen wie Movieclips und können entsprechend manipuliert werden.(Größe/Skalierung/Position/ziehbar machen etc.)

Hier ist das Tutorial zu Ende für alle, denen diese Auskunft reicht. Weiter geht es für die Faulen unter uns mit der neuen Möglichkeit, Bilder in nicht manuell angelegte Movieclips zu laden, d.h. die Arbeit Flash übernehmen zu lassen.

BEACHTEN BEIM DYNAMISCHEN LADEN: Bilder dürfen nicht im progressiven Kodierverfahren komprimiert werden (d.h. in mehreren Durchgängen) , sonst werden sie NICHT angezeigt, bzw. geladen in Flash!

Bilder in leere Movieclips laden

Der Film oben habe ich so erstellt. Die Original Flash Datei enthält den gesamten nötigen Action-Script Code in nur einem Frame, dem ersten auf der Haupt-Timeline. So kann man viel schneller den Code bearbeiten und anpassen, ohne lange rumzusuchen.
Die Anweisung für Flash, einen Movieclip zu erzeugen, in den ein Bildsozusagen hineingeladen wird, lautet
createEmptyMovieClip("mccontainer",1);
mccontainer.loadMovie("bild1.jpg");

Es wird ein leere MovieClip erzeugt, den man benennen muß (hier "mccontainer"). Er wird auf Ebene 1 geladen. Dort hinein wird das Bild geladen in der zweiten Anweisung. Anschließend kann man "mccontainer" wie gewohnt Anweisungen erteilen. Beispiel:

mccontainer._x=150; //Da alle per createEmptyMovieClip erzeugten Clips automatisch an der linken oberen Ecke des Films ausgerichtet werden muß man angeben, wo die MCs letztendlich positioniert werden sollen im Film.

Wenn ich jedoch viele Bilder laden möchte, wird es aufwendig, jedesmal die entsprechenden Anweisungen zu erteilen. Außerdem muß man für 50 Bilder auch erstmal 50 Movieclips anlegen. Die Arbeit kann man sich sparen, indem man zum Beispiel Schleifen mit Variablen einbaut, die die Arbeit übernehmen.
Im Filmbeispiel gibt es 8 Bilder (bild1.jpg.-bild 8.jpg), die in von Flash erzeugte Movieclips geladen werden (box1-box8). Die variable i ersetzt also einfach die jeweilige Zahl und die Schleife arbeitet die Zahlen 1-8 ab. Fertig ist die Anweisung fürs Bilder laden:

for (var i=1;i<9;i++){
createEmptyMovieClip ("box"+i,i); //es werden soviele MCs wie benötigt erzeugt, und auf JEWEILS EINE EIGENE Ebene gelegt
_root["box"+i]._x=i; //diese Zeile kann man auch weglassen, alle MCs werden dann automatisch bei 0 positioniert
_root["box"+i].loadMovie ("bild"+i+".jpg");
}

Mit dieser Anweisung kann ich jederzeit soviele Bilder laden wie ich möchte, für 100 Bilder muß ich die jpgs nur entsprechend benennen ("bild1.jpg"-"bild.100.jpg"). Die Schleife sollte dann natürlich bei i<101 stoppen.

Da die Bilder bzw. Movieclips zunächst alle übereinander liegen, muß ich die Anweisung für die Positionierung erteilen. Im Beispiel werden sie beim Klicken auf den Movieclip "nebeneinander" auch nebeneinander gestellt.

//Vorgaben für Abstand und Y-Position werden zunächst definiert
abstand=100;
POSY=10;

//Funktion für den MovieClip "nebeneinander", wird nur auf Klick ausgeführt
nebeneinander.onPress = function () {
for (var i=2;i<10 ;i++) {
_root["box" +i]._x=(_root["box" +(i-1)]._x)+abstand;
_root["box" +(i-1)]._y=POSY;
}
}

Man kann diese Funktion beispielsweise auch mit der ersten Anweisung kombinieren, um die Bilder bereits beim Laden an ihre richtigen Position anzuzeigen.

In der downloadbaren Flash Datei befinden sich noch zwei kommentierte Beispiele, wie man die Movieclips per Benutzereingabe skalieren und auf Originalgröße zurücksetzen kann.

Es ist also mittlerweile möglich, völlig dynamische Bildergalerien zu erzeugen, ohne jemals nochmal in die Flash-Datei "hinein zu müssen". Man kann die Funktion für die Positionierung z.B. so abwandeln, dass die Bildern in Reihen und Spalten gezeigt werden, oder man läßt die Bilder gestapelt und blättert durch die Ebenen (jeder Movie Clip mit Bild liegt auf einer eigenen Ebene) mit einem Vor- und Zurück- Button, alles ist möglich. Das Erstellen des Codes scheint zunächst aufwendig, aber dafür ist die Pflege und Aktualisierung später Sekundensache.