Modul 8.3 Multimediakurs: Animationen: Daumenkino (animierte GIFs etc.)

Hinweis: dieser Teilmodul wird ab Februar 2002 weiter ausgebaut. Sie sollten aber bereits mit den nachfolgenden Erläuterungen im Stande sein, das Nachfolgende anzuwenden

Automatischer Seitenrefresh mit html-Befehlen.

Schon ein paar Mal innerhalb dieses Kurses sind wir mit der Refresh-Option in Berührung gekommen, ohne sie näher zu erläutern. Dies soll hier geschehen, da wir damit auch kleine Animationen, insbesondere Diashows ablaufen lassen können.

Der normale Refresh-Code sieht folgendermaßen aus.

<meta http-equiv="refresh" content="10;URL=neueSeite.html">

Als Meta-Tag muss er im Kopfteil einer html-Seite stehen. Obiges Beispiel würde bewirken, dass 10 Sekunden nach Aufruf der Seite automatisch eine neue Seite aufgerufen wird (mit dem Dateinamen neueSeite.html; hier kann auch ein kompletter URL-Pfad stehen). Dieser Tag ist für Umleitungen interessant: wenn Ihre Seite umgezogen ist, können Sie mit der Angabe ..content="0;URL=neu.html"> fast ohne Zeitverzögerung umleiten.

Sie können damit aber auch eine selbstablaufende Bilderschau generieren.

Problem: Es dauert allerdings immer eine gewisse Zeit, bis die neue Seite und das darin eingebettete Bild geladen ist. Wenn Sie den content-Wert zu kurz einstellen, wird bereits weitergeblättert, bevor die Seite ganz geladen ist. Ich empfehle, relativ lange content-Inhalte einzustellen (mind 8 Sek, abhängig von der Bildgröße, eher mehr) und zusätzlich einen Link zum Weiterblättern anzubieten. Dann kann sich der Benutzer zurücklehnen und die selbstablaufende Show betrachten, oder klicken und selbständig weiterblättern.

Sehen Sie hierzu Beispiel 1

Tipp: es gibt etliche Möglichkeiten, aus Bildprogrammen oder mit shareware-Tools automatisch html-Bildershows zu generieren. Obiges Beispiel wurde mit der Shareware-Bilddatenbank IView Multimedia (für Mac) erstellt. Bilder, die in die Bilddatenbank via Drag and Drop in beliebigem Pixelformat gezogen werden, können dort automatisch als jpg-Bilder mitsamt zugehörigen html-Dokumenten als Diashow exportiert werden. Sogar Erläuterungen, die ggf. in die Bilddatenbank mit eingetragen waren, können als Tabelleninhalte mit exportiert werden. Die Diashow ist zwar nicht selbstablaufend, aber durch Einfügen der entsprechenden refresh-Metatags haben Sie binnen weniger Minuten eine recht passable html-Diashow samt Steuerungsmöglichkeiten zusammen, die Sie nach Bedarf mit einem html-Editor noch weiter verschönern können.

Zusatzfenster bitte wieder schließen.

Animierte GIFs

Das GIF-Pixelbildformat hat die Option, mehrere gleichgroße Bilder samt Austauschanweisungen in einer gif-Datei zu speichern, was eine kleine Animation ergibt. Sobald das Bild komplett geladen ist, läuft die Animation ab. Sie können auch einstellen, ob die Animation dauerhaft, mehrmals oder nur einmal ablaufen soll.

Zur Erstellung animierter Gifs gibt es wiederum eine Fülle von Shareware-Programmen, die aber oft nicht allzu komfortabel sind (Tipp: suchen Sie bei www.imagespro.com. Auch professionelle klassische Bild- und Zeichenprogramme wie CorelDraw, Illustrator oder Photoshop ermöglichen mit ihren neueren Version zunehmend einfacher, animierte GIFs zu erstellen. Daneben gibt es spezielle, allerdings meist nicht gerade billige Animationssoftware.

Wir zeigen die Erstellung animierter Gifs wieder mit Hilfe von Photoshop 6.x und dem beigefügten Image-Ready. Sie können in Photoshop Ihre Bildsequenz auf einzelnen Ebenen anlegen, diese per Mausklick nach ImageReady exportieren und dort zu einem GIF umwandeln. Sie können aber einfachere Animationen auch direkt in ImageReady erstellen.

Beispiel 2: nebenstehend ein ganz simples Beispiel mit Image-Ready, bei dem nur ein Bild gezeichnet wurde, welches dann mit verschiedenen sog. Ebenenstilen verändert wurde.

Kurzerklärung (vgl. rote Zahlen in untenstehender Abbildung):

Dies war ein sehr einfaches Animationsbeispiel, welches keine "echten" Ebenen verwendet hat.

Beispiel 3: Springender Delphin.

Die Delphinabbildung wurde in Photoshop geladen, als Ebene eine Kopie angelegt, das Element dort etwas verschoben und gedreht, dann die nächste Ebenenkopie angelegt, wiederum gedreht und verschoben usw.. Als ich das Beispiel erstellt habe, musste ich dann jede Ebene kopieren und als extra Gif-Bild abspeichern und dann mit einer Shareware zu einem animierten Gif zusammensetzen (dauerte ganz schön lange). Heute lädt man die Datei mit Ebenen einfach nach ImageReady um, und kann dort direkt als animiertes Gif abspeichern.

Hier ist das Beispiel:

(Beispiel erstellt von R. Leinfelder, aus www.riffe.de)

Unten sehen Sie, wie die zugehörige Animationspalette in ImageReady aussieht. Als letzten Frame habe ich ein weißes Bild verwendet, welches drei Sekunden stehen bleibt, bevor die Animation wieder beginnt.

Natürlich können Sie auch "sinnvollere", d.h. inhaltsorientierte animierte GIFs erstellen. Bedenken Sie aber bei der Erstellung von GIFs folgendes:

Jeder Frame innerhalb des anim.GIFs erfordert vollen Speicherplatz. Das Delphinbildchen oben ist 23 kb dick, das kleine Hallo immerhin schon 18 kb (als fortgeschrittene Technik kann man mit transparenten GIfs arbeiten, wobei jeweils nur die sich ändernden Bildteile im Frame sind. Damit kann man GIFs noch kleiner halten).
Sie können nur Gif-Bilder verwenden können. Für Fotos ist diese Art von Animation nicht unbedingt geeignet, da nicht nur die Fotoqualität als GIF schlecht ist, sondern auch die Dateigrößen deutlich höher sind. Wenn Sie aber nur zwei Frames haben, z.B. ein Foto und eine darüberliegende, transparente Beschriftung, die immer wieder verschwindet (oder verschiedene an unterschiedlichen Stellen) ist dies mit animGifs noch gut machbar (Beispiel folgt demnächst)
Die Dateien laufen selbständig los und können bei eingestellten Dauerloops auch nicht angehalten werden. Verwenden Sie deshalb in der Regel nur ein Gif-Bild pro Seite, da es ansonsten zu sehr zappelt.

Tipp: wenn Sie ein Animiertes Gif erst auf Abruf abspielen wollen, können Sie einen kleinen iFrame einbauen, in dem beim Laden der Seite nur ein leeres html-Dokument geladen wird. Auf Mausklick rufen Sie dann darin eine Seite mit animiertem Gif auf. Oder noch eindrucksvoller: Im iFrame erscheint ein "Standbild", d.h. eine nicht animierte Version Ihres Bildes. Auf Mausklick wird dann ein html-Dokument mit dem an identischer Stelle platziertem animGif geladen. Schon geht es los. Einen vergleichbaren Effekt könnten Sie theoretisch mit einem Rolloverbild erzielen. Auf Mouseover wird das statische Bild durch das animierte Gif ersetzt. Haken an der Sache: das animierte Gif ist bereits vorgeladen und läuft im Hintergrund. Sie wissen also nicht, an welcher Stelle das Gif dann einsetzt. Geht also nur in manchen Fällen.
Teilweise laufen die Gifs bereits los, bevor sie voll geladen sind. Das kann dann beim ersten Durchgang ziemlich ruckeln. Bei "dickeren" Gifs empfiehlt es sich deshalb, als ersten Frame ein leeres Bild (z.B. nur weiß oder transparent) zu haben, welcher einige Sekunden stehen bleibt). Dann läuft das Gif nicht ruckelig los. Bei obiger Delphinanimation hätte deshalb der letzte Frame besser der erste sein sollen.
Verwenden Sie für längere Animationen lieber kleine Videoclips, die sind steuerbar und laufen gleichmäßiger. Wenn Sie aber nur relativ wenige Frames verwenden, sind animierte Gifs unschlagbar, da sie (heutzutage) relativ rasch erstellt sind und ohne Zusatzerweiterungen von allen Browsern abgespielt werden.

Dass auch komplex animierte Gifs heute ohne allzu großen Aufwand erstellbar sind, soll nachfolgendes Beispiel zeigen. Berühren Sie einfach den Schriftzug und die Animation startet.

Die Animation wurde mit dem Programm Create aus dem StoneStudio erstellt (nur für MacOS X, eine voll funktionsfähige, jedoch zeitlimitierte Trial-Version kann vom Netz geladen werden). Der Schriftzug wurde an einer geschwungenen Zeichenlinie mit der Option SuperText angebunden (die Linie auf 100% transparent gestellt); mit der Option Rosette wurde dann der geschwungene Schriftzug vervielfältigt, mit der Option Animation animiert und als animiertes Gif exportiert. In ImageReady habe ich noch verkleinert, eine Frame-Standdauer verändert und zwei weitere, automatisch generierte Übergangsframes eingefügt. Natürlich hätte ich noch viel mehr aus dem Vollen schöpfen können, aber dann werden die Dateigrößen eben ziemlich umfassend, ein Nachteil animierter Gifs. Die aus wenigen Graustufen bestehende Animation umfasst 19 Frames. Das Bild ist übrigens als sogenanntes Rolloverbild eingebunden. Wenn Sie klicken wird kurz ein drittes Bild angezeigt. Wenn Sie die Maustaste gedrückt halten, bleibt das Bild stehen. Näheres hierzu haben Sie ja gerade im vorhergehenden Teilmodul erfahren.

Weitere Möglichkeiten:

Bilderaustausch mit JavaScript

Diese Möglichkeit wurde in Modul 7 beschrieben. Das dort vorgestellte Beispiel finden Sie hier.

Vorteile gegenüber anim-Gifs:

Sie können die Animation benutzerdefiniert aufrufen lassen, von ihm steuern lassen oder animiert ablaufen lassen.
Sie können sowohl gifs als auch jpg-Bilder verwenden. Damit eignet sich dies auch besonders für Fotos.
Sie brauchen kein Programm, welches animierte GIFs zusammenstellen kann.

Nachteile

Verwendung von Floating Boxes und dhtml

Mit dhtml können Sie die Sichtbarkeit von Floating Boxes an- und abschalten, dies kann auch zeitgesteuert geschehen. Ein entsprechendes Beispiel finden Sie in Modul 6.2 (hier können Sie das Beispiel aufrufen, hier die Erläuterung).

Vorteile und Nachteile ähnlich oben. Innerhalb der Boxen kann neben Bildern auch anderer Inhalt, wie Erläuterungen, VideoClips etc. stehen. Außerdem können die Boxen auch in der Ebene bewegt werden.

Bildershows als Video-Clips

Hierzu finden Sie mehr in Modul 8.4

Verwendung von JavaApplets

Siehe Modul 8.6