>>[Hemanth Sharma] Hallo, ich bin Hemanth Sharma.
In diesem Video zeige ich Ihnen eine neue Funktion von Adobe Flash Professional CC.
Damit können Sie Inhalte auf Basis einer HTML5-Canvas-Datei exportieren und erstellen.
HTML5-Canvas-Inhalte lassen sich nativ bearbeiten und veröffentlichen, direkt in Flash Professional CC.
Mit den Tools, Funktionen und der Zeitleiste, die Sie schon kennen, lassen sich ganz einfach HTML5-Inhalte erstellen.
Das heißt, Sie können JavaScript-Code in Flash Professional verfassen und dabei Codehints und Funktionen für Syntax-Hervorhebungen nutzen, um soliden JavaScript-Code zu erzeugen.
Neben dem Coden von JavaScript-basierten HTML5-Inhalten können Sie auch vorhandene AS3-Inhalte ganz einfach in ein HTML5-Canvas-Dokument umwandeln.
Ich möchte Ihnen das anhand eines einfachen Prototyps für ein Spiel zeigen, das ausschließlich auf ActionScript basiert: Hungry Hero.
Das Spiel besteht im Prinzip aus zwei Screens und der Anfangsinteraktion, die jedes Spiel haben muss.
Das ist eine FLA-Datei, die ursprünglich zur Veröffentlichung einer SWF-Datei erstellt wurde.
Um aus diesem Dokument ein HTML5-Canvas-Dokument zu machen, gibt es zwei Optionen: Entweder Sie kopieren alle Ebenen der ursprünglichen FLA-Datei in ein neues HTML5-Canvas-Dokument, oder Sie verwenden das JSFL-Skript im Menü „Befehle“ (Commands).
Dieser Befehl erledigt das Kopieren für Sie.
Ich verwende das JSFL-Skript aus dem Menü „Befehle“ (Commands).
Mit „HTML5 Canvas aus AS3-Dokumentformaten konvertieren“ (Convert to HTML5 Canvas from AS3 document formats) wird ein neues FLA-Dokument erstellt, mit dem Inhalt des ursprünglichen Flash-Dokuments.
Das kann ich als neues Dokument speichern.
Daraufhin erscheint im Bedienfeld „Eigenschaften“ (Properties) die Option „HTML5 Canvas-Dokument“.
Analog dazu wurden die Einstellungen für Veröffentlichungen (Publish Settings) in JavaScript oder HTML geändert.
Wie Sie hier sehen, verwendet Flash Professional CC die Open-Source-Bibliothek CreateJS, um HTML5-Canvas-Inhalte zu unterstützen.
Sie können auch die Speicherorte für die Ordner ändern, in denen die exportierten HTML5-Inhalte gespeichert werden.
Mein Spiel ist jetzt also konvertiert.
Wenn ich das Bedienfeld „Aktionen“ (Actions) öffne, fällt auf, dass der komplette ActionScript 3-Code kommentiert wurde.
Als Nächstes muss ich ähnlichen Code in JavaScript schreiben.
Dank der CreateJS-Bibliothek ist das Schreiben von JavaScript genauso einfach wie das Schreiben von AS3.
Ich schreibe jetzt den JavaScript-Code.
Im 60.
Frame werde ich anhand der CreateJS-Syntax jede Zeile übersetzen, z.
B. „this.stop“ für „stop“.
Ich füge einen Ereignis-Listener für das click-Ereignis der Schaltflächen „Play“ und „About“ hinzu: this.playBtn.addEventListener ("click", playClick.bind(this)); Den kopiere ich über die Zwischenablage und ändere den Namen der Instanz in „aboutBtn“ und schreibe „fl_clickToGoToWebPage“.
Nach zwei Minuten ist der Code in allen Frames übersetzt, und das Spiel ist bereit für die Veröffentlichung.
Hierfür wähle ich im Menü „Steuerung“ (Control) die Option „Testen“ (Test).
Da ist es schon.
Mein Spiel wird im Browser innerhalb des HTML5-Canvas ausgeführt.
Alle Mausinteraktionen, die ich programmiert habe, funktionieren einwandfrei.
Sie müssen weder Wochen noch Tage aufwenden, sondern nur Stunden oder sogar nur Minuten, wenn Sie vorhandene Projekte konvertieren.
Sehen wir uns genauer an, was im Hintergrund passiert, wenn Sie ein AS3-Dokument in ein HTML5-Canvas-Dokument umwandeln.
Flash Professional CC erstellt ein neues HTML5-Canvas-Dokument und kopiert dabei alle Ebenen, Symbole und Bibliothekselemente in das neue HTML5-Canvas-Dokument.
Dann wendet das Programm Standardeinstellungen für nicht unterstützte Funktionen, untergeordnete Funktionen und Funktionseigenschaften an.
Für jede Szene werden separate FLA-Dateien erstellt.
Wenn Sie ein HTML5-Canvas-Dokument veröffentlichen, verwendet Flash Professional die Canvas-API und konvertiert Objekte auf der Bühne in die entsprechenden Canvas-Objekte.
Wenn Sie ein AS3-Dokument in ein HTML5-Canvas-Dokument konvertieren, achten Sie auf die Warnungen im Bedienfeld „Ausgabe“ (Output).
Hier sehen Sie, welche Änderungen beim Konvertieren durchgeführt wurden.
Im Verzeichnis mit Ihren Dateien sehen Sie nun die HTML-Datei, die den Canvas enthält.
Außerdem ist hier eine JS-Datei mit dem CreateJS-Code, den Flash Professional CC erstellt hat, sowie den von Ihnen geschriebenen JavaScript-Code.
Im Ordner „images“ sind alle Grafik-Assets für das Spiel.
Eventuell haben Sie in den Veröffentlichungseinstellungen auch einen Sound-Ordner definiert.
HTML5-Canvas-basierte Inhalte lassen sich auch von Grund auf neu erstellen.
Wählen Sie für Ihr neues Projekt „Datei“ (File), „Neu“ (New) und unter „Typ“ (Type) die Option „HTML5 Canvas“.
Beachten Sie, dass manche Flash-Funktionen nicht von HTML5-Canvas-Dokumenten unterstützt werden.
Der Grund dafür ist, dass es nicht für alle Flash-Funktionen eine Entsprechung in der Canvas-API gibt.
Das ist zum Beispiel der Fall, wenn Sie beim Konvertieren Ebenen oder Symbole aus Flash-AS3-Dokumenten in HTML5-Canvas-Dokumente kopieren.
Nicht unterstützte Inhalte werden einfach entfernt oder in unterstützte Standardelemente konvertiert.
Der Arbeitsbereich ändert sich ebenfalls und stellt die Tools bereit, die nur für die entsprechende Ausgabe unterstützt werden.
Wenn Sie zum Beispiel an mehreren Dokumenten arbeiten, von Flash-AS3 zu HTML5-Canvas wechseln und dabei eine nicht unterstützte Funktion ausgewählt ist, weist Flash Professional CC darauf hin, dass die Funktion für den Dokumententyp nicht unterstützt wird.
ActionScript-Komponenten werden entfernt, und der AS3-Code wird auskommentiert.
Alle 3D-Transformationen in einem AS3-Dokument werden entfernt, wenn das Dokument in ein HTML5-Canvas-Dokument umgewandelt wird.
Der Mischmodus für Überlagerungen wird auf „Normal“ gesetzt, da er nicht unterstützt wird.
Gepunktete Linien werden zu durchgehenden Linien, und Videos werden entfernt.
Auch mehrere Szenen werden von HTML5-Canvas-Dokumenten nicht unterstützt.
Und das ist schon alles, was Sie wissen müssen.
Ich hoffe, Sie freuen sich genauso wie ich auf die neuen Funktionen zur Erstellung eindrucksvoller HTML5-Inhalte.
Danke für Ihre Aufmerksamkeit.
