Flash CS6: Flashprojekt als HTML exportieren

Seit einigen Tagen gibt es die neue Version Flash CS6. Adobe selbst hebt dieses Mal recht wenige Neuerung hervor, u.a.:

• HTML-Export (CreateJS-Framework)
• Stage 3D-API und Starling-Framework 2D-Inhalte
• AIR-Anwendungen inklusive der Runtime (Captive Runtime)
• Simulation von AIR-Apps auf mobilen Endgeräten

Spannend ist auf jeden Fall der HTML-Export von Flashprojekten, da damit zum ersten Mal ein gängiges Designer-Tool einen einfachen Weg bietet, bereits erlerntes Animations-Know-How für HTML-Animationen einzusetzen. Dies zielt natürlich in erster Linie darauf ab, das zurzeit bestehende Problem „iPhone/iPad kann kein Flash” zu lösen. Zudem bietet es den Vorteil, dass weiterhin auch der Flash Player adressiert werden kann (z.B. für alte Desktop-Browser ohne HTML5) — die Animation liegt ja als Flashprojekt vor und kann zusätzlich auch ganz normal als .swf exportiert werden.

Kurvorstellung des Flash2HTML-Exports

Adobe beschreibt die Funktionalität so:

Eine neue Erweiterung vereinfacht die Entwicklung interaktiver Inhalte für HTML-Seiten. Mit den vertrauten Werkzeugen von Flash Professional CS6 erstellen Sie Animationen und Zeichnungen. Anschließend exportieren Sie die zugehörigen JavaScript-Dateien für das Open-Source-Framework CreateJS.

CreateJS-Erweiterung für HTML-Export aus Flash installieren

Der HTML-Export aus Flash basiert auf dem Open-Source-Framework CreateJS aus dem Hause Grant Skinner, das aus vier Teilen besteht:

• EaselJS (Display List, Mausinteraktion und Filter für das HTML-Element Canvas)
• TweenJS (Tween Library)
• SoundJS (Sound)
• PreloadJS (Library zum Laden von Assets)

Wer direkt loslegen möchte, sucht die Funktion jedoch zunächst vergebens. Sie muss zunächst heruntergeladen und installiert werden. Danach findet man sie unter „Fenster > Andere Bedienfelder > Toolkit for CreateJS”. Eine lokalisierte deutsche Version davon scheint es noch nicht zu geben.

Flash-/JavaScript-Workflow

Die Idee der HTML-Erweiterung von Flash ist nicht, komplette bereits bestehende Projekte einfach zu exportieren. Stattdessen soll es dazu dienen, den HTML-Workflow bei neuen Projekte zu bieten, die die entsprechenden Einschränkungen dieser Lösung berücksichtigen.

So werden z.B. keine Motion Tweens, sondern nur die klassischen Tweens unterstützt. Außerdem gilt z.B.: „[…] a layer with a motion tween can only contain a single symbol instance for it’s full duration.”. In solch einem Fall, wenn etwas nicht unterstützt wird, erscheint ein Hinweis im Ausgabe-Fenster.

Generell wird empfohlen, hauptsächlich den Animation-Teil in Flash zu erstellen, die Interaktion jedoch direkt in JavaScript zu schreiben. JavaScript-Code kann nachträglich im Export ergänzt werden, da dieser dafür ausgelegt ist, weiter zu bearbeitet werden (sprechende Bezeichner, etc.).

[ad]

Hier ein HTML-Beispiel aus dem Tutorial von Adobe.

Fazit

Auf jeden Fall ein richtiger Schritt, Flash in Richtung eines HTML-Tools zu entwickeln. Allerdings verwundert es mich, dass die Funktionalität in Form einer Erweiterung daherkommt. Dies erweckt den Eindruck, dass es sich eher um eine angeflanschte Funktionalität als um einen echten Vorschritt von Flash handelt. Allerdings passt dies (leider) dazu, dass mit Adobe Edge parallel eine neue Lösung ins Rennen geworfen wird.

Nichtsdestotrotz bin ich gespannt, was alles damit machbar ist. Projekte von Grant Skinner sind ja eigentlich immer ein Garant für gute Qualität. Die Praxis wird es zeigen. Ein großer Bedarf für solche Workflows besteht meines Erachtens. Besonders hilfreich dürfte die Tatsache sein, dass sowohl Flash („alte Welt”) als auch HTML („neue Welt”) ohne doppelten Aufwand geschaffen werden kann.

Was meint ihr dazu? Einfach einen Kommentar hinterlassen.

Link: Flash CS6 Download (Trial / 30-Tage-Testversion)
Link: Getting started with the Flash Professional Toolkit for CreateJS