FlashLite-Workshop 14.05.07: MovieClipLoader, SharedObject

Summary

Dieser Workshop soll die Möglichkeiten von Flash Lite 2 zum Laden externer Quellen (Bilder) zur Laufzeit sowie zum Speichern von Daten auf dem Mobilgerät aufzeigen.

Laden externer Quellen mittels MovieClipLoader

Die MovieClipLoader-Klasse wurde als Alternative zur loadMovie()-Funktion eingeführt und erweitert damit die Möglichkeiten zur Überwachung des Ladevorgangs. Es ist über die Listener-Technologie (welche mittlerweilen für viele Klassen, z.B. auch Tastatur und Maus - durchgängig implementiert wurde) leicht handhabbar. Folgende Ereignisse können in Verbindung mit einem Listener-Objekt des MovieClipLoader überwacht werden:

1. onLoadStart (wird aufgerufen, wenn mit dem Herunterladen einer Datei durch einen Aufruf von MovieClipLoader.loadClip() begonnen wurde)
2. onLoadError (wird aufgerufen, wenn eine mit MovieClipLoader.loadClip() zu ladende Datei nicht geladen werden konnte)
3. onLoadProgress (wird bei jedem Speichern des geladenen Inhalts auf der Festplatte aufgerufen, also zwischen MovieClipLoader.onLoadStart und MovieClipLoader.onLoadComplete) -> für Preloader!
4. onLoadComplete (wird aufgerufen, wenn das Herunterladen einer Datei mit MovieClipLoader.loadClip() vollständig abgeschlossen ist)
5. onLoadInit (wird aufgerufen, wenn die Aktionen im ersten Bild des geladenen Clips ausgeführt wurden)

Das folgende Beispiel zeigt das Laden einer externen Bilddatei, wobei über onLoadStart und onLoadComplete die Ladezeit ermittelt und über onLoadInit der fertig geladene und initialisierte Movieclip zentriert und die Ladezeit ausgegeben wird.

Die Bühne ist zu Beginn leer, den benötigten MovieClip sowie das Textfeld wird per Script erzeugt. Das Skript liegt in der AS-Ebene im ersten Bild der Hauptzeitleiste.
Wir belegen ausschließlich die rechte Softtaste mit “Quit” über:
fscommand2("SetSoftKeys", null, "Quit");
Der Rest der Initialisierung ist aus dem letzten Workshop bekannt.

Nun wird ein leerer Container-Movieclip namens “image_mc” für das einzuladende Bild erzeugt:
this.createEmptyMovieClip("image_mc", this.getNextHighestDepth());
Als nächstes erzeugen wir das Listener-Objekt für den MovieclipLoader:
var mclListener:Object = new Object();

Es folgen die Funktionen für die Ereignisse, die beim Laden via MovieClipLoader auftreten können.
Zuerst die Funktion bei Lade-Beginn - sie merkt sich die Startzeit, indem sie mit getTimer die Zeit seit Wiedergabe des SWF-Files als Variable “startTimer” des Ziel-Movieclip speichert:
mclListener.onLoadStart = function(target_mc:MovieClip) {
target_mc.startTimer = getTimer();
};

Das Gegenstück dazu ist eine Funktion für das abgeschlossene Laden, sie merkt sich die Endzeit wiederum als Variable “completeTimer” des Ziel-Movieclip:
mclListener.onLoadComplete = function(target_mc:MovieClip) {
target_mc.completeTimer = getTimer();
};

Über eine onLoadInit-Funktion kann überprüft werden, ob das Laden erfolgreich abgeschlossen ist und Aktionen im ersten Bild des Ziel-Movieclip ausgeführt worden sind (”ansprechbar”). Hier wird nun der Container-Movieclip zentriert und die Zeitdifferenz ausgegeben:
mclListener.onLoadInit = function(target_mc:MovieClip) {
// Zeitdifferenz ermitteln
var timerMS:Number = target_mc.completeTimer-target_mc.startTimer;
// Ziel-Movieclip horizontal und vertikal zentrieren
target_mc._x = Stage.width/2 - target_mc._width/2;
target_mc._y = Stage.height/2 - target_mc._height/2;
// leeres Textfeld unterhalb des eingeladenen Ziel-Movieclip erzeugen
target_mc.createTextField("timer_txt", target_mc.getNextHighestDepth(), 0, target_mc._height, target_mc._width, 22);
// Zeitdifferenz in Millisekunden ausgeben
target_mc.timer_txt.text = "loaded in "+timerMS+" ms.";
};

Nachdem die Funktionen als Reaktion auf die Ereignisse definiert wurden, wird nun noch der MovieClipLoader erzeugt:
var image_mcl:MovieClipLoader = new MovieClipLoader();
Das Listener-Objekt für den MovieclipLoader wird aktiviert:
image_mcl.addListener(mclListener);
Abschließend stoßen wir das Laden des PNG-Files in den Container-Movieclip “image_mc” an:
image_mcl.loadClip("earth.png", image_mc);

Die abschließenden Funktionen für Tastatur-EventHandler sollten aus dem letzten Workshop bekannt sein.

Download: Beispiel FlashLite-Workshop: MovieClipLoader

Speichern von Daten auf dem Mobilgerät mittels SharedObject

Vergleichbar mit Cookies in HTML ist es auch aus einer Flash (Lite)-Anwendung heraus möglich, kleinere Datenmengen lokal zu speichern. Hierfür wurde die SharedObject-Klasse entwickelt. Im Gegensatz zu Flash ist es jedoch mit Flash Lite nicht möglich, anwendungsübergreifend (d.h. verschiedene SWFs speichern/lesen ein gemeinsames Shared Object) zu arbeiten.

Im vorliegenden Beispiel kann ein Punkt mit Hilfe der Richtungstasten (4-Wege-Navigation) bewegt und mit der zentralen Richtungstaste (Enter) zurückgesetzt werden. Bei Drücken der linken Softtaste wird die momentane Position des Punktes in Form eines XML-Strings in einem SharedObject gespeichert. (Abweichend vom Workshop am Montag; da hatte ich die _x und _y-Eigenschaft direkt im SharedObject abgelegt. Die XML-Variante ist IMHO flexibler!) Nach Beenden und erneutem Aufruf der Anwendung wird die gespeicherte Position wiederhergestellt.

Im ersten Bild der Hauptzeitleiste, Ebene “AS” befindet sich das Skript.

Zuerst werden die Softtasten belegt (links = Position speichern, rechts = beenden):
fscommand2("SetSoftKeys", "SavePos", "Quit");

Wir merken uns die Initialposition des Punkts:
initX = ball_mc._x;
initY = ball_mc._y;

Mittels
SharedObject.addListener("ballSO", this, "onMSO");
fügen wir der Klasse “SharedObject” ein Listener-Objekt (Objektname “ballSO”) hinzu. Der Parameter “onMSO” bezeichnet die Funktion, welche bei erfolgreichem Hinzufügen aufgerufen werden soll.

Die Anweisung
var so:SharedObject = SharedObject.getLocal("ballSO");
gibt einen Verweis (”so”) auf ein SharedObject zurück, das nur für das aktuelle SWF verfügbar ist (falls dieses nicht bereits existiert, wird es durch diese Methode erstellt).

Mit einem
trace("Maximale Größe: "+SharedObject.getMaxSize()+" Bytes");
lassen wir uns (in Flash testweise) die maximale Größe des Shared Object ausgeben.

Nun wird die Funktion definiert, welche bei erfolgreichem Hinzufügen des Listeners aufgerufen wird:
function onMSO(so:SharedObject)
{

Wir lassen uns die momentan belegte Größe des SharedObject ausgeben mit
trace("Belegte Größe: "+so.getSize()+" Bytes");

Falls überhaupt etwas im SharedObject gespeichert ist,
if ( 0 != so.getSize() )
{

erzeugen wir ein neues XML-Objekt aus den als String im SharedObject abgelegten Daten,
position_xml = new XML(so.data.xml);

lesen die Position aus dem XML (”durchhangeln”), übertragen diese in die Eigenschaften des Movieclips
ball_mc._x = parseInt(position_xml.firstChild.childNodes[0].firstChild.toString());
ball_mc._y = parseInt(position_xml.firstChild.childNodes[1].firstChild.toString());

und geben eine Meldung in einem Textfeld aus.
output_txt.text = "Pos. aus XML wiederhergestellt!";
}

Da das Ganze nur 1x beim Start erfolgen soll, wird der Listener letztlich wieder entfernt.
SharedObject.removeListener("ballSO");
}

Nun müssen die Positionsdaten nur noch in das SharedObject geschrieben werden. Dies geschieht beim Tastaturhandler (Zeile 62):
…
if (code == ExtendedKey.SOFT1) { // linke Softtaste gedrückt

Wir stellen einen XML-String zusammen, der aus XML-Nodes und den momentanen _x- und _y-Werten des Movieclips besteht:
so.data.xml = "<config>";
so.data.xml += "<ballxpos>"+ball_mc._x+"</ballxpos>";
so.data.xml += "<ballypos>"+ball_mc._y+"</ballypos>";
so.data.xml += "</config>";

Anschließend schreiben wir den SharedObject-Inhalt aus dem RAM in die Datei des SharedObject:
so.flush();

Nun geben wir noch eine Meldung im Textfeld aus:
output_txt.text = "Pos. als XML gespeichert!";
}

Die Tastatursteuerung wird nun noch um die 4 Richtungstasten (+mittlere Taste) ergänzt (ab Zeile 72):
// Navigatortaste links: Punkt nach links bewegen
if (code == 37) {
ball_mc._x -= 10.0;
}
// Navigatortaste oben: Punkt nach oben bewegen
if (code == 38) {
ball_mc._y -= 10.0;
}
// Navigatortaste rechts: Punkt nach rechts bewegen
if (code == 39) {
ball_mc._x += 10.0;
}
// Navigatortaste unten: Punkt nach unten bewegen
if (code == 40) {
ball_mc._y += 10.0;
}

und bei Drücken der mittleren Richtungstaste wird die Position des Punktes auf die anfangs gespeicherten Initialwerte zurückgesetzt.
if (code == 13) {
ball_mc._x = initX;
ball_mc._y = initY;
}

Die fertige Datei gibt es hier als Download: Beispiel FlashLite-Workshop: SharedObject und XML

_____

MS