Bewegte Bilder

Schlaue Web-Enwickler schätzen die verborgenen Talente des Grafikformats GIF:
Es gestattet Animationen und frei schwebende Bilder auf einfachen HTML-Seiten.

 
Animierte GIFs werden wie ganz normale GIFs vom WebBrowser auf einen Rutsch in den Cache geladen. Im Lauf des Bildwechsels bei der Animation holt sich der Browser die benötigten Bilder dann lokal aus seinem Cache. Das heißt: Ist eine entsprechende Web-Seite erst einmal geladen, dann laufen die Animationen auch, wenn die Verbindung zum Server inzwischen unterbrochen sein sollte. Die Bezeichnung des Formats weist übrigens auf sein Entstehungsjahr 1989 hin. Es hat also schon ein paar Jahre auf dem Buckel. Der Boom im Web belebte das Interesse an diesem GIF-Format wieder.

 
Wie verleihe ich meiner Homepage das richtige Etwas?

Bunt und bewegt muß das Web sein, darüber sind sich Software-Firmen und Werbeagenturen einig - Motto: Nur was sich dreht, ist richtig schön.

Dementsprechend wurden im vergangenen Jahr HTML-Erweiterungen auf den Markt geschmissen, die auf dieser Linie liegen. Macromedias Shockwave als Plug-in für den Netscape Navigator beispielsweise soll die Fähigkeiten des multimedialen Autorensystems Director ins Internet beamen. Auch die Programmiersprache Java wird momentan überwiegend für derlei Zwecke eingesetzt. Der Nachteil der multimedialen Web-Misere für Netsurfer: lange Download-Zeiten und der Trend zur gehobenen Telefonrechnung.

Doch niemand muß auf ein Gestaltungselement wie Animation verzichten, auch wenn er keinen Abschluß in Informatik, keine Java-Programmierbücher gelesen und keinen Shockwave-Workshop absolviert hat. Um einfache Trickfilmchen in die eigene Web-Seite einzubauen, benötigt man nur eins: GIF-Bilder im Format GIF89a. Der Clou: GIF89a kann bewegte Bilder aufnehmen. Ein solches Bild speichert nicht nur ein einzelnes Bild, sondern es enthält mehrere Bilder, die ein entsprechendes Programm wie ein Daumenkino in schneller Folge nacheinander zeigt, so daß der Eindruck einer Animation entsteht. Das Programm, mit dem man ein solches GIF-Bild betrachtet, muß selbstverständlich auch über eine entsprechende Anzeigefunktion verfügen, sonst wird nur das erste Bild der ganzen Bewegtbildsequenz gezeigt.

 
Aber wie erzeugt man eine GIF-Animation?

Nicht anders, wie es auch die Profis in den Disney-Studios tun: in der Regel Bild für Bild in Handarbeit. Wer beispielsweise das verbreitete Shareware-Programm Paint Shop Pro (siehe CHIP 3/1996, Seite 46) oder ein anderes Grafikprogramm besitzt, das GIF-Bilder lädt und speichert, kann es ja mal ausprobieren. Stellen Sie als Übung doch mal eine kleine Scheibe her, die in verschiedenfarbige Viertel geteilt ist. Dazu genügt eine Fläche von 20 x 20 Pixel, auf der man einen Kreis aufzieht.

Teilen Sie den Kreis in Viertel ein und füllen Sie jeweils zwei gegenüberliegende Viertel mit je einer Farbe, zum Beispiel zwei Viertel mit Rot und zwei Viertel mit Grün. Speichern Sie das Bild unter der Bezeichnung Kreis1.gif. Kippen Sie das Bild um 90 Grad und speichern Sie es erneut unter Kreis2.gif. Damit ist die Zeichenarbeit beendet. Jetzt kommt der Trick: Sie benötigen ein Programm, das die beiden Bilder zu einer Animation zusammenfügt. Da bietet sich für Windows das GIF Construction Set von Alchemy Mindworks an; es ist für Windows 95/NT verfügbar. Der eingebaute Animation Wizard führt den Anwender sicher zum fertigen Trickfilm. Wie das geht, lesen Sie im Kasten "So arbeitet das GIF Construction Set.

Beim Benennen der einzelnen Bilder empfiehlt sich, ein Buchstabenkürzel zusammen mit einer Nummer zu verwenden, zum Beispiel Kreis01.gif, Kreis02.gif und so weiter. Das GIF Construction Set fügt die Bilder dann anhand der Nummern in der entsprechenden Reihenfolge zusammen. Außerdem behält man so am besten den Überblick.

 
Dazu noch zwei Tips:

Bevor man sich eine frisch erzeugte Animation mit der View-Funktion des Programms ansieht, sollte man die neu berechnete Bildsequenz unter einem eigenen Namen speichern, zum Beispiel Kreis.gif. Es kann nämlich manchmal vorkommen, daß ein Bild beim Testen "einfriert”. Dann ist es leider nicht mehr zu retten, und die Animation muß noch einmal erzeugt werden. Achten Sie außerdem darauf, daß die Einzelbilder auch die gleiche Pixelgröße haben.

Hat alles geklappt, müssen Sie das GIF-Bild noch mit Hilfe des HTML-Tags <img scr=...> in Ihre Web-Seite einbauen. Beim gerade verwendeten Beispiel müßte der vollständige Tag also lauten: <img src=”Kreis.gif”>. Lädt der Web-Browser nun das GIF-Bild, fängt er automatisch mit dem Abspielen der Animation an. Je nach den Einstellungen, die man im GIF Construction Set beim Erzeugen des Filmchens angegeben hat, zeigt der Browser die Sequenz dann einmal oder beginnt ständig wieder von vorn. Beim Netscape Navigator beispielsweise beendet ein Druck auf die ESC-Taste den ganzen Zauber.

Die wenigsten Anwender kennen eine andere Fähigkeit des GIF89a-Formats: Es hat unsichtbare Farben. Wie bitte? Unsichtbare Farben? Doch, ganz im Ernst. Mit Grafikprogrammen, wie zum Beispiel Paint Shop Pro, LView (siehe CHIP 12/95, Seite 102) oder GIFWeb, läßt sich eine beliebige Farbe auswählen, die später bei der Darstellung einfach ausgespart und nicht angezeigt wird. An ihrer Stelle setzt der Web-Browser dann einfach die Hintergrundfarbe der Seite ein.

 
Dies ist für Web-Designer beim Gestalten einer Homepage ein enormer Vorteil:

Man muß nicht mehr in viereckigen Bildern denken, wenigstens nicht bei der Optik der Seite. Vielen Web-Designern scheint dieses Merkmal des GIF-Formats nicht bekannt zu sein - sie versuchen, die Hintergrundfarbe eines GIF-Bildes an die Hintergrundfarbe der Web-Seite anzupassen. Bei weißem oder schwarzem Hintergrund geht diese Rechnung auch auf. Manchmal passen aber die beiden Farbtöne später auf der Web-Seite nicht hundertprozentig zusammen. In diesem Fall bemerkt der Netsurfer mit scharfem Auge, daß zum Beispiel Kater Garfield gar nicht freigestellt auf der Seite schwebt, sondern auf einem viereckigen Feld sitzt, dessen Farbe sich zwar nur minimal von der Hintergrundfarbe der Web-Seite unterscheidet - aber eben doch unterscheidet.

[ back to top ]