4/4 Animationen

Animationen
Teil 4/4.1 Seite 1
Animierte GIFs
4/4
Animationen
Animationen sind sozusagen das Salz in der Suppe jedes
Web-Bereichs. Gezielt eingesetzte und gut platzierte Animationen bereichern das Erscheinungsbild der Web-Seite und
könnten auch bei der Visualisierung komplexer Sachverhalte
recht hilfreich sein.
4/4.1
Animierte GIFs
Mit Hilfe der animierten GIFs lässt sich das Erscheinungsbild
jeder Web-Seite interessanter gestalten. Bei diesem GIF-Typ
wird eine Reihe von Einzelbildern hintereinander geschaltet,
die nacheinander abgespielt werden. Das wichtigste Einsatzgebiet der animierten GIFs sind Werbebanner. Gerade weil es
sich bei diesem Grafiktyp um eine Zusammenfassung mehrerer Bilder handelt, sollte immer die Dateigröße im Auge behalten werden: Die schönste Animation macht wenig Freude,
wenn die Ladezeiten zu lang sind.
Für den Aufbau einer Animationssequenz benötigen Sie als
Erstes eine Reihe von Grafiken und Bildern, die Sie in Reihe
schalten möchten. Zur Wahrung der Übersicht sollten Sie den
Dateien einen entsprechenden Dateinamen geben (z.B.
pic_01.gif, pic_02.gif etc.). Achten Sie darauf, dass alle Bilder, die in die Sequenz aufgenommen werden, die gleiche
Größe (in Pixel) haben und dieselbe Farbtiefe besitzen, andernfalls kann es sogar zu Abstürzen von Browsern kommen.
Auswahl der Bilder
für eine Animation
Für animierte Grafiken gibt es eine Reihe von Anwendungsmöglichkeiten: von einfachen Blickfängern, die die Aufmerksamkeit des Besuchers auf bestimmte Teile einer Seite lenken
sollen und Buttons, die beim Anklicken und/oder Berühren
mit dem Mauszeiger blinken oder sich bewegen, reicht das
Spektrum der Anwendung animierter GIFs bis zu bewegten
Funktionsschemata, die komplizierte Kinematiken erklären.
Anwendungen
Teil 4/4.1 Seite 2
Animationen
Animierte GIFs
Etwa die Bewegungen eines galoppierenden Pferdes oder die
der Heusinger-Steuerung einer Dampflokomotive. Ein besonderes Anwendungsfeld stellen die animierten Werbebanner
dar, die man überall im Web sieht: Hier muss möglichst viel
Interessantes eingebaut werden, ohne dass das Banner so
groß wird, dass sich der Besucher weiterklickt, bevor es fertig
geladen ist: eine Kunst und eine Wissenschaft für sich also,
die Herstellung dieser Kleinkunstwerke des Webs.
Einzelbild und Zusammenstellung
Grundelement:
Das Einzelbild
Im Prinzip geht man bei der Herstellung von animierten GIFs
immer von Einzelbildern aus, die die einzelnen Phasen des
Bewegungsablaufes darstellen, den die fertige Animation zeigen soll. Im einfachsten – aber arbeitsintensivsten – Fall werden, wie bei einem Zeichentrickfilm, die Einzelbilder jeweils
für sich gezeichnet und dann mit einem speziellen GIF-Animationsprogramm zusammengefügt.
Zusammenfügen
Diese Arbeit kann z.B. auch ein ganz einfaches Programm erledigen, das per Kommandozeile aufgerufen wird. Unter Linux gibt es z.B. ein solches Programm mit dem Namen „gifmerge“. Komfortabler sind jedoch GIF-Animationsprogramme mit grafischer Benutzeroberfläche, die die Einzelbilder wie auf einem Filmstreifen darstellen und es gestatten,
jeweils ein einzelnes Bild auszuwählen und zu bearbeiten.
Solche Programme bieten oft noch Arbeitserleichterungen,
indem sie es ermöglichen, Zwischenschritte zwischen zwei
Bewegungsphasen automatisch zu generieren oder Laufschriften automatisch zu erzeugen.
Einzelbilder
erstellen
Egal wie komfortabel oder unkomfortabel das Programm ist,
indem man die Einzelbilder zusammenfügt, wird man generell damit beginnen, die Einzelbilder zu gestalten, wenn man
eine Animation baut – so wie ein Zeichentrickfilm eben gemacht wird. Die schönen alten Walt-Disney-Zeichentrickfilme wurden noch gemacht, indem Bild für Bild gezeichnet
und abfotografiert wurde. Die einzige Erleichterung war, dass
man Bildteile, die sich nicht bewegten, nur einmal machte
und die Bewegungsphasen auf Transparentpapier zeichnete,
das über den statischen Hintergrund gelegt wurde.
Animationen
Teil 4/4.1 Seite 3
Animierte GIFs
Modernere Zeichentrickfilme wenden bereits Methoden an,
wie sie uns bei der Erstellung von animierten GIFs ebenfalls
zur Verfügung stehen: Mit den Kopier- und Einfügefunktionen moderner Grafikprogramme und der automatischen Berechnung von Zwischenschritten spart man sich viel Arbeit.
Es gab bei TopWare ein preiswertes Animationsprogramm
namens „Take One“, dessen eingebautes Malprogramm das
Transparentpapier der alten Zeichentrickleute simuliert. Zusammen mit Kopier- und Einfügefunktion lassen sich damit
recht schnell interessante Animationen erzeugen. Leider fehlt
diesem Programm die Möglichkeit, die Arbeit außer im eigenen Format, als Standalone-Animation und als Bildschirmschoner auch als animiertes GIF zu speichern. Wer Take One
besitzt, kann sich jedoch helfen, indem er die Einzelbilder als
GIFs abspeichert und mit einem gesonderten GIF-Animator
wieder zusammenfügt.
Grafikprogramm
Wer gut mit der Hand zeichnen kann und die Mühe nicht
scheut, kann sich Animationen auf altbewährte Weise mit
Transparentpapier und Buntstiften herstellen. Allerdings
muss man beim Scannen der einzelnen Vorlagen sehr auf exakte Ausrichtung achten und überdies die Lage der einzelnen
Bilder zu den Rändern der Bildfläche im Grafikprogramm
überprüfen und gegebenenfalls nachbessern – z.B. indem
man jede Phase in eine eigene Ebene eines PaintShop-ProBildes legt.
Alte und
neue Methode
Das Zusammenfügen der Bilder zu einer Animation kann mit
einer ganzen Reihe von Programmen geschehen. Wer PaintShop Pro ab Version 5 verwendet, ist bereits vollständig ausgerüstet, denn diesem Paket liegt ein Programm namens AnimationShop bei, das recht gute Möglichkeiten zum Erstellen
von GIF-Animationen bietet. Für die anderen haben wir GIF
Construction Set Professional von Alchemy Mindworks Inc.
auf die Service-CD gepackt, das aber auch für die Anwender
von AnimationShop einen Blick wert sein dürfte. Es handelt
sich bei dem Programm um Shareware, die die paar Dollar
für die Lizenzierung allemal wert ist. Für die Linux-Anwender legen wir „gifmerge“ bei, ein GIF-Animationsprogramm,
das per Kommandozeile bedient werden kann.
Software
Teil 4/4.1 Seite 4
Animationen
Animierte GIFs
Abbildung 4/4.1-1: Durch Abschneiden von überflüssigen Teilen lassen sich aus einfachen Grafiken leicht
Bewegungsphasen gewinnen
Theorie und Praxis der GIF-Animation
Herstellung der
Einzelbilder
Am Anfang einer Animation steht also immer das Einzelbild.
Bei einfachen Animationen lassen sich die Phasenbilder oft
durch geschicktes Ausschneiden und Kopieren aus einem
einzigen Bild erzeugen. Als Beispiel wollen wir uns einen
einfachen animierten Pfeil ansehen. Der Pfeil soll sich von
links nach rechts auf- und genauso wieder abbauen. Dafür
zeichnen wir den Pfeil in einem Grafikprogramm einmal und
kopieren ihn immer wieder, für jede Bewegungsphase einmal.
In jeder der Bewegungsphasen schneiden wir ganz einfach
das ab, was wir nicht brauchen, so wie in Abbildung 4/4.1-1
zu sehen ist – das Ergebnis sehen Sie, wenn Sie sich die Datei pfeil.gif auf Ihrer Service-CD ansehen.
Beliebtes Motiv:
Der tropfende
Wasserhahn
Ein etwas aufwendigeres Beispiel stellt der tropfende Wasserhahn dar, den sie in Form der Datei tropf.gif ebenfalls auf
Ihrer Service-CD finden. Aber auch hier wurde weidlich von
den Möglichkeiten moderner Grafikprogramme, in diesem
Fall von PaintShop Pro, Gebrauch gemacht.
Animationen
Teil 4/4.1 Seite 5
Animierte GIFs
Der Wasserhahn und der Tropfen mussten nur einmal gezeichnet werden, das Entstehen und Lösen des Tropfens am
Hahn wurde erzeugt, indem Teile des Tropfens kopiert und
zum Teil auch gedreht und/oder verzerrt wurden. Der fallende
Tropfen musste dann von Bild zu Bild nur noch verschoben
werden und das Zerplatzen des Tropfens entstand wiederum
durch Abschneiden sowie Hinzufügen und Verschieben der
Spritzer. Während der Herstellung befanden sich Hahn und
Tropfen jeweils auf einer eigenen Ebene, sodass der Hahn
überhaupt nicht verändert werden musste.
Bei der Herstellung der Einzelbilder für eine Animation werden Sie im Allgemeinen zunächst im True-Color-Modus arbeiten, weil die meisten Filterfunktionen der Grafikprogramme nur so funktionieren: Glätten, Antialiasing, Schärfen und
so weiter – und diese auch in einem dafür geeigneten Format
abspeichern, gegebenenfalls kann dies auch das proprietäre
Format Ihres Grafikprogrammes sein, wenn Sie etwa mit verschiedenen Ebenen und/oder sonstigen speziellen Features
Ihrer Software arbeiten.
Zunächst im
True-Color-Modus
Die fertige Animation enthält aber – als GIF – nur 256 verschiedene Farben. Irgendwann im Laufe des Weges von der
einzelnen Grafik zur fertigen Animation muss daher die
Farbtiefe reduziert werden. Animation Shop und GIF Construction Set Professional lesen verschiedene Grafikformate
und reduzieren die Farbtiefe. Wenn schnell einmal eine Animation zusammengenagelt werden soll, ist dies ein nützliches
Feature; wenn Sie jedoch eine Animation für eine sorgfältig
designte Web-Site bauen, sollten Sie sich die Mühe machen
und den zusätzlichen Plattenplatz aufwenden, die Farbtiefe
bereits mit Ihrem Grafikprogramm zu reduzieren und die
Einzelbilder gesondert als GIFs abspeichern, vielleicht in einem gesonderten Verzeichnis mit „Rohstoffen“ und „Produkten“ Ihres GIF-Animationsprogrammes. So haben Sie
mehr Kontrolle über den Reduktionsprozess bzw. können einfach eine Palette verwenden, die Sie auch für den Rest Ihrer
Web-Site verwenden, z.B. die des Netscape-Farbwürfels.
Allerdings kann es hier gewisse Probleme geben: Der Animation Wizard von GIF Construction Set vermindert auch
256 Farben offenbar noch eigenmächtig, auch wenn man ihn
anweist, die Palette des ersten Bildes zu verwenden.
Reduktion
der Farbtiefe
Teil 4/4.1 Seite 6
Animationen
Animierte GIFs
Problem Speicherplatz
Wichtig:
Kleine Dateien
Ein sehr wichtiger Aspekt im Web-Design ist die Dateigröße
oder, wie man auch sagt, das Gewicht, der Elemente, die man
dem Besucher einer Web-Site zeigen möchte: Die schönste
Komposition nützt nichts, wenn der Besucher sich genervt
weiterklickt, bevor das edle Kunstwerk überhaupt geladen ist.
Außer der eigentlichen Kompression spielen dabei im Bereich der Grafik auch Vorüberlegungen eine wichtige Rolle,
die zu Elementen führen, die sich gut komprimieren lassen.
Vervielfachter
Speicherbedarf
Animationen bestehen definitionsgemäß aus einer Anzahl
von Einzelbildern, was bedingt, dass im Verhältnis zur Größe
des Bildes mehr Speicherplatz benötigt wird als bei einer statischen Grafik. In erster Näherung wird eine Animation mit x
Einzelbildern oder „Frames“, wie der Fachausdruck lautet, x
mal so viel Speicherplatz benötigen wie ein stehendes Bild
der gleichen Größe. „In erster Näherung“ deswegen, weil es
hier auch Methoden gibt, die verhindern, dass Speicherplatz
verschwendet wird: Man kann nämlich leere Bereiche eines
Frames mit den entsprechenden Bereichen des vorhergehenden Bildes auffüllen lassen. Die leeren Bereiche sind dann
transparent, damit einfarbig und lassen sich mit der Lauflängencodierung des GIF-Verfahrens sehr schön komprimieren.
Ein weiterer Punkt ist die Anzahl der Farben, über die man
die Dateigröße genauso reduzieren kann wie bei stehenden
GIFs.
Die Dateigröße hängt also nicht nur von den Abmessungen
des Bildes, der Farbtiefe und der Anzahl der Phasen ab, die
dargestellt werden sollen, sondern vom Motiv selbst bzw. der
Art und Weise, wie wir dieses darstellen. Ein Problem stellen
dabei vor allem transparente GIFs dar - aus welchem Grund,
werden wir gleich sehen.
Zusammenfügen zur Animation
Einzelbilder
liegen bei
Damit Sie ohne vorher lange zu zeichnen nachher gleich loslegen können, wenn wir an die Besprechung praktischer Beispiele kommen, haben wir Ihnen die „Einzelteile“ der beiden
animierten GIFs mit auf die Service-CD gepackt.
Animationen
Teil 4/4.1 Seite 7
Animierte GIFs
Um die Einzelbilder mit den Phasen unseres dynamischen
Motivs zu einem animierten GIF zusammenzufügen, benötigen wir ein spezielles Programm. Die Spannweite der verfügbaren Software reicht von kommandozeilenorientierten
Tools bis zu Windows-Anwendungen mit Zusatzfunktionen,
die die Einzelbilder für bestimmte dynamische Effekte wie
Laufschriften und dergleichen aus einer Vorlage automatisch
erstellen können.
Software
Ein wichtiger Aspekt beim Zusammenfügen einer GIF-Animation ist die bereits kurz angerissene Dateigröße. Im ungünstigsten Fall müssen alle Bewegungsphasen als komplette
Bilder abgespeichert werden: Um eine Animation zu erreichen, die nicht ruckelt, müssen wir 25 oder mindestens 20
Bilder pro Sekunde zeigen – ausgenommen z.B. Blinklichter,
bei denen sich zwei Bilder mit der Blinkfrequenz abwechseln. Eine Sekunde Animation bedeutet dabei die zwanzigbis fünfundzwanzigfache Größe eine Einzelbildes – wenn
nicht große Teile des Bildes statisch sind und nur einmal abgespeichert werden müssen. Dummerweise werden in den
meisten Fällen Bilder, auf denen sich viel ändert, auch stark
gegliedert sein und kaum größere einfarbige Flächen enthalten. Es geht also die Notwendigkeit, jedes Bild in voller Größe abzuspeichern, sehr oft mit Einzelbildern einher, die im
GIF-Verfahren nicht stark komprimiert werden können.
Warum animierte
GIFs groß werden...
Es gibt hier nun mehrere Ansätze, kleine – oder wenigstens
weniger große – animierte GIFs zu erhalten. Der erste Punkt
ist, die Farbtiefe auf das wirklich Erforderliche zu beschränken, ein Grundsatz, den wir von statischen GIFs her bereits
kennen, genauso wie den zweiten, das Bemühen um möglichst große, zusammenhängende einfarbige Flächen.
Lösungsansätze
Die nächste Möglichkeit lässt sich nicht auf alle GIFs anwenden: Im Gegensatz zum Zeichentrickfilm, der immer mit
der gleichen Geschwindigkeit abläuft, kann beim animierten
GIF für jedes Einzelbild (Frame) eingestellt werden, wie lange es zu sehen sein soll. Damit brauchen wir für Anschnitte,
in denen nichts passiert, immer nur ein Bild, das dann entsprechend lange gezeigt wird – so gesehen ist das animierte
GIF gewissermaßen eine Mischung aus Film und Diashow.
Statische Phasen
Teil 4/4.1 Seite 8
Animationen
Animierte GIFs
Abbildung 4/4.1-2: Bei der Supercompression von GIF
Construction Set werden die gleich bleibenden Bildteile
ab dem zweiten Frame durch transparente, hier von
GIF Construction Set schwarz dargestellte Pixel ersetzt
Der Hattrick: Nur
abbilden, was sich
wirklich ändert
Der Hattrick basiert auf der gleichen Überlegung wie das
Transparentpapier der alten Trickfilmleute: Wir stellen in jeder neuen Phase nur das neu dar, was sich wirklich ändert.
Allerdings gibt es hier eine Einschränkung: Wir können nur
die wiederholte Darstellung von Dingen vermeiden, die über
den gesamten Ablauf der Animation unverändert bleiben. Da
wir jedoch in einem animierten GIF sowieso keinen abendfüllenden Spielfilm auf unserer Web-Site vorführen können,
ist diese Einschränkung nicht so schlimm.
Um den Preis
der Transparenz
Eine andere Einschränkung, die uns die Supercompression,
wie dieses Verfahren bei GIF Construction Set heißt, auferlegt, trifft uns härter: Leider kostet uns diese Technik die
Möglichkeit, transparente GIFs zu animieren.
Animationen
Teil 4/4.1 Seite 9
Animierte GIFs
Bei der Kompression eines GIFs nach dieser Methode werden nämlich alle Bereiche, die sich nicht ändern, ab dem
zweiten Bild durch transparente Pixel ersetzt (siehe Abbildung 4/4.1-2). Dadurch entstehen große einfarbige Bereiche,
die eben per GIF-Verfahren stark komprimiert werden können. Da aber die Transparenz nun innerhalb des GIFs benötigt wird, um den „internen Hintergrund“ durchscheinen zu
lassen, steht sie nicht mehr zur Verfügung, um dahinter liegende Elemente der Web-Page durchscheinen zu lassen.
Wenn Sie sich die verschiedenen Versionen unseres tropfenden Wasserhahns auf der Service-CD ansehen, werden Sie
daher feststellen, dass sich die Version ohne Transparenz erheblich stärker hat komprimieren lassen.
Der Aufbau eines animierten GIFs
Bevor wir im nächsten Abschnitt an die praktische Arbeit gehen, wollen wir noch kurz sehen, wie ein animiertes GIF aufgebaut ist. Jedes GIF besteht aus einigen der Blocks, die im
Folgenden beschrieben sind.
Blocks
Am Anfang des Files steht der so genannte Header, ein Datenblock, der allgemeine Informationen über das ganze File
enthält und immer als erster Block in der Datei erscheint. Er
enthält die Information darüber, wie breit und wie hoch das
Bild sein soll und die Palette, die für alle Bilder in der Datei
gilt.
Header
Wenn ein Loop-Block vorhanden ist, gibt er an, wie oft die
Animation wiederholt werden soll: Es kann eine begrenzte
Anzahl von Wiederholungen festgelegt oder eingestellt werden, dass die Animation ständig laufen soll. Es kann nur einen Loop-Block geben und der muss direkt nach dem Header
stehen.
Loop-Block
Die einzelnen Bilder der Animation befinden sich in den
Image-Blocks. Außerdem ist darin festgehalten, in welcher
Lage zur linken oberen Ecke der Bildfläche die enthaltene
Information dargestellt werden soll.
Image-Block
Teil 4/4.1 Seite 10
Animationen
Animierte GIFs
Control-Block
Vor den Image Blocks liegt je ein Control-Block, dem das
jeweilige Anzeigeprogramm, z.B. der Browser, Informationen darüber entnehmen kann, wie lange er das Bild anzeigen
soll, welche Bereiche transparent dargestellt werden und auf
welche Weise das Bild durch das nächste ersetzt werden soll.
Comment-Block
In diesen Blocks kann man Text verstecken, der Informationen über das File enthält, wie z.B. Informationen über das
Bild und das Urheberrecht daran. Diese Informationen können mit Programmen zur Bearbeitung animierter GIFs sichtbar gemacht werden.
Programme für
GIF-Animationen
Nachfolgend finden Sie eine kurze Auswahl verschiedener
Programme, die sich für den Aufbau animierter GIF-Dateien
eignen.
Programm
Info/Download-Adresse
Anmerkung
GIF
Construction
Set
(20 US$)
http://www.mindworkshop.com/ Der Klassiker schlechthin. Das
alchemy/
wohl bekannteste Programm für
den Aufbau von GIF-Animationen.
Ulead GIF
Animator
(39,95 US$)
http://www.ulead.com/
webutilities/ga/
Ein sehr leistungsfähiges Programm, das vor allem durch Bedienung und Ausstattung glänzt.
Web Wizard
(29,90 DM)
http://www.raytracing.de/
webwizard
Programmpaket zur Erstellung
dreidimensionaler Animationen
nach dem Raytracing-Verfahren
GIF
Animator
(149 US$)
http://www.microsoft.com/
Praktisches, kostenloses Programm von Microsoft; inzwischen
ein Bestandteil von Frontpage
VideoCraft
GIF
Animator
http://www.andatech.com/
vidcraft/index.html
Schwerpunkt dieses Programms
ist die Umwandlung von Videos
in GIF-Animationen.
WWW-GifAnimator
(kostenlos)
http://stud1.tuwien.ac.at/
~e8925005/
Umfangreiches, kostenloses
Tool mit vielen Beispielanimationen
Tabelle 4/4.1-1: Programme für animierte GIFs unter Windows 95/NT
Animationen
Teil 4/4.1 Seite 11
Animierte GIFs
Viele Bildbearbeitungsprogramme enthalten mittlerweile Zusatzprogramme für die Erstellung animierter GIF-Grafiken.
Die deutschsprachige Sammelstelle für alle Informationen
und Links rund um das Thema animierte GIF-Grafiken ist
das Projekt „Zampano GIF-Animationen im WWW“
(http://www.zampano.com/gifanim). Dort finden Sie eine
umfangreiche Galerie animierter GIF-Grafiken und neueste
Infos zu Software und Werkzeugen.
Teil 4/4.1 Seite 12
Animierte GIFs
Animationen
Animationen
Teil 4/4.2 Seite 1
Ulead Gif Animator V3.0
4/4.2
Ulead Gif Animator V3.0
Autor: Helmut Schopf
Immer mehr Webseiten werden mit Animationen ausgestattet. Mit dem Ulead Gif Animator können Sie einfach und
schnell selbst Animationen erstellen.
Animationen sind im Grunde genommen digitale Daumenkinos. Wenn Sie selbst Animationen aufbauen, wählen Sie das
Bildmaterial sorgfältig aus und optimieren Sie es für die
Webseiten. Das bedeutet, die Auflösung auf 72 Pixel/Zoll herabsetzen. Überflüssige Farben vermeiden und die Bildgröße
sofort sinnvoll begrenzen. Der Gif Animator verarbeitet letztendlich jedes Bild für die Animationen. Aber kurze Ladezeiten sind oberstes Gebot.
Einführung
Abbildung 4/4.2-1: Neben Bildern können im Gif Animator auch Videobilder eingesetzt werden
Begrenzt bietet der Gif Animator auch Bildbearbeitungsfunktionen an. Ist ein Bild zu groß, können Sie es noch zuschneiden und die Größe anpassen. Sie bestimmen, ob Sie
diese Größenangaben nur auf ein Bild beziehen oder alle Bilder die Größe haben müssen.
Funktionen
Teil 4/4.2 Seite 2
Animationen
Ulead Gif Animator V3.0
Pixeleditor
Mit dem Pixel Editor ist nur noch sehr begrenzte Nachbearbeitung der Bilder möglich. Ihnen steht nur ein Bleistift für
die Pixelbearbeitung, eine rechteckige Box, die Sie füllen
können, die Füllfunktion, die Radierfunktion und die Pipette
für die Farbwahl zur Verfügung. Also sind nur sehr begrenzt
Korrekturen möglich.
Objekte verändern
Unter dem Menü Bearbeiten finden Sie noch die Möglichkeit, Objekte zu drehen und zu spiegeln. Mit Resample können Sie noch die Größe von Einzelbildern bzw. allen Bildern
der Animation verändern.
Verdoppeln
Mit der Funktion Sprites können Sie mit einfachen Mitteln
bereits Bewegung in die Bilder bringen. Die Kopien können
direkt übereinander gelegt oder mit Versatz versehen werden.
Außerdem können Sie beliebig viele Kopien erzeugen.
Konventionelle
Animation
Im Gif Animator können Sie ein Bild als Hintergrund festlegen, vor diesem läuft die Animation ab. Dazu betrachten Sie
sich einmal die Animation Feuerzeug.gif. Hier wurde eine
vorhandene Animation über das Hintergrundbild aus den
Microsoft Office 97-Fotovorlagen gelegt.
In der Regel arbeitet man mit Bildfolgen. Dabei sollten Sie
beachten, möglichst gleich große Bilder miteinander zu verknüpfen, das erleichtert die Arbeit sehr, Reihen Sie einmal
vier gleich große Bilder an. Danach bestimmen Sie über VideoF/X die Übergänge. Hier finden Sie 130 unterschiedlichste Möglichkeiten, Übergänge zu bestimmen. Mit diesen
Filtern lassen sich sehr viele eindrucksvolle Effekte erzielen.
Über Video F/X werden sehr viele Bilder erzeugt, und die
Animation wird viel zu groß werden. Darum sollten Sie die
Zahl der erzeugten Bilder möglichst weit heruntersetzen.
Mindestens halbieren und dann mit der Vorschau das Ergebnis ansehen.
Übergänge
in Lage
Im Menü Lage finden Sie die einfachen Übergänge, wie Wischen, Teilen oder Spirale. Auch hier können Sie die Übergangseigenschaften wie Qualität, sprich Anzahl der Übergangsbilder und Übergangslänge bestimmen. Auch hier sollten Sie wieder möglichst weit nach unten gehen und in der
Vorschau ausprobieren, ob der Effekt noch gut sichtbar ist.
Animationen
Teil 4/4.2 Seite 3
Ulead Gif Animator V3.0
Abbildung 4/4.2-2: Aus einem einfachen Bild kann man
mit der Farbanimation eindrucksvolle Effekte erzielen
In Animationen können Sie auch Bannertexte unterbringen.
Mit der Maus legen Sie die Positition des Bannertextes und
den Textbereich fest. Neben der Schriftart und Schriftgröße
können Sie auch einen Schatten festlegen. Mit dem Minuszeichen legen Sie den Schatten in X-Richtung nach links und
in der Y-Richtung nach oben.
Auch die Bewegungseigenschaften des Textes können Sie
nach Ihren Bedürfnissen festlegen. Der Text kann in vier
Richtungen laufen. Wie bei Bildübergängen legen Sie mit der
Qualität die Anzahl der Bannerbilder fest. Verwenden Sie
diese am besten benutzerdefiniert. Dann können Sie die Anzahl der Bilder variabel gestalten. Sie sollten die Angaben
sehr gut, gut, schlecht usw. nicht zu ernst nehmen, denn die
Texte wirken bei wenigen Bildern dynamischer. Überdies
können Sie auch die Übergangszeiten einstellen. Den Text
kann auch noch mit einem schattigen Rand versehen werden.
Bannertext
Teil 4/4.2 Seite 4
Animationen
Ulead Gif Animator V3.0
Videos für
Animationen
Über Datei Video einfügen können sie eine Videodatei öffnen. Bereits bei ein paar Minuten Laufzeit erhalten Sie
schnell 1500 und mehr Einzelbilder. Darum sollten Sie die
Option Dauer wählen. Darin können Sie einzelne Szenen selektieren. Mit dem Balken können Sie sich grob positionieren. Mit den unteren Segmenten können Sie Bild für Bild
nach vorne bzw. zurückgehen. Wenn Sie den Startpunkt der
gewählten Szene gefunden haben, tragen Sie die Angaben des
aktuellen Bildes in Markierungsbeginn ein. Danach den Endpunkt der Szene suchen und die Daten in Markierungsende
eintragen. Anhand des schwarzen Balkens erkennen Sie den
Auswahlbereich. OK klicken. Danach auf Öffnen. Danach
werden die Bilder in den Animator gezogen.
Tipps und Tricks
Auch eine kurze Szene enthält schnell 50 – 100 Bilder. Für
die Animation ist auch das noch zu viel. Halbieren Sie die
Bildanzahl. Danach sollten Sie erst einmal einen Test durchführen. Entfernen Sie solange Bilder wie möglich. Sie sollten
nur vorsichtig bei großen Bildübergängen sein, nimmt man
dort zu viele Einzelbilder heraus, wird der Übergang zu abrupt.
Animationen
optimieren
Nicht nur Videosequenzen, auch die normalen Bildanimationen sollten Sie vor dem Speichern optimieren. Unnötige Farben und Kommentare werden aus der Animation entfernt.
Dadurch sinkt der Speicherbedarf. Im Gif Animator können
Sie dafür den Optimierungsassistenten nutzen. Darin legen
Sie fest, mit welcher Farbpalette die Animation arbeiten soll.
Senken Sie diese soweit wie möglich ab. Bevor Sie speichern,
sehen Sie sich das Ergebnis in der Vorschau an. Sollte die
Optimierung zu Qualitätsmängeln geführt haben, wiederholen Sie diesen Vorgang.
Tipp
Legen Sie Optimierungsvarianten in einer Datei ab. Wenn Sie
viele Animationen erstellen, sparen Sie viel Zeit
Animationen
Teil 4/4.3 Seite 1
WWW-Gif-Animator
4/4.3
WWW-Gif-Animator
Nachfolgend finden Sie ein Beispiel für eine animierte GIFDatei, die mit Hilfe des WWW-Gif-Animator erstellt wurde.
Abbildung 4/4.3-1: Der Gif-Animator ist ein übersichtliches und leicht zu bedienendes Shareware-Produkt
• Über File und Open laden Sie die GIF-Dateien in der Reihenfolge in den Gif-Animator, in der sie hinterher abgespielt werden sollen. Sollte die Bildgröße eines der Bilder
von dem des vorherigen abweichen, können Sie die Größe
automatisch anpassen lassen.
• Nach dem Laden der einzelnen Bilder legen Sie die Effekte für den Übergang der Bilder fest. Dazu wählen Sie
das gewünschte Bild aus und klicken im unteren Teil des
Fensters auf die Leiste Effect/Transition.
Laden der
Bilder in der
richtigen Sequenz
Teil 4/4.3 Seite 2
Animationen
WWW-Gif-Animator
Gestaltung der
Bildübergänge
• Das Dialogfeld Select Effect/Transition wird angezeigt.
Oben rechts finden Sie den Bereich Animation. An dieser
Stelle legen Sie das Erscheinungsbild des ersten Bildes der
Sequenz (Effect) und die Übergänge zu den weiteren Bildern (Transition) fest. Im Preview-Bereich können Sie die
ausgewählten Effekte nachvollziehen.
• In unserem kurzen Beispiel legen wir jetzt den Effekt für
die Anzeige des ersten Bildes fest. Zuerst klicken Sie auf
das Optionsfeld für Effects.
• Wählen Sie aus der Auswahlliste den gewünschten Effekt
aus.
Abbildung 4/4.3-2: Die Parameter für das erste Bild der
Sequenz
Animationen
Teil 4/4.3 Seite 3
WWW-Gif-Animator
• Klicken Sie nach der Festlegung der gewünschten Parameter auf OK.
• Wählen Sie im Hauptbildschirm des WWW-Gif-Animator
das nächste Bild der Animation und klicken Sie im unteren
Teil des Bildschirms auf die Leiste Effect/Transition.
• Sie befinden sich erneut im Dialogfeld Select Effect/Transition. Für das zweite und alle weiteren Bilder legen Sie
die Effekte für den Bildübergang fest.
• Klicken Sie im Bereich Animation auf das Optionsfeld für
Transition und wählen Sie aus der Auswahlliste den gewünschten Effekt aus.
• Unter Parameters für Transition können Sie weitere Parameter für den Übergang zwischen den einzelnen Bildern
auswählen. Die Auswirkungen der jeweiligen Auswahl
können Sie im Preview-Fenster nachvollziehen.
• Klicken Sie nach Auswahl der gewünschten Parameter auf
OK. Über die Wiederholung der Schritte 7–12 können Sie
sich eine Animationssequenz beliebiger Länge aufbauen.
• Um die animierte Bildsequenz abzuspeichern, wählen Sie
in der Menüleiste des WWW-Gif-Animator den Eintrag
File aus und selektieren aus dem angezeigten Menü den
Punkt Save As.
• Geben Sie im Dialogfeld Save Animation As den gewünschten Dateinamen für die animierten GIFs ein. Im
Bereich Save Options können Sie unter einigen Speicheroptionen wählen. Mit einem Klick auf OK speichern Sie
die animierten Grafiken in der angegebenen Datei ab.
http://stud1.tuwien.ac.at/~e8925005/
Bezugsquelle
Teil 4/4.3 Seite 4
Animationen
WWW-Gif-Animator
Abbildung 4/4.3-3: Das Dialogfeld Save Animation As
Animationen
Teil 4/4.4 Seite 1
GIF Construction Set Professional
4/4.4
GIF Construction Set
Professional
Englische
Dokumentation
Abbildung 4/4.4-1: GIF Construction Set Professional
nach dem Start mit geöffnetem Menü „Datei“
Installation und Start
Damit Sie gleich loslegen und die hier gegebenen Informationen über animierte GIFs in die Praxis umsetzen können, haben wir Ihnen, wie bereits erwähnt, den Shareware-GIFAnimator GIF Construction Set Professional auf die ServiceCD gespielt, der die meisten Wünsche erfüllen dürfte und zu
einem günstigen Preis lizenziert werden kann. Das Programm
verfügt über ein ausführliches Online-Hilfesystem; zusätzlich
ist eine ausführliche Dokumentation im HTML-Format im
Paket enthalten, die sogar über eigenen Icons in der Programmgruppe im Startmenü erreichbar ist. Leider ist diese
vorbildliche Dokumentation nur auf Englisch verfügbar. Deshalb wollen wir die wichtigsten Punkte der Bedienung dieses
Programmes hier kurz erläutern.
Shareware
Teil 4/4.4 Seite 2
Animationen
GIF Construction Set Professional
Start über
Programmgruppe
Das Programm verfügt über die übliche Windows-Installationsroutine und lässt sich schnell und problemlos installieren. Es richtet sich auch eine eigene Programmgruppe ein
und lässt sich aus dem Startmenü aufrufen. Wenn Sie dies
getan haben, erscheint das Programm wie in Abbildung
4/4.4-1 gezeigt – nur dass hier bereits das Menü „Datei“ geöffnet ist.
Abbildung 4/4.4-2: Die ersten vier Dialogfenster des Animation Wizard (v. l.o. n. r. u.)
Der Animation Wizard
Schnell
und einfach
Um aus einer vorbereiteten Serie von Einzelbildern schnell
und einfach eine Animation zu erzeugen, ist der Animation
Wizard gedacht. Auch wenn man besondere Einstellungen
für einzelnen Bilder vornehmen will, wird er in vielen, wenn
nicht in den meisten Fällen die richtige Wahl sein, wenn es
zunächst darum geht, das Grundgerüst der Animation zu
erstellen: Das nachträgliche Verändern der Einstellungen zu
den einzelnen Frames bleibt Ihnen unbenommen.
Animationen
Teil 4/4.4 Seite 3
GIF Construction Set Professional
Wie Sie in Abbildung 4/4.4-1 sehen können, findet sich der
Animation Wizard im Menü „Datei“. Wenn Sie den Menüpunkt auswählen, beginnt ein Reihe von Dialogfenstern, die
nötigen Daten von Ihnen zu erfragen, so wie man das von
einem zünftigen Windows Wizard auch erwartet. Wenn Sie in
einem Fenster Daten eingegeben haben, gelangen Sie mit
„Next“ zur nächsten Station und können mit „Back“ jederzeit
wieder zurückgehen, wenn Sie irgendwelche Daten doch
noch ändern möchten. Die ersten vier Stationen des Animation Wizard sehen Sie in Abbildung 4/4.4-2.
Wie gewohnt ...
Abbildung 4/4.4-3: Die drei letzen Dialogfenster des Animation Wizard mit dem Dateidialog, der sich vom
sechsten Fenster öffnen lässt
Kopieren Sie sich die Dateien „pfeil01.gif“ bis „pfeil22.gif“
von Ihrer CD in ein Arbeitsverzeichnis auf Ihrer Festplatte
und wählen Sie dann den Animation Wizard an. Zuerst sehen
Sie eine Begrüßung mit einer kleinen Erläuterung zum Sinn
und Zweck des Animation Wizards; dann werden Sie gefragt,
ob Ihre Animation für das Web gedacht ist oder für einen anderen Anwendungszweck.
Verwendung,
Wiederholung
und Palette
Teil 4/4.4 Seite 4
Animationen
GIF Construction Set Professional
Normalerweise werden Sie hier „Yes, for use with a Web Page“ angeben. Im zweiten Fenster geht es dann darum, ob die
Animation dauernd („Loop indefinitely“) oder nur einmal
ablaufen soll („Animate once and stop“). Das vierte Fenster
dient dazu, auszuwählen, wie die Palette(n) für Ihr animiertes
GIF gewonnen werden sollen.
Anzeigedauer
einstellen
In Abbildung 4/4.4-3 sehen Sie die letzten drei Dialoge des
Animation Wizard: Zunächst können Sie einstellen, wie lange jedes Bild gezeigt werden soll. Dieser Wert wird in Hundertstel Sekunden angegeben und kann prinzipiell in Schritten von Eins variiert werden; im Animation Wizard können
Sie allerdings nur aus vorgegebenen Werten wählen. Leider
kann hier nicht die am besten passende Dauer für flüssig laufende Animationen von 4/100 sec (25 Bilder/sec) eingestellt
werden; der nächstmögliche größere Wert ist 5/100 sec (20
Bilder/sec), ein wenig langsam zwar für eine fließende Animation, aber es geht zur Not – und spart Speicherplatz bei
gleicher Ablaufdauer. 1/100 sec Anzeigedauer wäre viel zu
kurz und somit Speicherplatz- und Bandbreitenverschwendung: Das menschliche Auge würde – soweit die Grafikhardware dieses Tempo schafft – nur etwa jedes vierte Bild
wahrnehmen.
Dateien
auswählen und ...
Im nächsten Dialog werden die Bilder Ihrer Animation ausgewählt, das eigentliche Dialogfenster hierzu sehen sie rechts
oben in Abbildung 4/4.4-3. Mit der Schaltfläche „Select“ öffnen Sie ein normales Windows-Explorer-Dialogfenster, in
dem Sie die Dateien Ihrer Animation auswählen können; dieses ist in der Abbildung links unten zu sehen. Gehen Sie damit zu Ihrem Arbeitsverzeichnis mit den Einzelbildern und
markieren Sie die gewünschten Bilder („pfeil01.gif“ bis
„pfeil22.gif“) Wenn Sie Ihre Einzelbilder gleich bei der Erstellung in der richtigen Reihenfolge nummerieren, erleichtert Ihnen dies Ihre Arbeit enorm. Andernfalls müssten Sie
die Bilder einzeln zusammensuchen.
... Erstellung
auslösen
Wenn Sie Ihre Dateien ausgewählt haben, können Sie mit der
„Next“-Schaltfläche weitergehen und gelangen zum letzten
Dialogfenster des Animation Wizard, das rechts unten in Abbildung 4/4.4-3 dargestellt ist.
Animationen
Teil 4/4.4 Seite 5
GIF Construction Set Professional
Hier können Sie nun mit der Schaltfläche „Done“ die Erstellung Ihrer GIF-Animation auslösen – oder mit „Back“ in den
Dialogfenstern zurückgehen, um noch eventuelle Änderungen vorzunehmen. Beim Klick auf „Done“ erzeugt der Animation Wizard entsprechend den Vorgaben, die Sie gemacht
haben, ein animiertes GIF aus den übergebenen Einzelbildern. Dieses wird nun in einem Fenster frameweise dargestellt, wie in Abbildung 4/4.4-1 gezeigt.
Abbildung 4/4.4-4: Mit diesem Dialog lassen sich wichtige Parameter für die Einzelbilder einstellen.
Die Bearbeitung von Animationen
Sie können Ihre Animation nun abspeichern (das sollten Sie
auf jeden Fall tun), mit der Schaltfläche, auf der die Brille
abgebildet ist (oder mit „View“ aus dem Menü „Block“ oder
mit [Strg]-W), ansehen und mit den Werkzeugen des Programmes weiter bearbeiten. Um ein Frame zu bearbeiten,
wählen Sie es aus, indem Sie mit der Maus hineinklicken.
Abspeichern
Teil 4/4.4 Seite 6
Animationen
GIF Construction Set Professional
Übliche
Werkzeuge
Im Menü „Edit“ finden Sie die Windows-üblichen Funktionen zum Kopieren, Ausschneiden und Einfügen von Frames
sowie zum Löschen und Einfügen neuer Frames. Mit diesen
Werkzeugen können Sie auch Animationen bearbeiten, die
Sie in das Programm geladen haben, um zum Beispiel eine
fertig gestellte Animation bei Bedarf später wieder zu verändern.
Blocks einstellen
Interessant ist aber vor allem das Menü „Block“. Hier finden
Sie eine Reihe von Menüpunkten, mit denen Sie die Bilder
verändern können: Spiegeln, Drehen usw. kann hier veranlasst werden. Besonders wichtig ist der Menüpunkt „Manage“, der das Dialogfenster öffnet, das Sie in Abbildung 4/4.44 sehen: Mit seiner Hilfe können Sie die Control-BlockParameter feintunen, die der Animation Wizard vorgibt bzw.
nur grob einzustellen erlaubt. Die Einstellungen, die Sie machen, gelten immer für die Control Blocks der Frames, die
Sie im Fenster mit den Frames Ihrer Animation ausgewählt
haben.
Positionierung
Im unteren Teil des Fensters können Sie die Positionierung
von Bildern einrichten, die kleiner sind als die Bildfläche, die
durch das größte Frame der Animation bestimmt wird. Wenn
Sie die Checkbox mit der Beschriftung „absolute“ markieren,
können Sie absolute Werte für die Positionierung eingeben, im
anderen Fall relative. Mit der „Apply“-Schaltfläche können Sie
die vorgenommene Einstellung wirksam werden lassen.
Control-Block
einstellen
Wenn Sie im oberen Teil des Dialogfensters den Radiobutton
„Enable Controls for the Selected Blocks“ einschalten, machen Sie damit die Einstellungen der Control-Blocks der ausgewählten Frames wirksam, mit „Disable Controls for the Selected Blocks“ unwirksam. Die Schaltfläche „Apply“ dient
wiederum dazu, die Einstellungen wirksam zu machen. Um
Control-Blocks einzustellen, klicken Sie auf „Apply“, nachdem Sie den Radiobutton „Set Controls for the Selected
Blocks“ ausgewählt haben. Es erscheint dann ein Dialog, in
dem Sie die Steuerwerte des Control-Blocks einstellen können.
Animationen
Teil 4/4.4 Seite 7
GIF Construction Set Professional
Banners, LED-Anzeigen und Buttons
Mit GIF Construction Set Professional lassen sich auch sehr
leicht und schnell Effekte erzeugen, ohne dass man die einzelnen Phasen zeichnen muss. Auf diese Weise hat man
schnell eine Laufschrift oder etwas Ähnliches erzeugt, ohne
sich stundenlang mit dem Grafikprogramm abquälen zu müssen. Im Menü „Edit“ finden Sie die Menüpunkte, mit denen
Sie verschiedene Effekte erzeugen können. Der Preis für
Laufschriften und dergleichen sind jedoch schwere Dateien,
sodass man sich den Einsatz gut überlegen muss. Trotzdem
wollen wir kurz erklären, wie man solche Dinge mit GIF
Construction Set Professional herstellt.
Einfach
und schnell
Abbildung 4/4.4-5: Ein Neon-Banner entsteht
Unter einem Banner verstand man ursprünglich einen Schriftzug, der als Grafik hergestellt und so nicht den typographischen Einschränkungen des Browser-Fließtextes unterworfen
ist. Mittlerweile bezeichnet man auch die kleinen Werbebilder als Banner, die allerorten im Web als Anker für Links zu
anderen Seiten zu finden sind. Hier ist das Wort aber im Sinne von Schriftzug gemeint, wobei es sich um animierte
Schriftzüge mit allerhand Effekten handeln kann.
Banner
Teil 4/4.4 Seite 8
Animationen
GIF Construction Set Professional
Effekte einstellen
Um mit GIF Construction Set Professional ein Banner herzustellen, öffnen Sie einfach den Menüpunkt „Banner“ im Menü „Edit“. Sie finden dann das Dialogfenster, das in Abbildung 4/4.4-5 dargestellt ist. Hier können Sie zunächst den
gewünschten Text eingeben sowie Schriftart und Größe einstellen. Anschließend können Sie mit Hilfe der Karteikarten
und der anderen Dialogelemente eine Unzahl verschiedener
Effekte einstellen, deren Beschreibung hier zu weit führen
würde. Am besten experimentieren Sie einfach selbst: Um
den jeweils eingestellten Effekt zu erproben, klicken Sie die
Schaltfläche „Test“ an. Wenn Ihnen eine Version gefällt, klicken Sie „OK“. Dadurch wird Ihr Banner erstellt; anschließend befinden Sie sich wieder im normalen Modus von GIF
Construction Set Professional, das neue Banner liegt als Animation vor, die Sie genauso abspeichern oder weiter bearbeiten können wie andere Animationen auch.
Abbildung 4/4.4-6: Eine der beiden Beispiel-Seiten mit
animierten GIFs
Andere Effekte
Mit den anderen Effekten verhält es sich ähnlich: Selbst ausprobieren bringt mehr als lange Beschreibungen. Ähnlich wie
Banner werden LED-Anzeigen aus Texten generiert. Sehr
nützlich für das schnelle Design ist der Menüpunkt „Button“,
bei dem ein solcher aus einem eingegebenen Text generiert
wird. Mit „Spin“ können sie Grafiken rotieren lassen und mit
„Transition“ interessante Überblendeffekte erzeugen.
Animationen
Teil 4/4.4 Seite 9
GIF Construction Set Professional
Allerdings erzeugen all diese interessanten Effekte leider sehr
schwere Dateien, sodass man sich gewaltig zurückhalten
muss, keine Monsterseiten mit unzumutbaren Ladezeiten zu
bauen.
Auf Ihrer Service-CD finden Sie einige Beispiele für animierte GIFs, die Sie sich am einfachsten mit den beiden
HTML-Dateien gif01.html und gif02.html ansehen können.
Die erste Datei zeigt den zuerst besprochenen animierten
Pfeil und verschiedene Versionen des Wasserhahnes (supercompressed, transparent ...), um zu zeigen, wie sich dies auf
die Dateigröße auswirkt. Auf der zweiten HTML-Seite, die in
Abbildung 4/4.4-6 dargestellt ist, sehen Sie Beispiele für mit
GIF Construction Set hergestellte Effekte: Ein Neon-Banner,
zwei LED-Anzeigen und einen Button.
Beispiele
Teil 4/4.4 Seite 10
GIF Construction Set Professional
Animationen