FlashDevelop – Open Source Entwicklungsumgebung für Flash, Flex und AIR im Überblick

FlashDevelop ist eine Open Source Entwicklungsumgebung (IDE) für Flash, Flex und AIR. Die fabelhafte dritte Version hat gerade das Betastadium verlassen — Grund genug, die kostenlose Software ausführlich vorzustellen.

Der Artikel umfasst die Installation von FlashDevelop und die Erstellung eines Flex-Projekts. Außerdem gibt’s hilfreiche Tipps und Tricks (z.B. Codevervollständigund und -generierung), die auch in einem kurzen Video gezeigt werden.

Um FlashDevelop kurz zu präsentieren, einige der Highlights im Überblick:

• unterstützt ActionScript 2, ActionScript 3, MXML und HaXe
• Codevervollständigung und -generierung für ActionScript, XML, MXML und HTML
• Integration des Flex SDK und Zusammenarbeit mit der Flash IDE
• Projekt- und Dateiverwaltung

Somit ist FlashDevelop zum einen eine interessante Alternative zum Flex Builder (aufgrund der MXML-Fähigkeiten). Zum anderen eine sinnvolle Ergänzung zur Flash IDE und dem dort integrierten „rudimentären” Codeeditor.

FlashDevelop herunterladen und installieren

Für eine Installation von FlashDevelop wird sowohl die Java-Runtime (www.java.com/download) als auch die .NET-Laufzeitumgebung (.NET 2.0) benötigt. Entsprechende Hinweise beim Starten des FlashDevelop-Installers geben Auskunft, falls diese nicht vorhanden sein sollten. FlashDevelop läuft zurzeit leider nur auf Window (sehr schade für Mac-Nutzer, aber evtl. ändert sich dies mit FD4).

FlashDevelop selbst kann hier heruntergeladen werden: FlashDevelop Downloadseite. Ganz oben findet man die neueste Version.

Selbstverständlich sollte man auch den aktuellen Flash Player (ActiveX im Internet Explorer) haben. Dieser liegt sowieso dem Flex SDK bei, das bekanntlich Open Source ist und ebenfalls noch heruntergeladen werden muss. Man entpackt es einfach und legt es irgendwo ab.

Die Standardinstallation ist schnell durchgeführt – auf dem Desktop liegt danach ein Icon zum Starten von FlashDevelop.

FlashDevelop einrichten

Zuerst bringt man FlashDevelop bei, wo das Flex SDK auf der Festplatte liegt. Im Menu „Tools > Programm Settings” findet man eine Reihe Einstellungsmöglichkeiten. In der linken Spalte wählt man „AS3Context”, worauf in der rechten Hälfte die Option „Flex SDK Location” erscheint. Hier wählt den Pfad, wo zuvor das Flex SDK abgelegt wurde.

Tipp: Wer mehrere Flex SDKs hat (z.B. Version 3 und 4), stellt hier die Version ein, die am häufigsten genutzt wird. Die Einstellung lässt sich unabhängig davon für einzelne Projekte überschreiben, wenn ein anderes SDK gewünscht ist.

Das erste Projekt

Jetzt geht’s los. Über „Project > New Project” können ganz unterschiedliche Arten von Projekten angelegt werden. Sie sind unterteilt in ActionScript 2, ActionScript 3 und HaXe und werden jeweils kurz beschrieben.

Um eine Flex-Anwendung zu erstellen, ist „Flex 3 Project” die richtige Wahl. Das erste Projekt soll außerdem FlexFlashDevelopDemo heißen. Über „Location” legt man z.B. einen Ordner auf dem Desktop an und wählt diesen aus (alternativ: „Create directory for project” aktivieren). Nach einem Klick auf OK wird das Projekt dann dort erstellt.

Die Frage nach dem Autor dient lediglich dazu, damit beim Erstellen von Klassen direkt der Namen des Entwicklers in den Metadaten steht.

Werfen wir zunächst einen Blick auf die Projektverwaltung.

Projektverwaltung

Das Fenster am rechten Rand zeigt und verwaltet die Dateien des Projekts. Es kann wie der Windows Explorer z.B. zum Öffnen, Kopieren, Duplizieren oder Löschen von Dateien genutzt werden.

Der src-Ordner (src wie Source) beinhaltet alle Quelldateien, im konkreten Fall bisher nur die Datei Main.mxml. Am kleinen grünen Pfeil auf dem Dateiicon ist zu erkennen, dass es sich um die Hauptdatei handelt, die kompiliert werden soll (Falls es einmal eine andere Datei sein soll: Rechtsklick auf die neue Datei und „Always compile” auswählen).

Im lib-Verzeichnis können Libraries (.swc) platziert werden. Diese müssen über das Menü „Project > Properties > Compiler options” dann noch eingebunden werden. In den anderen Reitern dieses Menü findet man auch zahlreiche weitere Einstellungsmöglichkeiten, z.B. die Flash Player Version, Breite und Höhe der SWF, Hintergrundfarbe, etc.

Die fertige SWF-Datei landet im bin-Verzeichnis. Dort ist bereits alles vorhanden, was benötigt wird, um das Ergebnis ins Netz zu stellen. Dazu gehört eine HTML-Seite und das JavaScript SWFObject (Einbindung von Flash in HTML) incl. Express-Installation, falls der Flash Player veraltet ist.

MXML-Datei editieren

Nach dem Öffnen von Main.mxml sieht man, dass bereits einige Zeilen Code vorhanden sind. Es handelt sich um das Grundgerüst einer leeren Flex-Applikation. Um z.B. einen Button zu erzeugen, fügt man <mx:Button label="Mein Button" /> in die leere Zeile ein.

An dieser Stelle wird deutlich: Was (im Vergleich zum Flex Builder) fehlt, ist eine Designview, wo die MXML-Komponenten grafisch angezeigt und positioniert werden können.

Kompilieren

Mit dem Befehl „Project > Test Movie”, der sich am schnellsten über die F5-Taste ausführen lässt, wird die Anwendung kompiliert und gestartet. Beim ersten Mal dauert dies etwas länger, da die komplette Anwendung kompiliert wird. Beim jedem weiteren Aufruf geht’s wesentlich schneller, da dann das Caching des Compilers greift (fcsh).

Unten im „Output“-Fenster sieht man beim Kompilieren die Informationen des Kompilers. Enthält der Quelltext einen Fehler, wird dies dort angezeigt. Außerdem wird dann zusätzlich das Result-Fenster aufgeklappt, in dem man den Fehler anklicken kann oder direkt zur fehlerhaften Stelle im Quelltext gelangt.

Möchte man die Anwendung lediglich kompilieren, nicht jedoch starten, lautet der passende Befehl „Project > Build Project” (F8). Wie oben bereits erwähnt, liegt die fertige SWF-Datei dann im bin-Verzeichnis.

Tastaturbefehle: F5 (= Kompilieren und Ausführen) und F8 (nur Kompilieren)

Tipps und Tricks

Hier zunächst einmal ein kurzer Screencast (ohne Ton), der zahlreiche hilfreiche Features von FlashDevelop in Aktion zeigt. Im Anschluss werden die Features erklärt.

Autovervollständigen (Code completion)

FlashDevelop kann alle möglichen Begriffe wie Klassennamen, Eigenschaften,etc. automatisch vervollständigen. Sobald ein paar Buchstaben eingetippt sind, schlägt FlashDevelop die passenden Begriffe vor. Dabei kennt es sowohl die Klassen von Flash/Flex als auch eigene Klassen, die im Projekt verwendet werden.

Möchte man die Autovervollständigen-Funktion manuell auslösen, geht dies mit „Ctrl + Leertaste”. Um das Feature auszublenden, einfach Escape drücken.

Automatischer Import

[ad]Beim Importieren von Klassen unterstützt FlashDevelop, indem es die verfügbaren Klassen anzeigt. Dadurch kann man per Klick einfach die gewünschte Klasse auswählen. Man muss dabei nicht einmal das Paket (package) kennen, aus dem die Klasse stammt – es reicht der Klassenname.

Wie im Video zu sehen: Man kann Variablen definieren, deren Klassen noch nicht importiert ist, woraufhin FlashDevelop automatisch den entsprechenden Import-Befehl hinzufügt. Das spart Zeit.

Event Handler erstellen

Ebenfalls nützlich: Event Handler, z.B. für Mausklicks auf einen Button, können per „Ctrl+Shift+1” generiert werden. Dazu schreibt einfach den Funktionsnamen in den Eventlistener und drückt die Tastenkombination.

Getter und Setter

Auch Getter und Setter funktionieren mit Ctrl+Shift+1. Man definiert ganz gewöhnlich eine Variable. FlashDevelop ändert dann sowohl den Variablennamen (Unterstrich als Präfix) und erstellt die get- und set-Funktion.

Snippets

FlashDevelop beinhaltet so genannte Snippets (Codeschnippsel). Das können Befehl inklusive Syntax wie for, switch, catch sein. Der Befehl auf der Tastatur lautet „Ctrl + b” oder auf die Tab-Taste benutzen.

Kommentare (ASDocs)

Um die Dokumentation des Quellcodes zu erleichtern, gibt man vor einer Funktion die Zeichen /** ein. Es erscheint „Method details” als Vorschlag. Ein Klick darauf liefert die ASDoc-kompatiblen Kommentare. Enthält die Funktion Parameter, stehen diese bereits da.

Die wichtigsten Tastaturbefehle findet man auch auf der Startseite von FlashDevelop. Diese sind vor allem: „Ctrl + Leertaste” für Autovervollständigen und „Ctrl + Shift + 1” für die Codegenerierung. „Ctrl + b” oder Tab für die Snippets. F4 bzw. Shift+F4 um zu einer Deklaration zu springen (bzw. wieder zurück).

Fazit

FlashDevelop ist ein absolut gelungenes Tool. Ich nutze es schon lange auf einem Rechner, wo kein Flex Builder (Flash Builder) installiert und kann nur sagen: Empfehlenswert!

Nutzt ihr Flash Develop? Kennt ihr noch weitere Tipps oder Tricks? Was gefällt euch am besten? Über Kommentare würde ich mich freuen.