FlashLite-Workshop 30.04.07: Grundlagen, AS-Tween, Tastaturabfrage

Softwaretechnische Voraussetzungen

Um Anwendungen mit Flash Lite 2.0 entwickeln zu können, muss unter Flash 8 folgendes installiert sein (1. und 2. sind im Pool R.201 bereits vorhanden):

1. Das Flash Lite-Update für Flash 8, zu finden auf der Seite http://www.adobe.com/support/flash/downloads.html als “Flash Lite 2 German Windows Updater” bzw. (nur wenn Flash 8 Englisch installiert ist das “Flash Lite 2.1 English Windows Update“.
2. Die aktuellen Profile für die zu verwendeten Geräte, in unserem Fall für das Nokia N70, zu finden auf der Seite http://www.adobe.com/products/flash/download/device_profiles/. Hier bitte beachten, dass zuerst das “Mobile Device Profile Update #3” installiert wird, da dieses das Nokia N70 enthält. Die Datei kann durch Doppelklick über den Extension Manager installiert und anschließend neuere Profil-Updates “drüberinstalliert” werden.
3. Ein Geräte-Template-File (optional!) für das passende “Look-and-feel” bei der Entwicklung innerhalb der Flash-IDE, zu finden unter http://www.flash-lite.de/downloads.html als Nokia_N70_template.zip. Es fügt zwei neue Ebenen hinzu: ein Bild des Geräts und einen Zusatztext mit Gerätespezifika. Beide Ebenen sind sog. Führungsebenen, werden also nicht mit veröffentlicht.
   Hier findet ihr eine von mir angepasste Version mit dem korrekten Geräteprofil und angepassten “Einstellungen für Veröffentlichungen”: Geräte-Template-File für Nokia N70

Erstellen einer einfachen Flash Lite 2.0-Anwendung

Soll eine Flash Lite-Anwendung “from scratch” erstellet werden, müssen folgende Schritte erfolgen:

• Starten von Flash 8
• Einstellen einer Bühnengröße entsprechend dem Zielgerät (N70: 176 x 208 Pixel); die Framerate kann vorerst mit 12 bps beibehalten werden
• unter “Datei” > “Einstellungen für Veröffentlichungen” im Reiter “Flash” unter “Version” die Einstellung “Flash Lite 2.0″ wählen
• unter “Datei” > “Geräteeinstellungen” den Inhaltstyp “Eigenständiger Player” und unter “Verfügbare Geräte” “Hersteller > Nokia > Nokia N70″ auswählen und über den Button “Hinzufügen >>” in die rechte Liste übernehmen (das “Generische Telefon” kann über den Button “<< Entfernen” gelöscht werden).

Man kann sich diese Vorarbeiten ersparen, indem man als Ausgangspunkt für unsere erste Flash Lite-Anwendung das oben unter 3) erwähnte Templatefile verwendet.

Unsere erste Testanwendung: Eine ActionScript Tween-Animation mit Tastaturabfrage

Dieses Beispiel zeigt drei Techniken in Anwendung: Den fscommand2-Befehl, mit dem Flash Lite mit der Systemumgebung des Mobilgeräts kommunizieren kann, das KeyListener-Objekt für die Tastaturabfrage und die mx.transitions.Tween-Klasse für das ActionScript-gesteuerte Tweening von Movieclips. Ziel ist das Auslösen einer gescripteten Tween-Animation (springender Punkt) mittels der linken Softtaste und das Beenden der Anwendung mit der rechten.

Ausgangspunkt ist das oben erwähnte Templatefile. Nach Erzeugen des roten Punkts in der Ebene “Content” wird er in einen Movieclip umgewandelt und ihm der Instanzname “ball_mc” zugewiesen. Am unteren Bildschirmrand werden direkt über den Softtasten zwei Buttons mit Beschriftung positioniert. Dies sind bereits alle benötigten Symbole.

In Frame 1 (neue Ebene “AS” ganz oben) folgt nun etwas ActionScript:

Als erstes wird mittels
import mx.transitions.Tween;
die ActionScript-Tween-Klasse eingebunden. Es folgen einige fscommand2-Befehle:
fscommand2("FullScreen", true);
schaltet den Player in den Vollbildmodus,
fscommand2("SetQuality", "high");
setzt die Wiedergabequalität der Animation auf “hoch”,
fscommand2("SetSoftKeys", "Animate", "Quit");
definiert, dass beide Softkeys verwendet werden sollen und weist ihnen die [PageUp] und [PageDown]-Tasten zur Auswertung mittels on(keyPress) zu — wir verwenden hier jedoch zur Tastaturabfrage das keyListener-Objekt und machen von keyPress keinen Gebrauch; dennoch muss das SetSoftKeys-Befehl angegeben werden.

Mittels
_focusrect = false;
wird die Anzeige des Fokus unterdrückt, d.h. welcher Button oder Textfeld momentan mittels des 4-Wege-Navigators ausgewählt ist. Damit verhindern wir den gelben Rahmen um die Buttons über den Softtasten.

Nun folgt die Tastaturabfrage: Mit
var keyListener:Object = new Object();
wird das KeyListener-Objekt erzeugt und für Benachrichtigungen bei Tastaturereignissen mittels
Key.addListener(keyListener);
registriert. Bei jedem Drücken oder Loslassen von Tasten wird nun unser “keyListener”-Objekt benachrichtigt. Nun muss es nur noch darauf reagieren, also eine Aktion auslösen. Hierfür schreiben wir eine Funktion für das Reagieren auf Tastendrücke:
keyListener.onKeyDown = function() {
Wir ermitteln, welche Taste gedrückt wurde:
code = Key.getCode();
Wenn es die rechte Softtaste war,
if (code == ExtendedKey.SOFT2) {
dann beenden wir die Anwendung mittels
fscommand2("quit");
}
War es die linke Softtaste,
if (code == ExtendedKey.SOFT1) {
soll der Punkt per Actionscript animiert werden. Hierfür erzeugen wir einen neuen mx.transitions.Tween mit dem Namen “ball_x_tween” und übergeben einige Parameter:
var ball_x_tween:Tween = new mx.transitions.Tween(ball_mc, "_x", mx.transitions.easing.Regular.easeOut, 20, 150, 3, true);
ball_mc ist die zu animierende MovieClip-Instanz, “_x” ist deren zu animierende Eigenschaft, mx.transitions.easing.Regular.easeOut definiert die Beschleunigungsklasse (Regular) und -methode (easeOut), sodass der Punkt horizontal am Ende langsamer bewegt wird, 20 ist der Startwert, 150 der Endwert, 3 ist die Dauer und true gibt an, dass es sich um Sekunden handelt.
Gleichzeitig soll der Punkt springen, daher setzen wir einen weiteren Tween ein und animieren die _y-Eigenschaft des Clips:
var ball_y_tween:Tween = new mx.transitions.Tween(ball_mc, "_y", mx.transitions.easing.Bounce.easeOut, 50, 175, 3, true);
}
Die Bounce-Beschleunigungsklasse übernimmt den Springeffekt, die Dauer ist dieselbe wie bei der Bewegung in X-Richtung.

Damit ist unser Beispiel komplett und kann über Steuerung > Film testen ausprobiert werden.
Download: Beispiel FlashLite-Workshop: “Springender Punkt”

_____

MS