Anfängerleitfaden für FlashDevelop - Basix

Zwei häufige falsche Vorstellungen von Flash Professional: Zuerst müssen Sie es kaufen, um Flash-Apps und -Spiele zu erstellen. Zweitens ist es ein anständiges Werkzeug zum Schreiben von Code. Total unwahr.

In diesem Artikel erfahren Sie, wie Sie die kostenlose Windows-Anwendung FlashDevelop verwenden, um an Flash-Projekten zu arbeiten - sowohl mit als auch ohne Flash Professional.


Was ist so toll an FlashDevelop??

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

Code-Vervollständigung

Art someMovieClip.got und es wird anbieten gotoAndPlay () und gotoAndStop () wie möglich Optionen zur Auswahl. Sie können mit der Eingabe fortfahren, um die Auswahl einzuengen, oder mit den Pfeiltasten eine bestimmte Option auswählen und dann auf drücken Tab Schlüssel, damit FlashDevelop den Rest des Schlüsselworts automatisch schreibt.

Außerdem kann FlashDevelop Text an beliebiger Stelle innerhalb des Schlüsselworts abgleichen someMovieClip.pla bietet beides abspielen() und gotoAndPlay () als mögliche Optionen.

Automatische Importe

Art myMovieClip = neuer MovieClip (); und FlashDevelop wird automatisch hinzugefügt import flash.display.MovieClip; an die richtige Stelle am oberen Rand 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 enthält com.activetuts.examples.ExampleClass dann kannst du tippen var meinExample: com.activetuts.examples.ExampleClass; und FlashDevelop importiert die Klasse und verkürzt diese Zeile auf var myExample: ExampleClass;. (Natürlich müssen Sie dank Code-Vervollständigung nur noch tippen var meinExample: com.act "Tab" .ex "Tab" .Cla "Tab";.)

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

Automatische Klassenerstellung

Um dies zu schaffen com.activetuts.examples.ExampleClass In dieser Klasse können Sie mit der rechten Maustaste auf einen Ordner in FlashDevelop klicken und auswählen Hinzufügen | Neue Klasse… :

Das Dialogfeld "Neue Klasse" wird angezeigt:

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

 package com.activetuts.examples / ** *… * @author MichaelJW * / public-Klasse ExampleClass öffentliche Funktion ExampleClass () 

(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 - etwa die Rechteck Klasse - Sie können dies im Dialogfeld "Neue Klasse" festlegen, indem Sie auf klicken Durchsuche… Schaltfläche neben dem Feld Basisklasse:

Wenn Sie "Konstruktor mit übereinstimmender Basisklasse generieren" aktivieren, werden der Klasse dieselben Argumente wie für die Klasse Rectangle zugewiesen, die sie erweitert:

 Paket com.activetuts.examples import flash.geom.Rectangle; / ** *… * @author MichaelJW * / public Klasse SuperRectangle erweitert Rechteck öffentliche Funktion SuperRectangle (x: Number = 0, y: Number = 0, Breite: Number = 0, Höhe: Number = 0) super (x, y, Breite, Höhe); 

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

Automatische Objekterstellung

Haben Sie jemals den Namen einer Variablen oder Funktion eingegeben, bevor Sie sie erstellt haben? Dies mache ich immer mit Event-Handler-Funktionen, wenn ich einen Listener definiere. Ich schreibe so etwas wie:

 menuButton.addEventListener (MouseEvent.CLICK, onClickMenuButton);

... wenn ich das noch nicht definiert habe onClickMenuButton () Handler-Funktion.

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:

Wenn Sie die Eingabetaste drücken, erstellt FlashDevelop automatisch eine neue Funktion mit den richtigen Parametern in der Signatur:

 public function ExampleClass () menuButton.addEventListener (MouseEvent.CLICK, onClickMenuButton);  private Funktion onClickMenuButton (Ereignis: MouseEvent): void 

Sie können dasselbe für Variablen tun, die Sie nicht definiert haben, private Variablen, für die Sie öffentliche Setter und Getter definieren möchten, und vieles mehr. Strg + Umschalt + 1 ist die leistungsfähigste Verknüpfung von FlashDevelop. Sehen Sie sich diese Seite der offiziellen Dokumentation und die Kommentare unter diesem Artikel an, um mehr zu erfahren.

Code Refactoring

Angenommen, Sie haben eine Methode mit dem Namen erstellt Aktualisierung(), Mit der Zeit ändern Sie jedoch, was genau es tut, sodass die Daten nicht nur aktualisiert, sondern auch aktualisiert werden. Um Ihren Code genau zu halten, möchten Sie die Methode in umbenennen aktualisieren() -- aber wie? Sie können nicht nur Suchen / Ersetzen durchführen und alle Instanzen von ändern Aktualisierung zu aktualisieren, und finden Sie alle Stellen im gesamten Projekt, an denen sich diese Klasse befindet Aktualisierung() Funktion heißt, würde ewig dauern.

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

Alle Verweise auf die Funktion im gesamten Projekt (einschließlich der Funktion selbst) werden in das eingegeben, was Sie eingeben.

Mit dem Menü "Refactor" können Sie weitere Aktionen ausführen, z. B. Importanweisungen entfernen, die einmal erforderlich waren, jedoch jetzt nicht verwendet werden Umbenennen… Die Methode benutze ich am meisten.

Aufgabenverfolgung über Kommentare

Manchmal finden Sie während der Entwicklung einen Fehler, der nur einmal in einer Million auftritt, in sehr speziellen Fällen, und es lohnt sich nicht, Stunden damit zu verbringen, ihn zu beheben. Sie schlagen also eine schnelle Umgehung an und machen sich eine mentale Notiz, um später darauf zurückzukommen. Natürlich ist es schwierig, mentale Notizen zu verfolgen…

In FlashDevelop können Sie den Überblick behalten, indem Sie Kommentare schreiben, denen das Präfix vorangestellt ist // FIXME:, und sie werden im Aufgabenfenster angezeigt. Also das:

 public function load (): void // FIXME: Absturz der App, wenn am 29. Februar während einer Sonnenfinsternis geladen wird displaySkyline ();

… gibt Ihnen:

Es können auch andere Präfixe verwendet werden. //MACHEN: und //FEHLER: werden standardmäßig unterstützt, Sie können jedoch eigene hinzufügen.

Große Sache

Okay, sicher, Flash Professional macht vieles davon. Aber FlashDevelop macht es besser. Für die automatische Vervollständigung von Flash CS3 müssen Sie beispielsweise die Groß- und Kleinschreibung genau so eingeben, wie das Schlüsselwort, das Sie suchen someMovieClip.gotoand passt zu nichts Der Editor von Flash CS5 ist viel besser als frühere Versionen von Flash, hat aber noch einen Weg vor sich.

Betrachtet man diese als eine Liste, sind sie vielleicht keine große Sache. Wen kümmert es, wenn Sie die Zeit, die Sie zum Schreiben einer Codezeile benötigen, um einige Millisekunden verkürzen kann? Wie schwer ist es, eine Import-Anweisung selbst hinzuzufügen? Was ist falsch daran, eine Event-Handler-Funktion selbst zu schreiben??

Dies fehlt der Punkt. Alle diese Aufgaben sind langwierig; Sie sind Grunzarbeit, nicht Programmieren. Sie zu automatisieren und zu rationalisieren, macht es Ihnen nur noch leichter Code, ohne darüber nachdenken zu müssen Schreiben Code. Die FlashDevelop-Benutzeroberfläche hilft auf dieselbe Weise: Sie fühlt sich viel einfacher und schneller an als die von Flash Professional (was nicht verwunderlich ist, da sie auf der ausgezeichneten Benutzeroberfläche von Visual Studio basiert)..

FlashDevelop hat viele andere Eigenschaften, und da es sich um Open Source handelt, erstellt die Community häufig mehr Plugins und Erweiterungen, wodurch sie noch mehr Funktionalität bietet. Sie können die Einstellungen auch so ändern, dass sie Ihren eigenen Codierungskonventionen folgen, um Sie zu beruhigen.

Jetzt haben Sie gesehen, was FlashDevelop kann. Lassen Sie uns einen Blick auf die ersten Schritte werfen.


FlashDevelop installieren

Sie können FlashDevelop wie jede andere Windows-Anwendung installieren. Laden Sie zuerst 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 wird derzeit auf keiner anderen Plattform als Windows unterstützt. Leider ist es unter Mac OS X möglich, Parallels zu verwenden. In diesem Forumsthread finden Sie weitere Informationen.

BEARBEITEN: Mac / Linux-Unterstützung steht bevor.

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

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

Es sieht möglicherweise nicht genau gleich aus, da ich das Layout von mir angepasst habe, aber es wird die gleichen grundlegenden Elemente haben. Sie können auswählen, welche Bereiche angezeigt werden sollen, indem Sie sie im Menü Ansicht auswählen und sie auf der Benutzeroberfläche ziehen, um sie nach Belieben zu gestalten. Bewegen Sie sie an eine Kante des Fensters, damit sie an dieser Kante einrasten. Einige Bereiche haben ein "Pin" -Symbol. Klicken Sie auf diese Option, um die Option zum automatischen Ausblenden zu aktivieren, bei der die Bedienfelder nicht angezeigt werden, wenn sie nicht verwendet werden. Sie werden wieder angezeigt, wenn Sie über das Symbol fahren.

FlashDevelop kann auf drei Arten verwendet werden:

  1. Ganz alleine, ohne Flash Professional erforderlich
  2. Neben Flash Professional, Verwenden Sie Flash CS3 +, um Assets zu exportieren, während FlashDevelop das gesamte Projekt bearbeitet
  3. Als Code-Editor, Verwenden von Flash Professional zum Verwalten und Kompilieren des Projekts

Verschiedene Workflows sind für verschiedene Personen geeignet. Wenn Sie Flash Professional bereits für alle Ihre Projekte verwenden, ist es wahrscheinlich am einfachsten, dies weiterhin zu tun, aber Sie wechseln zu FlashDevelop als Hauptcode-Editor (Option 3). Wenn Sie nicht über Flash Professional verfügen - vielleicht sind Sie noch kein Neuling in Flash -, können Sie FlashDevelop auch alleine verwenden (Option 1). Wenn Sie ein Programmierer sind und mit einem Designer arbeiten, der Flash Professional für Layout und Animation verwendet, erhalten Sie mit den beiden Tools nebeneinander, was Sie benötigen (Option 2). Die drei Workflows führen zu geringfügig unterschiedlichen Projekten. Wenn Sie also mit anderen Programmierern zusammenarbeiten, sollten Sie unbedingt prüfen, was mit ihnen akzeptabel ist, bevor Sie möglicherweise ein Durcheinander verursachen.

Persönlich habe ich mit Flash Professional angefangen und bin dann schnell zu Option 3 gewechselt. Jetzt verwende ich entweder Option 1 oder 2 für meine eigenen Projekte (je nach Bedarf) und brauche gelegentlich Option 3 für freiberufliche Tätigkeiten. Es lohnt sich auf jeden Fall, alle drei zu kennen, also gehen wir sie nacheinander durch.


Option 1: FlashDevelop Alone

In diesem Workflow benötigen Sie keine Kopie von Flash Professional. Sie verwenden FlashDevelop, um Ihren gesamten Code zu schreiben, all Ihre Assets (Grafiken, Sounds usw.) zu importieren und einzubetten und Ihr Projekt zu kompilieren.

Konfiguration

Damit FlashDevelop ein Flash-Projekt kompilieren kann, müssen Sie das kostenlose Adobe Flex SDK installieren. Es gibt ein wenig Verwirrung darüber, lassen Sie mich das klarstellen: Verwenden des Adobe Flex SDK nicht bedeutet, dass Sie das Adobe Flex-Framework oder MXML verwenden müssen; Es bedeutet auch nicht, dass Sie Adobe Flex Builder (jetzt Adobe Flash Builder) verwenden müssen. In dieser Phase können Sie sich das Adobe Flex SDK als ein Werkzeug vorstellen, mit dem FlashDevelop Ihren Code in eine tatsächliche Flash-SWF-Datei umwandeln kann.

Mit etwas Glück haben Sie das Flex SDK als Teil des FlashDevelop-Installationsprozesses installiert. Wenn ja, fahren Sie mit dem Ein neues Projekt erstellen Sektion. Andernfalls…

  1. Laden Sie die neueste Version der Produktionsqualität von der Flex SDK-Homepage herunter. (Laden Sie 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 sie an einem generischen Ort und nicht im Ordner eines bestimmten Flash-Projekts.
  2. Klicken Sie jetzt in FlashDevelop auf Werkzeuge | Programmeinstellungen und wählen Sie AS3Context aus der Liste auf der linken Seite. In dem Sprache | Flex-SDK-Speicherort Klicken Sie im Abschnitt auf das Textfeld und dann auf die Schaltfläche "...", die angezeigt wird. Sie erhalten einen Dateibrowser-Dialog. Verwenden Sie es, um zum Stammordner des Flex SDK zu navigieren. (Dies ist der Ordner mit den Unterordnern "ant", "asdoc", "bin" usw.).
  3. Wählen Sie dann weiterhin in den Programmeinstellungen FlashViewer aus der Liste auf der linken Seite. In dem Sonstiges | Externer Spielerpfad Abschnitt, navigieren Sie 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. Dies kann sich in der Zukunft ändern.)
  4. Schließen Sie die Programmeinstellungen.
  5. Klicken Werkzeuge | Flash-Tools | Dokumentationsgenerator | die Einstellungen und setze das ASDoc-Speicherort zum \Behälter\ Verzeichnis im Stammverzeichnis des Flex SDK.
  6. Klicken Sie auf Einstellungen speichern und schließen Sie das Fenster mit dem ActionScript-Dokumentationsgenerator.

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

Ein neues Projekt erstellen

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

Welches zu wählen? Nun, "Flash IDE" bezieht sich auf Flash Professional, also können wir das nicht verwenden. Die AIR-Projector-Projekte dienen ausschließlich der Erstellung von eigenständigen AIR-Anwendungen und nicht von SWF-Dateien, die auf einer Webseite ausgeführt werden können. Ignorieren Sie diese also. "Flex 3 Project" und "Flex 4 Project" klingen wahrscheinlich, da wir das Flex SDK verwenden. Diese Projekte sind jedoch für Projekte gedacht, die ein Flex Framework und nicht nur das Flex SDK verwenden. Das ist nützlich für einige Projekte, aber nicht notwendig und über den Rahmen dieses Tutorials hinaus.

Sie haben die Wahl zwischen "AS3-Projekt" und "AS3-Projekt mit Preloader"; Sie sind die gleichen, mit der Ausnahme, dass die letztere Option den gesamten grundlegenden Code und das Setup für einen Ladebildschirm 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: Behälter, lib, und src.

Weitere Informationen hierzu finden Sie in Daniel Apts Quick Tip: So organisieren Sie Ihre Flash-Projektdateien. Kurz gesagt: Code-Dateien gehen rein \ src \, SWF-Dateien werden in ausgegeben \Behälter\.

Das Projekt testen

Wenn Sie laden \ src \ Preloader.as, Sie werden mehrere sehen // MACHEN Kommentare, Markierungspunkte, an denen Sie Ihren eigenen Code zum Anzeigen, Aktualisieren und Ausblenden eines benutzerdefinierten Ladeprogramms hinzufügen können. Nachdem das gesamte Projekt auf dem Computer des Benutzers geladen wurde, wird die Anlaufen() Funktion wird ausgeführt; Dadurch wird eine neue Instanz von erstellt \ src \ Main.as Klasse, schauen wir uns das mal an:

 package import flash.display.Sprite; import flash.events.Event; / ** *… * @author MichaelJW * / [Frame (factoryClass = "Preloader")] öffentliche Klasse Main erweitert Sprite öffentliche Funktion Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init);  private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Einstiegspunkt   

Ohne auf zu viele Details einzugehen (weitere Informationen zu diesem Kurs finden Sie in diesem Quick Tip) // Einstiegspunkt Kommentar ist hier wichtig. Dies markiert die Stelle, an der der gesamte Code und die gesamten Assets vollständig geladen sind und ausgeführt wurden.

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

 package import flash.display.Sprite; import flash.events.Event; / ** *… * @author MichaelJW * / [Frame (factoryClass = "Preloader")] öffentliche Klasse Main erweitert Sprite öffentliche Funktion Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init);  private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Einstiegspunkt Ablaufverfolgung ("Projekt läuft gut!"); 

Klicken Projekt | Film testen FlashDevelop kompiliert den Code in eine SWF-Datei und führt diese dann aus. Das Flash Player-Fenster wird angezeigt:

… Aber es wird leer sein, weil wir nichts gesagt haben, um etwas anzuzeigen. Überprüfen Sie jedoch das Ausgabefenster in FlashDevelop (klicken Sie auf Ansicht | Ausgabebereich wenn es nicht schon sichtbar ist):

Großartig!

Einbetten von Assets

In Flash Professional können Sie Bilder und Sounds zu einem Flash-Projekt hinzufügen, indem Sie sie in die Bibliothek ziehen und sie im Code referenzieren, indem Sie ihre Linkage-Eigenschaften in der Bibliothek festlegen. In FlashDevelop dauert der Vorgang etwas länger. Hier ein kurzer Überblick:

Nehmen wir an, Sie haben ein JPEG und möchten es in der SWF-Datei anzeigen. Verschieben Sie es zuerst auf die \ lib \ Mappe. Klicken Sie dann im Projektfenster mit der rechten Maustaste auf das Bild und wählen Sie "Zur Bibliothek hinzufügen":

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

Im Main.as, Fügen Sie oberhalb der Konstruktorfunktion folgende Zeile hinzu:

 public class Main erweitert Sprite public var ActivetutsLogo: Class; öffentliche Funktion Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); 

(Natürlich sollten Sie diese Klasse eher als relevant für die von Ihnen verwendete Bilddatei bezeichnen ActivetutsLogo.)

Wir verwenden diese Klasse, um die Bilddatei selbst als Bitmap zu enthalten. Um die beiden zu verknüpfen, fügen Sie oben eine neue Leerzeile ein public var ActivetutsLogo: Klasse;, 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". Eine neue Zeile wird der Klasse hinzugefügt:

 public class Main erweitert Sprite [Einbetten (source = '… /lib/Activetuts.jpg')] public var ActivetutsLogo: Class; öffentliche Funktion Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); 

Sie haben jetzt definiert ActivetutsLogo als eine Klasse, die sich ausdehnt Bitmap und enthält das Bild. (Es ist wichtig, dass die [Einbetten] Das Tag steht in der Zeile unmittelbar über der Zeile, in der die Variable deklariert ist. So weiß Flash, dass beide miteinander verbunden sind.) Jetzt können Sie das Bild in der SWF-Datei anzeigen. Wechseln Sie dazu in die drin() Funktion unter der Spur() Anweisung, die Sie zuvor hinzugefügt haben, und fügen Sie folgende Zeilen hinzu:

 private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Einstiegspunkt Ablaufverfolgung ("Projekt läuft gut!"); var activetutsBitmap: Bitmap = new ActivetutsLogo (); addChild (activetutsBitmap); 

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

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

Nun, wenn Sie mit Flash noch nicht vertraut sind, ging Ihnen all das Gerede über den Unterricht und das, was wahrscheinlich nicht über den Kopf ging. 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 von anderen Basix-Tutorials auf der Site abholen.


Option 2: FlashDevelop mit Flash Professional Assets

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

Ein neues Projekt erstellen

Erstellen Sie ein neues Projekt gemäß den gleichen Anweisungen wie für Option 1, ignorieren Sie jedoch das Einbetten von Assets Sektion. Sie können Assets mit dieser Methode einbetten, wenn Sie möchten, dies ist jedoch nicht erforderlich.

Öffnen Sie Flash Professional. Ich verwende Flash CS3, aber jede darüber liegende Version wird auch funktionieren. Erstellen Sie einen einfachen Movieclip, der wiederum andere Movieclips enthält. Ich habe ein einfaches Menü erstellt, das einen Verlaufshintergrund und einige mit meinem Buttonizer-Bedienfeld erstellte Schaltflächen enthält:

Geben Sie dem Menüsymbol einen Verknüpfungsnamen SimpleMenu. Geben Sie innerhalb des Symbols jeder Schaltfläche einen relevanten Instanznamen (ich habe dafür gesucht) Start Knopf, Stopptaste, und infoButton).

Speichern Sie die FLA in Ihrem Projekt \ lib \ Mappe. Klicken Sie jetzt noch in Flash Professional auf Datei | Einstellungen veröffentlichen… , Klicken Sie auf die Registerkarte Flash und aktivieren Sie das Kontrollkästchen "Export SWC". Deaktivieren Sie auf der Registerkarte "Formate" jedes Kontrollkästchen außer Flash. Drücken Sie OK und klicken Sie dann auf Datei | Veröffentlichen. Ihre \ lib \ Der Ordner 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. Diese Datei enthält die Bibliothek der FLA in einem Format, das FlashDevelop und das Flex SDK lesen können.

(Okay, technisch enthält es nicht unbedingt das ganze Bibliothek, da bestimmte Symbole nicht durch das Ändern bestimmter Einstellungen exportiert werden können. Dies ist jedoch im Moment nicht wichtig.)

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

Bis jetzt ist es wie beim Einbetten eines JPEGs, richtig? Nun, da ändern sich die Dinge. Prüfen Sie zunächst, was passiert, wenn Sie auf das kleine Pluszeichen neben der SWC klicken:

Wir sehen alle für die FLA verfügbaren Klassen und alle Symbole, denen ein Verknüpfungsname gegeben wurde. Die Knöpfe sind nicht da, aber machen Sie sich keine Sorgen.

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

 private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Einstiegspunkt Ablaufverfolgung ("Projekt läuft gut!"); var menu: SimpleMenu = neues SimpleMenu (); addChild (Menü); 

Führen Sie das Projekt aus:

Ausgezeichnet. Es ist uns gelungen, das Menü direkt aus der SWC-Datei zu übernehmen, es einem separaten Flash-Projekt hinzuzufügen und in der SWF-Datei dieses Projekts anzuzeigen.

Wie Sie sehen, bleiben die Schaltflächen im Menü, obwohl wir sie nicht in der SWC-Datei sehen können. Dies liegt daran, dass sich die Schaltflächen innerhalb des SimpleMenu-Objekts befinden. Wir haben immer noch vollständigen Zugriff darauf über FlashDevelop, allerdings nur über das SimpleMenu. Dies ist sehr praktisch - beispielsweise direkt unter den zwei Codezeilen, die Sie gerade hinzugefügt haben Menütaste:

Angenommen, Sie haben Ihre Schaltflächen auf ähnliche Weise wie meine benannt, und Sie werden feststellen, dass sie alle als Eigenschaften der vorhanden sind Speisekarte Objekt, weil wir ihnen Instanznamen gegeben haben. Dies bedeutet, dass wir von der SWC aus alles auf den Code zugreifen können.

 private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Einstiegspunkt Ablaufverfolgung ("Projekt läuft gut!"); var menu: SimpleMenu = neues SimpleMenu (); addChild (Menü); menu.startButton.addEventListener (MouseEvent.CLICK, onClickStart); menu.stopButton.addEventListener (MouseEvent.CLICK, onClickStop); menu.infoButton.addEventListener (MouseEvent.CLICK, onClickInfo);  private Funktion onClickStart (a_event: MouseEvent): void // etwas tun private Funktion onClickStop (a_event: MouseEvent): void // etwas anderes tun private Funktion aufClickInfo (a_event: MouseEvent): void // ein drittes Ding 

Dies trennt die FLA vom Code. Der Designer könnte die Grafik komplett überarbeiten und solange es noch eine gibt SimpleMenu Symbol mit einem Start Knopf, ein Stopptaste, und ein infoButton, Das Projekt wird noch funktionieren. Außerdem kann das Projekt mehrere SWCs enthalten. Beim Erstellen eines Spiels könnte ein Designer an einer FLA mit Benutzeroberfläche arbeiten, die Menülayouts enthält, während ein anderer an einer anderen FLA arbeitet, die Zeichenanimationen enthält. Hintergründe können hochauflösende JPEGs sein, die mit dem Projekt dem Projekt hinzugefügt werden [Einbetten()] Etikett. 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. Die meisten Vorteile der FlashDevelop-Funktionen (Code-Vervollständigung, automatisches Importieren usw.) sind noch immer vorhanden. Sie benötigen jedoch Flash Professional, um das Projekt zu kompilieren und die Bibliothek zu verwalten.

Ein 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-Projekt.

Wählen Sie einen leeren Ordner aus 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. Vergessen Sie nicht, dass Sie, obwohl Sie FlashDevelop verwenden, um alle Klassen zu bearbeiten, Ihre Dokumentenklasse mit Ihrer FLA verknüpfen müssen.

Wenn Sie das Projekt in FlashDevelop ausführen, wechselt es zu Flash Professional und veröffentlicht die SWF-Datei. Sie sollten trotzdem die Ausgabe von erhalten können Spur() Anweisungen im Bedienfeld Ausgabe von FlashDevelop.

Verwenden von FlashDevelop für ein vorhandenes Projekt

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

… Sie können dies jedoch 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 dasselbe Ergebnis, als würden Sie FlashDevelop von Anfang an verwenden.


Spenden

FlashDevelop ist völlig kostenlos und Open Source. Dies wird durch Spenden ermöglicht. Wenn Sie es 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, daher bin ich sicher, dass das, was Sie geben können, gerade jetzt besonders geschätzt wird.


Irgendwelche Gedanken?

Das deckt die Grundlagen ab, aber ich weiß, dass FlashDevelop noch viel mehr bietet. Welche wesentlichen Funktionen und Plugins habe ich übersehen? Bitte teile es in den Kommentaren :)