Hinweis: Dieser Artikel behandelt den Umgang mit dem alten Flex 3 SDK.

Mit der Veröffentlichung des Flex SDK als Open Source ermöglicht es Adobe Webentwicklern endlich von offizieller Seite aus, SWF-Dateien ohne die Anschaffung des teuren Adobe Flash oder die Verwendung von Dritthersteller-Tools zu erstellen. Die Entwicklungsumgebung Adobe Flex Builder bleibt jedoch kommerziell, so dass man bei Verwendung des Flex SDKs auf die Kommandozeile angewiesen ist.

Da Adobe als kommerzieller Anbieter bewusst seine IDE pushen möchte, findet man in den Adobe-Tutorials keine wirklich brauchbare Starthilfe, die von 0 anfängt - und das schon gar nicht auf Deutsch. Das möchte ich also mit diesem Artikel versuchen zu ändern.

Download und Installation des Flex SDK

Das Flex SDK ist auf der Adobe-Website zum Download erhältlich [1]. Auf der Download-Seite ist nicht der Eintrag "Flex Builder Professional" einzuwählen, sondern weiter unten der Eintrag "Flex SDK". Dort das Häkchen neben dem License Agreement setzen und den Download der etwa 40 MB großen Datei starten.

Das ZIP-Archiv sollte an zentraler und gut erreichbarer Stelle extrahiert werden - ich habe für solche Zwecke eine eigene Partition für den Bereich Software- und Web-Entwicklung auf meinem Rechner. In meinem Beispiel also entpacke ich das Archiv nach D:\FlexSDK.

Das SDK enthält neben dem eigentlichen Flex Framework eine Fülle an Beispielen, Vorlagen und Bibliotheken. Für uns ist jedoch primär der eigentliche Flex Compiler interessant, welcher im Unterverzeichnis 'bin' zu finden ist.

Bedienung des Flex Compilers

Die Handhabung des Flex Compilers mxmlc mit seinen Standard-Einstellungen ist auf Kommandozeilen-Ebene recht einfach, da er lediglich zwei Parameter benötigt: Die Quelltextdatei und die Ausgabedatei.

mxmlc -file-specs=Quelltextdatei -output=SWF-Datei

Ich habe für meine Zwecke eine Batch-Datei geschrieben, die den Aufruf des Compilers vereinfacht und zudem die Kommandozeile nach Aufruf durch den Windows Explorer offen hält, falls es Fehlermeldungen beim Kompilieren gab:

1
2
3
4

@echo off
\FlexSDK\bin\mxmlc.exe -file-specs=%1 -output=%2
pause
exit

Nun kann ich mit einer Verknüpfung zur compile.bat mit dem Namen der Quelltext und der SWF-Datei als Parameter für jedes Projekt bequem die Kompilierung anstoßen.

Hallo, Welt!

Das Kerngerüst für das einfaches Oberflächen-Layout sind auf XML basierende Dateien mit einem eigenen Namespace von Adobe. Ein einfaches "Hallo, Welt!"-Programm sieht hier folgendermaßen aus:

1
2
3
4

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Label text="Hallo, Welt!" />
</mx:Application>

Dies erzeugt eine leere Oberfläche mit einem einzigen Bezeichnungsfeld mit dem Inhalt "Hallo, Welt!".
Nach der Speicherung der Datei als hallo.mxml erzeugen wir also direkt unsere erste eigene Flex-Anwendung mittels unserer compile.bat durch den Aufruf:

compile hallo.mxml hallo.swf

Der Flex Compiler meldet nach kurzer Zeit die erfolgreiche Kompilierung und die hallo.swf kann im Browser aufgerufen werden - voraussetzung ist natürlich ein aktuelles Flash Plugin.

Beispiel-Anwendung: Überblenden von Bildern

Doch grau ist alle Theorie, fahren wir daher mit einer kleinen, sinnvollen Applikation fort, die auf vielen aktuellen Websites ihre Anwendung findet: Das Überblenden von Bildern.

Unser Programm wird grob gesehen aus zwei Teilen bestehen. Zum einen die MXML-Definitionen und zum anderen einem ActionScript-Teil zur Steuerung der Überblendung.

Wir beginnen also zunächst mit der Definition eines Canvas-Objekts, welches die darzustellenden Bilder enthält. Dieses Zeichenflächen-Objekt erlaubt uns, die Bilder pixelgenau übereinander zu positionieren ohne uns weiter mit dem automatisierten Layout von Flex beschäftigen zu müssen:

1
2
3
4

<mx:Canvas>
    <mx:Image id="p1" source="bild1.jpg" />
    <mx:Image id="p2" alpha="0.0" source="bild2.jpg" />
</mx:Canvas>

Unsere Bilder werden mit dieser Art und Weise zur Laufzeit aus dem Dateisystem geladen. Es ist jedoch auch möglich, Bilder direkt in die SWF-Datei einzubetten. Ein Beispiel für so eine Einbettung wäre:

<mx:Image id="p1" source="@Embed('bild1.jpg')" />

Jedes Bild erhält von uns eine eindeutige Identifikation (p1, p2) und eine Bildquelle, ausserdem wird der Alphakanal-Wert des zweiten Bildes direkt auf 0 gesetzt, damit zu Beginn nur das erste Bild zu sehen ist.

Als nächstes machen wir uns die State-Engine des Flex-Frameworks zu nutze: Mit ihrer Hilfe lassen sich Zustände innerhalb einer Flex-Applikation definieren. In unserem Beispiel wären dies zwei Endzustände:

1. Bild 1 wird angezeigt, Bild 2 wird nicht angezeigt
2. Bild 1 wird nicht angezeigt, Bild 2 wird angezeigt

Da Zustand 1 bereits oben von uns als Ausgangsposition (Bezeichnung '*' in Flex) definiert ist, müssen wir lediglich noch Zustand 2 zusätzlich definieren:

1
2
3
4
5
6

<mx:states>
    <mx:State name="Two">
        <mx:SetProperty target="{p1}" name="alpha" value="0.0" />
        <mx:SetProperty target="{p2}" name="alpha" value="1.0" />
    </mx:State>
</mx:states>

Hier nützen wir den SetProperty-Befehl, um einfach die Alphakanal-Werte beider Bilder zu vertauschen.

Um nun den Wechsel zwischen beiden Zuständen zu steuern, benötigen wir einen Timer mit ein wenig ActionScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<mx:script>
<![CDATA[
        import flash.utils.Timer;
        import flash.events.TimerEvent;
 
        private var t: Timer;
 
        private function init(): void
        {
            t = new Timer(5000);
            t.addEventListener(TimerEvent.TIMER, changeImage);
            t.start();
        }
 
        private function changeImage(evt: TimerEvent): void
        {
            currentState = currentState == 'Two' ? '' : 'Two';
        }
    ]]>
</mx:script>

Dieser Code-Schnipsel sollte größtenteils selbsterklärend sein: Die 5000 steht für das Zeitintervall in Millisekunden, bis der Timer ausgelöst wird und über addEventListener() wird dem Timer mitgeteilt, welche Funktion er überhaupt aufrufen soll, wenn er auslöst. Dies ist in unserem Fall die Funktion changeImage(), welche den aktuellen Status der Flex-Applikation über die globale Variable des Flex Frameworks 'currentState' neu setzt.

Damit unser Code auch ausgeführt wird, ist eine Anpassung des Wurzelknotens mx:Application unserer MXML-Datei notwendig:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

Die im Parameter creationComplete übergebene Methode wird aufgerufen, nachdem unsere Flex-Applikation vom Flex Framework fertig geladen wurde.

Fehlt zum Abschluss nur noch die eigentliche Überblende-Animation, denn momentan ist noch ein harter Übergang beim Wechsel der Bilder zu sehen. Dieser Übergang ist dank der eingebauten Effekte in Flex sehr einfach, schnell und ohne eine weitere Zeile ActionScript zu realisieren:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<mx:transitions>
    <mx:Transition id="toTwo" fromState="*" toState="Two">
        <mx:Parallel>
            <mx:Fade target="{p1}" duration="2500" alphaFrom="1.0" alphaTo="0.0" />
            <mx:Fade target="{p2}" duration="2500" alphaFrom="0.0" alphaTo="1.0" />
        </mx:Parallel>
    </mx:Transition>
 
    <mx:Transition id="toOne" fromState="Two" toState="*">
        <mx:Parallel>
            <mx:Fade target="{p1}" duration="2500" alphaFrom="0.0" alphaTo="1.0" />
            <mx:Fade target="{p2}" duration="2500" alphaFrom="1.0" alphaTo="0.0" />
        </mx:Parallel>
    </mx:Transition>        
</mx:transitions>

Hier machen wir uns die Transition-Engine zu nutze, indem wir für beide Zustände einen Übergang definieren: Übergang 'toTwo' führt vom Zustand * in den Zustand 'Two', den wir weiter oben definiert haben, während Übergang 'toOne' dies umkehrt. Mit Hilfe von mx:Parallel wird ein paralleler Effekt erzeugt - also ein Effekt, der für mehrere Objekte gleichzeitig durchgeführt wird. mx:Fade wiederum ist der eigentliche Effekt, welcher den Alphakanal-Wert eines Bildes von einem Start- zu einem Zielwert überführt.

Das war es dann auch schon: Nach dem Kompilieren sehen wir auf dem Bildschirm zunächst unser erstes Bild, welches dann nach 5 Sekunden weich in das zweite Bild überblendet.

Ich hoffe, ich konnte mit diesem kleinen Tutorial die Einstiegshürde in den Umgang mit dem Flex SDK ein wenig senken und möchte zum Schluss noch auf die überlebenswichtige Flex Sprachreferenz [2] sowie die Flex Hilfe [3] verweisen, an der sich entlangzuhangeln nun kein Problem mehr sein sollte.

Ich wünsche viel Erfolg!

Links:

[1] Adobe Flex SDK Download (Englisch)
[2] Adobe Flex 3 Language Reference (Englisch)
[3] Adobe Flex 3 Help (Englisch)

Link:
Five Simple Steps to designing with color (auf Englisch)

Eine ausführliche Liste mit Artikeln und Tutorials zu genau diesem Thema findet man bei Max Kiesler.

Link:
Max Kiesler - How to Make Your AJAX Applications Accessible (auf Englisch)

Server

1. Binary Installer von OpenSSH for Windows downloaden
2. OpenSSH for Windows installieren, möglichst in einem Pfad ohne Leerzeichen
3. Unter Start > Systemsteuerung > Benutzerkonten einen neuen kennwortgeschützten Benutzer mit eingeschränkten Rechten erstellen
4. In der Eingabeaufforderung in das Installationsverzeichnis von OpenSSH in den Unterorder \bin wechseln
5. mkgroup -l >> ..\\etc\\group
6. mkpasswd -l -u %benutzername% >> ..\\etc\\passwd
7. ssh-keygen -t rsa
8. Alle Standardwerte mit Enter übernehmen, sichere Passphrase (Kennwort) setzen!
9. Erzeugte id_rsa.pub (Public Key) aus Verzeichnis Eigene Dateien\.ssh in OpenSSH-Unterverzeichnis \etc kopieren und in authorized_keys umbenennen
10. Erzeugte id_rsa (Private Key) auf USB-Stick zur Weitergabe an Client kopieren
11. .ssh-Verzeichnis unter Eigene Dateien löschen und den Inhalt an sicherer Stelle aufbewahren
12. Im OpenSSH-Unterverzeichnis \etc\sshd_config mit folgenden Werten füllen:
PermitRootLogin no
StrictModes no
RSAAuthentication no
PubkeyAuthentication yes
AuthorizedKeysFile /etc/authorized_keys
IgnoreUserKnownHosts yes
PasswordAuthentication no
PermitEmptyPasswords no
13. OpenSSH Service starten: net start opensshd

Client

1. PuTTY und PuTTYgen downloaden
2. id_rsa in ein Verzeichnis auf dem Client kopieren (am besten in ein verschlüsseltes)
3. PuTTYgen starten, Conversions > Import Key wählen und festgelegte Passphrase eingeben
4. Sicherstellen, dass im Hauptfenster unter Parameters SSH-2 RSA gewählt ist
5. Save Private Key wählen und Key im selben Verzeichnis mit Endung .ppk abspeichern

Wer bisher noch nichts von OpenSSH gehört hat und sich nun nach dem Nutzen dieser kryptischen (da aus der *NIX-Welt stammenden) Konfigurationsanleitung fragt, findet in den weiterführenden Links zwei ausführliche Quellen.

Links:
Binary Installer OpenSSH for Windows
PuTTY Download Page
Online-Tutorials: Secure SSH Tutorial
Sicherer Datenaustauch via OpenSSH

Diese Webseiten verwenden die AJAX Technik (Asynchronous JavaScript and XML), ein prominentes Beispiel ist das sich noch der Beta-Phase befindliche Google Suggest.

AJAX beruht auf der Verwendung des XMLHttpRequest-Objekts, welches zur Zeit von Internet Explorer, Firefox und Safari unterstützt wird. Eine Implementierung für den Opera-Browser soll demnächst folgen.

Bill Bercik hat ein ausführliches und lesenswertes Beispiel-Tutorial zur einfachen Verwendung selbigen Objekts geschrieben.

Eine umfassende Liste mit weiteren Tutorials, diversen Bibliotheken sowie Foren zum Thema AJAX ist auch im Dr. Web Weblog zu finden.

Weiterführende Links:
Google Suggest (auf Englisch)
Guide to Using XMLHttpRequest (auf Englisch)
Dr. Web Weblog: Ajax Quellensammlung

Link:
css.maxdesign (auf Englisch)