Flash-Ersatz wird kommen

Noch findet sich auf manchen kommerziellen Websites mindestens ein Flash-Movie – und sei es bloss in Form eines meist eher nervenden Werbebanners. Doch Flash gerät zunehmend in Verruf: Erstens glänzt der Flash-Player je nach Plattform nicht gerade durch begeisternde Performance und gilt als ressourcenhungrig, zweitens laufen Flash-Animationen auf dem iPhone und iPad überhaupt nicht. Und drittens gibt es mit HTML5, CSS3 und Java-script Web-Standards, mit denen sich nahezu alle Möglichkeiten von Flash auch ohne den proprietären Player umsetzen lassen. Zumindest in der Theorie und in den modernsten Browserversionen.

Animation ohne Flash

In der Praxis braucht es für gelungene HTML/CSS/Javascript-basierte Animationen und Anwendungen entsprechende Programmierkenntnisse und viel Geduld, zum Beispiel wenn es ums Fine-Tuning komplex zusammenhängender CSS-Selektoren oder ums Java-script-Debugging geht. Designer, die im allgemeinen für Animationen zuständig sind, wollen aber rascher zu einem Resultat kommen und kennen mit Adobes Authoring-Umgebung Flash Professional ein bequemes Werkzeug mit High-Level-Funktionalität. Für das Standard-basierte Animieren gab es bisher keine vergleichbaren Tools.


Dies ändert sich jedoch rasant. In den letzten Monaten sind diverse Animations-Apps auf den Markt gekommen, die Flash-ähnlichen Komfort bieten und HTML-, CSS- und Javascript-Dateien anstelle oder zusätzlich zu Flash-Movies generieren. Alle hier getesteten Produkte kommen zwar funktional nicht an Flash selbst heran, zeigen aber interessante Ansätze und sind für einfachere Animationen durchaus praktisch nutzbar. Pikanterweise erfüllen diese Tools ausgerechnet den Hauptanspruch nicht, den die Hersteller gross herausstreichen: Keiner der Testkandidaten generiert wirklich HTML5-Code und nutzt zum Beispiel für die Anzeige der Animationen das Canvas-Element. Auch das HTML5-History-API, mit dem die korrekte Nutzung des Back-Buttons im Browser erreichbar wäre, kommt nicht zum Zug. Die erstellten Animationen stehen auch nicht für sich als komplette Webanwendungen da, sondern werden je nach Produkt entweder als DIV- oder Iframe-Element in die Zielseite eingebettet; die eigentliche Animation übernimmt dann der generierte CSS- und Javascript-Code oder, bei den Aquafadas-Produkten, je nach Plattform ein SFW-Movie.

Edge (Preview)

Auch Flash-Hersteller Adobe springt mit diesem Produkt, das im Moment erst in einer frühen Vorabversion erhältlich ist, auf den HTML5-Zug auf. Die in den Adobe Labs bereitstehende Beta bietet mit einer stark an Flash angelehnten Oberfläche ausschliesslich Animationsfeatures; interaktive Anwendungen sind bisher nicht möglich. Die Palette an Zeichentools ist derzeit noch dürftig: Sie beschränkt sich auf Rechtecke, die im Properties-Panel mit abgerundeten Ecken ausgestattet werden können. Andere Grafiken werden in den Formaten SVG, JPG, PNG oder GIF auf der Arbeitsfläche positioniert und mit Keyframes auf der Timeline animiert. Auch alle Attribute können mit Keyframes animiert werden. Das hauseigene PSD-Format kann Edge im Gegensatz zu Flash allerdings nicht öffnen – man kann also nicht mehrere Ebenen auf einmal importieren und separat für die Animation nutzen. Für die Javascript-unterstützten Animationen nutzt Edge die beliebte jQuery-Bibliothek. Insgesamt macht die Software einen vielversprechenden Eindruck – man darf gespannt sein, welche Funktionen Adobe im Lauf der Zeit noch zusätzlich einbaut.

Bannerzest Pro

Ein völlig anderes Konzept verfolgt das Banner-Erstellungstool des französischen Herstellers Aquafadas: Bisher ein reiner Flash-Generator, gibt Bannerzest Pro in der aktuellen Version 3 optional auch HTML/CSS/Javascript-Animationen aus. Bannerzest ermöglicht keine freie Gestaltung der Animationen; das Werkzeug ist für das rasche und unkomplizierte Erstellen animierter Banner und Slideshows gedacht. Der Anwender wählt die gewünschte Darstellung aus einer Reihe von Vorlagen und fügt eigene Bilder und Texte hinzu. Die Bibliothek bietet verschiedene Slideshow-Varianten mit Spezialeffekten, Coverflow-ähnliche Darstellungen und animierte Menüs. Für die Flash- und HTML-Ausgabe gibt es zum Teil unterschiedliche Templates.

Motion Composer

Auch das zweite Aquafadas-Produkt unterscheidet sich von den Timeline-orientierten Tools Edge und Hype: Hier arbeitet man mit einer Folge von «Slides», die jeweils weiter in «States» unterteilt werden können. Die Slides entsprechen in etwa den Scenes von Hype, die States den Keyframes. Eine Timeline, auf der klar visualisiert ist, welche Attribute wann animiert werden, fehlt bei Motion Composer. Wie Edge offeriert auch dieses Tool an Grafikelementen bloss Rechtecke – es wäre wirklich wünschenswert, dass auch Ellipsen, gleichseitige und frei definierbare Polygone sowie zum Beispiel Pfeile und Sterne direkt im Programm zur Verfügung stehen, so dass man solche Elemente nicht extern erstellen müsste und vor allem attributweise animieren könnte. Dazu müsste die Software aber Canvas-Elemente, also echtes HTML5 generieren, und genau dies tut auch Motion Composer nicht.

Hype

Hype wird von einem Team aus ehemaligen Apple-Angestellten entwickelt und gilt als erstes Tool seiner Art. Funktional gleicht es mit Timeline und Keyframes Adobe Edge. Hype bietet jedoch die Möglichkeit, interaktive Präsentationen mit verschiedenen «Scenes» zu erstellen, zwischen denen per Mausklick oder über andere Events wie Bedienung der Pfeiltasten oder Mausberührung gewechselt wird. Dabei können Übergangseffekte angezeigt werden; die Effektpalette ist im Vergleich zu gängigen Videoschnittprogrammen allerdings recht spärlich bestückt. Innerhalb einer Scene können mehrere Timelines angelegt werden; damit sind auch komplexere interaktive Anwendungen möglich.

CSS3Machine

Diese iPad-App ist eigentlich ein «CSS-Editor der Zukunft», wie ein Anwenderkommentar lautet. Mit der CSS3Machine lassen sich CSS-Eigenschaften der Elemente eines HTML-Dokuments wie Box Shadow und Gradients interaktiv austesten und zum Schluss als CSS-Stylesheet ausgeben und auf den PC oder Mac übertragen. Mit der App erstellt man auf die gleiche interaktive Weise auch reine CSS-Animationen für Webkit-Browser. Ein vollumfängliches Animationstool ist die CSS3Machine zwar nicht, die App erlaubt aber einen spielerischen Einblick in die alleraktuellsten CSS-Features. (ubi)