FlashDevelop – Der geniale Open-Source Code-Editor für Actionscript und mehr!

0
963
FlashDevelop Source-Code-Editor

Als ich vor etwa 3 Jahren angefangen habe meine Flash-Projekte überwiegend objektorientiert zu coden, statt die Flash-Zeitleiste zu benutzen, empfahl mir ein damaliger Arbeitskollege den OpenSource-Editor FlashDevelop, den ich bis heute mit großer Begeisterung für viele unerschiedliche Aufgaben nutze. Dieser Artikel soll die intuitive Bedienung von FlashDevelop anhand eines kleinen Tutorials zeigen. Für ganz eilige geht es hier direkt zu Demo und Download.

FlashDevelop Source-Code-Editor

Was ist FlashDevelop?

Ein kostenloser, aber sehr zuverlässiger und professioneller Code-Editor mit Schwerpunkt ActionScript, XML und Flex (MXML). Mit FlashDevelop können selbst komplexe und große Projekte zuverlässig umgesetzt werden. Da spreche ich aus eigener Erfahrung. Die besten Features aus meiner Sicht:

  • Intuitive und übersichtliche Benutzeroberfläche, die nach Bedarf angepasst werden kann
  • Integrierter Compiler (MTASC or MXMLC), der das Programm FLASH überflüssig macht
  • Starke Code-Completion Funktionen (IntelliSense) für ActionScript 2, ActionScript 3, MXML, HaXe, XML,MXML und HTML
  • Auto-Import von Klassen in ActionScript
  • Integrierter Projektmanager um Assets, Einstellungen und Dateien eines Projekts zu verwalten
  • Zahlreiche Projekt-Templates voreingestellt
  • GUI for AS2API & ASDocs – Dokumentations-Generator

Download und Installation

Auf der offiziellen Download-Seite findet man neben älteren Version das aktuelle FlashDevelop-Release. Die Installation läuft wie bei vielen anderen Windows-Programmen ab, weshalb ich nicht auf alle Einzelheiten dazu eingehen werde. Zu beachten ist nur, dass man die Adobe Flex-SDK mit herunterlädt, denn ohne die können keine Flash-Anwendungen programmiert werden. Vor der eigentlichen Installation hat man die Möglichkeit verschiedene Optionen auszuwählen. Darunter auch die, den Download der Flex-SDK automatisch einzuleiten.

FlashDevelop Installation

Die Benutzeroberfläche

Beim ersten Start nach der Installation zeigt FlashDevelop eine Startseite im Hauptfenster des recht übersichtlichen Arbeitsbereichs. Hier gibt es eine Liste der zuletzt verwendeten Projekte, sofern diese schon angelegt wurden, sowie Versionshinweise, eine Liste mit interessanten Tastaturkürzeln und Links zu Tutorials und Dokumentationen. Das Hauptfenster kann übrigens wie ein Browser verwendet werden und man kann auch andere Websites darin öffnen. Allerdings kann ich dies nicht für die Entwicklung von HTML-Seiten empfehlen, da doch einige Funktionen eines richtigen Browsers fehlen!

FlashDevelop Startseite
Die Startseite von FlashDevelop 4
FlashDevelop-Browser
FlashDevelop 4 als Browser

 

ActionScript-Projekt anlegen und kompilieren

Am Beispiel eines Actionscript3-Projekts möchte ich nun zeigen wie intuitiv sich mit dem Programm arbeiten lässt. Zunächst wählt man im Menü unter „Project“ den ersten Punkt „New Project…„. Alternativ dazu gibt es auf der Startseite diesen Punkt ebenfalls.

FlashDevelop Neues Projekt

In einem neuen Fenster erhält man eine Übersicht aller Projekt-Typen die FlashDevelop bereitstellt. Hier wähle ich in unserem Fall „AS3 Project„, vergebe den Namen „Testprojekt“ und wähle als „Location“ meinen Desktop aus. Außerdem erstellt FlashDevelop automatisch einen Ordner für das Projekt, sofern dieser noch nicht angelegt wurde und die Option „Create directory for project“ ausgewählt ist.

FlashDevelop - Neues Projekt anlegen

Nach erfolgreichem Anlegen des Projekts können unter „Project->Properties…“ verschiedene Projekteinstellungen eingestellt werden. Für unser Beispiel müssen eigentlich keine Einstellungen verändert werden. Ich möchte deshalb nur auf den ersten Reiter „Output“ eingehen, da man hier erfahrungsgemäß am häufigsten Änderungen vornimmt.

Im Bereich „Platform“ ist hier „Flash Player“ ausgewählt, da wir zuvor ein Flash-Projekt angelegt haben. Es gibt zudem die Einträge „AIR„, „AIR mobile“ oder „Custom„. Das Dropdown rechts neben dem Plattformtitel stellt eine Auswahl der jeweiligen Plattform- bzw. Playerversion dar. Hier  ist natürlich Voraussetzung, dass die entsprechende Version des Flash Players auf meinem Rechner installiert ist, damit die fertige Anwendung verwendet werden kann. Das Dropdown „Compilation Target“ legt fest welcher Compiler zum kompilieren des Projekts verwendet werden soll. „Application“ steht dabei für den in FlashDevelop integrierten Compiler, und ist für unser Projekt zunächst die beste Wahl. Der Punkt „Custom Build“ ist zum Beispiel interessant, wenn man seinen Code in FlashDevelop schreiben,  aber das Programm FLASH zum kompilieren nutzen möchte. In diesem Fall started FlashDevelop den Compiler von FLASH mit der aktuell geöffneten FLA-Datei.

Der Bereich „General“ erklärt sich fast von selbst. Hier kann unter „Output file“ der Pfad unserer fertigen SWF, sowie Abmessungen, Hintergrundfarbe und Bildrate eingestellt werden.

Unter „Test Project“ legt schließlich man fest, in welcher Anwendung die SWF-Datei nach dem Kompilieren getestet, bzw. geöffnet werden soll. In den meisten Fällen muss hier nichts verändert werden.

FlashDevelop Projekteinstellungen

Im „Project„-Reiter auf der rechten Seite sieht man die die automatische angelegte Ordnerstruktur und einige darin enthaltene Dateien.

FlashDevelop Projektreiter

Im Ordner „bin“ wird das fertige Projekt abgelegt und die kompilierte SWF-Datei unseres Projekts wird hier nach dem ersten Kompilieren abgelegt. Die HTML-Datei „index.html“ enthält alle notwendigen Codes um die SWF-Datei mit Hilfe von SWF-Object einzubinden. Im Ordner „js“ befindet sich die aktuelle Version von SWF-Object. Auch eine „expressInstall.swf“ zur Flash-Erkennung wird bereits mitgeliefert. Die Abmessungen der einzubindenden SWF-Datei ist innerhalb der „index.html“ auf 100% x 100% eingestellt. Wer also beispielsweise eine FullFlash-Website erstellen will, muss hier zunächst nichts weiter machen. Natürlich lassen sich in FlashDevelop auch HTML-Dateien direkt bearbeiten.

Der Ordner „lib“ dient als Speicherort für Actionscript-Bibliotheken oder Frameworks. Ich lege hier beispielsweise die von mir oft verwendete „Caurina Tweener„-Klasse ab. In den Projekteinstellungen unter „Project->Properties…“ muss der Ordner aber noch als Klassenpfad angegeben werden, wie hier zu sehen ist:

FlashDevelop Klassenpfad für lib anlegen

Der Ordner „src“ soll schließlich den für das Projekt notwendigen Code beinhalten und ist bereits als Klassenpfad voreingestellt. Hier ist auch die Datei, bzw. Klasse „Main.as“ angelegt, um direkt loslegen zu können.

FlashDevelop - Die Datei Main.as

In der Klasse „Main.as“ erzeuge ich zu Testzwecken einen MovieClip der ein rotes Rechteck enthält, und animiere diesen mit der „Caurina Tweener“ – Klasse. Was mir am besten an FlashDevelop gefällt ist die einwandfrei funktionierende Auto-Import- und Auto-Completion Funktion. Um eine Klasse zu importieren muss man lediglich eine neue Instanz erzeugen- FlashDevelop importiert die Klasse automatisch, wie auf den Screenshots zu sehen ist:

FlashDevelop Auto-Import

FlashDevelop Auto-Import

Bei der Caurina Tweener-Klasse handelt es sich um eine statische Klasse, von der keine Instanz erzeugt werden muss. wir müssen diese lediglich in der Main-Klasse importieren, wie hier zu sehen:

FlashDevelop - Klasse importieren

Nun erzeugen wir noch unser Rechteck, packen es in den Movieclip und erstellen eine Funktion „animate()“, die das Ganze dann schick animiert, und vom Tweener immer wieder selbst als Loop aufgerufen wird. Ich gehe jetzt mal davon aus, dass  Grundkenntnisse in Actionscript3 vorhanden sind und werde nicht jeden einzelnen Schritt erklären. Hier der vollständige Code:

FlashDevelop - Die Main-Klasse mit dem Code für die Animation

Wenn nun alle Pfade und Einstellungen richtig eingestellt sind, lässt sich das Projekt mit „STRG+ENTER“ kompilieren, und im Ordner „bin“ wird die SWF-Datei „Testprojekt.swf“ erzeugt. Das Endergebnis zum ansehen, und das Testprojekt zum herunterladen habe ich hier hinterlegt. Damit bin ich auch schon am Ende mit diesem kurzen Einblick in FlashDevelop, weitere Artikel oder umfagreichere Tutorials zum Thema FlashDevelop und Actionscript werden sicherlich bald folgen! Für Anregungen, Ideen oder Kritik bin ich gern offen, nutzt dazu die Kommentarfunktion. Viel Spaß beim coden mit FlashDevelop!

FlashDevelop erweitern: