Adobe Animate CC (früher Flash Professional CC) und Flex® können auf verschiedene Weise zusammen eingesetzt werden, beispielsweise zur Erstellung von benutzerdefinierten Grafiken und Komponenten in Animate zur Verwendung in Flex®. In den folgenden Tutorials werden verschiedene Möglichkeiten der gemeinsamen Verwendung von Animate® und Flex® gezeigt.

Hinweis: Der Arbeitsablauf in der Designansicht zwischen Animate und Flash Builder wurde aufgegeben. Beim Einleiten dieses Arbeitsablaufs aus Flash Builder 4.6 wird in Animate ein Ausnahmefehler ausgegeben.

Einige Arbeitsabläufe von Flash Builder sind möglicherweise nicht mit den aktuellen Versionen von Animate CC (2017 und höher) kompatibel. 

Bearbeiten und Debuggen von ActionScript mit Animate und Flash Builder

Bevor Sie beginnen

Damit diese Animate/Flash Builder-Arbeitsabläufe verwendet werden können, müssen folgende Bedingungen erfüllt sein:

  • Sowohl Flash CS5 als auch Flash Builder 4 sind installiert.

  • Damit Sie eine FLA-Datei aus Flash Builder aufrufen können, müssen Sie Ihrem Projekt im Bedienfeld „Paket-Explorer“ die Projektgattung „Animate“ zuweisen.

    Weitere Informationen zum Zuweisen von Projektgattungen in Flash Builder finden Sie in der Hilfe zu Flash Builder.

  • Um eine FLA-Datei aus Flash Builder zu starten, muss Ihrem Projekt eine FLA-Datei zugewiesen sein, die zum Testen und Debuggen in den Animate-Eigenschaften des Projekts verwendet wird.

Testen, Debuggen und Veröffentlichen in Animate aus Flash Builder

So können Sie eine Datei, die Sie in Flash Builder 4 bearbeiten, in Animate testen oder debuggen:

  • Wählen Sie in der Flash Builder-Entwicklungsperspektive „Ausführen“ > „Film testen“ oder „Ausführen“ > „Film debuggen“. Beachten Sie, dass beide Menüpunkte mit einem Animate-Symbol versehen sind. Nach dem Schließen des SWF-Fensters oder der Debugging-Sitzung hat wieder Flash Builder den Fokus, sofern es keine Compiler-Fehler in den Bildscripts der mit dem Projekt verknüpften FLA-Datei gibt. Informationen zu allen Fehlern werden an das Bedienfeld „Fehler“ in Flash Builder gesendet.

So veröffentlichen Sie die mit dem aktuellen Projekt in Flash Builder verknüpfte FLA-Datei:

  • Wählen Sie in der Flash Builder-Entwicklungsperspektive „Projekt“ > „Film veröffentlichen“. Beachten Sie das Animate-Symbol neben dem Menübefehl.

Bearbeiten von AS-Dateien aus Animate in Flash Builder

So erstellen Sie eine neue ActionScript 3.0-Klasse oder -Schnittstelle und weisen Flash Builder als Editor zu:

  1. Wählen Sie „Datei“ > „Neu“.

    Neues Dokument
    Neues Dokument
  2. Sie wählen dazu einen Zweck aus den Registerkarten oben auf dem Bildschirm aus, zum Beispiel „Character Animation“, „Social“, „Spiel“, „Bildungseinrichtungen“, „Werbung“, „Web“ und „Erweitert“. Wählen Sie im Dialogfeld „Neues Dokument“ die Option „ActionScript 3.0-Klasse“ oder „ActionScript 3.0-Schnittstelle“.

  3. Wählen Sie im Dialogfeld „ActionScript 3.0 erstellen“ die Anwendung „Flash Builder“ zum Erstellen der Datei aus und klicken Sie auf „OK“. Flash Builder wird geöffnet.

  4. Wählen Sie in Flash Builder eine FLA- oder XFL-Datei, die der ActionScript-Datei zugewiesen werden soll, und klicken Sie auf „Fertig stellen“.

So öffnen und bearbeiten Sie eine AS-Datei aus Animate in Flash Builder:

  1. Klicken Sie im Bedienfeld „Bibliothek“ mit der rechten Maustaste auf ein Symbol, das mit der Klasse oder Schnittstelle verknüpft ist, und wählen Sie „Eigenschaften“.

  2. Klicken Sie im Dialogfeld „Symboleigenschaften“ auf „Klassendefinition bearbeiten“.

  3. Es wird das Dialogfeld „ActionScript 3.0 bearbeiten“ geöffnet. Überprüfen Sie in diesem Dialogfeld, dass Flash Builder als Editor für die AS-Datei zugewiesen ist, und klicken Sie auf „OK“.

    Falls nicht Flash Builder zum Bearbeiten der Datei zugewiesen ist, wählen Sie Flash Builder als Anwendung zum Bearbeiten der Klasse aus und klicken Sie auf „OK“.

    Flash Builder wird zum Bearbeiten der Datei geöffnet.

Erstellen von Komponenten für Flex

In Animate können Sie Inhalte zur Verwendung als Komponenten in Adobe® Flex®-Anwendungen erstellen. Diese Inhalte können sowohl grafische Elemente als auch Adobe® ActionScript® 3.0-Code enthalten.

Indem Sie in Animate Komponenten zur Verwendung in Flex erstellen, können Sie die flexiblen Grafikdesignfunktionen von Animate nutzen, ohne dass Sie auf die Fähigkeiten von Flex verzichten müssen.

Um in Animate Flex-Komponenten zu erstellen, müssen Sie das Flex Component Kit für Animate installieren. Sie können dieses Komponenten-Kit mithilfe von Adobe Extension Manager installieren. Einige Versionen des Komponenten-Kits unterstützen möglicherweise nicht alle Funktionen von Adobe Animate. Laden Sie deshalb die neueste Version des Komponenten-Kits von der Website www.adobe.com/go/flex_ck_de herunter.

Weitere Informationen zur Zusammenarbeit von Flex und Animate finden Sie in der Flex-Dokumentation auf der Adobe-Website unter www.adobe.com/go/learn_flexresources_de.

So erstellen Sie eine Flex-Komponente in Animate:

  1. Vergewissern Sie sich, dass Sie Adobe Extension Manager installiert haben. Sie können Extension Manager hier herunterladen: www.adobe.com/go/extension_manager_dl_de.

    Standardmäßig wird Extension Manager zusammen mit den Anwendungen der Adobe Creative Suite installiert.

  2. Laden Sie das Flex Component Kit von der Webseite www.adobe.com/go/flex_ck_de herunter. Beenden Sie Animate, bevor Sie das Komponenten-Kit installieren. Informationen zum Installieren von Erweiterungen mit dem Adobe Extension Manager finden Sie unter www.adobe.com/go/learn_extension_manager_de.

  3. Starten Sie Animate. Im Menü „Befehle“ werden zwei neue Befehle angezeigt, „Symbol in Flex-Komponente konvertieren“ und „Symbol in Flex-Container konvertieren“.

  4. Erstellen Sie in Animate ein Movieclip-Symbol, das die Grafik und den ActionScript 3.0-Code für die Flex-Komponente enthält. Der Inhalt muss in einem Movieclipsymbol enthalten sein, bevor er in eine Flex-Komponente konvertiert werden kann.

  5. Stellen Sie vor der Konvertierung des Movieclips in eine Flex-Komponente sicher, dass die folgenden Anforderungen für die Kompatibilität mit Flex erfüllt sind:

    • Die Bildrate der FLA-Datei sollte 24 bps betragen und mit der Bildrate aller Flex-Projekte übereinstimmen, die die Komponente nutzen werden.

    • Der Registrierungspunkt sollte sich beim Punkt 0, 0 im Movieclip befinden.

      Hinweis: Um sicherzustellen, dass der gesamte Inhalt im Movieclip den Registrierungspunkt 0, 0 aufweist, klicken Sie unten in der Zeitleiste auf „Mehrere Bilder bearbeiten“, wählen Sie alle Bilder in der Movieclipzeitleiste aus, wählen Sie den gesamten Inhalt in allen Bildern aus und bewegen Sie ihn im Eigenschafteninspektor auf 0, 0.

  6. Wählen Sie den Movieclip im Bedienfeld „Bibliothek“ aus und wählen Sie „Befehle“ > „Symbol in Flex-Komponente konvertieren“.

    Animate konvertiert den Movieclip in eine Flex-Komponente, ändert sein Symbol in der Bibliothek in ein Flex-Symbol und importiert den mit der FlexComponentBase-Klasse kompilierten Clip in die Bibliothek. Animate bettet die FlexComponentBase in die Flex-Komponenten-SCW-Datei ein, die im nächsten Schritt erstellt wird.

    Im Bedienfeld „Ausgabe“ wird eine Fortschrittsmeldung angezeigt, während Animate den Movieclip konvertiert.

  7. Wählen Sie „Datei“ > „Veröffentlichen“, um eine SWC-Datei zu erstellen, die die kompilierte Flex-Komponente enthält. Animate erstellt auch eine SWF-Datei aus der Haupt-FLA-Datei, diese können Sie jedoch ignorieren, wenn Sie sie nicht benötigen. Die veröffentlichte Komponenten-SWC-Datei kann jetzt in Flex verwendet werden.

  8. Führen Sie einen der folgenden Schritte aus, um die SWC-Datei in Flex zu verwenden:

    • Kopieren Sie die SWC-Datei aus Animate und fügen Sie sie in den bin-Ordner des Flex-Projekts ein.

    • Fügen Sie die SWC-Datei dem Bibliothekspfad des Flex-Projekts hinzu. Weitere Informationen finden Sie in der Dokumentation zu Flex Builder unter www.adobe.com/go/learn_flexresources_de.

Verwenden von Flex-Metadaten

Wenn Sie ActionScript 3.0-Code zur Verwendung in Flex schreiben, können Sie Metadaten im Code platzieren, um externe Dateien in eine beliebige veröffentlichte SWF-Datei einbetten, die den ActionScript-Code enthält. Normalerweise werden diese [Embed]-Metadatendeklarationen verwendet, um Bilddateien, Schriftarten, einzelne Symbole oder andere SWF-Dateien in die SWF-Datei einzubetten.

Denken Sie daran, dass Metadaten „Daten über Daten“ sind. Im ActionScript-Code fügen Sie Metadaten in der Zeile hinzu, die vor der Codezeile steht, auf die sich die Metadaten beziehen. Der Compiler berücksichtigt die Metadaten, wenn die nachfolgenden Codezeile kompiliert wird.

Wenn Sie zum Beispiel ein Bild mit dem Namen „button_up.png“ einbetten möchten, das im Verzeichnis eine Ebene über der ActionScript-Datei gespeichert ist, verwenden Sie den folgenden ActionScript-Code:

[Embed(“../button_up.png”)]

private var buttonUpImage:Class;

Das [Embed]Metadatentag weist den Compiler an, die Datei „button_up.png“ in die SWF-Datei einzubetten und der Variablen buttonUpImage zuzuweisen.

Weitere Informationen zum Einbetten von Elementen mit Metadaten in Flex finden Sie unter „Einbetten von Elementen“ im Flex 3-Entwicklerhandbuch unter www.adobe.com/go/learn_flexresources_de.

Wenn Sie eine Funktion verwenden, die das Flex SDK benötigt, zum Beispiel [Embed]-Metadaten, fordert Animate Sie zur Kompilierungszeit auf, die Flex.SWC-Datei dem Bibliothekspfad Ihrer FLA-Datei hinzuzufügen. Die Flex.SWC-Datei enthält kompilierte Klassen, die zur Unterstützung von Flex-Metadaten erforderlich sind. Klicken Sie im Dialogfeld auf „Bibliothekspfad aktualisieren“, um die Flex.SWC-Datei dem Bibliothekspfad hinzuzufügen. Sie können die Flex.SWC-Datei auch später in den ActionScript-Veröffentlichungseinstellungen zum Bibliothekspfad hinzufügen.

Zusätzliche Ressourcen

Die folgenden Ressourcen enthalten weitere Informationen und Beispiele für die Integration von Animate mit Flash Builder:

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie