Immer mehr Browser blockieren die automatische Wiedergabe von Anzeigen, die auf Flash basieren. Jetzt ist also genau der richtige Zeitpunkt, die Funktionen von Flash Professional einzusetzen, um Content als HTML5-Canvas-Elemente auszugeben und zu optimieren.
Hier ist eine sehr kurze Animation. Dabei handelt es sich um eine auf ActionScript 3 basierende FLA-Datei. Wenn ich die Animation teste, wird eine SWF-Datei zur Wiedergabe im Flash Player ausgegeben.
Ich möchte diesen Content in HTML5-Canvas konvertieren. Unter „Befehle“ (Commands) wähle ich „In andere Dokumentformate konvertieren“ (Convert to Other Document Formats). Ich wähle „HTML5 Canvas“ und klicke auf „OK“.
Daraufhin wird ein Canvas-basiertes Dokument erstellt, das ich bearbeiten kann. Beachten Sie das Ausgabefenster. Im letzten Frame war ActionScript enthalten. Deshalb wurden die Frame-Skripte auskommentiert. Sämtliche Elemente in der Zeitleiste sehen allerdings genauso aus wie im ActionScript 3-Dokument.
Um die Aktionen anzuzeigen, wähle ich den letzten Frame. Das Fenster „Aktionen“ (Actions) zeigt, dass das ActionScript tatsächlich auskommentiert wurde. Ich öffne schnell das Bedienfeld „Codefragmente“ (Code Snippets) und wähle „Aktionen“ (Actions) und dann „Klicken, um zu Webseite zu gehen“ (Click to Go to Web Page).Hier kann ich das ActionScript entfernen. Anstatt „stop“ schreibe ich „this.stop“. Dann füge ich den Inhalt aus den Code-Fragmenten ein. Hier kann ich meine URL ändern. Ich schreibe „blogs.adobe.com/flashpro“ und ändere „this“ in „this.stage“.
In Canvas sind Bitmap-Daten manchmal viel performanter als Vektoren. Bei der Vorbereitung Ihres Dokuments könnten Sie u. a. vektorbasiertes Material als Bitmap rendern. Ich wähle einfach die Formgruppe aus, klicke mit der rechten Maustaste darauf und wähle „In Bitmap konvertieren“ (Convert to Bitmap). Und schon habe ich eine Bitmap erstellt, die sich innerhalb der Bibliothek befindet. Das kann ich mit beliebig vielen Elementen wiederholen.
Unter „Einstellungen für Veröffentlichungen“ (Publish Settings) sollten Sie einige zusätzliche Dinge beachten. Wenn Sie zahlreiche Bitmaps erstellen, ist die Anzahl der Server-Aufrufe laut IAB-Richtlinie auf 15 beschränkt. Durch Export aller Bitmaps als ein einziges Spritesheet reduzieren Sie jedoch – egal, wie viele Bitmaps Sie verwenden – die Anzahl der Server-Aufrufe auf 2. Einen für das Spritesheet und einen für die damit verknüpften Daten. Zusätzlich kann jeder Text im Dokument in Konturen umgewandelt werden, sodass Sie verschiedene Schriften nutzen können, die nicht unbedingt auf den Rechnern von Anwendern verfügbar sind.
Ich klicke auf „OK“ und werde den Inhalt nun veröffentlichen. Im Flash Player und in der Canvas-Version des Dokuments werden alle Elemente gleichermaßen animiert und gerendert. Sie können also einen vertrauten Workflow einsetzen, um den nativen Webbrowser auf allen Desktop- und Mobilgeräten zu bedienen, wenn Sie mit Flash Professional erstellte Inhalte veröffentlichen.
Lernen Sie, wie Sie mit Adobe Animate Flash-Werbebanner, deren automatische Wiedergabe von Browsern eventuell blockiert wird, in HTML5-Dateien konvertieren können.
- Öffnen Sie Ihre Flash-Datei in Animate, und wählen Sie „Befehle > In andere Dokumentformate konvertieren“.
- Wählen Sie „HTML5 Canvas“ und dann „OK“.
- Ändern Sie das ActionScript mithilfe des Bedienfelds „Codefragmente“.
- Um Vektorgrafiken als Bitmaps zu rendern, machen Sie einen Rechtsklick bzw. Ctrl-Klick auf die betreffenden Grafiken, und wählen Sie „In Bitmap konvertieren“.
- Wählen Sie alle Bitmaps für den Export als Spritesheet aus, und wandeln Sie bei Bedarf Text in Konturen um. Klicken Sie anschließend auf „OK“, um den Inhalt zu veröffentlichen.