Web-Animation

Flash ist YouTube. Flash sind spannend gemachte Kino-Trailer und Flash treibt 90 Prozent der kleinen Onlinespiele an, die wir zum Zeitvertreib nutzen. Flash bringt Bewegung in die einzelne Webseite und ist bis heute das beste Format, wenn es darum geht, Musik oder das gesprochene Wort nahtlos in eine Seite zu integrieren. Flash kann Spaß machen, solange die Technik sinnvoll eingesetzt wird.

Die Idee des sinnvollen Einsatzes ist der Schlüssel zu hoher Nutzerakzeptanz von Web-Multimedia. Jakob Nielsen bringt es auf die einfache Formel: Mache alles, was Du mit Standard-Techniken wie HTML, den Bildformaten GIF und JPEG sowie etwas JavaScript machen kannst nicht mit Flash. Setze Flash nur dann ein, wenn es nicht anders geht.

Mit anderen Worten: Flash und jede Form der Web-Animation ist ein Add-on. Ein nutzbares Zusatzelement, das fraglos interessante Möglichkeiten bietet. Doch die Hoheit über den Download einer Flash-Datei muss beim Benutzer bleiben. Er hat die Wahl, ob er das vollanimierte Portfolio einer State-of-the-Art-Onlineagentur sehen möchte, oder ob er nur deren Telefonnummer von einem HTML-Dokument abliest.

Flash ist nicht immer Flash

Stellt man 100 Webdesignern die Frage, wie sie Animationen ins Netz stellen würden, dann antworten 99, dass sie dafür Flash einsetzen. Die von Macromedia entwickelte Technik ist der Defacto-Standard im Netz. Was die Designer meinen, ist der Flash-Player. Und tatsächlich zeigt der Erfolg von YouTube, dass die Fähigkeiten und die große Verbreitung des Flash-Players praktisch jeden Einsatzbereich für bewegte Bilder im Netz abdecken. Vom Roll-over-Effekt auf einem Button bis zum kompletten Musikvideo.

Andere Plug-in-Techniken kommen kaum mehr zum Einsatz. Java-basierte Animationen sind ebenso vom Markt verschwunden wie 3D-Plug-ins. Auch das ambitioniert gestartete Projekt MNG - die animierte Version von PNG - musste mangels Browser-Unterstützung die Segel streichen. Derzeit versucht Microsoft mit Silverlight ein neues Plug-in auf den Weg zu bringen. Doch bislang zeigt die Technik nichts, was der FlashPlayer nicht auch könnte.

Bleibt noch das animierte GIF. Das hat überlebt und findet überall dort seine Berechtigung, wo es um kleine Animationen geht, die auf Pixelbildern basieren und ohne Ton und Interaktivität auskommen. Zum Beispiel bei der Erklärung der Funktionen eines Produkts oder bei den so beliebten Werbebannern. Der Grund ist einfach: Jeder Browser kann animierte GIFs anzeigen und kaum ein Pop-up-Blocker kümmert sich darum, dieses Format an der Ausführung zu hindern.

Während also der Flash-Player das Web beherrscht, gilt das keineswegs genauso für die Flash-Applikation. Flash ist auch in der aktuellen Version CS3 eine furchtbar offene Arbeitsumgebung. Flash hat kaum Fähigkeiten, die es dem Designer einfach machen, eine ganz bestimmte Form der Animation zu realisieren. Flash kann schlecht zeichnen, Flash kann Videos nicht gut schneiden, Flash kann schon gar kein 3D und nicht mal für Texteffekte oder Diashows mit Standbildern verfügt Flash über ausgefuchste Templates oder Effektfilter. Alles muss man von Hand machen und das ist sehr mühsam. Und nicht zuletzt ist Flash CS3 ziemlich teuer.

Kehren wir also zurück zur vielversprechenden Überschrift dieses Artikels. Der Flash-Player - das Exportformat SWF - bleibt erste Wahl. Aber für sehr viele Einsatzbereiche der Web-Animation gibt es bessere Werkzeuge.

Die Disziplin Fotoanimation

Einer der wichtigsten Bereiche der Web-Animation ist die aufeinander folgende Darstellung von Standbildern. Dies sind in der Regel Pixelbilder, da den Browsern selbst die Möglichkeit fehlt, Vektorgrafiken darzustellen. Adobe hat die Arbeiten am SVG-Viewer eingestellt. Derzeit verarbeiten die Browser SVG auch vollkommen unterschiedlich.

Fotoanimationen kommen in unterschiedlichsten Formen im Netz vor. Da wäre zunächst die klassische Diashow. Hierzu kann man auch die meisten Formen der Werbebanner zählen. Das Prinzip: Ein Bild wird durch ein weiteres aus der sichtbaren Darstellungsfläche im Browser verdrängt.

Die wichtige Anforderung an Diashows ist vor allem die Möglichkeit, interessante Übergangseffekte zwischen Bildern zu erzeugen. Hier kommen die klassischen Video-Effekte in Betracht, also die weiche Blende, der Wipe, das pixelweise Auflösen (Dissolve) oder Varianten mit Maskierung. Außerdem sollte ein Diashow-Werkzeug Texte anzeigen können, die mit den Bildern synchronisiert werden und noch eine Tonspur für die musikalische Untermalung oder den Kommentar besitzen. Es gibt eine Reihe von sehr guten Diashow-Generatoren im Markt.

Der Digital Foto Maker von Magix besitzt beispielsweise ein paar vorgefertigte Musikteppiche zur Untermalung. Auch der GIF-Animator von Ulead macht schicke Diashows. Trotz seines Namens kann er diese auch in Echtfarben realisieren und damit nicht nur animierte GIFs exportieren. Für den kostenlosen Erstversuch könnte auch Googles Picassa eine Lösung sein. Bei manchen Werkzeugen muss man allerdings etwas genauer hinsehen, ob sie den eigenen Leistungsanforderungen genügen.

So erzeugt DiaShow XP von Aquasoft zwar sehr hochwertige Ergebnisse im Video, nutzt aber für den Web-Export Java-Technik. Das ist nicht jedermanns Sache. Weitere wichtige Kriterien, auf die Sie bei der Auswahl achten sollten, sind die Möglichkeit der Speicherung in einem umfassenden Projektformat, die Verfügbarkeit von Vorladern, um Wartezeiten zu überbrücken und vielleicht sogar die Fähigkeit mit variablen Bildgrößen zu arbeiten und diese dynamisch zu erkennen.

Achten Sie außerdem auf die Download- Größe der fertigen Dateien und benutzen Sie die kostenlosen Trail-Versionen, um das zu testen. Für eine weiche Blende benötigt der Flash-Player nur zwei Bilder und etwas ActionScript-Code. Schlechte Werkzeuge rechnen die Übergangsbilder auch als Einzelbilder aus. Das Stichwort heißt hier Alphakanal- Unterstützung.

Übrigens: Auch Besitzer von Flash, die sich die Arbeit nicht machen wollen, haben gute Karten. Es gibt jede Menge von Anbietern fertiger Flash-Komponenten, bei denen der geneigte Nutzer nur noch ein paar Parameter einstellen muss, um schöne Diashows zu erzeugen. Eine ist SlideShowPro und eine ganze Liste schöner Komponenten gibt es bei Ohmyflash.

Eine Spezialdisziplin der Bildanimation ist der Zoom, etwa bei Produktabbildungen oder Karten.

Um Ladezeiten zu sparen, sollte der Designer schlecht aufgelöste Bilder für die Übersicht und hochauflösende für die Nahaufnahme benutzen und diese verbinden. Ein schönes Freeware-Tool dafür ist Zoomify. Photoshopper aufgepasst: Zoomify gehört seit Version CS2 zum Lieferumfang. Die Puristen unter den Webdesignern bevorzugen geskriptete Animationen, die einen vorher erzeugten Stapel an GIFs, JPEGs oder PNG-Dateien in fest definierter Form abarbeiten.

Sound-Untermalung fehlt diesen Lösungen ebenso wie dem GIF-Format, doch kann eine derartige Lösung bestens geeignet sein, das Portfolio eines Fotografen durchzublättern. Kleine Interaktionen, wie das Weiterschalten zum nächsten Bild oder das Vergrößern per Mausklick gehören dazu.

Die Disziplin Panorama

Panoramen im Netz haben zwei Erscheinungsformen. Nach außen aufgenommen dreht sich die Kamera im Kreis und zeigt die Umgebung. Klassischerweise im Einsatz auf Hotel-Websites um deren Räumlichkeiten zu zeigen. Aber umgekehrt geht das natürlich auch. Das gefilmte Objekt steht auf einem Drehteller und wird einmal um die eigene Achse rotiert. Eine Pseudo-3D-Ansicht also, die vor allem bei Produktabbildungen zum Einsatz kommen kann. Langjähriger Marktführer war in dieser Disziplin Apple mit seinem Format QuicktimeVR. Inzwischen ist das Format praktisch verschwunden.

Eine weitere gängige Lösung fußt auf Java. Hier gibt es jede Menge kostenloser Player im Netz, deren sich der geneigte Website-Betreiber bedienen kann. Er muss nur das passende Bild in den gleichen Ordner legen und im Script-Aufruf referenzieren.

Freilich liegt hier das Hauptaugenmerk auf dem Ausgangsmaterial. Ein gutes Panorama-Werkzeug ist in der Lage "Stitching" durchzuführen. Es kann also zwei Motive, die einen Überlappungsbereich haben, so zusammenfügen, dass sich der Bildinhalt nicht wiederholt und auch keine sichtbaren "Nähte" übrig bleiben. Die großen Bildbearbeitungs-Tools wie Photoshop, PhotoImpact und PaintShop-Pro können das alle in unterschiedlichen Qualitätsabstufungen. Spezialwerkzeuge für diese Disziplin gibt es zuhauf, von kostenlos bis sehr teuer.

Tatsächlich zeigt sich im Netz allerdings derzeit eine Häufung einer ganz anderen Lösung, die leichter zu produzieren ist. Man nutzt keine Einzelbilder, sondern effektiv ein Rundum-Video der entsprechenden Szene. Somit entfällt das Stitching. Die Rechts- und Linksbewegung wird durch einfaches Vor- und Zurückspulen des Films gelöst. Natürlich sind die Freiheitsgrade geringer als bei einer echten VR-Lösung, doch für die meisten inhaltlichen Anwendungsfälle genügt das. Als Exportoption bietet sich hier tatsächlich das Flash-Video-Format FLV an.

Wer nicht die Möglichkeit besitzt, eine eigene Player-Konsole dafür zu entwickeln, findet im Netz massenweise kostenlose FLV-Player, die die URL der Video-Datei aus einem kleinen Script in der Seite lesen. Auch Widget-Lösungen gibt es beispielsweise bei Yourminis.com zu bewundern. Meistens ist allerdings die Steuerkonsole im Filmfenster platziert, was für Panoramen nicht funktioniert.