Share
Flash Professional ist nicht das einzige Tool, mit dem Sie Flash-Apps und -Spiele erstellen können. Anfang des Jahres haben wir uns FlashDevelop angesehen. Wir werfen einen Blick auf FDT 4, eine leistungsstarke IDE, die speziell für die Entwicklung von ActionScript, MXML und haXe entwickelt wurde. Lesen Sie weiter, um herauszufinden, was es Ihnen bieten kann!
Der Unterschied zwischen FDT und dem Flash Professional-Code-Editor oder anderen Tools besteht darin, dass er eine Menge zeitsparender Funktionen bietet, mit denen Sie sich auf die Logik Ihres Codes konzentrieren können. Sie müssen sich also nicht mit Syntaxproblemen wie einer fehlenden schließenden Klammer oder einem falsch geschriebener Funktionsaufruf. Wie eine Rechtschreibprüfung gibt Ihnen FDT sofort Feedback zu Ihrem Code und identifiziert Probleme, bevor Sie das Projekt überhaupt kompilieren. Bevor wir FDT installieren und mit ihm arbeiten, möchte ich Ihnen einen Vorgeschmack auf einige der aufregendsten Funktionen geben.
Die wichtigste Funktion von FDT, die Sie wahrscheinlich am häufigsten verwenden werden, ist die Codevervollständigung, die auch als automatische Vervollständigung bezeichnet wird. Sie müssen nie mehr den gesamten Namen einer Variablen oder Funktion eingeben. Beginnen Sie einfach zu schreiben und drücken Sie STRG + LEERTASTE, um die Liste der Vorschläge anzuzeigen. Sie können das automatische Vervollständigungsverhalten so ändern, dass es bei jedem Tastendruck (wie bei FlashDevelop) ausgelöst wird, indem Sie zu gehen Voreinstellungen> FDT> Editor> Code Assist und "Every Key" einschalten.
Fahren Sie mit der Eingabe fort, um die Auswahlliste einzuschränken. Wählen Sie mit der Maus einen Vorschlag aus der Liste aus, oder verwenden Sie die Pfeiltasten "Nach oben" und "Nach unten" und drücken Sie anschließend die Eingabetaste. Sie können auch "Kamel-Fall-Autovervollständigung" verwenden, beispielsweise, someMovieClip.gap wird die Funktion anbieten gotoAndPlay ().
Meine Lieblingsfunktion von FDT ist die Verwendung der Quick Fix-Funktion. FDT teilt Ihnen nicht nur sofort mit, was in Ihrem Code falsch ist, sondern gibt Ihnen auch die Möglichkeit, das Problem automatisch durch Einfügen des fehlenden Codes zu beheben. Wenn Sie beispielsweise eine Funktion aufrufen, die noch nicht verfügbar ist, fügt FDT links von dieser Zeile eine Fehlermarkierung hinzu. Die gelbe Lampe zeigt an, dass für dieses Problem ein Quick Fix verfügbar ist. Klicken Sie auf CMD / CTRL + 1, und überprüfen Sie den Vorschlag im Popup "Schnelle Korrektur":
FDT bietet Ihnen die Möglichkeit, die Funktion zu erstellen sag Hallo(). Drücken Sie "Return" und FDT fügt die Funktion automatisch ein. Verwenden Sie die "Tab" -Taste, um die von den blauen Rechtecken umgebenen Code-Anweisungen zu durchlaufen und sie zu ändern. Klicken Sie erneut auf "Zurück", um die Schnellkorrektur abzuschließen.
Diese Funktion eignet sich nicht nur für die Behebung von Problemen mit nur wenigen Tastenanschlägen, sondern ändert auch den Kodierungs-Workflow. Sie werden anfangen, Probleme zu erzwingen, um einen Quick Fix zu verwenden!
Wenn Sie die Tastenkombination CMD / STRG + UMSCHALT + O verwenden oder im Menü "Quelle"> "Importe organisieren" auswählen, werden alle fehlenden Importanweisungen am Anfang der Klasse hinzugefügt. Sie müssen keine Importe mehr manuell hinzufügen. Das Schönste an der FDT-Funktion "Importe organisieren" ist, dass nicht verwendete Importe automatisch entfernt werden.
Ich hätte gerne ein violettes Label in meiner Flex-App, aber welchen Hex-Farbcode hat Purple? Ohne zu Flash Pro oder Photoshop wechseln zu müssen, können Sie einfach die Farbauswahl von FDT verwenden, um eine Farbe auszuwählen. Bewegen Sie den Mauszeiger über den Hex-Code und aktivieren Sie Quick Fix (CMD / CTRL + 1). Wählen Sie "Farbe auswählen" und verwenden Sie die Farbauswahl.
Als Entwickler tippen Sie immer wieder in wiederkehrende Code-Snippets, wie zum Beispiel eine "for-Schleife". In FDT können wir dazu einfach Code-Templates verwenden. Eintippen fori, Verwenden Sie die automatische Vervollständigung (STRG + LEERTASTE) und wählen Sie "fori - iterate over array" aus. Dadurch wird das Code-Snippet für Sie eingefügt. Nehmen Sie die Änderungen mit der "Tab" -Taste vor und drücken Sie "Return", um den Vorgang abzuschließen.
Um die mit FDT gelieferten Codevorlagen zu durchsuchen, gehen Sie zu Voreinstellungen> FDT-Editor> Vorlagen. Hier können Sie auch eigene Vorlagen erstellen! Schauen Sie sich einfach die anderen Vorlagen an und Sie werden schnell lernen, wie sie erstellt werden, und verwenden Sie die leistungsstarken Variablen, um sie noch intelligenter zu machen.
FDT verfügt über zwei hervorragende Refactoring-Funktionen: Bewegung und Umbenennen. Wenn Sie eine Klasse in ein anderes Paket verschieben möchten, müssen Sie normalerweise die Importanweisungen in allen Klassen ändern, die sie verwenden. Das Umstellen von Refactoring in FDT erledigt dies automatisch. Ziehen Sie einfach die Klasse im Flash Explorer von einem Paket in ein anderes, und der Rest erledigt FDT.
Wenn Sie eine Klasse, Funktion oder Variable umbenennen möchten, verwenden Sie einfach die Umbenennungsfunktion umbenennen (ALT + UMSCHALT + R). FDT ändert den Namen überall im gesamten Projekt.
Das Navigieren durch den Quellcode ist besonders in großen Projekten wichtig. Hier sind einige der wichtigsten Verknüpfungen für die Navigation:
FDT wurde 2004 als erster professioneller ActionScript 2-Editor gestartet. Es gibt eine große und sehr aktive Community rund um FDT, die Tutorials, Blogs über die Verwendung der ständig neuen Funktionen, die Unterstützung von Twitter sowie die Erstellung von Funktionsanfragen und Fehlerberichten bereitstellt. Das FDT-Entwicklungsteam gibt diese Liebe an die Community zurück, indem es deren Anfragen hört und Community-Tools wie Joa Ebert's Apparat oder haXe integriert.
Um Teil der FDT-Community zu werden, besuchen Sie den Blog und folgen Sie FDT auf Twitter oder Facebook.
Die Installation von FDT ist einfach. Befolgen Sie diese 3 Schritte, um Ihre FDT-Entwicklungsumgebung einzurichten:
Um FDT zu installieren, gehen Sie einfach zu http://fdt.powerflasher.com und navigieren Sie zur Download-Seite. Wählen Sie eines der Installationsprogramme für Windows, Mac oder Linux aus. Wenn Sie FDT ausprobieren möchten und noch keine Lizenz besitzen, füllen Sie das Formular oben aus, um sich für eine 30-Tage-Testlizenz zu registrieren. Folgen Sie nach dem Herunterladen den Anweisungen, um die Installation abzuschließen.
FDT wird ohne Flex-SDK vertrieben. Das Flex-SDK ist im Wesentlichen ein Ordner, der Compiler, Core-Klassen und andere Tools zum Kompilieren Ihres Action Script- und Flex-Codes in eine SWF-Datei enthält. Sie können sowohl reine Action Script-Projekte als auch Flex-Projekte mit dem Flex SDK von Adobe entwickeln. Wechseln Sie zu Adobe Open Source und laden Sie die SDKs herunter, die Sie in FDT verwenden möchten. Nach dem Herunterladen und Entpacken der SDKs gehen Sie zu FDT> Voreinstellungen> Installierte SDKs Klicken Sie auf die Schaltfläche "Hinzufügen", um ein Flex-SDK hinzuzufügen.
Um Ihre Flash-Anwendungen mit dem visuellen Debugger von FDT zu debuggen, müssen Sie sicherstellen, dass der Debug Flash Player auf Ihrem System installiert ist. Zum Adobe Flash Player-Download gehen:
Glückwunsch, Sie haben Ihre FDT-Entwicklungsumgebung erfolgreich eingerichtet und können nun mit der Codierung beginnen!
Die oben beschriebenen Bedienfelder werden in FDT "Ansichten" genannt. Sie können Ansichten schließen, minimieren oder neu anordnen, indem Sie eine Ansicht einfach an einen anderen Ort ziehen. Wenn Sie die Ansichten auf ihre Standardpositionen zurücksetzen möchten, gehen Sie zu Fenster> Perspektive zurücksetzen. Um weitere Ansichten zu öffnen, gehen Sie zu Fenster> Ansicht anzeigen und wähle den fehlenden aus. Ansichten werden in sogenannten "Perspektiven" gruppiert.
FDT kann in jeden Flash / Flex-Entwicklungsworkflow integriert werden, unabhängig davon, ob Sie FDT in Kombination mit Flash Pro verwenden, FDT ohne ein anderes Tool verwenden oder FDT als Code-Editor für Flash Pro verwenden. In diesem Kapitel werden die drei beliebtesten Workflows beschrieben, die von Flash-Entwicklern am häufigsten verwendet werden.
In diesem Arbeitsablauf verwenden wir FDT als eigenständiges Werkzeug zur Entwicklung von Flash / Flex-Projekten. Sie müssen nicht einmal Flash Pro oder Adobe Creative Sweet installiert haben. Wir werden nur FDT verwenden, um Code zu schreiben und in eine SWF-Datei zu übersetzen.
Klicken Sie mit der rechten Maustaste irgendwo im Flash Explorer und wählen Sie Neu> Neues Flash-Projekt. Der "Flash Project Wizard" wird angezeigt.
Mit diesem Assistenten können Sie aus einer Liste von Projektvorlagen für Web, Mobile und Desktop auswählen. Wir werden zu diesem Zeitpunkt ein reines Action Script-Projekt erstellen. Geben Sie den Projektnamen "HelloFDT" ein und wählen Sie Web> AS3 und klicken Sie auf "Fertig stellen".
Im Flash Explorer auf der linken Seite sehen wir nun das erstellte Projekt mit einigen Dateien und Ordnern. Doppelklicken Sie auf die Klasse Main.as im Ordner src, um sie zu öffnen.
FDT speichert einige projektspezifische Einstellungen im .die Einstellungen Ordner und in der .Projekt Datei. Da Sie diese Dateien nicht berühren sollten, blenden Sie sie aus, indem Sie auf den kleinen Abwärtspfeil oben rechts im Flash Explorer klicken und "Filter" auswählen. Überprüfen Sie nun den Filter ". *" Und klicken Sie auf "OK". Der .settings-Ordner und die .project-Datei sollten jetzt ausgeblendet sein.
Fügen wir einige Codezeilen hinzu, bevor wir unser Projekt kompilieren:
Accentsconagua
package import flash.display.Sprite; public class Main erweitert Sprite public function Main () graphics.beginFill (0x0000ff); graphics.drawCircle (100, 100, 40); trace ("Hallo FDT"); Um unsere einfache Anwendung zu kompilieren und zu debuggen, klicken Sie im Flash Explorer mit der rechten Maustaste auf die Klasse Main.as und wählen Sie aus Debuggen als> FDT SWF-Anwendung. Nach dem erfolgreichen Abschluss der Kompilierung startet FDT Ihre Anwendung mit dem "External SWF Viewer". Schauen Sie sich die "Konsole" an. Dort sollte auch die Trace-Anweisung "Hello FDT" angezeigt werden. (Wenn Sie es nicht sehen, stellen Sie sicher, dass der Debug Flash Player installiert ist.)
Um ein Asset wie ein JPEG - Bild in unsere SWF - Datei einzubetten, können Sie die [Einbetten] Metadaten-Tag Erstellen Sie zunächst ein neues Paket mit dem Namen Assets im Ordner src und ziehen Sie ein Bild aus dem Finder / Explorer in das Assets-Paket.
Jetzt können wir die folgenden Codezeilen verwenden, um das JPEG in unsere SWF-Datei einzubetten und auf der Bühne anzuzeigen:
Paket import flash.display.Bitmap; import flash.display.Sprite; public class Main erweitert Sprite [Einbetten (source = "assets / image.jpeg")] private var ActiveTutsLogo: Class; öffentliche Funktion Main () var logo: Bitmap = new ActiveTutsLogo (); addChild (Logo);
Wir können jetzt die Schaltfläche Debug oder Release in der Toolbar oben verwenden, um unsere Anwendung zu starten. Sie starten immer die zuvor gestartete Anwendung. Debuggen Ihrer Anwendung mit Haltepunkten und Spur() Anweisungen funktionieren nur, wenn Sie Debug wählen.
Nach Abschluss der Kompilierung sollten Sie Ihre SWF-Datei mit dem eingebetteten Bild sehen. Herzliche Glückwünsche!
Dieser Workflow ist ideal, wenn Sie mit einem Designer zusammenarbeiten, der in Flash Pro Grafiken und Animationen erstellt, während Sie die Logik mit ActionScript hinzufügen. In diesem Arbeitsablauf erstellen wir einen animierten MovieClip in Flash Pro und steuern ihn mithilfe von ActionScript in FDT. Dies sind die Schritte:
Lass uns anfangen! Zunächst erstellen wir ein neues Flash-Projekt in FDT. Befolgen Sie dazu genau die gleichen Anweisungen wie in beschrieben Workflow 1: Nur FDT> Neues Projekt erstellen. Als Projektnamen werde ich diesmal "FDTwithFlashPro" verwenden.
In diesem Beispiel werde ich eine sehr einfache Keyframe-Animation mit einem springenden Ball erstellen. Starten Sie Flash Pro und erstellen Sie eine neue Flash-Datei (ActionScript 3). Wählen Einfügen> Neues Symbol aus dem menü. Geben Sie den Namen ein Flummi Aktivieren Sie das Kontrollkästchen "Export für ActionScript". Wenn Sie das Kontrollkästchen nicht sehen, klicken Sie auf die Schaltfläche "Erweitert".
Vergessen Sie nicht, das Kontrollkästchen "Export für ActionScript" zu aktivieren. Andernfalls können wir dieses Asset später nicht verwenden. Als Nächstes werde ich eine einfache Keyframe-Animation erstellen, damit der Ball hüpfen kann. Es sollte so aussehen. (Grundsätzlich können Sie in diesem Schritt eine beliebige Animation erstellen; es muss kein springender Ball sein.).
Jetzt ist es Zeit, die FLA zu retten. Gehe zu Datei> Speichern unter und wählen Sie den libs-Ordner aus dem zuvor erstellten FDT-Projekt. Wählen Sie als Dateiname Assets.fla und klicken Sie auf "Speichern". Um den animierten MovieClip-Ball in unserem FDT-Code-Projekt verwenden zu können, müssen Sie das Flash Pro-Projekt als SWC-Bibliotheksdatei exportieren. Lass uns das tun, indem du gehst Datei> Veröffentlichungseinstellungen und finden Sie das Kontrollkästchen "SWC exportieren" im Veröffentlichungsdialogfeld. Klicken Sie auf "Veröffentlichen", und Flash Pro generiert die SWC-Datei für Sie.
Jetzt wechseln wir zurück zu FDT. Unser Projekt sollte so aussehen:
Wenn Sie die Assets.swc-Bibliothek erweitern, wird die Movieclip-Klasse BouncingBall in dieser Bibliothek angezeigt. Dies ist eine großartige Funktion von FDT, mit der Sie eine SWC-Bibliothek untersuchen können, welche Asset-Klassen darin enthalten sind.
Der letzte Schritt dieses Workflows besteht darin, die Animation des springenden Balls zu instanziieren und der Bühne hinzuzufügen. Öffnen Sie die Klasse Main.as und fügen Sie die folgenden Codezeilen ein:
package import flash.display.Sprite; public class Main erweitert Sprite öffentliche Funktion Main () var bouncingBall: BouncingBall = new BouncingBall (); bouncingBall.y = 200; addChild (bouncingBall);
Das ist es! Drücken Sie die "Run" -Taste und Sie sollten den springenden Ball auf der Bühne sehen.
Der letzte Workflow, den ich Ihnen zeigen möchte, ist die Verwendung von FDT als Code-Editor für ein Flash Pro-Projekt. Sie schreiben Code in FDT, kompilieren jedoch Ihr Projekt mit Flash Pro. FDT bietet eine großartige Funktion, um automatisch zu Flash Pro zu wechseln und die Kompilierung mit nur einem Klick zu starten. Wir werden uns auch diese kleine Zeitersparnis ansehen.
Wieder beginnen wir mit der Erstellung des Projekts in FDT. Gehen Sie einfach zu Neu> Neues Flash-Projekt und wählen Sie in der Liste der Projektvorlagen Web> Flash Professional aus. Setzen Sie den Projektnamen auf "FDTforFlashPro" und klicken Sie auf "Fertig stellen".
FDT muss den Speicherort Ihrer Flash Pro-Installation kennen. Gehe zu Voreinstellungen> FDT> Tools> Flash und legen Sie den Pfad zu Ihrer Flash Pro-Installation fest, indem Sie auf die Schaltfläche "Durchsuchen" klicken. Wählen Sie Ihre Kopie von Flash Pro aus und schließen Sie das Einstellungsfenster. Öffnen Sie als Nächstes die Klasse Main.as und fügen Sie dem Konstruktor eine Trace-Anweisung hinzu trace ("Hallo Flash Pro"). Doppelklicken Sie nun im Flash Explorer auf die Datei FDTforFlashPro.fla, um sie zu öffnen. Beachten Sie, dass die Main-Klasse in Flash Pro bereits im Eigenschaftenfenster festgelegt ist. Sie können auf die Stiftschaltfläche klicken, um zu überprüfen, ob die Klasse wirklich vorhanden ist.
Die Hauptklasse ist vorhanden, sodass wir das Projekt jetzt in Flash Pro starten können, indem Sie auswählen Debuggen> Film debuggen aus dem Menü oder über die Verknüpfung. Im Ausgabefenster von Flash Pro sollten Sie nun die Trace-Ausgabe sehen:
Toll, jetzt können wir zwischen FDT und Flash Pro hin und her wechseln. Schreiben Sie einige Codezeilen in FDT, fügen Sie Klassen und Logik hinzu und wechseln Sie zu Flash Pro, um die Assets zu erstellen und das Projekt zu debuggen.
Um diesen Workflow zu verbessern, gibt es in FDT eine großartige Funktion, mit der Sie zu Flash Pro wechseln können, indem Sie innerhalb von FDT auf die Schaltfläche "Ausführen" klicken, um das Projekt zu kompilieren und zu debuggen. In FDT auswählen Ausführen> Konfigurationen ausführen aus dem menü.
Doppelklicken Sie im Fenster "Ausführungskonfigurationen" im linken Menü auf den Eintrag "FDT Flash IDE". Dadurch wird eine neue leere Konfiguration erstellt. Nun legen Sie einfach das Projekt und die FLA-Datei mit den Schaltflächen "Durchsuchen" fest und wählen TestMovie aus. Wenn Sie auf "Ausführen" klicken, wechseln Sie zu Flash Pro und starten das Projekt! Von jetzt an können Sie einfach auf die Schaltfläche "Ausführen" in der FDT-Menüleiste klicken, um Ihr Projekt in Flash Pro zu starten.
Wenn Sie mehr über FDT und seine Funktionen erfahren möchten, besuchen Sie die FDT Docs-Seite. Dort finden Sie eine Vielzahl von Tutorials, Videos, Verknüpfungen, Projektvorlagen und vieles mehr. Glückliche Kodierung!
