Erstellen von Animationen

In der wikipedia habe ich ein paar Animationen erstellt. Das folgende Beispiel soll zeigen, wie ich die entsprechenden GIF-Dateien aufgebaut habe.

Das GIF-Format

... ist ein bekanntes, vor allem im Internet verbreitetes Format für Bilder. Es hat folgende Stärken:

• Universelle Darstellbarkeit: Jeder Webbrowser und jedes Grafikprogramm zeigt ein GIF an.
• Kompaktes Dateiformat: GIF-Dateien werden intern automatisch komprimiert, durch Beschränkung der Farben auf 16, 4 oder 2 Farben kann die Dateigröße weiter vermindert werden.
• Bereiche können transparent dargestellt werden.
• Animationen: Mehrere GIF-Bilder können in einer Datei gespeichert werden und erscheinen dann hintereinander, wie ein Film. Anzeigedauer und Anzahl der Bilder können dabei beliebig eingestellt werden.

Das GIF-Format hat aber auch Nachteile:

• Es kann maximal 256 Farben darstellen, daher eignet es sich vor allem für Zeichnungen, Karten, Pläne und Skizzen, aber kaum für Fotos.
• Es war lange Zeit (bis 2004) durch Patente geschützt.

Das GIF-Format für Grafiken wurde vermutlich von CompuServe ins Internet eingeführt. Möglicherweise hat man aber übersehen, dass die Algorithmen durch Patente geschützt waren und ein fleißiger Patentinhaber Geld von den Softwareanbietern und manchmal auch Webseitenbetreibern verlangte. Dadurch war es lange Zeit im Internet verschrien.

Seit dem 7. Juli 2004 sind alle Patente ausgelaufen und die Verwendung von Algorithmen zur Erstellung und Darstellung von GIF-Bildern, sowie die Verwendung dieses Grafikformats ist heute frei.

Unter anderem wegen der Patentstreitigkeiten wurde das PNG-Format entwickelt, welches aber bis heute nur unzureichend von den Webbrowsern unterstützt wird.

Die Werkzeuge

Um eine GIF-Animation zu erstellen, verwende ich diese Programme:

• CorelDraw 10, die Version 9 kann VBA-Makros und sollte ausreichen. Mit CorelDraw werden die Zeichnungen erstellt, aus denen später die Bitmap-Grafiken für die Animation erzeugt werden.
• AnimationShop Pro Version 3, der mit Paint Shop Pro ab Version 8 geliefert wird. Frühere Versionen, die mit älteren Versionen von Paint shop Pro geliefert wurden, sollten aber ausreichen. Mit Animation Shop werden die Bitmap-Grafiken zu einem animierten GIF zusammengesetzt. Man kann dazu auch andere Tools verwenden, allerdings ist der AnimationShop sehr komfortabel und optimiert die Ergebnisse automatisch.

Ein Vektorgrafik-Programm (wie CorelDraw, Adobe Illustrator oder andere) ist besonders geeignet, um Skizzen und Zeichnungen zu erstellen, die dann als GIF exportiert werden können. Leider hat Corel seit Jahren einen Bug beim GIF-Export nicht entfernt: Früher wurden GIFs unsauber exportiert, heute hängt sich der Filter beim Export auf (jedenfalls bei Version 10). Aus diesem Grund habe ich ein Makro erstellt, um jede Seite in CorelDraw als einzelne TIFF-Datei zu exportieren (in der Beispieldatei).

Die TIFF-Dateien werden dann von Animation Shop zu einer Animation zusammengesetzt und in ein GIF umgewandelt.

Zeichnung in Corel erstellen

Um die Zeichnung in Corel zu erstellen, braucht man für jedes Bild in der GIF-Datei eine Seite in der CDR-Datei.

Zunächst beginnt man mit einem Rechteck auf der ersten Seite. Das Rechteck gibt die Größe der Animation an und nichts sollte außerhalb des Rechtecks gezeichnet werden. Damit das Rechteck auf allen Seiten immer an der gleichen Position erscheint und nicht versehentlich verschoben werden kann, schaltet man Im Menü 'Extras' den Objektmanager ein. Bei der Gelegenheit kann man gleich weitere Objekte erstellen, die in allen Bildern der Animation sichtbar sein sollen. Der Vorteil von Objekten im Hintergrund ist, dass sie in allen Bildern immer an der exakt gleichen Stelle erscheinen, ohne dass man sie jedesmal kopieren muss.

Im neu erscheinenden Andockfenster 'Objekt-Manager' geht es folgenden Schritten weiter:

1. Mit einem Rechstklick auf 'Hauptebene' eine 'Neue Hauptebene' und nennt sie 'Hintergrund' (das 'Haupt…' textet Corel dazu)
2. Das Rechteck und weitere Objekte, die auf jeder Seite erscheinen sollen, werden mit der Maus zu 'HauptHintergrund' verschoben
3. Das kleine Schreibstift-Icon vor 'HauptHintergrund' wird so lange geklickt, bis es so abgeblendet ist, wie bei 'Gitter'. Jetzt ist die Hauptebene 'HauptHintergrund' schreibgeschützt
4. 'HauptHintergrund' wird mit der Maus unter Gitter gezogen. Über die Position von 'HauptHintergrund' kann man festlegen, ob diese Ebene vor allen anderen liegen soll und die anderen Objekte verdeckt (dann zieht man sie mit der Maus über 'Desktop') oder ob sie hinter allen Objekten liegen soll und nur als Hintergrund dient (dann zieht man sie mit der Maus unter 'Gitter').

Damit es weitergeht, doppelklickt man Ebene 1. Damit landen alle neuen Objekte auf dieser Ebene. Nun fügt man Seite um Seite ein, um ein neues Bild für die Animation zu gestalten.

Nachdem alle Seiten fertiggestellt sind, muss man die Seiten als einzelne TIFF Dateien exportieren. Da dies viel Handarbeit ist verwendet man am besten mein Makro. Es steht in der Beispiel-Datei und wird über 'Extras' -> 'Visual Basic' -> Wiedergeben' gestartet. Das Skript fragt nach einem Ausgabedateipfad und verwendet den Namen der CorelDraw Datei als Name für die TIFF-Dateien. Alle Dateien werden durchnummeriert, so dass die Reihenfolge in der Corel-Datei erhalten bleibt.

AnimationShop

Der Hauptvorteil von Animation Shop gegenüber echter Handarbeit ist, dass es Grafiken optimieren kann. So ist es bei einem animierten GIF nicht nötig, dass jedes Bild gleich groß ist, sondern es reicht aus, wenn das neue GIF-Bild nur die veränderten Teile des vorigen Bildes überschreibt - das beherrscht Animation Shop automatisch. Die Bearbeitung in Animation Shop ist dank eines Wizzards relativ einfach:

1. Im Menü 'Datei' den 'Animations Wizzard ...' starten.
2. Als Größe kann man es für den ersten Versuch bei 'Größe des ersten Bildes' belassen. Dann 'weiter' klicken.
3. Wenn die Leinwand transparent ist, scheint der Hintergrund der Webseite durch. Bei einfarbigen Webseiten ist das OK, aber bei Bildern kann dies störend sein, so dass man dann eine Farbe wählen sollte.
4. Da die Bilder alle gleich groß sind, ist es egal, ob sie beim Übereinanderlegen in der Mitte oder links oben ausgerichtet werden. Die Füllung sollte mit dem Inhalt des vorhergehenden Bildes erfolgen. Die Option 'Größe anpassen' ist nur dann wichtig, wenn man auf der ersten Seite des Assistenten eine eigene Größe angegeben hat oder (was in unserem Anwendungsfall nie zutrifft) Bilder unterschiedlicher Größe zu einer Animation zusammengesetzt werden.
5. Es empfiehlt sich die kontinuierliche Wiedergabe. Wenn die Animation eine Bewegung darstellt, kann man das Einzelbild eine 1/50 s zeigen. Wenn dagegen ein Ablauf in mehreren Schritten dargestellt werden soll, braucht der Betrachte mehr Zeit, um jedes einzelne Bild erkennen zu können. 1/200 s sollte da reichen, denn bei einer Endlosanimation kann der Betrachter immer wieder alles von vorne sehen.
6. Nun werden die Bilder hinzugefügt. Hier wird auch gleich die Reihenfolge der Bilder festgelegt (es geht auch noch später, aber hier ist es am einfachsten). Der schnellste weg ist es, auf die Schaltfläche 'Bild hinzufügen' zu klicken, das Verzeichnis und dann eine beliebige Datei auszuwählen, und dann Strg+A drücken, um alle Dateien auszuwählen.
7. Jetzt kann man die Animation mit 'ansicht', 'Animation' überprüfen
8. Mit 'Datei', 'Speichern unter ...' als CompuServe Grafik (= animiertes GIF) speichern.
9. In dem nun folgenden Dialog kann mit der Schaltfläche 'Optimieren' im Register 'Farben' die Methode ausgewählt werden. Bei wenigen Farben (Strichzeichnungen) bevorzuge ich 'Ähnliche Farben', die Anzahl der Farben schlägt AnimationShop selbst vor. Im Register 'Optimierung' klicke ich alles an.

Damit ist die Animation fertig.

Tipps zur Gestaltung

Eine Animation läuft normalerweise endlos, sofern man nichts anderes einstellt. Man sollte sich daher überlegen, wie man dem Betrachter den Sprung vom letzten zum ersten Bild deutlich macht. Eine Möglichkeit ist es, ein Startbild einzubauen, welches dann auch noch weitere Informationen zum Zweck und zum Urheber gibt. Das Startbild wird dann etwas länger gezeigt, als die übrigen Bilder. Eine weitere Möglichkeit bietet ein wachsender Balken, wie er von Installationsprogrammen bekannt ist, und der einen ungefähren Überblick über die Position in der Animation gibt.

Wenn die Animation einen Rhythmus hat, z.B. aus 20 Bildern besteht, die einen Zyklus von 4 Bildern hat, dann kann man auch hier einen Rollbalken einsetzen, der z.B. durch Striche nach je 4 Bildern den Beginn/ das Ende eines Zyklus zeigt.

Übergänge zwischen den Bildern kann man verbessern, in dem man verschwindende Details nicht von einem auf das nächste Bild ausblendet, sondern über zwei Bilder ausblendet. Dazu zeigt man das Detail im ersten Bild noch vollständig, im zweiten Bild ausgegraut und im dritten Bild gar nicht mehr. Sinngemäß kann man so auch beim einblenden von Details vorgehen.

Die Wartezeiten zwischen den Bildern kann nachträglich durch den Betrachter nicht mehr verändert werden. Daher sollte die Animation erst ein paar Versuchspersonen zeigen, und diese nach der richtigen Geschwindigkeit fragen.

Beispiel zum Download

Hier ist ein Beispiel, um das Ganze nachzuvollziehen. Das rechte animierte GIF (nur 1 kB groß) wurde aus einer CorelDraw-Datei (Version 10) (download hier, enthält auch das VBA-Makro) erstellt. Diese Datei kann beliebig verändert und eigenen Zwecken angepasst werden:

• Wenn man dem umgebenden Rechteck keine Hintergrundfarbe (hier: gelb) gibt, wird es transparent. Vorsicht: Sowohl CorelDraw kennen die Hintergrundfarbe 'transparent' und 'weiß'. In Corel sehen zunächst beide gleich aus, aber weiß ist eben nicht transparent.
• Wenn man keinen Rahmen sehen soll, nimmt man dem Rechteck auf der Hintergrundebene den Rahmen weg.

Animationen in der Wikipedia

Nullstellenbestimmung mit dem Newton-Verfahren (20 kB)

Nullstellenbestimmung mit der Regula Falsi (24 kB)

Nullstellenbestimmung mit der Bisektion (24 kB)

Streckenverhältnisse, definition von Sinus / Cosinus / Tangens am Einheitskreis (40 kB)