HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen

Canvas ist ein neues Element in HTML5, das APIs bereitstellt, mit denen Sie dynamisch Grafiken, Diagramme, Bilder und Animationen erzeugen und rendern können. Die Canvas-API für HTML5 stärkt die HTML5-Plattform durch die Bereitstellung zweidimensionaler Zeichenfunktionen. Diese Funktionen werden von den meisten modernen Betriebssystemen und Browsern unterstützt.

Im Grunde ist Canvas eine Bitmap-Rendering-Engine. Die Zeichnungen sind final und können nicht in der Größe angepasst werden. Außerdem sind in Canvas gezeichnete Objekte nicht Teil der Webseiten-DOM.

Innerhalb einer Webseite können Sie mit dem Tag <Canvas> Canvas-Elemente hinzufügen. Diese Elemente können dann mit JavaScript verbessert werden, sodass mehr Interaktivität möglich ist. Weitere Informationen finden Sie unter diesem Link.

Der neue Dokumenttyp „HTML5 Canvas“

Animate bietet Ihnen die Möglichkeit, ein HTML5 Canvas-Dokument mit umfangreichen Grafiken, Animationen usw. zu erstellen. Ein neuer Dokumenttyp (HTML5 Canvas) wurde zu Animate hinzugefügt, der native Unterstützung für die Erstellung umfangreicher und interaktiver HTML5-Inhalte ermöglicht. Dies bedeutet, dass Sie die bekannte Zeitleiste, den Arbeitsbereich und die Werkzeuge in Animate verwenden können, um damit Inhalte zu erstellen, dabei jedoch eine HTML5-Ausgabe erstellen. Mit wenigen Klicks können Sie ein HTML5 Canvas-Dokument erstellen und eine voll funktionsfähige Ausgabe erzeugen. Aus diesem Grund sind die Dokumenten- und Veröffentlichungsoptionen in Animate so voreingestellt, dass eine HTML5-Ausgabe erzeugt wird.

In Animate ist CreateJS integriert, das attraktive interaktive Inhalte für Open-Web-Technologie über HTML5 ermöglicht. Animate erzeugt HTML und JavaScript für Inhalte (einschließlich Bitmaps, Vektoren, Formen, Sounds, Tweens usw.), die auf der Bühne erstellt werden. Die Ausgabe kann auf jedem Gerät und in jedem Browser ausgeführt werden, das/der HTML5 Canvas unterstützt.

Animate und die Canvas-API

Animate nutzt zur Veröffentlichung in HTML5 die Canvas-API. Animate übersetzt auf der Bühne erstellte Objekte nahtlos in ihre Canvas-Gegenstücke. Durch eine 1-zu-1-Zuordnung der Animate-Funktionen zu den APIs in Canvas bietet Animate Ihnen die Möglichkeit, komplexe Inhalte in HTML5 zu veröffentlichen.

Erstellen eines HTML5 Canvas-Dokuments

Um ein HTML5 Canvas-Dokument zu erstellen, gehen Sie wie folgt vor:

1. Wählen Sie Datei > Neu, um das Dialogfeld „Neues Dokument“ anzuzeigen. Wählen Sie oben im Bildschirm die Registerkarte Erweitert und klicken Sie auf die Option „HTML5 Canvas“. Dadurch wird eine neue FLA-Datei geöffnet, deren Veröffentlichungseinstellungen so angepasst sind, dass eine HTML5-Ausgabe erzeugt wird.

Sie können jetzt mit der Erstellung von HTML5-Inhalten beginnen, indem Sie die Werkzeuge in Animate nutzen. Bei Ihrer Arbeit im HTML5 Canvas-Dokument werden Sie feststellen, dass bestimmte Funktionen und Werkzeuge nicht unterstützt werden und deshalb deaktiviert sind. Dies liegt daran, dass Animate die Funktionen unterstützt, die auch vom Canvas-Element in HTML5 unterstützt werden. So werden z. B. 3D-Transformationen, gepunktete Linien und abgeflachte Effekte nicht unterstützt.

Hinzufügen von Interaktivität in einem HTML5 Canvas-Dokument

Animate veröffentlicht HTML5-Inhalte mithilfe der CreateJS-Bibliotheken.  CreateJS ist eine Sammlung modularer Bibliotheken und Werkzeuge, die über HTML5 attraktive interaktive Inhalte für Open-Web-Technologien möglich machen. Die CreateJS-Suite umfasst: EaselJS, TweenJS, SoundJS und PreloadJS. CreateJS konvertiert auf der Bühne erstellte Inhalte in HTML5 und nutzt diese individuellen Bibliotheken zur Erstellung von HTML- und JavaScript-Ausgabedateien. Sie können diese JavaScript-Datei auch bearbeiten, um Ihre Inhalte zu verbessern.

Allerdings können Sie auch in Animate Interaktivität zu Objekten hinzufügen, die Sie auf der Bühne für HTML5 Canvas erstellt haben. Dies bedeutet, dass Sie in Animate einzelnen Objekten auf der Bühne JavaScript-Code hinzufügen und zur Authoringzeit eine Vorschau anzeigen können. Im Gegenzug bietet Animate native Unterstützung für JavaScript mit hilfreichen Funktionen innerhalb des Code-Editors, wodurch die Arbeitsablauf-Effizienz von Programmierern verbessert wird.

Sie können in der Timeline einzelne Frames und Keyframes auswählen, um Ihren Inhalten Interaktivität hinzuzufügen. In einem HTML5 Canvas-Dokument können Sie Interaktivität mithilfe von JavaScript hinzufügen. Weitere Informationen zum Verfassen von JavaScript-Code finden Sie unter diesem Link.

JavaScript-Code kann direkt in das Bedienfeld „Aktionen“ geschrieben werden, wobei die folgenden Funktionen unterstützt werden:

Ermöglicht es Ihnen, JavaScript-Code schnell und fehlerfrei einzufügen und zu bearbeiten. Bei der Eingabe von Zeichen im Bedienfeld „Aktionen“ wird eine Liste mit Optionen angezeigt, mit denen Ihre Eingabe möglicherweise vervollständigt werden kann.

Außerdem unterstützt Animate bei der Arbeit mit HTML5 Canvas auch einige Funktionen aus dem Bedienfeld „Aktionen“. Diese Funktionen verbessern die Arbeitsablauf-Effizienz beim Hinzufügen von Interaktivität zu Objekten auf der Bühne. Diese sind nachfolgend beschrieben:

Zeigt Code entsprechend der Syntax in verschiedenen Schriftarten oder Farben an. Mit dieser Funktion können Sie Code strukturiert verfassen und visuell zwischen korrektem Code und Syntaxfehlern unterscheiden.

Zeigt Code entsprechend der Syntax in verschiedenen Farben an. Dadurch können Sie verschiedene Teile einer Syntax visuell voneinander abgrenzen.

Fügt beim Schreiben von JavaScript-Code automatisch schließende eckige oder runde Klammern für entsprechende öffnende Klammern hinzu.

Sie können Formen oder Objekten auf der Bühne mithilfe von JavaScript Interaktivität hinzufügen. Sie können einzelnen Frames oder Keyframes JavaScript hinzufügen.

1. Wählen Sie den Frame aus, dem Sie JavaScript hinzufügen möchten.
2. Wählen Sie Fenster > Aktionen, um das Bedienfeld „Aktionen“ zu öffnen.

Verwenden von JavaScript-Codefragmenten

Sie können mit den in Animate verfügbaren JavaScript-Codefragmenten Interaktivität hinzufügen. Um Codefragmente aufzurufen und zu verwenden, wählen Sie Fenster > Codefragmente. Weitere Informationen zum Hinzufügen von JavaScript-Codefragmenten finden Sie in diesem Artikel.

Verweise auf die Dokumentation zu CreateJS

Codes zur Induzieren von Interaktivität

Javascript bietet Ihnen verschiedene Optionen, um die Animation interaktiv zu machen. Möchten Sie lernen, wie Sie Ihrem Charakter interaktive Bewegungen hinzufügen können? Sehen Sie sich einfach das Tutorial am Ende dieses Beispiels an und befolgen Sie die Schritte.

So machen Sie Ihre Inhalte interaktiv mit HTML5

Veröffentlichen von Animationen in HTML5

Um den Inhalt auf der Bühne in HTML5 zu veröffentlichen, gehen Sie wie folgt vor:

1. Wählen Sie Datei > Einstellungen für Veröffentlichungen.
2. Wählen Sie im Dialogfeld „Einstellungen für Veröffentlichungen“ die folgenden Einstellungen:

Allgemeine Einstellungen

Der Ordner, in dem die FLA-Datei veröffentlicht wird. Standardmäßig ist dies derselbe Ordner wie die FLA-Datei, mit der Durchsuchen-Schaltfläche ... können Sie dies jedoch ändern.

Wenn diese Option aktiviert ist, wird die Zeitleiste in einer Schleife abgespielt, andernfalls wird die Wiedergabe nach dem einmaligen Abspielen beendet.

Wenn diese Option nicht aktiviert ist, werden ausgeblendete Ebenen nicht in die Ausgabe einbezogen.

Sie können festlegen, ob die Bühne horizontal, vertikal oder sowohl horizontal als auch vertikal zentriert werden soll. Die HTML-Leinwand/-Bühne wird standardmäßig in der Mitte des Browserfensters angezeigt.

Sie können festlegen, ob die Animation hinsichtlich der Breite, Höhe oder der Breite und der Höhe interaktiv sein soll. Die Option ändert auch basierend auf zahlreichen Formfaktoren die Größe des veröffentlichten Ausgabebildes. Das Ergebnis ist eine interaktive, schärfere und deutlichere HiDPI-konforme Ausgabe.

Die Ausgabe passt sich auch an ein randloses Vollbild über den gesamten Bildschirm an, wobei das ursprüngliche Seitenverhältnis beibehalten wird, auch wenn ein Teil der Leinwand möglicherweise nicht in die Anzeige passt.

• Mit den Optionen Breite, Höhe oder Beide können Sie sicherstellen, dass der gesamte Inhalt auf die Leinwandgröße skaliert wird und auch auf kleinen Bildschirmen (z. B. Mobilgeräte oder Tablets) angezeigt werden kann. Ist die Bildschirmgröße größer als die autorisierte Bühnengröße, wird die Leinwand in der ursprünglichen Größe angezeigt.

Sie können auswählen, ob die Animation auf die Ausgabe im Vollbildmodus ausgerichtet werden oder daran anpassbar sein soll. Standardmäßig ist diese Option deaktiviert.

In Ansicht einpassen: Zeigt die Ausgabe im Vollbildmodus im gesamten Bildschirmbereich an, behält aber das Seitenverhältnis bei.

Anpassbar: Passt die Größe so an, dass es keine Randbereiche in der Ausgabe gibt.

Sie können auswählen, ob Sie den Standard-Preloader oder einen beliebigen Preloader aus der Dokumentbibliothek verwenden möchten.

Ein Preloader ist eine visuelle Anzeige in Form eines animierten GIFs, die angezeigt wird, wenn die für die Darstellung einer Animation erforderlichen Skripts und Elemente geladen werden. Wenn die Elemente geladen sind, wird der Preloader ausgeblendet und die eigentliche Animation angezeigt.

Standardmäßig ist die Preloader-Option nicht ausgewählt.

• Mit der Option Standard verwenden Sie den Standard-Preloader, mit der Option
• Durchsuchen können Sie ein beliebiges Preloader-GIF verwenden. Das Preloader-GIF wird in den Ordner mit den konfigurierten Bildern unter Bildelemente exportieren kopiert.
• Mit der Option Vorschau zeigen Sie eine Vorschau des ausgewählten GIFs an.

Verwenden Sie die Umschaltoptionen, um zwischen der Veröffentlichung im Stamm- oder Unterordner zu wählen. Diese Schaltfläche ist standardmäßig auf EIN gestellt. Wenn Sie sie auf „AUS“ einstellen, wird das Ordnerfeld deaktiviert und die Elemente werden in denselben Ordner exportiert wie die Ausgabedatei.

Dokument als Textur exportieren Exportiert Vektoranimationen als Texturen, um die Performance von Animationen zu verbessern. Weitere Informationen finden Sie unter Texturveröffentlichung.

 Dieses ist nur gültig, wenn die Option Bilder in Spritesheet kombinieren deaktiviert ist.

Sie können festlegen, dass alle importierten Bilder (auch komprimierte) aus dem Canvas-Dokument exportiert werden, bei Beibehaltung der Dateigröße. Deaktivieren Sie Dokument als Textur exportieren und Bilder in Spritesheet kombinieren in der Registerkarte „Standard“. Bilder werden ohne Größenveränderung exportiert.

Der Ordner, in dem Bildelemente platziert und aus dem sie referenziert werden.

In Spritesheets kombinieren: Wählen Sie diese Option, um alle Bildelemente in einem Spritesheet zu kombinieren. Weitere Optionen für Spritesheets finden Sie unter Bitmaps als Spritesheets exportieren.

Der Ordner, in dem die im Dokument enthaltenen Sound-Elemente platziert und aus dem sie referenziert werden.

Der Ordner, in dem die CreateJS-Bibliotheken platziert und aus dem sie referenziert werden.

 Bei der Standardeinstellung werden Dateien bei der Veröffentlichung weiterhin in logische Unterordner aufgeteilt.

Erweiterte Einstellungen

Die relativen URLs, an die Bilder, Sounds und unterstützende CreateJS-JavaScript-Bibliotheken exportiert werden. Wenn das Kontrollkästchen rechts nicht aktiviert ist, werden diese Elemente nicht aus der FLA-Datei exportiert, der angegebene Pfad wird jedoch trotzdem verwendet, um die URLs zusammenzustellen. Dadurch wird die Veröffentlichung aus einer FLA-Datei mit vielen Medienelementen beschleunigt und das Überschreiben bearbeiteter JavaScript-Bibliotheken vermieden.

Mit der Option Alle Bitmaps als Spritesheets exportieren können Sie alle Bitmaps in einem Canvas-Dokument in einem Spritesheet zusammenführen. Dadurch wird die Anzahl der Serverabfragen reduziert und die Performance verbessert. Sie können die maximale Größe des Spritesheets bestimmen, indem Sie Werte für Höhe und Breite angeben.

Standard verwenden: Veröffentlichen Sie die HTML5-Ausgabe mit der Standardvorlage.

Neu importieren: Importieren Sie eine neue Vorlage in das HTML5-Dokument.

Exportieren: Exportieren Sie das HTML5-Dokument als Vorlage.

Wenn diese Option aktiviert ist, werden Kopien der Bibliotheken verwendet, die auf dem CreateJS-CDN unter code.createjs.com gehostet werden. Auf diese Weise können die Bibliotheken im Cache gespeichert und von verschiedenen Sites gemeinsam genutzt werden.

Wenn diese Option nicht aktiviert ist, werden ausgeblendete Ebenen nicht in die Ausgabe einbezogen.

Wenn diese Option aktiviert ist, werden Vektoranweisungen in einer kompakten Form ausgegeben. Deaktivieren Sie die Option, um lesbare, ausführliche Anweisungen zu exportieren (hilfreich zum Lernen).

Wenn diese Option aktiviert ist, enthalten Zeitleistensymbole eine frameBounds-Eigenschaft mit einem Array von Rechtecken, die den Grenzen der einzelnen Frames in der Zeitleiste entsprechen. Durch Multiframegrenzen wird die Veröffentlichungsdauer deutlich verlängert.

Wenn die Option „JavaScript in HTML einschließen“ ausgewählt ist, ist das Kontrollkästchen „HTML-Datei bei Veröffentlichung überschreiben“ aktiviert und abgeblendet. Wenn Sie das Kästchen „HTML-Datei bei Veröffentlichung überschreiben“ deaktivieren, wird „JavaScript in HTML einschließen“ deaktiviert.

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

 Eine Animation, die für die Verwendung verschachtelter Zeitleisten entwickelt wurde und nur ein Bild enthält, kann nicht geloopt werden.

HTML-Vorlagenvariablen

Wenn Sie während der Veröffentlichung eine neue, benutzerdefinierte HTML-Vorlage importieren, werden die Standardvariablen durch benutzerdefinierte Codefragmente basierend auf den Komponenten Ihrer FLA-Datei ersetzt. 

In der folgenden Tabelle sind die aktuellen Vorlagenvariablen aufgeführt, die Animate erkennt und ersetzt.

Die folgenden Tokens von früheren Versionen werden in der aktuellen Version nicht mehr unterstützt:

 Diese Tokens werden modularisiert und durch andere Tokens ersetzt.

JSAPI-Unterstützung, um HTML-Vorlagen für Leinwanddokumente zu importieren und exportieren

Folgende JSAPIs unterstützen den Import und Export von HTML-Vorlagen für Leinwanddokumente:

• Exportiert die HTML5-Canvas-Veröffentlichungsvorlage für ein bestimmtes Dokument an den festgelegten Speicherort:

bool document::exportCanvasPublishTemplate(pathURI)

• Beispiel:

var pathURI ="file:///C|/Benutzer/Benutzername/Desktop/CanvasTemplate.html" 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace("Vorlage konnte nicht exportiert werden");

• Importiert die HTML5-Canvas-Veröffentlichungsvorlage für ein bestimmtes Dokument von dem festlegten Speicherort (pathURI):
  

bool document::importCanvasPublishTemplate(pathURI)

• Beispiel: 

file:///C var-pathURI =“|/Benutzer/Benutzername/Desktop/CanvasTemplate.html“;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace("Vorlage konnte nicht importiert werden");

Einbetten von JavaScript in HTML

Animate bietet die Möglichkeit, die JS-Datei während der Leinwand-Veröffentlichung in die HTML-Datei einzubetten.

1. Rufen Sie im Menü Veröffentlichungseinstellungen die Registerkarte Erweitert auf und wählen Sie JavaScript in HTML einschließen. 
2. Wählen Sie die Option OK im Dialogfeld JavaScript bei Veröffentlichung in HTML-Datei einschließen, um den Inhalt erneut zu veröffentlichen, wobei die HTML-Datei überschrieben wird.
3. Diese Option deaktiviert das Kontrollkästchen HTML-Datei bei Veröffentlichung überschreiben und bei jeder Veröffentlichung wird eine HTML-Datei erzeugt, aber überschrieben.
4. Wählen Sie unter JavaScript nicht mehr in HTML einschließen die Option OK, um JavaScript auszuschließen und die HTML-Datei erneut zu veröffentlichen.
5. Wenn HTML-Datei bei Veröffentlichung nicht überschreiben nicht ausgewählt ist, wird die Option JavaScript in HTML einschließen automatisch deaktiviert. 

 Wenn Sie nicht möchten, dass die HTML-Datei überschrieben wird, dürften Sie die Optionen HTML-Datei bei Veröffentlichung überschreiben und JS in HTML integrieren nicht gleichzeitig auswählen.

Hinzufügen von globalen Skripts und Drittanbieterskripts

Animatoren nutzen häufig JavaScript-Code, der für die gesamte Animation gilt. Mit dieser Funktion können Sie nicht bildspezifische globale Skripts und Drittanbieterskripts hinzufügen, die Sie aus Animate auf die gesamte Animation anwenden können. 

So fügen Sie globale Skripts hinzu und verwenden sie:

Hinzufügen von Drittanbieterskripts

Animatoren schließen häufig JavaScript-Bibliotheken von Drittanbietern ein, müssen den Code, den Animate erstellt, jedoch manuell bearbeiten. Diese Funktion bietet Animatoren größere Flexibilität bei der Nutzung von aktuellen JavaScript-Bibliotheken und -Code für die Animation.

So fügen Sie Drittanbieterskripts hinzu: 

Einbetten von JSON-Daten in JS

Ausgehend von Kunden-Feedback und der Tatsache, dass JSON-Dateien grundsätzlich unsicher sind, haben wir die relevanten Daten in die JS-Datei eingebettet, sodass keine separate JSON-Datei erstellt wird.

HTML5 Canvas-Ausgabe optimieren

Animate optimiert die Größe und Performance bei der HTML5 Canvas-Ausgabe wie folgt:

• Exportieren von Bitmaps als Spritesheet mit den Optionen auf der Registerkarte „Spritesheet“ unter „Einstellungen für Veröffentlichungen“.
• Ausschließen ausgeblendeter Ebenen (durch Deaktivierung des Kontrollkästchens „Ausgeblendete Ebenen einschließen“) aus der veröffentlichten Ausgabe.
• Ausschließen aller nicht verwendeten Elemente wie Sounds und Bitmaps und aller Elemente in ungenutzten Bildern (Standard).
• Festlegen, dass Elemente nicht aus der FLA exportiert werden, indem die Element-Exportoptionen für Bilder, Sounds und unterstützende CreateJS-JavaScript-Bibliotheken deaktiviert und die relativen URLs für den Export verwendet werden.
• HiDPI-konforme HTML5-Canvas-Ausgabe: Animate skaliert die Ausgabe basierend auf dem Pixelverhältnis des Geräts, auf dem Sie den Inhalt anzeigen. Diese Kompatibilität bietet eine schärfere Ausgabe mit Zoom und behebt auch die Verpixelungsprobleme bei Leinwanddokumenten, wenn Sie die HTML-Leinwandausgabe auf einem Computer mit hoher DPI-Zahl anzeigen. 
  

Festlegen eines transparenten Leinwand-Hintergrunds

Sie können verschiedene Farben für die Leinwand einstellen und die Anzeigetransparenz der Leinwand ändern. Wenn Sie eine transparente Leinwand erstellen, können Sie den zugrundeliegenden HTML-Inhalt bei der Veröffentlichung sehen.

Hinweis: Diese Einstellung führt auch bei der OAM-Veröffentlichung zu einem transparenten Hintergrund.

1. Wählen Sie die Leinwand aus, die Sie ändern möchten.
2. Wählen Sie im Bedienfeld Eigenschaften die Option Bühne aus.
3. Legen Sie dort die Prozentwerte für Alpha fest.

„Keine Farbe“-Farbfeldunterstützung

Sie können auch die Option „Keine Farbe“ verwenden, um einen transparenten Leinwand-Hintergrund zu erhalten.

1. Wählen Sie Modifizieren > Dokument > Bühnenfarbe oder wählen Sie im Eigenschafteninspektor die Option Erweiterte Einstellungen.
2. Wählen Sie im Farbfeld Bühnenfarbe die Option Keine Farbe.

Bitmaps als Spritesheet exportieren

Wenn Sie diverse in Ihrem HTML5 Canvas-Dokument verwendete Bitmaps als ein Spritesheet exportieren, wird dadurch die Anzahl der Serverabfragen und die Ausgabegröße reduziert und die Performance verbessert. Sie können ein Spritesheet als PNG (Standard), JPEG oder beides exportieren.

1. Wählen Sie auf der Registerkarte Spritesheet die Option Bildelemente in Spritesheets kombinieren.
2. Wählen Sie unter Format die Option PNG, JPEG oder Beide.
   
3. Wenn Sie PNG oder Beide ausgewählt haben, geben Sie unter PNG-Einstellungen die folgenden Optionen an:
   • Qualität: Wählen Sie die Spritesheet-Qualität „8 Bit“ (Standard), „24 Bit“ oder „32 Bit“.
   • Max. Größe: Geben Sie die maximale Höhe und Breite des Spritesheets in Pixeln an.
   • Hintergrund: Wählen Sie durch Klicken die Hintergrundfarbe für das Spritesheet aus.
4. Wenn Sie JPEG oder Beide ausgewählt haben, geben Sie unter JPEG-Einstellungen die folgenden Optionen an
   :
   • Qualität: Legen Sie die Spritesheet-Qualität fest.
   • Max. Größe: Geben Sie die maximale Höhe und Breite des Spritesheets in Pixeln an.
   • Hintergrund: Wählen Sie durch Klicken die Hintergrundfarbe für das Spritesheet aus.

Arbeiten mit Text in HTML5 Canvas-Dokumenten

HTML Canvas unterstützt statischen und dynamischen Text

Statischer Text

Statischer Text ist eine umfangreichere Option, bei der sämtliche Elemente bei der Veröffentlichung in Konturen konvertiert werden, was ein hervorragendes WYSIWYG-Benutzererlebnis zur Folge hat. Da der Text in Form von Vektorkonturen veröffentlicht wird, können Sie ihn zur Laufzeit nicht bearbeiten.

Hinweis: Die Verwendung von zu viel statischem Text kann zu extrem großen Dateien führen.

Dynamischer Text

Dynamischer Text kann zur Laufzeit bearbeitet werden und wirkt sich nicht allzu sehr auf die Dateigröße aus. Er unterstützt weniger Optionen als statischer Text. Er unterstützt auch Web-Schriftarten über Adobe Fonts.

Wenn Sie dynamischen Text mit Schriftarten verwenden, die auf den Rechnern der Endbenutzer nicht verfügbar sind, wird bei der Ausgabe die Standardschrift verwendet, wodurch das Benutzererlebnis beeinträchtigt ist. Solche Probleme können durch die Verwendung von Web-Schriftarten umgangen werden.

Hinzufügen von Web-Schriftarten zu HTML5 Canvas-Dokumenten

Animate bietet Web-Schriftarten für dynamischen Text in HTML5 Canvas-Dokumenten. Adobe Fonts bietet direkten Zugriff auf Tausende hochwertige Schriftarten von führenden Entwicklern. Dank Ihres Creative Cloud-Abonnements können Sie Adobe Fonts-Schriftarten nahtlos in der HTML5-Ausgabe für moderne Browser und Mobilgeräte verwenden.

Weitere Informationen zum Verwenden von Web-Schriftarten aus Adobe Fonts in Animate finden Sie unter Verwenden von Web-Schriftarten in HTML5 Canvas-Dokumenten.

Die Animate-Version 2015.2 optimiert das visuelle Erlebnis bei dynamischen Texten in einem Canvas-Dokument, sodass das Erscheinungsbild der Bühne und der Veröffentlichung übereinstimmt.

Hinweis: Adobe Fonts ist für statischen Text nicht verfügbar.

Die HTML5 Canvas-Ausgabe

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

Enthält Definitionen für alle Formen, Objekte und Grafiken innerhalb des Canvas-Elements. Ruft außerdem den CreateJS-Namespace zur Konvertierung von Animate in HTML5 und die entsprechende JavaScript-Datei auf, die interaktive Elemente enthält.  

Enthält dedizierte Definitionen und Code für alle interaktiven Elemente der Animation. Außerdem ist in der JavaScript-Datei Code für alle Tween-Typen definiert.

Diese Dateien werden standardmäßig in die Verzeichnisse kopiert, in denen Sie die FLA-Dateien befinden. Sie können den Speicherort ändern, indem Sie im Dialogfeld „Einstellungen für Veröffentlichungen“ (Datei > Einstellungen für Veröffentlichungen) einen Ausgabepfad angeben.

Migrieren vorhandener Inhalte nach HTML5 Canvas

Sie können vorhandene Inhalte in Animate migrieren und so eine HTML5-Ausgabe erstellen. Animate bietet Ihnen die Möglichkeit, Inhalte zu migrieren, indem Sie einzelne Ebenen, Symbole und andere Bibliotheksobjekte manuell kopieren oder importieren. Alternativ können Sie den Befehl „AS3 in HTML5 Canvas-Dokument konvertieren“ ausführen, um vorhandene ActionScript-Inhalte automatisch in ein neues HTML5 Canvas-Dokument zu portieren. Weitere Informationen finden Sie unter diesem Link.

Wenn Sie jedoch in Animate mit dem Dokumenttyp HTML5 arbeiten, werden Sie feststellen, dass einige Animate-Funktionen nicht unterstützt werden. Dies liegt daran, dass es für diese Funktionen in Animate keine entsprechenden Funktionen in der Canvas-API gibt. Folglich können diese Funktionen nicht im Dokumenttyp HTML5 Canvas verwendet werden. Dieses Problem kann bei der Migration von Inhalten auftreten, wenn Sie versuchen:

Inhalt (Ebenen oder Bibliothekssymbole) aus einem herkömmlichen Animate-Dokumenttyp (z. B. ActionScript 3.0, AIR for Android, AIR for Desktop usw.) in ein HTML5-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 der Effekt „Farbverlauf - Geschliffen“ angewendet ist. Animate entfernt den Effekt.

mit mehreren Dokumenttypen (z. B. ActionScript 3.0 und HTML5 Canvas) 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 HTML5 Canvas, während das Linienwerkzeug nach wie vor ausgewählt ist. Beobachten Sie den Mauszeiger und den Eigenschafteninspektor. Symbole weisen darauf hin, dass die gepunktete Linie in WebGL nicht unterstützt wird.

ActionScript-Komponenten werden gelöscht und der Code wird auskommentiert. Wenn der Kommentarblock JavaScript enthält (Toolkit für CreateJS mit Animate 13.0), stellen Sie sicher, dass Sie den Code manuell auskommentieren.

Wenn Sie z. B. Ebenen kopiert haben, die Schaltflächen enthalten, werden diese entfernt.

Ä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 HTML5 Canvas-Dokument migrieren.

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

• 3D-Transformationen werden entfernt
• ActionScript-Code wird auskommentiert
• Videos werden entfernt

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

• Der Mischmodus „Überlagern“ wird nicht unterstützt und wird in „Normal“ geändert.
• „Gepunktete Linie“ wird nicht unterstützt und wird in „Einfarbig“ geändert.

Eine vollständige Liste der nicht unterstützten Funktionen und der während der Migration verwendeten Fallback-Werte finden Sie in diesem Artikel.

Konvertieren anderer Dokumenttypen in HTML5 Canvas-Dokumente

Mit der universellen Dokumenttyp-Konvertierung können Sie Ihre vorhandenen FLA-Projekte (beliebigen Typs) in einen anderen Dokumenttyp wie HTML5 Canvas, ActionScript/AIR, WebGL oder einen benutzerdefinierten Dokumenttyp konvertieren. Bei der Konvertierung in ein Format können Sie die Authoring-Funktionen nutzen, die Animate für diesen Dokumenttyp anbietet. 

Weitere Informationen finden Sie unter In andere Dokumentformate konvertieren

Konvertieren von ActionScript 3 in ein HTML5 Canvas-Dokument per JSFL-Skript

Animate enthält ein JSFL-Skript, mit dem Sie ein AS3-Dokument in ein HTML5 Canvas-Dokument konvertieren können. Wenn es ausgeführt wird, führ das JSFL-Skript folgende Schritte aus:

• Erstellt ein neues HTML5 Canvas-Dokument.
• Kopiert alle Ebenen, Symbole und Bibliothekselemente in das neue HTML5 Canvas-Dokument.
• Wendet Standards auf nicht unterstützte Funktionen, Teilfunktionen oder Funktionseigenschaften an.
• Erstellt separate FLA-Dateien für jede Szene, da das HTML5 Canvas-Dokument nicht mehrere Szenen unterstützt.

1. Öffnen Sie das ActionScript 3-Dokument in Animate.
2. Wählen Sie Befehle > AS3 in HTML5 Canvas-Dokument konvertieren.

 Dieses ist nur gültig, wenn die Option Bilder in Spritesheet kombinieren deaktiviert ist.