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

google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_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.

Der Flash Player unterstützt seit kurzem neben den Codecs Sorenson Spark (.flv) und On2 VP6 (.flv) auch den Codec H.264/MPEG-4 AVC.

Auf Seiten des Produzenten bringt dies die Fragestellung mit sich, welche Encoder für den neuen Videocodec in Flash verwendet werden können? Grundsätzlich kann man nun eine Fülle an Encodern für Flash in Betracht ziehen, da H.264 in vielen Anwendungsbereichen bereits im Einsatz ist (z.B. HDTV, Portable Endgeräte, Videoconferencing, etc.). Flash video Streaming

Eine günstige Variante ist QuickTime. QuickTime enthält H.264 seit der siebten Version standardmäßig. Mit der Pro-Version QuickTime Pro können Videos auch exportiert werden. Es kostet 30 Euro für Mac oder Windows, Besitzer der Pro Applications von Apple (Final Cut, etc.) haben QuickTime Pro automatisch.

Hinweis: Um H.264-Videos betrachten zu können, müssen Nutzer ihren Flash Player auf den neusten Stand bringen (Flash Player 9,0,115,0).

Folgende Presets beim Export aus QuickTime können grundsätzlich verwendet werden:

Die gängigen Dateiendungen sind: MP4, M4A, MOV, MP4V, 3GP und 3G2.

iPhone, iPhone (Mobiltelefone), iPod und Apple TV

Bei diesen drei Presets kann man keine eigenen Einstellungen treffen. Da alle auf H.264 basieren, funktionieren die Videos auch in Flash. Unterschiedlich sind die Dateigrößen (bzw. Auflösungen, Datenrate, etc.): Am kleinsten ist iPhone (Mobiltelefone), das in die Kategorie 3GP fällt (176×117, 15fps, ca. 80 KBit/s). Dann folgt iPhone (480×320, 30fps, ca. 990 KBit/s) und iPod (640×426, 30 fps, ca. 1600 Kbit/s) für die Gerätedisplays. Apple TV (720×480, ca. 2700 Kbit/s) ist am hochwertigsten und für die volle Fernsehauflösung oder gar höher (HD) ausgelegt.

Hinweis: Die genauen Zielauflösungen hängen natürlich vom Ausgangsmaterial ab, das in diesem Fall DV NTSC (720×480 mit 29,97 fps) war.

Beispiel: iPhone (Mobiltelefone)
Beispiel: iPhone
Beispiel: iPod

MPEG-4

Unter dem Export-Format MPEG-4 kann man alle Parameter selbst einstellen. Wichtig ist nur, dass H.264 (nicht MPEG-4) als Videocodec verwendet wird. Man kann das Profile auch auf Main oder Baseline beschränken (zu Profilen siehe auch “Metadaten von H.264-Videos im Flash Player“).

Beispiel: MP4

QuickTime Filme (MOV)

Möchte man MOV-Dateien verwenden, bietet es sich an, die vorgebenen Presets als Ausgangslage zu verwenden (stehen direkt unterhalb der Einstellung “QuickTime Film”).

Beispiel: QuickTime .mov, Breitband – Hoch
Beispiel: QuickTime, .mov, Breitband – Gering

3GP

3GP ist ein Containerformat, das vor allem auf mobilen Endgeräten verwendet wird (z.B. auch in der MMS). Folgende Codecs sind generell in 3GP möglich:

• MPEG-4 (Video); nicht kompatibel mit Flash
• H.263 (Video); nicht kompatibel mit Flash
• H.264 (Video); kompatibel
• AMR (Audio); nicht kompatibel mit Flash
• AAC-LC; kompatibel

Um 3GP-Videos zu erstellen, die kompatibel mit Flash sind, muss man H.264 als Video- und AAC-LC als Audiocodec verwenden. Als Containerformat kann man 3GPP oder 3GPP2 wählen.

Die drei offiziellen Bildgrößen sind 128×96, 176×144 und 320×240 Pixel.

Beispiel: 3GPP
Beispiel: 3GPP2

Wer erste Versuche mit H.264-Videos und der neuen Beta des Flash Player unternommen hat, wird eventuell auf folgendes Problem gestoßen sein: Das Video wird erst abgespielt, wenn die Datei vollständig aus dem Internet heruntergeladen worden ist. Dieses Problem kennt der eine oder andere vielleicht von Apples QuickTime, wo dies manchmal ebenfalls der Fall ist.

Die Ursache liegt am so genannten “moov atom”, eine Art Inhaltverzeichnis über die Datenstruktur der Videodatei.

moov atom

Das “moov atom” ist der Index einer MPEG-4-Datei, der Informationen zu den enthaltenen Videodaten und deren Datenstruktur beinhaltet. Dieser meist ein oder zwei Kilobyte große Index kann entweder am Anfang einer Datei oder am Ende einer Datei stehen.

• Haben Dateien den Index am Ende der Datei, hat dies im Web zufolge hat, dass zuerst die komplette Datei heruntergeladen werden muss, bevor sie abspielbar ist. Der Player weiß nicht, wie er die Daten zu “interpretieren” hat.
• Stehen die Informationen jedoch am Anfang der Datei – also vor den eigentlichen Videodaten – ist der so genannte Progressive Download problemlos möglich. Da die Informationen über die Datenstruktur von Beginn an bekannt sind, können die Videos noch während des Downloads abgespielt werden.

H.264 Encoding für das Web

Möchte man H.264-Videos für den Flash Player produzieren, sollte man aufgrund der obigen Schilderungen darauf achten, Dateien mit dem Index am Dateianfang zu erstellen. Leider sind laut Tinic Uro die Anwendungen von Adobe (z.B. Premiere oder AfterEffects) dazu zurzeit nicht in der Lage.

Nutzt man z.B. QuickTime als Encoder, gibt es dort seit langem die Option “Schnellstart” (engl.: fast start) unter der Rubrik “Für Internet-Streaming vorbereiten”. Hat man diese Funktion aktiviert, wird das “moov atom” an den Anfang geschrieben.

Den Index nachträglich an den Anfang verschieben

Hat man bereits eine fertige Datei, kann man das “moov atom” über einige Tools an den Anfang verschieben. Es gibt z.B. C-Programm mit dem Namen qt-faststart.c von Mike Melanson. Von Renaun Erickson gibt es den QTIndexSwapper, der mit AIR geschrieben worden ist (Adobe Integrated Runtime). Außerdem soll es bereits helfen, die Datei einfach mit QuickTime zu öffnen und mit “Speichern unter” neu abzuspeichern.

Link: qt-faststart.c
Link: QTIndexSwapper AIR Application for Flash Player H.264 files
Link: moov atom (Apple mailing list)

Flash Player unterstützt H.264 und HE-AAC

31 Aug 2007

Wegen der Sommerpause kommt diese sensationelle Meldung etwas verspätet: Ab sofort (durch ein Flash Player 9 Update) wird nun auch der populäre Videostandard H.264 und der Audio-Codec High Efficiency AAC (HE-AAC) von Flash unterstützt!

H.264

H.264 kommt z.B. in Blu-Ray und HD-DVD-Videoplayern zum Einsatz. Auch Apple setzt mit QuickTime (inklusive iPod, Apple TV und iTunes) auf H.264 und AAC. Des Weiteren nutzen viele große TV-Sender H.264 und werden sich sicherlich über den verringerten Encodingaufwand freuen. Insgesamt reicht das Einsatzgebiet von H.264 von Mobile (3GP) bis hin zu hochauflösendem Content (z.B. HDTV), also weit über des Thema “Webvideo” hinaus. Alle gängigen Dateitypen (.mp4,.m4v,.m4a,.mov, .3gp) werden vom Flash Player unterstützt. Flash Video

Flash Player “Moviestar”

Das Update für den Flash Player mit dem Codenamen “Moviestar”, das die H.264 Unterstützung bringt, ist für Windows, Mac und Linux verfügbar. Die Beta wartet mit folgenden Features auf:

• Wiedergabe von H.264 Videos und Audio mit dem HE-AAC Codec
• Multi-core Unterstützung für Vector Rendering.
• Fullscreen-Modus mit Hardwareunterstützung
• Ein Cache zum Cachen von Komponenten, z.B. des Flex Frameworks
• Microsoft Active Accessibility (MSAA) Support (nur Windows)

Auf jeden Fall eine kluge Entscheidung von Adobe, auf den weit verbreiteten und universellen H.264 Codec zu setzen. Nähere Einzelheiten folgen …

Link: Neuer Adobe Flash Player ermöglicht Wiedergabe hochauflösender Videos (Pressemeldung / PDF, Adobe)
Link: Flash Player 9 Update (Adobe Labs)