Erstellen und Veröffentlichen eines WebGL-Dokuments

WebGL ist ein Open-Web-Standard für das Rendern von Grafiken in jedem kompatiblen Browser ohne zusätzliche Plugins. WebGL ist vollständig in alle Webstandards des Browsers integriert, wodurch die GPU-beschleunigte Nutzung von Bildverarbeitung und Effekten im Webseiten-Canvas möglich wird. WebGL-Elemente können in andere HTML-Elemente eingebettet und mit anderen Teilen der Seite zusammengefügt werden.

Die meisten modernen Browser unterstützen WebGL. Unter diesem Link finden Sie weitere Informationen zu den exakten Versionen, die unterstützt werden.

In einigen Browsern ist WebGL nicht standardmäßig aktiviert. Wie Sie WebGL in Ihrem Browser aktivieren, erfahren Sie in diesem Artikel.

 Stellen Sie sicher, dass WebGL in Ihrem Browser aktiviert ist. In einigen Browsern ist es standardmäßig deaktiviert.

Verwenden des Dokumenttyps WebGL-glTF

Animate verfügt nun über zwei WebGL-glTF-Dokumenttypen. Der Dokumenttyp „WebGL-glTF Standard“ ermöglicht eine Integration in alle standardmäßigen WebGL-glTF-Pakete. Er ist vollkommen standardkonform.

Veröffentlichen von WebGL-glTF-Dateien

Konvertieren von Animationen ins GLTF- und GLB-Format

Die Formate WebGL-glTF und GLBreduzieren die Dateigröße und die Laufzeit der Verarbeitung. Mit Animate können Sie die Dokumente in beiden Formaten verwenden. Möchten Sie Ihre Videos in beiden Formaten verwenden? Sehen Sie sich einfach das Tutorial am Ende dieses Beispiels an und befolgen Sie die Schritte.

Erstellen erweiterter Animationen mit WebGL GLTF-Export in Animate

Sehen Sie sich das Video an, um zu erfahren, wie eine Animation im WebGL GLTF-Format oder im GLB-Format aussieht.

Animate 18.0 und frühere Versionen

Wenn Sie Animate 18.0 oder frühere Animate-Versionen verwenden, finden Sie nachstehend weitere Informationen.

Der Dokumenttyp WebGL

Animate bietet Ihnen die Möglichkeit, attraktive interaktive Inhalte im Web Graphics Library-Format (WebGL) zu erstellen und zu veröffentlichen. Da WebGL voll in Browser integriert ist, kann Animate die GPU-beschleunigte Nutzung von Grafikverarbeitung und -Rendering für das Webseiten-Canvas nutzen.

Mit diesem neuen Dokumenttyp können Sie Inhalte erstellen und schnell als WebGL-Ausgabe veröffentlichen. Sie können leistungsstarke Werkzeuge in Animate nutzen, um attraktive Inhalte zu erstellen und dann WebGL-Ausgaben rendern, die in jedem kompatiblen Browser ausgeführt werden können. Dies bedeutet, dass Sie Zeitleiste, Arbeitsbereich und Zeichenwerkzeuge in Animate wie gewohnt verwenden können, um native WebGL-Inhalte zu erstellen. Die meisten gängigen Browser unterstützen WebGL, weswegen Animate Inhalte in den meisten Web-Plattformen rendern kann.

 Die Unterstützung für WebGL ist nur als Vorschau verfügbar. Dieses Update von Animate bietet Unterstützung für grundlegende Animationen und Skripterstellung sowie eine Reihe von Interaktivitätsfunktionen. Zukünftige Versionen von Animate werden weitere Funktionen für den Dokumenttyp WebGL enthalten. Eine vollständige Liste der Animate-Funktionen, die für WebGL unterstützt werden, finden Sie in diesem KB-Artikel.

Erstellen eines WebGL-Dokuments

In Animate können Sie mit dem WebGL-Dokument schnell Inhalte für das WebGL-Format erstellen und veröffentlichen. So erstellen Sie ein WebGL-Dokument:

1. Starten Sie Animate.
2. Klicken Sie auf dem Begrüßungsbildschirm auf die Option WebGL (Vorschau). Wählen Sie alternativ Datei > Neu, um das Dialogfeld Neues Dokument anzuzeigen. Klicken Sie auf die Option WebGL(Vorschau).

Anzeigen einer Vorschau von WebGL-Inhalten in Browsern

Sie können die Funktion „Film testen“ in Animate nutzen, um Ihren Inhalt zu testen bzw. eine Vorschau anzuzeigen. Um eine Vorschau anzuzeigen, gehen Sie wie folgt vor:

1. Drücken Sie in Animate die Strg- + Eingabetaste (Windows) bzw. die Befehls- + Eingabetaste (Mac). Dadurch wird der Standardbrowser gestartet und der WebGL-Inhalt wird gerendert.

Animate benötigt für das Ausführen von WebGL-Inhalten einen Webserver. Animate verfügt über einen integrierten Webserver, der so konfiguriert ist, dass WebGL-Inhalt an Port 8090 ausgeführt wird. Wenn bereits ein anderer Server diesen Port verwendet, erkennt und löst Animate automatisch den Konflikt.

Veröffentlichen von Inhalten im WebGL-Format

Animate bietet Ihnen die Möglichkeit, native WebGL-Inhalte zu erstellen und zu veröffentlichen.

Um ein WebGL-Dokument zu veröffentlichen, gehen Sie wie folgt vor:

1. Wählen Sie Datei > Einstellungen für Veröffentlichungen, um das Dialogfeld „Einstellungen für Veröffentlichungen“ anzuzeigen. Alternativ können Sie Datei > Veröffentlichen wählen, wenn Sie bereits Einstellungen für die Veröffentlichung von WebGL ausgewählt haben.
2. Wählen Sie im Dialogfeld „Einstellungen für Veröffentlichungen“ Werte für folgende Optionen:

Geben Sie einen aussagekräftigen Namen für die Ausgabe an. Wählen Sie außerdem das Verzeichnis, in dem die WebGL-Ausgabe veröffentlicht werden soll.

Hier können Sie angeben, ob der HTML-Wrapper bei jeder Veröffentlichung des WebGL-Projekts überschrieben werden soll oder nicht. Sie können diese Option deaktivieren, wenn Sie externe Änderungen an der veröffentlichten HTML-Datei vorgenommen haben und diese beibehalten möchten, während Sie in Animate an der Animation oder an Elementen vorgenommene Änderungen aktualisieren.

Schließt alle ausgeblendeten Ebenen in die WebGL-Ausgabe ein. Wenn Sie die Option „Ausgeblendete Ebenen einschließen“ deaktivieren, wird keine der ausgeblendeten Ebenen (einschließlich der in Filmclips verschachtelten Ebenen), die als ausgeblendet markiert ist, in die WebGL-Datei exportiert. Auf diese Weise können Sie problemlos Versionen von WebGL-Dokumenten testen, indem Sie Ebenen ausblenden.

Wiederholt den Inhalt nach Wiedergabe des letzten Bildes. Deaktivieren Sie diese Option, um den Inhalt beim letzten Bild anzuhalten

3. Klicken Sie auf „Veröffentlichen“, um Ihren WebGL-Inhalt an der gewünschten Position zu veröffentlichen.

 Der maximale BpS-Wert, der für in Browsern ausgeführten WebGL-Inhalt angegeben werden kann, ist 60 BpS.

Die WebGL-Ausgabe

Die veröffentlichte WebGL-Ausgabe enthält die folgenden Dateien:

Sie enthält die Laufzeit, ruft Elemente ab und initialisiert den WebGL-Renderer. Die Datei hat standardmäßig den Namen „<FLA_name>.html“. Sie können im Dialogfeld „Einstellungen für Veröffentlichungen“ (Datei > Einstellungen für Veröffentlichungen) einen anderen Namen für die HTML-Datei angeben.

Die HTML-Datei wird standardmäßig im selben Verzeichnis abgelegt wie die FLA-Datei. Sie können im Dialogfeld „Einstellungen für Veröffentlichungen“ ein anderes Verzeichnis angeben.

Rendert veröffentlichte Inhalte in WebGL. Wird in der Bibliothek/dem Ordner des WebGL-Dokuments veröffentlicht. Die Datei trägt den Namen: flwebgl-<version>.min.js

Der HTML-Wrapper nutzt diese JS-Datei, um WebGL-Inhalte zu rendern.

Speichert sämtliche Farbwerte (der Formen) einschließlich der Bitmap-Instanzen auf der Bühne.

Hinzufügen von Audio zu einem WebGL-Dokument

Sie können Audio in ein WebGL-Dokument importieren und es darin einbetten, die Soundwiedergabe mithilfe der Synchronisierungseinstellungen (Ereignis, Start und Stopp) steuern und Audio zur Laufzeit über die Zeitleiste wiedergeben. WebGL unterstützt derzeit nur die Formate .wav und .mp3.

Weitere Informationen zum Arbeiten mit Audio finden Sie unter Verwenden von Sounds in Animate.

Migrieren vorhandener Inhalte in ein WebGL-Dokument

Sie können auch vorhandene Inhalte in Animate in ein WebGL-Dokument migrieren. In Animate können Sie migrieren, indem Sie Inhalt manuell kopieren oder importieren. Wenn Sie in Animate mit mehreren Dokumenten arbeiten, ist es auch üblich, Inhalte zwischen Dokumenten als Ebenen oder Elemente in der Bibliothek zu kopieren. Obwohl die meisten Funktionen von Animate unterstützt werden, werden einige Inhaltstypen angepasst, sodass sie besser für das WebGL-Format geeignet sind.

Animate enthält diverse leistungsstarke Funktionen, mit denen optisch ansprechende Inhalte erstellt werden können. Da es sich bei einigen dieser Funktionen jedoch um native Animate-Funktionen handelt, werden sie in einem WebGL-Dokument nicht unterstützt. Animate wandelt solche Inhalte in ein unterstütztes Format um. Außerdem wird visuell angezeigt, wenn ein Werkzeug oder eine Funktion nicht unterstützt wird.

Inhalt (Ebenen oder Bibliothekssymbole) aus einem herkömmlichen Animate-Dokumenttyp (z. B. ActionScript 3.0, AIR for Android, AIR for Desktop usw.) in ein WebGL-Dokument. In diesem Fall wird ein nicht unterstützter Inhaltstyp entweder entfernt oder so konvertiert, dass er den Standard unterstützt.

Beim Kopieren einer 3D-Animation werden z. B. alle 3D-Transformationen gelöscht, die auf Objekte auf der Bühne angewendet wurden.

einer PSD- oder AI-Datei mit nicht unterstütztem Inhalt. In diesem Fall wird der Inhalt entweder entfernt oder so konvertiert, dass er den Standard unterstützt.

Importieren Sie z. B. eine PSD-Datei, auf die Weichzeichnungseffekte angewendet sind. Animate entfernt den Effekt.

mit mehreren Dokumenttypen (z. B. ActionScript 3.0 und WebGL) gleichzeitig, Sie wechseln zwischen Dokumenten, während ein nicht unterstütztes Werkzeug bzw. eine nicht unterstützte Option ausgewählt ist. In diesem Fall wird in Animate angezeigt, dass die Funktion nicht unterstützt wird.

Sie haben z. B. in einem ActionScript 3.0-Dokument eine gepunktete Linie erstellt und wechseln zu WebGL, während das Linienwerkzeug nach wie vor ausgewählt ist. Beobachten Sie den Mauszeiger und den Eigenschafteninspektor. Dort wird angezeigt, dass die gepunktete Linie in Canvas nicht unterstützt wird.

Sie können JavaScript-Code in das Bedienfeld „Aktionen“ schreiben; er wird ausgeführt, nachdem der Player das Bild erreicht hat. Die Variable „this“ im Zusammenhang mit Bildskripts bezieht sich auf die Instanz des MovieClips, zu der sie gehört. Darüber hinaus können die Bildskripts auf JavaScript-Funktionen und Variablen zugreifen, die in der HTML-Containerdatei deklariert wurden. Wenn Sie ein Bild oder eine Ebene aus einem ActionScript-Dokument kopieren und in ein WebGL-Dokument einfügen, werden etwaige vorhandene Skripts kommentiert.

Änderungen, die nach der Migration auf den Inhalt angewendet werden

Im Folgenden finden Sie die Änderungstypen, die angewendet werden, wenn Sie alte Inhalte in ein WebGL-Dokument migrieren.

Inhaltstypen, die in HTML5 Canvas nicht unterstützt werden, werden entfernt. Beispiel:

werden nicht unterstützt. Der Filter wird entfernt und die Form wird durch eine einfarbige Füllung ersetzt.

Inhaltstyp oder Funktion wird unterstützt, eine Eigenschaft der Funktion jedoch nicht. Beispiel:

 

wird in eine einfarbige Füllung in der Primärfarbe angepasst.

Verbessern der Renderleistung mithilfe der Bitmap-Zwischenspeicherung

Mit Bitmap-Zwischenspeicherung zur Laufzeit lässt sich die Renderleistung verbessern, und zwar indem ein statischer MovieClip (z. B. ein Hintergrundbild) oder ein Schaltflächensymbol zur Laufzeit als Bitmap im Cache gespeichert wird. Vektorelemente werden standardmäßig in jedem Bild neu gezeichnet, Durch das Zwischenspeichern eines MovieClips oder eines Schaltflächensymbols als Bitmap wird verhindert, dass der Browser das Element ständig neu zeichnen muss, da das Bild eine Bitmap ist, deren Position sich nicht ändert. Dies ermöglicht eine deutliche Leistungssteigerung beim Rendern von WebGL-Inhalten.

Beispielsweise können Sie bei der Erstellung einer Animation mit einem komplexen Hintergrund einen Movieclip erstellen, der alle Hintergrundelemente enthält. Wählen Sie dann im Eigenschafteninspektor die Option zur Zwischenspeicherung als Bitmap für den Hintergrund-Movieclip aus. Während der Wiedergabe wird der Hintergrund als Bitmap gerendert, die mit der aktuellen Bildschirmtiefe gespeichert ist. Der Browser zeichnet die Bitmap auf der Bühne nur einmal und sehr schnell, wodurch die Animation schneller und reibungsloser abgespielt werden kann.

Mithilfe der Bitmap-Zwischenspeicherung können Sie das aktuelle Erscheinungsbild eines Movieclips festhalten. Wenn sich ein Bereich ändert, wird die Bitmap-Zwischenspeicherung mit Vektordaten aktualisiert. Die Anzahl der Neuzeichnungen, die vom Browser vorgenommen werden müssen, wird dadurch auf ein Minimum reduziert, und das Rendering erfolgt schneller und flüssiger.

Zum Aktivieren der Eigenschaft Als Bitmap zwischenspeichern zu einem MovieClip-Symbol wählen Sie die MovieClip-Instanz und anschließend „Als Bitmap zwischenspeichern“ im Dropdown-Menü „Rendern“ im Eigenschafteninspektor (Fenster > Eigenschaften).

Überlegungen zur Verwendung von „Als Bitmap zwischenspeichern“

Wenn Sie die Eigenschaft „Als Bitmap zwischenspeichern“ auf WebGL-Inhalt anwenden, beachten Sie Folgendes:

• Die maximale Größe des MovieClip-Symbols ist auf 2048 x 2048 beschränkt. Die tatsächlichen Grenzen der MovieClip-Instanz, die zwischengespeichert werden kann, sind kleiner als 2048 x 2048, da WebGL einige Pixel reserviert.
• Wenn es mehrere Instanzen desselben MovieClips gibt, generiert Animate den Cache mit der Größe der ersten Instanz. Der Cache wird jedoch nicht neu generiert, und die Eigenschaft „Als Bitmap zwischenspeichern“ wird nicht ignoriert, selbst wenn sich die Transformation des MovieClips stark ändert. Wenn das MovieClip-Symbol nun während der Animation groß skaliert wird, wird die Animation möglicherweise verpixelt angezeigt.