Tag: flash

201314Mai

Timbre.js: Klangsynthese mit HTML5 im Browser

Das virtuelle Erzeugen von Tönen durch Synthese ist im Web nicht mehr nur durch Flash (z.B. Audiotool) möglich. Auch HTML5 ermöglicht dank der Web Audio API das Generieren von Wellenformen mittels Oszillatoren. Durch die Frequenzen mehrerer Oszillatoren ist also die Frequenzmodulationssynthese möglich, wodurch sich variierende Töne und Melodien erzeugen lassen. Mit der JavaScript-Bibliothek Timbre.js stehen für den Bereich der Audio-Programmierung komfortable Werkzeuge bereit.

Timbre.js - JavaScript Library for Objective Sound Programming

Timbre.js bildet also die Brücke zur Web Audio API und bietet eine einfache Schreibweise an:

  • T("sin", {freq:880, mul:0.5}).play();

Das Framework bietet neben dem Erzeugen von Tönen auch etliche Filter (Chorus, Delay, FFT, Equalizer, Phaser, usw.) an. Weiterhin können Audio-Dateien verarbeitet und sogar in Einzelteile (Beat Slicing) zerlegt werden, um sie dann in einer neuen Reihenfolge zusammenzusetzen. Das Beatbox-Beispiel zeigt dieses Szenario.
Auf der Seite der Vorgängerversion v12 finden sich weitere Beispiele.

UPDATE
Mit dem WebSpeechShim steht übrigens ein Shim für die WebSpeech-API von HTML5 bereit, der inzwischen als GitHub-Repository vorliegt.

201312Mai

Cytoscape.js: Interaktive Graphen mit JavaScript

Dieses Framework ist zwar schon etwas älter, aber es wurde stetig aktualisiert und bietet auch jetzt noch moderne Funktionalitäten: Mit Cytoscape.js lassen sich Graphen aller Art visualisieren und mit Interaktionen versehen. Das JavaScript-Framework ist ein Ableger des Cytoscape Web-Projekts, das auf Flash basiert. Auch hiermit lassen sich vernetzte Strukturen darstellen und in Echtzeit manipulieren.

Cytoscape.js - A JavaScript graph library for analysis and visualisation

Die JavaScript-Version basiert auf einem ereignisgesteuerten Modell mit einer Core-API, die Erweiterungen enthält. Diese wiederum modifizieren die Elemente eines Graphen und senden Änderungen an den Core weiter. Dadurch können auch eigene Plugins und sogar jQuery-Plugins angebunden werden. Auf der Demo-Website findet sich der dazugehörige Beispiel-Code. Der komplette Quelltext steht bei GitHub bereit, wobei noch nicht alle Features der Flash-Version umgesetzt wurden (wie etwa Layouts).

201205Dez

Adobe Gaming SDK: Tools für AS3-Spieleentwicklung

ActionScript 3 (AS3) stellt nach wie vor eine moderne und komfortable Skriptsprache dar, die in Verbindung mit den Möglichkeiten der Flash-Plattform inzwischen zu einem mächtigen Werkzeug geworden ist, wenn es um die Entwicklung von Browser- und Mobile-Games geht. Durch die kürzlich eingeführte Stage 3D-API ist auch Hardwarebeschleunigung möglich, was gerade im nativen 3D-Bereich eine große Bereicherung darstellt.
Adobe hat nun auch ein SDK veröffentlicht, das speziell auf die Entwicklung von Spielen ausgelegt ist: Das Adobe Gaming SDK zielt sowohl auf browserbasierte als auch auf native Games ab, die beispielsweise für iOS, Android, Windows oder Mac OS X entwickelt werden können. Durch die Adobe AIR-Runtime, nativen Extensions (ANE) und dem Flash C++ Compiler werden auch komplexere Anwendungen möglich, wie beispielsweise die Epic Citadel-Demo zeigt.

Adobe Gaming SDK

Ein Überblick der Technologien des SDKs gibt es hier. Das SDK beinhaltet übrigens die Open Source-Frameworks Away 3D, Starling und Feathers, die eine 3D-Engine, eine 2D-Game-Engine und eine UI-Bibliothek repräsentieren. Mit Scout stellt Adobe zudem ein Profiling-Tool für die AIR-Runtime und den Flash Player bereit, mit dem sich Optimierungen ausarbeiten lassen.
Das Gaming SDK kann kostenlos in der Creative Cloud heruntergeladen werden. Allerdings sollten Entwicklerwerkzeuge wie Flash Builder oder Flash Professional vorhanden sein, um die SDK-Dateien verwenden zu können.

201222Jul

Dartflash: Flash-API für Dart-Anwendungen

Sie heißen Easel JS oder FlashJS — JavaScript-APIs, die an ActionScript 3 und das Flash-Konzept von Adobe angelehnt sind und JavaScript-Entwicklern ähnliche Funktionen an die Hand geben möchten, wobei für die Darstellung von Grafiken HTML5 zum Einsatz kommt. Da sich Flash nach wie vor für Browser-Games sehr gut eignet, sind solche Bibliotheken interessant, wenn Spiele mit HTML5 umgesetzt werden sollen.
Ein ähnliches Projekt steht nun mit Dartflash bereit, das auf Googles kommender JavaScript-Alternative Dart basiert und ebenfalls an Flash-Entwickler gerichtet ist.

DartFlash - Escape Game

Das Demo-Game Escape zeigt die Bibliothek im Einsatz und kann mit jedem modernen Browser angesehen werden, wobei Chrome die beste Performance erreicht. Dart kommt mit verschiedenen Konzepten und bietet beispielsweise eine Bühne (Stage) sowie dazugehörige Komponenten wie Shapes oder MovieClips. Auch Tweens können mit Dartflash animiert werden. Auf der Website des Projekts finden sich bereits etliche Demos, die getestet werden können. Die Library befindet sich noch in einem frühen Stadium, zeigt aber schon jetzt interessante Ergebnisse.
Auf GitHub findet sich der Quellcode und mit dem Dart Editor steht eine komfortable Entwicklungsumgebung für Dart-Projekte bereit.

201218Apr

FlashJS: HTML5-Games mit ActionScript-API schreiben

Mit HTML5-Game-Engines wie Impact oder LimeJS stehen Entwicklern von Browser-Games solide Grundgerüste zur Verfügung, die unterschiedliche APIs bieten. Da Flash für viele Spieleentwickler immer noch die primäre Plattform darstellt und dennoch HTML5-Games weiter im Vormarsch sind, könnte eine JavaScript-Bibliothek wie FlashJS interessant sein. Das Framework bietet bekannte ActionScript-Objekte wie MovieClip, DisplayObject, Stage, Loader, KeyboardEvent oder Tween.

FlashJS - opensource HTML5 game engine with API similar to Flash one

Elemente auf einer Bühne können mit Methoden wie "addChild()", "removeChild()", "getChildByName()" oder "getChild()" verwaltet werden. Animationen müssen nach wie vor per Code erzeugt werden. Grafische Werkzeuge wie Edge oder der Sencha Animator bieten sich natürlich an.
Ein Beispiel, das auf FlashJS basiert, stellt das Mini-Game "Smarty the deer" dar, bei dem auch ein CollisionManager zum Einsatz kommt.

201107Aug

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.

Bumble Tumble - Eine Machbarkeitsstudie in Flash und CSS3

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.

201118Jul

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 Particles

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.

201130Jun

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.

SWF Protector

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.

Weiterlesen...
Tags: ,