Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Workflow

Anfängerleitfaden für FlashDevelop - Basix

Read Time:20 minsLanguages:

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Zwei häufige Missverständnisse über Flash Professional: Erstens müssen Sie es kaufen, um Flash-Apps und -Spiele zu erstellen. Zweitens ist es ein anständiges Werkzeug zum Schreiben von Code. Völlig falsch.

In diesem Artikel erfahren Sie, wie Sie mit der kostenlosen Windows-Anwendung FlashDevelop an Flash-Projekten arbeiten - sowohl mit als auch ohne Flash Professional.


Was ist so toll an FlashDevelop?

Sie können Flash-Projekte mit jedem Texteditor erstellen. Was macht FlashDevelop so besonders? Hier sind meine sechs Lieblingsfeatures:

Code-Vervollständigung

Geben Sie someMovieClip.got ein und es werden gotoAndPlay() und gotoAndStop() als mögliche Optionen zur Auswahl angeboten. Sie können weiter tippen, um die Auswahl einzugrenzen, oder mit den Pfeiltasten eine bestimmte Option auswählen. Drücken Sie dann die tab-Taste, damit FlashDevelop den Rest des Schlüsselworts automatisch schreibt.

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Außerdem kann FlashDevelop Text von einer beliebigen Stelle innerhalb des Schlüsselworts abgleichen, sodass someMovieClip.pla sowohl play() als auch gotoAndPlay() als mögliche Optionen anbietet.

Automatische Importe

Geben Sie myMovieClip = new MovieClip() ein. und FlashDevelop fügt automatisch den Import flash.display.MovieClip; hinzu. an die richtige Stelle oben in der Klassendatei.

Dies funktioniert auch für Klassen, die nicht in Flash integriert sind, einschließlich Klassen, die Sie selbst geschrieben haben. Wenn Ihr Projekt die Klasse com.activetuts.examples.ExampleClass enthält, können Sie var myExample:com.activetuts.examples.ExampleClass; und FlashDevelop importiert die Klasse und verkürzt diese Zeile auf var myExample:ExampleClass;. (Dank der Code-Vervollständigung müssen Sie natürlich nur var myExample:com.act«Tab».ex«Tab».Cla«Tab»;.)

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

In unseren übergeordneten Tutorials zu Activetuts+ werden die Importanweisungen häufig nicht explizit erwähnt, da wir davon ausgehen, dass Sie einen Code-Editor verwenden, der dies für Sie erledigt.

Automatische Klassenerstellung

Um diese com.activetuts.examples.ExampleClass-Klasse zu erstellen, können Sie mit der rechten Maustaste auf einen Ordner in FlashDevelop klicken und Hinzufügen | auswählen Neue Klasse...:

FlashDevelop_beginner_intro

Das Dialogfeld "Neue Klasse" wird angezeigt:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Sie können den gewünschten Paketnamen in das Feld Paket eingeben (auch wenn die Ordnerstruktur \com\activetuts\examples\ nicht vorhanden ist) und den gewünschten Klassennamen in das Feld Name eingeben. FlashDevelop erstellt dann die Ordnerstruktur (falls erforderlich) und eine neue AS-Datei, ExampleClass.as:

(Beachten Sie, dass hier automatisch ein mehrzeiliger Kommentar mit meinem Namen und Leerzeichen hinzugefügt wird, um ein paar Informationen über die Klasse zu schreiben - ordentlich.)

Wenn Sie eine vorhandene Klasse erweitern möchten, z. B. die Rectangle-Klasse, können Sie dies im Dialogfeld "Neue Klasse" angeben, indem Sie auf die Schaltfläche Durchsuchen... neben dem Feld "Basisklasse" klicken:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Wenn Sie "Konstruktor mit übereinstimmender Basisklasse generieren" aktivieren, erhält die Klasse dieselben Argumente wie die erweiterte Rechteckklasse:

Wenn Sie einige Schnittstellen für die zu implementierende Klasse angegeben haben, können Sie FlashDevelop anweisen, automatisch Stub-Funktionen für jede der Methoden in diesen Schnittstellen zu erstellen.

Automatische Objekterstellung

Geben Sie jemals den Namen einer Variablen oder Funktion ein, bevor Sie sie erstellt haben? Ich mache das die ganze Zeit mit Event-Handler-Funktionen, wenn ich einen Listener definiere. Ich werde so etwas schreiben wie:

...wenn ich die Handlerfunktion onClickMenuButton() noch nicht definiert habe.

In FlashDevelop müssen Sie lediglich den Textcursor über das noch nicht definierte Schlüsselwort bewegen und Strg-Umschalt-1 drücken, um dieses Menü aufzurufen:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Drücken Sie die Eingabetaste, und FlashDevelop erstellt automatisch eine neue Funktion mit dem richtigen Parameter, der in der Signatur festgelegt ist:

Sie können dasselbe für Variablen tun, die Sie nicht definiert haben, für private Variablen, für die Sie öffentliche Setter und Getter definieren möchten, und vieles mehr. Strg + Umschalt + 1 ist die leistungsstärkste Tastenkombination von FlashDevelop. Weitere Informationen finden Sie auf dieser Seite der offiziellen Dokumentation und in den Kommentaren unter diesem Artikel.

Code Refactoring

Angenommen, Sie haben eine Methode namens refresh() erstellt, aber im Laufe der Zeit ändern Sie genau, was sie tut, damit die Daten nicht nur aktualisiert, sondern auch aktualisiert werden. Um Ihren Code korrekt zu halten, möchten Sie die Methode in update() umbenennen - aber wie? Sie können nicht einfach Suchen / Ersetzen durchführen und alle refresh instanzen ändern, um sie zu update. Das Auffinden aller Stellen im gesamten Projekt, an denen die Funktion refresh() dieser Klasse aufgerufen wird, würde ewig dauern.

Rufen Sie das Refactor-Menü auf. Klicken Sie einfach mit der rechten Maustaste auf eine Funktion oder einen Variablennamen und wählen Sie Refactor | Umbenennen...:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Alle Verweise auf die Funktion im gesamten Projekt (einschließlich der Funktion selbst) werden in die von Ihnen eingegebenen Daten umbenannt.

Im Refactor-Menü können Sie mehr tun, z. B. Importanweisungen entfernen, die früher erforderlich waren, jetzt aber nicht mehr verwendet werden, obwohl die Methode Umbenennen... die am häufigsten verwendete ist.

Aufgabenverfolgung über Kommentare

Manchmal werden Sie während der Entwicklung einen Fehler finden, der nur einmal in einer Million auftritt, in ganz bestimmten Fällen, und es lohnt sich nicht, Stunden damit zu verbringen, ihn zu beheben. Sie können also eine schnelle Problemumgehung durchführen und sich eine mentale Notiz machen, um später darauf zurückzukommen. Natürlich ist es schwierig, mentale Notizen im Auge zu behalten...

In FlashDevelop können Sie diese nachverfolgen, indem Sie Kommentare mit dem Präfix //FIXME: schreiben. Diese werden im Aufgabenbereich angezeigt. Also das:

...gibt Ihnen:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Es ist auch möglich, andere Präfixe zu verwenden. //TODO: und //BUG: werden standardmäßig unterstützt, Sie können jedoch auch eigene hinzufügen.

Große Sache

Okay, sicher, Flash Professional macht viel davon. Aber FlashDevelop macht es besser; Für die automatische Vervollständigung von Flash CS3 müssen Sie beispielsweise die Groß- und Kleinschreibung genauso eingeben wie das Schlüsselwort, das Sie suchen, damit someMovieClip.gotoand mit nichts übereinstimmt. Der Editor von Flash CS5 ist viel besser als frühere Versionen von Flash, hat aber noch viel zu tun.

Wenn man diese als Liste betrachtet, scheinen sie keine große Sache zu sein. Wen kümmert es, wenn Sie sich ein paar Millisekunden weniger Zeit nehmen können, um eine Codezeile zu schreiben? Wie schwierig ist es, selbst eine Importanweisung hinzuzufügen? Was ist falsch daran, eine Event-Handler-Funktion selbst zu schreiben?

Hier fehlt der Punkt. Alle diese Aufgaben sind langwierig. Sie grunzen, nicht programmieren. Durch die Automatisierung und Rationalisierung können Sie nur noch Code erstellen, ohne über das Schreiben von Code nachdenken zu müssen. Die FlashDevelop-Benutzeroberfläche hilft auf die gleiche Weise: Sie fühlt sich viel einfacher und schneller an als die von Flash Professional (was nicht verwunderlich ist, da sie auf der hervorragenden Benutzeroberfläche von Visual Studio basiert).

FlashDevelop bietet viele weitere Funktionen. Da es sich um Open Source handelt, erstellt die Community häufig mehr Plugins und Erweiterungen, um noch mehr Funktionen zu erhalten. Sie können die Einstellungen auch so ändern, dass sie Ihren eigenen Codierungskonventionen entsprechen, damit Sie sich wohl fühlen.

Nachdem Sie gesehen haben, was FlashDevelop kann, schauen wir uns an, wie Sie beginnen.


FlashDevelop installieren

Sie können FlashDevelop wie jede andere Windows-Anwendung installieren. Laden Sie zunächst die neueste Installationsdatei aus dem entsprechenden Thread in diesem Forum herunter. Es gibt auch immer einen direkten Link zur Download-Seite auf der FlashDevelop-Homepage.

Sobald Sie es heruntergeladen haben, führen Sie einfach die EXE-Datei aus und befolgen Sie die Anweisungen zur Installation. Wenn Sie gefragt werden, ob Sie das Flex SDK installieren möchten, sagen Sie "Ja".

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

FlashDevelop wird derzeit leider nicht auf einer anderen Plattform als Windows unterstützt, kann jedoch unter Parallels unter Mac OS X ausgeführt werden. Weitere Informationen finden Sie in diesem Forenthread.

EDIT: Mac/Linux-Unterstützung kommt.

Sie sollten auch die neueste Java-Laufzeit und die neuesten Debug-Flash-Player installieren.

Wenn Sie FlashDevelop zum ersten Mal ausführen, sieht es ungefähr so aus:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Es sieht möglicherweise nicht genau gleich aus, da ich mein Layout angepasst habe, aber es enthält dieselben Grundelemente. Sie können auswählen, welche Bedienfelder angezeigt werden sollen, indem Sie sie im Menü Ansicht auswählen und über die Benutzeroberfläche ziehen, um sie nach Ihren Wünschen zu gestalten. Bewegen Sie sie an eine Kante des Fensters, damit sie an dieser Kante einrasten. Einige Panels haben ein "Pushpin" -Symbol. Durch Klicken auf diese Option wird das automatische Ausblenden umgeschaltet, bei dem die Bedienfelder bei Nichtgebrauch nicht mehr angezeigt werden und wieder angezeigt werden, wenn Sie den Mauszeiger über das entsprechende Symbol bewegen.

Es gibt drei Möglichkeiten, FlashDevelop zu verwenden:

  1. Ganz alleine, ohne dass Flash Professional erforderlich ist
  2. Verwenden von Flash CS3+ zum Exportieren von Assets neben Flash Professional, während FlashDevelop das Gesamtprojekt verwaltet
  3. Verwenden Sie als Code-Editor Flash Professional zum Verwalten und Kompilieren des Projekts

Unterschiedliche Arbeitsabläufe sind für unterschiedliche Personen geeignet. Wenn Sie Flash Professional bereits für alle Ihre Projekte verwenden, ist es wahrscheinlich am einfachsten, dies fortzusetzen, aber wechseln Sie zu FlashDevelop als Hauptcode-Editor (Option 3). Wenn Sie Flash Professional nicht besitzen - vielleicht sind Sie neu in Flash -, können Sie FlashDevelop auch alleine verwenden (Option 1). Wenn Sie ein Programmierer sind und mit einem Designer zusammenarbeiten, der Flash Professional für Layout und Animation verwendet, erhalten Sie durch die Verwendung der beiden Tools nebeneinander jeweils das, was Sie benötigen (Option 2). Die drei Workflows führen zu leicht unterschiedlichen Projekten. Wenn Sie also mit anderen Programmierern zusammenarbeiten, überprüfen Sie, was mit ihnen akzeptabel ist, bevor Sie möglicherweise ein Durcheinander verursachen.

Persönlich habe ich mit Flash Professional alleine angefangen und dann schnell zu Option 3 gewechselt. Jetzt verwende ich entweder Option 1 oder Option 2 für meine eigenen Projekte (je nach Bedarf) und muss gelegentlich Option 3 für freiberufliche Arbeiten verwenden. Es lohnt sich auf jeden Fall, alle drei zu kennen, also werden wir sie der Reihe nach durchgehen.


Option 1: FlashDevelop Alone

In diesem Workflow benötigen Sie keine Kopie von Flash Professional. Mit FlashDevelop können Sie Ihren gesamten Code schreiben, alle Ihre Assets (Grafiken, Sounds usw.) importieren und einbetten und Ihr Projekt kompilieren.

Installieren

Damit FlashDevelop ein Flash-Projekt kompilieren kann, müssen Sie das kostenlose Adobe Flex SDK installieren. Diesbezüglich gibt es ein wenig Verwirrung. Lassen Sie mich das klarstellen: Die Verwendung des Adobe Flex SDK bedeutet nicht, dass Sie das Adobe Flex Framework oder MXML verwenden müssen. Dies bedeutet auch nicht, dass Sie Adobe Flex Builder (jetzt Adobe Flash Builder genannt) verwenden müssen. In diesem Stadium können Sie sich das Adobe Flex SDK nur als ein Tool vorstellen, mit dem FlashDevelop Ihren Code in eine tatsächliche Flash-SWF-Datei umwandeln kann.

Mit etwas Glück haben Sie das Flex SDK im Rahmen des FlashDevelop-Installationsprozesses installiert. Wenn ja, fahren Sie mit dem Abschnitt Erstellen eines neuen Projekts fort. Andernfalls...

  1. Laden Sie die "neueste Version in Produktionsqualität" von der Flex SDK-Homepage herunter. (Holen Sie sich die Version mit der Bezeichnung "Adobe Flex SDK" oder "Free SDK" anstelle von "Open Source Flex SDK".) Entpacken Sie sie irgendwo auf Ihrer Festplatte. Platzieren Sie es an einem generischen Ort und nicht im Ordner für ein bestimmtes Flash-Projekt.
  2. Klicken Sie nun in FlashDevelop auf Extras | Programmieren Sie die Einstellungen und wählen Sie AS3Context aus der Liste links aus. In der Sprache | Klicken Sie im Abschnitt "Flex SDK-Speicherort" auf das Textfeld und dann auf die angezeigte Schaltfläche "...". Sie erhalten einen Dateibrowser-Dialog. Verwenden Sie diese Option, um zum Stammordner des Flex SDK zu navigieren. (Dies ist der Ordner, der die Unterordner "ant", "asdoc", "bin" usw. enthält.
  3. Wählen Sie als Nächstes in den Programmeinstellungen FlashViewer aus der Liste links aus. In der Misc | Navigieren Sie im Abschnitt Externer Player-Pfad zu \runtimes\player\10.1\win\FlashPlayer.exe im Stammordner des Flex SDK. (Dies ist zum Zeitpunkt des Schreibens korrekt, wenn Flash Player 10.1 die neueste Version ist. In Zukunft kann sich dies ändern.)
  4. Schließen Sie die Programmeinstellungen.
  5. Klicken Sie auf Extras | Flash Tools | Dokumentationsgenerator | Einstellungen und legen Sie den ASDoc-Speicherort auf das Verzeichnis \bin\ im Stammordner des Flex SDK fest.
  6. Klicken Sie auf Einstellungen speichern und schließen Sie das Fenster ActionScript Documentation Generator.

Es gibt andere Möglichkeiten, das Flex SDK zu konfigurieren. Weitere Informationen finden Sie in diesem Abschnitt des offiziellen Wikis.

Neues Projekt erstellen

FlashDevelop kann jetzt verwendet werden. Erstellen Sie ein neues Projekt, indem Sie auf Projekt | klicken Neues Projekt .... Der folgende Dialog wird angezeigt:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Welche soll ich wählen? Nun, "Flash IDE" bezieht sich auf Flash Professional, daher können wir das nicht verwenden. Die AIR Projector-Projekte dienen alle zum Erstellen eigenständiger AIR-Anwendungen und nicht von SWFs, die auf einer Webseite ausgeführt werden können. Ignorieren Sie diese daher. "Flex 3 Project" und "Flex 4 Project" klingen wahrscheinlich, da wir das Flex SDK verwenden. Diese sind jedoch für Projekte gedacht, die ein Flex Framework und nicht nur das Flex SDK verwenden. Dies ist für einige Projekte nützlich, aber nicht erforderlich und geht über den Rahmen dieses Lernprogramms hinaus.

Sie haben die Wahl zwischen "AS3-Projekt" und "AS3-Projekt mit Preloader". Sie sind identisch, mit der Ausnahme, dass die letztere Option den gesamten für einen Ladebildschirm erforderlichen Basiscode und das Setup enthält. Wählen Sie "AS3-Projekt mit Preloader", geben Sie einen Namen für Ihr Projekt ein und wählen Sie einen Speicherort für die Dateien aus.

Es werden drei Ordner erstellt: bin, lib und src.

FlashDevelop_beginner_intro

Weitere Informationen hierzu finden Sie in Daniel Apts Kurztipp: So organisieren Sie Ihre Flash-Projektdateien. Kurz gesagt: Codedateien gehen in \src\, SWF-Dateien werden in \bin\ ausgegeben.

Testen des Projekts

Wenn Sie \src\Preloader.as laden, werden mehrere // TODO-Kommentare angezeigt, die Punkte markieren, an denen Sie Ihren eigenen Code zum Anzeigen, Aktualisieren und Ausblenden eines benutzerdefinierten Loaders hinzufügen können. Sobald das gesamte Projekt auf den Computer des Benutzers geladen wurde, wird die Funktion startup() ausgeführt. Dadurch wird eine neue Instanz der Klasse \src\Main.as erstellt. Schauen wir uns das an:

Ohne zu sehr ins Detail zu gehen (siehe diesen Quick-Tipp für eine weitere Erklärung der Vorgänge in dieser Klasse), ist der // entry point kommentar hier wichtig. Dies markiert die Stelle, an der der gesamte Code und die Assets vollständig geladen sind und gestartet wurden.

Wir können das Projekt testen, indem wir unmittelbar nach dieser Zeile eine einfache trace()-Anweisung hinzufügen, wie folgt:

Klicken Sie auf Projekt | Test Movie und FlashDevelop kompilieren den Code in eine SWF und führen diese dann aus. Das Flash Player-Fenster wird angezeigt:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

...aber es wird leer sein, weil wir ihm nicht gesagt haben, dass es etwas anzeigen soll. Überprüfen Sie jedoch das Ausgabefenster in FlashDevelop (klicken Sie auf Ansicht | Ausgabefenster, falls es noch nicht sichtbar ist):

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Großartig!

Einbetten von Assets

In Flash Professional können wir einem Flash-Projekt Bilder und Sounds hinzufügen, indem wir sie in die Bibliothek ziehen, und sie im Code referenzieren, indem wir ihre Verknüpfungseigenschaften in der Bibliothek festlegen. In FlashDevelop ist der Prozess etwas länger. Hier ist ein kurzer Überblick:

Angenommen, Sie haben ein JPEG und möchten es in der SWF anzeigen. Verschieben Sie es zunächst in den Ordner \lib\. Klicken Sie dann im Projektfenster mit der rechten Maustaste auf das Bild und wählen Sie "Zur Bibliothek hinzufügen":

FlashDevelop_beginner_intro

Der Dateiname des Bildes wird blau, um anzuzeigen, dass es sich jetzt in der Bibliothek befindet.

Fügen Sie in Main.as über der Konstruktorfunktion diese Zeile hinzu:

(Natürlich sollten Sie diese Klasse etwas nennen, das für die von Ihnen verwendete Bilddatei relevant ist, und nicht ActivetutsLogo.)

Wir werden diese Klasse verwenden, um die Bilddatei selbst als Bitmap zu enthalten. Um die beiden miteinander zu verknüpfen, fügen Sie eine neue Leerzeile über public var ActivetutsLogo:Class; ein, bewegen Sie den Cursor darauf, klicken Sie erneut mit der rechten Maustaste auf das Bild im Projektfenster und wählen Sie "In Dokument einfügen". Der Klasse wird eine neue Zeile hinzugefügt:

Sie haben ActivetutsLogo jetzt als eine Klasse definiert, die Bitmap erweitert und das Bild enthält. (Es ist wichtig, dass sich das [Embed]-Tag in der Zeile unmittelbar über der Zeile befindet, in der die Variable deklariert ist. So weiß Flash, dass die beiden verknüpft sind.) Jetzt können Sie das Bild in der SWF-Datei anzeigen. Wechseln Sie dazu zur Funktion init() unterhalb der zuvor hinzugefügten Anweisung trace() und fügen Sie die folgenden Zeilen hinzu:

Führen Sie das Projekt aus (Projekt | Film testen) und Sie sollten Ihr Bild in Flash Player sehen:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Erfolg! Befolgen Sie die gleichen grundlegenden Schritte, um andere Arten von Assets wie Musik einzubetten. Weitere Informationen finden Sie in diesem Abschnitt der Flex-Dokumentation.

Wenn Sie Flash noch nicht kennen, ist Ihnen all das, was über Klassen und so weiter spricht, wahrscheinlich über den Kopf gegangen. Mach dir keine Sorgen! Dies ist eine Anleitung zu FlashDevelop und nicht zu Flash oder AS3. Daher habe ich einige Details überflogen. Sie können sie aus anderen Basix-Tutorials auf der Website abrufen.


Option 2: FlashDevelop mit Flash Professional Assets

Dieser Workflow ist ideal, wenn Sie mit einem Flash-Designer oder -Animator arbeiten, der Flash Professional zum Erstellen seiner Assets verwendet. Im Wesentlichen können Sie die Bibliotheken aus einer oder mehreren FLAs in Ihr FlashDevelop-Projekt einbetten.

Neues Projekt erstellen

Erstellen Sie ein neues Projekt, indem Sie genau die gleichen Anweisungen wie für Option 1 befolgen. Ignorieren Sie jedoch den Abschnitt Einbetten von Assets. Sie können Assets mit dieser Methode einbetten, wenn Sie dies bevorzugen, dies ist jedoch nicht erforderlich.

Öffnen Sie Flash Professional. Ich verwende Flash CS3, aber jede darüber liegende Version funktioniert auch. Erstellen Sie einen einfachen Movieclip, der wiederum einige andere Movieclips enthält. Ich habe ein Basismenü mit einem Verlaufshintergrund und einigen Schaltflächen erstellt, die mit meinem Buttonizer-Bedienfeld erstellt wurden:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Geben Sie dem Menüsymbol den Verknüpfungsnamen SimpleMenu. Geben Sie innerhalb des Symbols jeder Schaltfläche einen relevanten Instanznamen (ich habe mich für startButton, stopButton und infoButton entschieden).

Speichern Sie die FLA im Ordner \lib\ Ihres Projekts. Klicken Sie jetzt noch in Flash Professional auf Datei | Einstellungen veröffentlichen..., klicken Sie auf die Registerkarte Flash und aktivieren Sie das Kontrollkästchen "SWC exportieren". Deaktivieren Sie auf der Registerkarte "Formate" alle Kontrollkästchen außer "Flash". Drücken Sie OK und klicken Sie dann auf Datei | Veröffentlichen. Ihr Ordner \lib\ enthält jetzt eine FLA, eine SWF und eine SWC.

Hinzufügen der SWC zu Ihrem FlashDevelop-Projekt

Die SWC ist der Schlüssel zu diesem Workflow. Es ist eine Datei, die die Bibliothek der FLA in einem Format enthält, das FlashDevelop und das Flex SDK lesen können.

(Okay, technisch gesehen enthält es nicht unbedingt die gesamte Bibliothek, da Sie bestimmte Symbole zwingen können, nicht exportiert zu werden, indem Sie bestimmte Einstellungen ändern - aber das ist momentan nicht wichtig.)

Wechseln Sie zu FlashDevelop und klicken Sie mit der rechten Maustaste auf die SWC im Ordner \lib\. Klicken Sie auf "Zur Bibliothek hinzufügen".

FlashDevelop_beginner_intro

Bisher ist es so, als würde man ein JPEG einbetten, oder? Nun, hier ändern sich die Dinge. Überprüfen Sie zunächst, was passiert, wenn Sie auf das kleine Pluszeichen neben der SWC klicken:

FlashDevelop_beginner_intro

Wir können alle Klassen sehen, die der FLA zur Verfügung stehen, und alle Symbole, denen ein Verknüpfungsname zugewiesen wurde. Die Tasten sind nicht da, aber keine Sorge.

Fügen wir der SWF eine Instanz des Menüs hinzu. Fügen Sie unmittelbar nach der zuvor hinzugefügten Anweisung trace() zwei neue Zeilen hinzu:

Führen Sie das Projekt aus:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Ausgezeichnet. Wir haben es geschafft, das Menü direkt aus der SWC-Datei zu übernehmen, es einem separaten Flash-Projekt hinzuzufügen und es in der SWF-Datei dieses Projekts anzuzeigen.

Wie Sie sehen können, bleiben die Schaltflächen im Menü, obwohl wir sie in der SWC-Datei nicht sehen können. Dies liegt daran, dass sich die Schaltflächen im SimpleMenu-Objekt befinden. Wir haben weiterhin vollständigen Zugriff auf sie über FlashDevelop, allerdings nur über das SimpleMenu. Dies ist sehr praktisch. Geben Sie beispielsweise direkt unter den beiden gerade hinzugefügten Codezeilen menu.button ein:

FlashDevelop_beginner_intro

Angenommen, Sie haben Ihre Schaltflächen ähnlich wie meine benannt, werden Sie feststellen, dass sie alle als Eigenschaften des menu-Objekts vorhanden sind, da wir ihnen Instanznamen gegeben haben. Dies bedeutet, dass wir von der SWC aus über Code auf alles zugreifen können, wie folgt:

Dies trennt die FLA vom Code. Der Designer konnte die Grafiken komplett überarbeiten. Solange ein SimpleMenu-Symbol einen startButton, einen stopButton und einen infoButton enthält, funktioniert das Projekt weiterhin. Außerdem kann das Projekt mehrere SWCs enthalten. Beim Erstellen eines Spiels kann ein Designer an einer Benutzeroberfläche mit Menülayouts arbeiten, während ein anderer an einer anderen FLA mit Charakteranimationen arbeitet. Hintergründe können hochauflösende JPEGs sein, die dem Projekt mit dem Tag [Embed()] hinzugefügt werden. Es ist ein großartiger Workflow.

Weitere Informationen zu SWCs finden Sie in diesem Tutorial.


Option 3: FlashDevelop als Code-Editor von Flash Professional

Der dritte Workflow ist der einfachste. In diesem Szenario wird FlashDevelop lediglich als Editor für die AS-Dateien eines Flash Professional-Projekts verwendet. Sie erhalten weiterhin die meisten Vorteile der Funktionen von FlashDevelop (Code-Vervollständigung, automatische Importe usw.), sind jedoch beim Kompilieren des Projekts und Verwalten der Bibliothek auf Flash Professional angewiesen.

Neues Projekt erstellen

Es ist sehr einfach, ein Projekt für diesen Workflow zu erstellen. Klicken Sie in FlashDevelop auf Projekt | Neues Projekt und wählen Sie Flash IDE Project.

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

Wählen Sie einen leeren Ordner und geben Sie dem Projekt einen Namen. Erstellen Sie dann in diesem Projekt eine neue FLA.

Das ist es! Richten Sie Ihre Ordnerstruktur nach Ihren Wünschen ein und vergessen Sie nicht, dass Sie Ihre Dokumentklasse mit Ihrer FLA verknüpfen müssen, obwohl Sie FlashDevelop zum Bearbeiten aller Klassen verwenden.

Wenn Sie das Projekt in FlashDevelop ausführen, wechselt es zu Flash Professional und veröffentlicht die SWF-Datei. Sie sollten weiterhin in der Lage sein, die Ausgabe von trace()-Anweisungen im Ausgabefenster von FlashDevelop zu empfangen.

Verwenden von FlashDevelop für ein vorhandenes Projekt

Wenn Sie bereits ein Flash Professional-Projekt ohne FlashDevelop gestartet haben, können Sie FlashDevelop weiterhin als Hauptcode-Editor verwenden. Führen Sie die gleichen Schritte wie oben aus, indem Sie in FlashDevelop ein neues Flash-IDE-Projekt erstellen. Wählen Sie jedoch anstelle eines leeren Ordners den Ordner aus, in dem sich Ihre FLA und andere Projektdateien befinden. Sie erhalten eine Warnung:

FlashDevelop_beginner_introFlashDevelop_beginner_introFlashDevelop_beginner_intro

...aber Sie können dies sicher ignorieren; FlashDevelop überschreibt keine vorhandenen Dateien (es sei denn, Sie haben bereits ein FlashDevelop-Projekt in diesem Ordner). Klicken Sie auf OK, und Sie erhalten das gleiche Ergebnis, als hätten Sie FlashDevelop von Anfang an verwendet.


Spenden

FlashDevelop ist völlig kostenlos und Open Source. Dies wird durch Spenden ermöglicht. Wenn Sie es also nützlich finden, sollten Sie dem Team ein paar Dollar schicken. Sie machen derzeit eine Spendenaktion, während sie sich auf Version 4.0 vorbereiten. Ich bin mir also sicher, dass alles, was Sie geben können, im Moment besonders geschätzt wird.


Irgendwelche Gedanken?

Das deckt die Grundlagen ab, aber ich weiß, dass FlashDevelop noch viel mehr zu bieten hat. Welche wesentlichen Funktionen und Plugins habe ich verpasst? Bitte teilen Sie in den Kommentaren :)

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.