Tutorial: Einstieg in das Adobe Flex 3 SDK

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)

Kategorie Webentwicklung | Twitter It! | Share on Facebook

11 Kommentare zu “Tutorial: Einstieg in das Adobe Flex 3 SDK”

7rA5h sagt:

30. Oktober 2009 um 18:48

Hi,

erstmal super Tutorial für Einsteiger. Jedoch hatte ich ein Problem bei der Umsetzung. Oben im Code stehen die "Script-Tags" in denen das ActionScript ausgeführt wert wie folgt: . Beim Compilieren mit FlexSDK_3.4 bekomm ich dann folgende Fehlermeldung: Error: Could not resolve to a component implementation. Abhilfe schafft hier das ich die "Script-Tags" so schreibe : , also vorne groß. Jetzt stellt sich für mich die frage wie ist denn da die Konvention für die Groß und Kleinschreibung der Tags ?