Um ein WebGL-glTF-basiertes Dokument zu erstellen, wählen Sie auf der Registerkarte Erweitert des Startbildschirms den Dokumenttyp „WebGL-glTF Standard“ oder „WebGL-glTF Extended“ aus.
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.
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.
Um ein WebGL-glTF-basiertes Dokument zu erstellen, wählen Sie auf der Registerkarte Erweitert des Startbildschirms den Dokumenttyp „WebGL-glTF Standard“ oder „WebGL-glTF Extended“ aus.
Legen Sie Breite, Höhe und Einheiten nach Bedarf fest und klicken Sie auf Erstellen.
Klicken Sie im Eigenschafteninspektor auf Veröffentlichungseinstellungen.
Geben Sie einen Namen in das Textfeld Ausgabename ein.
Wählen Sie unter „Format“ die Option GLB oder GLTF.
Legen Sie im Textfeld „Bildauflösung“ eine Dezimalzahl mit einem Bereich von 1 bis 3 fest.
Aktivieren Sie Leerräume in JSON-Datei entfernen, um die Dateigröße zu verringern.
Standardmäßig sind die Optionen Zeitleistenschleife und Ausgeblendete Ebenen einschließen aktiviert. Sie können sie deaktivieren, um kleine Fehler zu finden.
Klicken Sie auf die Schaltfläche Veröffentlichen, um die Datei zu veröffentlichen.
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.
Klicken Sie unter Eigenschaften auf Veröffentlichungseinstellungen.
Geben Sie einen Namen in das Textfeld Ausgabename ein.
Wählen Sie unter „Format“ die Option GLB oder GLTF.
Legen Sie im Textfeld Bildauflösung eine Dezimalzahl mit einem Bereich von bis 3 fest.
Aktivieren Sie Leerräume in JSON-Datei entfernen, um die Dateigröße zu verringern.
Wenn Sie Animate 18.0 oder frühere Animate-Versionen verwenden, finden Sie nachstehend weitere Informationen.
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.
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:
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:
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:
Ausgabedatei
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.
Überschreiben von HTML
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.
Ausgeblendete Ebenen einschließen
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.
Zeitleistenschleife
Wiederholt den Inhalt nach Wiedergabe des letzten Bildes. Deaktivieren Sie diese Option, um den Inhalt beim letzten Bild anzuhalten
Der maximale BpS-Wert, der für in Browsern ausgeführten WebGL-Inhalt angegeben werden kann, ist 60 BpS.
Die veröffentlichte WebGL-Ausgabe enthält die folgenden Dateien:
HTML-Wrapper-Datei
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.
JavaScript-Datei (WebGL-Laufzeit)
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.
Texturatlas
Speichert sämtliche Farbwerte (der Formen) einschließlich der Bitmap-Instanzen auf der Bühne.
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.
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.
Kopieren
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.
Importieren
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.
Arbeiten
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.
Skripts
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.
Im Folgenden finden Sie die Änderungstypen, die angewendet werden, wenn Sie alte Inhalte in ein WebGL-Dokument migrieren.
Inhalt wird entfernt
Inhaltstypen, die in HTML5 Canvas nicht unterstützt werden, werden entfernt. Beispiel:
Filter
werden nicht unterstützt. Der Filter wird entfernt und die Form wird durch eine einfarbige Füllung ersetzt.
Inhalt wird auf einen unterstützten Standardwert angepasst
Inhaltstyp oder Funktion wird unterstützt, eine Eigenschaft der Funktion jedoch nicht. Beispiel:
Radialverlauf
wird in eine einfarbige Füllung in der Primärfarbe angepasst.
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).
Wenn Sie die Eigenschaft „Als Bitmap zwischenspeichern“ auf WebGL-Inhalt anwenden, beachten Sie Folgendes:
Bei Ihrem Konto anmelden