Wechsel von Flash zu HTML5

Im November 2011 kündigte Adobe an, die Entwicklung seines Flash Players für mobile Geräte nach der Veröffentlichung von Flash Player 11.1 für Android-Geräte und des BlackBerry Playbook einzustellen und sich stattdessen auf Tools zum Erstellen von HTML5-Anwendungen für mobile Geräte zu konzentrieren. Obwohl Adobe die Unterstützung von Flash Player für PC-Browser bekräftigt hat, ist es für viele nur eine Frage der Zeit, bis Adobe auch die Unterstützung für die PC-Version einstellt. Dies ist eine schlechte Nachricht für Unternehmen, die stark in Flash-Anwendungen investiert sind, sowie für Entwickler, die Zeit in den Erwerb der für die Erstellung von Flash-Anwendungen erforderlichen Programmierkenntnisse investiert haben.

Schauen wir uns einige der Unterschiede zwischen Flash und HTML5 an und geben einige Tipps und Tools, die den Übergang zwischen diesen beiden Plattformen erleichtern.

Grundlagen der Flash-Plattform

Flash wird häufig als Überbegriff für eine proprietäre Adobe-Plattform verwendet, die tatsächlich aus den folgenden Komponenten besteht:

• Flash: Ein Tool, das hauptsächlich zum Entwerfen und Erstellen von Animationen verwendet wird
• Flex: Die Entwicklungsumgebung zum Erstellen von Anwendungen, einschließlich eines Software Development Kits (SDK).
• MXML: Markup-Sprache, die in Flash-Projekten verwendet wird
• ActionScript: Eine Skriptsprache

Zum Ausführen einer Flash-Anwendung in einem Webbrowser muss das Flash Player-Plug-In heruntergeladen werden. Alternativ kann eine Flash-Anwendung für die Ausführung in der Adobe AIR-Desktop-Laufzeitumgebung kompiliert werden. Auch hier muss Adobe AIR auf dem Computer des Benutzers installiert sein, damit eine AIR-Anwendung ausgeführt werden kann.

Flash verwendet die folgenden Hauptdateiformate:

• .fla: Flash-Projektdatei
• .flv: Flash-Videodatei
• .swf: Kompilierte Flash / Flex-Anwendungsdatei, die möglicherweise .flv-Dateien enthält

HTML5 Platform Basics

HTML5 ist eine offene Standardplattform, die Folgendes umfasst:

• HTML5: Auszeichnungssprache zum Erstellen von Webseiten
• Cascading Style Sheets 3 (CSS3): Stylesheet-Sprache, mit der die Formatierung für Objekte auf einer HTML5-Webseite festgelegt wird
• Application Programming Interfaces (API): APIs zur Unterstützung von Funktionen wie Drag & Drop und dokumentübergreifendem Messaging
• JavaScript: Skriptsprache, die mit HTML5 zum Aktivieren der Animation verwendet wird

Einer der Vorteile von HTML5 ist, dass es nativ auf Webbrowsern ausgeführt wird und kein Plug-In benötigt. Ein Browser muss jedoch HTML5- und CSS3-Funktionen für eine HTML5-Webseite unterstützen, damit er ordnungsgemäß ausgeführt werden kann. Die wichtigsten Browser unterstützen HTML5 und CSS3 auf unterschiedlichen Ebenen, und die Implementierung ist nicht vollständig. JavaScript wird von Browsern fast überall unterstützt. Benutzer haben jedoch die Möglichkeit, JavaScript zu deaktivieren. In diesem Fall werden clientseitige Skripts, die mit JavaScript erstellt wurden, nicht ausgeführt.

HTML5-Dateiformate umfassen Folgendes:

• .htm / .html: HTML5-Seitendatei
• .css: CSS3-Stylesheet-Datei

Ab 2011 werden in der aktuellen HTML5-Spezifikation keine unterstützten Videodateiformate angegeben, sodass es den einzelnen Browsern überlassen bleibt, welche Formate unterstützt werden. Zu den derzeit unterstützten Formaten gehören:

• .mp4: MPEG 4-Videodatei mit H.264-Videocodec und AAC-Audiocodec
• .webm: WebM-Videodatei mit VP8-Videocodec und Vorbis-Audiocodec
• .ogg: Ogg-Videodatei mit Theora-Videocodec und Vorbis-Audiocodec

Konvertieren von Flash-Projekten in HTML5

Das manuelle Konvertieren eines komplexen Flash-Projekts in HTML5 ist aufgrund der Plattformunterschiede arbeitsintensiv und zeitaufwändig. Der Entwickler muss mit Flash und ActionScript erstellte Animationen in HTML5 und JavaScript konvertieren. Glücklicherweise gibt es einige Tools, mit denen die Konvertierung von Flash nach HTML5 automatisiert werden kann.

Adobe hat Wallaby veröffentlicht, ein experimentelles Tool, das kostenlos von der Adobe Labs-Website heruntergeladen werden kann. Wallaby verwendet eine Flash-Projektdatei (.fla) als Eingabe, exportiert HTML5 und unterstützt CSS- und JavaScript-Dateien. Die Wallaby-Versionshinweise enthalten jedoch eine relativ lange Liste von Funktionen, die nicht konvertiert werden. Die wichtigsten sind ActionScript, Filme und Sound. Wallaby ist ein eingeschränktes Tool, das hauptsächlich zum Konvertieren von animiertem grafischem Inhalt in HTML5 entwickelt wurde, sodass es mithilfe eines Webseiten-Design-Tools in Webseiten integriert werden kann.

Google Labs hat Swiffy veröffentlicht, ein kostenloses webbasiertes Tool, das eine kompilierte Flash-Anwendungsdatei (.swf) in HTML5 konvertiert. Die Ausgabe kann dann in eine Webseite eingebettet werden, ist jedoch für einen Entwickler nicht einfach zu bearbeiten. Wie Wallaby konvertiert Swiffy nicht alle Flash-Funktionen. Swiffy unterstützt die ActionScript-Konvertierung, jedoch nur Version 2.0 (ActionScript ist derzeit in Version 3.0). Die Swiffy-Ausgabe kann nur in Browsern ausgeführt werden, die Scalable Vector Graphics (SVG) unterstützen.

Edge, ein neues Entwicklungswerkzeug für HTML5

Da HTML5 zur Plattform der Wahl wird, entstehen neue Tools für Design- und Entwicklungsumgebungen, die HTML5, CSS3 und JavaScript integrieren.

Im August 2011 veröffentlichte Adobe eine Vorschau-Version des Edge-Entwicklungstools. Mit Edge kann ein Designer HTML5-Animationen erstellen und vorhandenen HTML5-Projekten Animationen hinzufügen. Flash-Designer erkennen einige vertraute Elemente in der Edge-Benutzeroberfläche, darunter die Bühne, das Eigenschaftenfenster und die Animationszeitleiste. Edge generiert jedoch CSS- und JavaScript-Dateien, und sein Animationsinhalt wird in einer JSON-Datenstruktur (JavaScript Object Notation) gespeichert.

Zum Zeitpunkt des Schreibens dieses Artikels hat Edge die vierte Vorschau-Version erwartet. Zu jeder Version werden neue Funktionen hinzugefügt.

YouTube nach HTML5 konvertieren

Ein Zeichen für die Umstellung auf HTML5 ist, dass YouTube jetzt die Möglichkeit bietet, einen HTML5-Videoplayer zum Anzeigen von Videos zu verwenden.

Vor dem Anbieten der HTML5-Option wurden alle YouTube-Videos über einen Flash-Videoplayer geliefert. Benutzer konnten Videodateien in fast jedem Format hochladen und YouTube konvertierte dann jedes Video in das erforderliche Flash-Format (.flv).

YouTube kodiert nun auch Videos mit dem H.264-Videocodec und dem WebM-Format für die HTML5-Bereitstellung. Um Videos im HTML5-Format anzuzeigen, benötigen Sie einen Browser, der das HTML5-Videotag unterstützt, sowie ein von YouTube verwendetes Videoformat.

Das Vermächtnis von Flash

Wie bereits erwähnt, arbeitet Adobe derzeit an der Weiterentwicklung der PC-Version von Flash Player. Auch wenn Adobe in Zukunft Flash Player nicht mehr unterstützt, werden ältere Flash-Anwendungen weiterhin im Web unterstützt - wahrscheinlich für Jahre. Flash wird also nicht so schnell ganz verschwinden. Es stehen Tools zum Konvertieren von Flash-Anwendungen in HTML5-Anwendungen zur Verfügung. Derzeit unterstützen diese Tools jedoch nicht die Konvertierung aller Flash-Funktionen. Mit der Dominanz des HTML5-Standards werden wahrscheinlich die Flash-Dateikonvertierungstools komplexer und neue Tools für die Entwicklung von Inhalten mit der HTML5-Plattform erstellt.