Tag: flash

Webentwicklung: Mini-Game als Flash/CSS3-Test

Zur Abwechslung gibt es heute einmal wieder etwas in eigener Sache: Im Rahmen meines Studiums galt es, ein kleines Browser-Spiel sowohl in Flash als auch in HTML/CSS/JavaScript zu entwickeln. Dabei sollte das Spiel dem "Lunar Lander"-Prinzip entsprechen und bestimmte Kriterien erfüllen. Ich wollte die Gelegenheit nutzen, um Unterschiede zwischen der Flash-Umsetzung und einer HTML-Variante aufzeigen zu können. Aus Zeitgründen konnte ich bei der HTML-Version nur auf CSS3 aufbauen, weshalb es kein HTML5-Spiel mit der Verwendung des Canvas-Elements geworden ist. Hier bieten sich durchaus mehr Möglichkeiten, aber prinzipiell ist der Arbeitsablauf bei der CSS3-Variante ähnlich.
Das Mini-Game "Bumble Tumble" (der Name wurde frei gewählt und hat keine Beziehung zu bestehenden Spielen) gibt es hier als Flash-Version und auf dieser Seite in der CSS3-Variante. Die beiden Spiele unterscheiden sich nur von der Art des Leveldesigns: Die Aufgabe, möglichst langsam auf einer Blume zu landen, gilt für beide Anwendungen.

Da die Spiele in erster Linie als Machbarkeitsstudie anzusehen sind, habe ich auf die Implementierung von weiteren Levels, Spielmodi oder einer Highscore-Liste verzichtet. Insgesamt konnte ich alle Mechanismen aus der Flash-Umsetzung in CSS3 anwenden. Hier ein erstes Fazit:

• HTML5 und CSS3 bieten gute Voraussetzungen für 2D- und auch 3D-Spiele
• ein HTML/CSS-Spiel bedeutet nicht automatisch weniger Effekte oder Möglichkeiten
• die Vorteile von ActionScript 3 hinsichtlich Typisierung und OOP machen sich schnell bemerkbar
• JavaScript-Animationen sind aufwendiger in der Erstellung und Wartung (keine direkte Bearbeitung wie in Flash mittels Vektor-Werkzeugen, außer es kommen SVG-Grafiken zum Einsatz)
• derzeit gibt es noch Probleme, wenn HTML5-Audio-Dateien in einer Endlosschleife nahtlos hintereinander abgespielt werden sollen
• HTML/CSS-Spiele können insgesamt größer ausfallen, da auf transparente PNGs keine JPEG-Kompression wie in Flash angewendet werden kann
• ein HTML/CSS-Spiel ist kein Garant für bessere Performance auf mobilen Geräten

Natürlich fehlt derzeit noch eine komplette Entwicklungsumgebung für HTML5/CSS3-Anwendungen, die viele Interaktionen und Animationen benötigen (Adobe Edge ist ausbaufähig), weshalb hier Flash noch Vorteile bietet. Zusammengefasst lässt sich festhalten: Beide Technologien bieten stets Vor- und Nachteile. Auch weniger aufwendige HTML-Anwendungen können Smartphones schon stark beanspruchen, weshalb dieser Aspekt mit Vorsicht anzusehen ist. Flash wird wohl weiterhin eine Daseinsberechtigung haben und Adobe wird zugleich weitere Ressourcen in die Entwicklung von HTML5-Authoring-Tools stecken. Unabhängig von der verwendeten Technologie wird sich ein Punkt nicht ändern — die Kreativität sowie die Programmierung liegen auch zukünftig in den Händen von Designern und Entwicklern und komplexe Animationen oder übertriebene Effekte zeichnen noch kein gutes Produkt aus.

Flint: Kompaktes 2D-/3D-Partikelsystem für Flash

Einfache Partikel-Effekte können für die verschiedenste Szenarien eingesetzt werden: Sei es für grafisch aufwendige Animationen oder Spiele mit entsprechenden Anforderungen. Für beide Bereiche eignet sich Flash als gute Plattform und daher sei an dieser Stelle das Partikelsystem Flint erwähnt, mit dem sich unterschiedliche Visualisierungen umsetzen lassen. Dazu zählen beispielsweise Feuer, Rauch, Schnee, ein Bienenschwarm oder bewegende Objekte aller Art.

Flint gibt es bei GitHub oder auf der Download-Seite und kann als Quellcode-Paket oder SWC-Bibliothek heruntergeladen werden. Es gibt eine einfache Anleitung für Einsteiger, mit der sich Schneefall simulieren lässt. Die verschiedenen Beispiele auf der Seite sind dokumentiert und so liegt der Quellcode für reine AS3-Projekte, Flash oder Flex vor. Zudem hat der Entwickler auch Implementierungen für die 3D-Engines Away 3D und Papervision geschrieben, so dass die Partikel-Engine auch im dreidimensionalen Raum eingesetzt werden kann.

SWF Protector: ActionScript-Code verschlüsseln

Kompilierte Flash-Projekte, die als fertige SWF-Dateien vorliegen, bringen Vor- und Nachteile mit sich. Je nach Ansichtsweise stellt die Charakteristik eines geschlossenen und proprietären Container-Formats einen Vorteil dar, da die darin befindlichen Elemente auf den ersten Blick vor unerwünschtem Zugriff geschützt sind. Zu diesen Elementen zählen Grafiken, Sound- und Video-Dateien und natürlich der eigentliche Quelltext, der in ActionScript vorliegt. Durch die heutigen Möglichkeiten der Dekompilierung lassen sich die Ressourcen einer SWF-Datei relativ einfach wieder extrahieren und auslesen: Bei komplexeren und kostspieligen Projekten ist es nicht unbedingt gewünscht, dass dieser Fall eintritt.
Während sich die Media-Ressourcen von SWF-Dateien nicht vor dem Extrahieren durch spezielle Programme schützen lassen, gibt es zumindest für den Schutz von ActionScript-Code verschiedene Tools, die den Quelltext durch Algorithmen verschlüsseln und unkenntlich machen (Obfuscation). Eine Anwendung dieser Art, die ich nun einmal getestet habe, wäre der SWF Protector von Dcomsoft.

Die Oberfläche der Software ist denkbar einfach zu bedienen und erlaubt es, gleich mehrere SWF-Dateien zu verschlüsseln. Im "Advanced mode" können dann auch selektive Verschlüsselungen vorgenommen werden: Während für ActionScript 1 und 2 die Methoden "Mix script" und "Mask script" zur Verfügung stehen, kann ActionScript 3-Code über Obfuscate-Algorithmen verschlüsselt werden.

Google Swiffy: SWF-Dateien in HTML5 konvertieren

Die Entwicklung von und rund um Adobe Flash durchläuft interessante Prozesse: Während Adobe mit Wallaby ein Tool veröffentlicht hat, mit dem sich FLA-Quelldateien in HTML-Code umwandeln lassen, steuert Google nun mit Swiffy ein Werkzeug zur SWF-zu-HTML5-Konvertierung bei. Der Vorgang der Umwandlung erscheint schon fast etwas unheimlich, denn aus den SWF-Dateien wird ein komplexer JSON-Array erzeugt, der dann von der Swiffy-Bibliothek verarbeitet wird. Die eigentliche Logik wird wieder durch JavaScript repräsentiert. Hinsichtlich der Programmierung wird aktuell eine Schnittmenge von SWF 8 und ActionScript 2 unterstützt. Laut Google erhält man daher mit Flash 5 die besten Resultate. Voraussetzung für die umgewandelten Flash-Projekte ist ein WebKit-Browser (natürlich funktionieren die Swiffy-Demos auch unter Firefox).

Jetzt lässt sich nicht unbedingt jedes Flash-Game direkt in HTML5 umwandeln, aber die Beispiele zeigen schon sehr gut, was mit dem Google-Tool möglich ist. So werden durchaus ActionScript-Blöcke korrekt interpretiert und sollte eine Prozedur nicht konvertiert werden können, schlägt Swiffy Alarm und gibt eine Fehlermeldung aus.
Ein derartiges Projekt existierte bisher nur mit Gordon, einer Bibliothek, die ebenfalls durch SVG Flash-Anwendungen per JavaScript darstellt. Google schreibt in den FAQ von Swiffy übrigens auch, dass man mit Adobe in dieser Richtung weiter zusammenarbeiten möchte. Man darf also gespannt sein.

FluidSolver: Echtzeit-Simulation von Flüssigkeit

Immer wieder beeindruckend finde ich Partikel-Simulationen oder physikalische Effekte, die mit JavaScript oder Flash realisiert werden. Wer sich für dynamische Echtzeit-Simulationen von Flüssigkeiten interessiert, sollte sich FluidSolver ansehen. Die AS3-Klasse von Eugene Zatepyakin stellt eine Portierung der MSAFluid-Bibliothek für Processing dar. Mit ofxMSAFluid steht auch eine Variante für openFrameworks bereit.

Die Partikel bei FluidSolver werden ohne Hilfe von Pixel Bender oder Alchemy dargestellt und können durch verschiedene Parameter in ihrer Darstellung angepasst werden. Die eigentliche Simulation wird durch Mausbewegungen vorangetrieben und erzeugt neben Partikeln auch variierende Farbabstufungen.
Die AS3-Klasse steht bei Google Code zum Download bereit. Auch die openFrameworks-Version "ofxMSAFluid" von Mehmet Akten bietet interessante Resultate.

Weitere interessante Flash-Experimente finden sich im Blog von Eugene.

Flash, JavaScript und HTML5: Gegenwart und Zukunft

Die Diskussion um Flash und dessen Einsatzgebiete dürfte unter Webentwicklern oft ein Streitpunkt darstellen. In der Regel findet der Dialog zwischen Flash-Evangelisten und Web-Standard-Veteranen statt — die Frage nach der Verwendung von Flash wird dementsprechend bewertet. Mit HTML5 werden sich in ferner Zukunft in diesem Bereich sicherlich einige Veränderungen zeigen. Man sollte HTML und Flash jedoch nicht als Konkurrenz, sondern als gegenseitige Ergänzung ansehen. Da ich Web-Projekte sowohl mit HTML/CSS als auch mit Flash realisiere, will ich den aktuellen Stand der Techniken beleuchten.

Zum einen stellen der Open Source-Gedanke und offene Standards wichtige Aspekte dar. Das Flash-Format ist proprietäre Closed Source-Software und wird dadurch als Holperstein im Bezug auf Web-Standards angesehen. Wie offen Flash im Vergleich zu HTML5 ist, wird zum einen in diesem Artikel beschrieben. Über diese Thematik gibt es im Netz mittlerweile etliche Diskussionen und Vorschläge. Zum aktuellen Zeitpunkt besteht die Tatsache, dass sich das Flash-Plugin auf nahezu jedem Computer mit Internetzugang befindet und Microsofts Trident-Engine noch mit über 50% am Browsermarkt vertreten ist. Wie sich diese Zahlen in der kommenden Zeit verändern werden, dürfte durch die Verbreitung von HTML5/CSS3 und modernen Webbrowsern ersichtlich sein.

Flash: Tipps zur Optimierung von ActionScript 3

Zum Freitag gibt es heute einen Link-Tipp für Flash-Entwickler: Kuba Gaj hat auf seinem Blog kürzlich einen sehr schönen Artikel über die Optimierung von AS3-Code veröffentlicht, in dem er generelle Tipps für einen guten Stil gibt. Dazu zählen verschiedene Themen wie Objekte, Arrays, Klassen oder allgemeine Hinweise. Die Anleitung wurde unter dem Aspekt erstellt, die Performance von Flash-Projekten zu verbessern. Flash-Anwendungen können schnell viele Ressourcen verschlingen und durch eine unbedachte Programmierung kann es dazu führen, dass Spiele oder andere Anwendungen auch auf modernen Computersystemen langsam ablaufen.

So sollte stets darauf geachtet werden, dass keine unnötigen "enterFrame"-Events oder Timer laufen. ActionScript 3 ist in vielen Aspekten besser und durchdachter als Version 2. Der Umstieg empfiehlt sich in jeder Hinsicht, auch wenn manche Funktionen mit AS3 etwas mehr Code benötigen als in AS2. Für Umsteiger empfehle ich das ActionScript 3 Migration Cookbook und auch die Coding Conventions von Adobe sind lesenswert.

Flash: Notepad++ als Code-Editor benutzen

Beim Entwickeln von Flash-Anwendungen kann es von Vorteil sein, wenn der favorisierte Code-Editor für ActionScript genutzt werden kann. Der Editor von Adobe Flash Professional bietet seit Version 9 (CS3) nützliche Funktionen wie beispielsweise die "Zusammenfassen"-Funktion — durch einen Klick wird markierter Code in einer Zeile zusammengefasst und kann per "+" wieder ausgeklappt werden. Dadurch behält man auch bei größeren Projekten den Überblick.
Dennoch bietet der eingebaute Editor der Flash-Entwicklungsumgebung nicht alle Funktionalitäten, die ein moderner Code-Editor beinhaltet. Der "SEPY Actionscript Editor" stellt in jedem Fall eine empfehlenswerte Alternative für komplexere Flash-Applikationen dar. Wer die Shortcuts und Funktionalitäten von Notepad++ auch in ActionScript nicht missen möchte, kann den beliebten Editor einfach verwenden. Die Syntax-Hervorhebung für ActionScript ist bereits integriert. Eine wichtige Funktionalität ist allerdings nicht vorhanden: Das Kompilieren des geöffneten Flash-Projekts. Dieser Vorgang wird in der Flash-IDE durch STRG + RETURN durchgeführt ("Film testen"). Mit einem Trick lässt sich auch diese Funktion in Notepad++ nutzen.

Adobe Flash unterstützt JSFL-Skripts (JavaScript Flash), durch die eigene Befehle in der Entwicklungsumgebung ausgeführt werden können. In Flash kann diese Möglichkeit unter Anderem über das Menü "Befehle" verwendet werden. Mehr dazu in den Adobe LiveDocs. Zudem kann der Flash-Umgebung als Parameter ein JSFL-Skript übergeben werden, durch das so auch die "Film testen"-Funktion in Notepad++ eingebaut werden kann.