Fachartikel

Von 1997 bis 2005 erschienen Artikel von mir in den Computerfachzeitschriften PC Intern und Internet Intern. Nachfolgend finden Sie alle erschienenen Artikel aufgelistet. Eine kurze Beschreibung zeigt Ihnen, worum es in dem Artikel geht. Klicken Sie einfach auf den Link, um den gesamten Artikel zu lesen. Die Bilder in den Artikeln sind mit vergrößerten Darstellungen verknüpft.

Fachartikel

Web in Motion

Web in Motion

Titelthema: Heft 02/2002 (S. 44) 3 Seiten

Regeln zur Erstellung von Animationen

Überall im Web begegnen dem Anwender mehr oder weniger tolle Animationen. Bei einigen fragt sich der Betrachter sicherlich, wie sie entstanden sind. Die Regeln für Animationen haben sich seit der Zeit der ersten Zeichentrickfilme prinzipiell nicht verändert - auch wenn heute Programme wie Flash viele Teile der Animationsarbeit übernehmen

Um die Arbeitsweise von Animationsprogrammen zu erläutern, wollen wir zunächst einige grundlegende Punkte der Animationen erläutern. Animation (= Bewegung) entsteht durch das Aneinanderreihen von Bildern mit unterschiedlichen Bildinhalten. Werden dem Betrachter viele Bilder innerhalb kurzer Zeit gezeigt, entsteht der Eindruck von Bewegung. Beim traditionellen Zeichentrickfilm sind dies 24, bei Videoproduktionen 25 Bilder in der Sekunde. Durch die geringe Übertragungsgeschwindigkeit im Web werden hier meist 15 Bilder in der Sekunde verwendet. Deshalb sehen diese Animationen gelegentlich leicht ruckelnd aus. Werden dem Betrachter eines Films zu wenig Bilder pro Sekunde gezeigt, kann er nämlich die einzelnen Bilder erkennen. Dadurch entsteht der Ruckeleffekt. Bei vielen Bildern in der Sekunde ist das menschliche Auge zu träge, einzelne Bilder voneinander zu unterscheiden, deshalb ergeben sich dann fließende Bewegungen. Wozu werden nun Animationsprogramme benötigt? Prinzipiell können Sie alle Animationen auch mit einem reinen Bildbearbeitungsprogramm wie etwa Photoshop oder Fireworks MX erstellen. Sie müssen dann alle einzelnen Bilder per "Handarbeit" herstellen. Abschließend benötigen Sie ein Programm, das die einzelnen Bilder beispielsweise zu einem animierten GIF-Bild zusammenfassen kann. Diese Aufgabe lässt sich zum Beispiel ebenfalls mit Fireworks MX oder ImageReady erledigen. Dieses Verfahren erzeugt neben viel Arbeitsaufwand unter Umständen auch unpräzise Ergebnisse, da die Veränderungen ja gleichmäßig vorgenommen werden müssen.

Die Aufgabe von Animationsprogrammen

Um den Arbeitsaufwand zu reduzieren, sind Animationsprogramme wichtig. So legen Sie beispielsweise nur noch das Ausgangs- und das Endbild der Animation fest. Das Animationsprogramm berechnet dann automatisch alle dazwischen liegenden Bilder, die nötig sind, um die gewünschte Filmlänge zu erreichen. Außerdem sollte das Animationsprogramm eine Option zum Verwalten der einzelnen Bilder anbieten. Diese Aufgabe übernimmt in F--lash MX oder LiveMotion das Zeitachse-Fenster. Hier können Sie einstellen, wie lange die Bewegung eines Objekts dauern soll, und Sie können natürlich auch jedes Einzelbild ansteuern. Außerdem haben Sie hier die Kontrolle über jede einzelne Eigenschaft eines Objekts.

Kleine Dateigrößen

Wichtig ist auch, dass Sie - wenn möglich - nicht mit Pixeldaten arbeiten sollten. Wollen Sie einen Flash-Film erstellen, haben Sie durch das vektorbasierte Arbeiten den Vorteil, dass kleine Dateien entstehen. Sonderfunktionen für die Animation sind natürlich wünschenswert, werden von Flash MX oder LiveMotion aber leider kaum unterstützt. So können Sie keine Bilder mit Effekten überblenden, wie Sie es vielleicht von Jasc Animation Shop gewohnt sind. Solche Aufgabenstellungen lassen sich mit Videobearbeitungsprogrammen wie etwa Premiere leicht erledigen. Auch das automatische Morphen von zwei Objekten, wie es die Macromedia-Flash-Anwender schätzen, ist nicht bei allen Animationsprogrammen möglich. Unter Morphen versteht der Fachmann, dass Sie beispielsweise eine Apfelform weich in eine Birnenform verwandeln.

Die Animationstypen

Wenn Sie sich Filme ansehen, könnten Sie vielleicht meinen, es gäbe unendlich viele verschiedene Arten der Bewegung. Dies ist aber nicht der Fall. Die meisten Animationen lassen sich auf wenige Grundtypen zurückführen. Dazu haben wir die abgebildete Vorlage konstruiert: Auf einem Hintergrund ist ein runder Button platziert. Der Button soll nun animiert werden. Folgende Möglichkeiten stehen dafür zur Verfügung:

Web in Motion
Die Ausgangssituation des Beispiels

Simple Animation: Das Blinken

Die simpelste Animation besteht darin, dass der Button im ersten Bild vorhanden ist, im zweiten dagegen nicht. Was daran eine Bewegung ist? Nun, wenn Sie die Bilder immer wiederholen, entsteht ein Blinken des Buttons. Die Bildkombination könnte also lauten Bild: 1, 1, 1, 2, 2, 2, 1, 1, 1 und so weiter. Dabei werden die beiden Bilder je drei Mal gezeigt. Anschließend geht es wieder von vorn los. Zwei verschiedene Bilder sind die Voraussetzung für eine Animation. Ein einziges Bild würde man nicht als Animation bezeichnen. Das wäre dann ein Standbild. Besonders anspruchsvoll war diese erste Animation nicht. Deshalb wird es jetzt komplizierter:

Blinken mit Zwischenschritt: Blenden

Der Button muss nicht einfach im zweiten Bild da sein, er kann ja auch langsam erscheinen - zum Beispiel, indem ein weiteres Bild in die Animation eingefügt wird. Dies könnte beispielsweise dasselbe Bild sein, aber in diesem Fall mit einem halbtransparenten Kreis. Auf diese Art entsteht eine so genannte Blende. Natürlich können Sie diese drei Bilder auch miteinander kombinieren: Spielen Sie die Bilder in der Reihenfolge 1, 2, 3, 2, 1, 2, 3 und so weiter ab, blendet der Kreis ein und aus, ein und aus ...

Web in Motion
Eine vergleichsweise simple Form der Animation: Eine Blende

Eine Variante des Einblendens wären Effekte, die Flash MX oder LiveMotion leider nicht anbieten. Das mittlere Bild kann auf unterschiedliche Art aufgebaut sein. Animation Pro bietet hier zahlreiche Optionen an. So kann es zum Beispiel "gekriselt" oder zerschnitten sein und so eine ganz andere Wirkung beim Erscheinen erzielen. Dies wäre eine so genannte "Effektblende".

Web in Motion
Ein Übergangseffekt erzeilt bei der Blende eine ganz andere Wirkung

Mal hier, mal dort: Hüpfen

Nach dem Erscheinen des Objekts beginnt der nächste Animationstyp: Das Objekt kann sich bewegen. Dabei verändert sich der Kreis nicht. Alle seine Eigenschaften bleiben identisch - bis auf eine Eigenschaft: die Position. So könnte sich der Button im ersten Bild auf der linken Seite der Komposition befinden, im nächsten Bild auf der rechten Seite. In diesem Fall hätte der Betrachter den Eindruck, als würde der Button von einer Stelle zur anderen "hüpfen". Der nächste Schritt ist wieder aufwendiger. Soll der Kreis nicht hüpfen, sondern wandern, ist ein neues Bild erforderlich. In diesem Bild könnte der Button die Hälfte der Bewegungsstrecke erreicht haben. Zur besseren Übersicht haben wir die drei Phasen in der Abbildung in einem Bild untergebracht.

Web in Motion
Beim "Hüpfen" befindet sich das Objekt wechselweise an zwei Stellen

Was sind Phasen?

Als Phasen bezeichnet man die einzelnen Bilder einer Animation. Dabei unterscheidet man zwischen Haupt- und Zwischenphasen. Die Hauptphasen sind das Start- und das Endbild der Animation. Die Zwischenphasen sind die Bilder zwischen diesen beiden Phasen. Der Betrachter hätte aber mit nur einem Zwischenbild noch nicht den Eindruck einer fließenden Bewegung - er würde eher noch immer meinen, der Kreis hüpft von einer zur nächsten Stelle.

Fließende Bewegungen

Um dies zu umgehen, müssen Sie weitere Phasen einfügen, bei denen der Kreis "Stückchen für Stückchen" nach rechts geschoben wird. Wenn Sie in Flash MX oder LiveMotion den Zwiebelschalenmodus aktivieren, werden die Zwischenphasen angezeigt, sobald Sie ein animiertes Objekt markieren. Das Objekt wandert auf einer geraden Linie von links nach rechts. Das liegt daran, dass sich nur der horizontale Wert in den Transformationseinstellungen geändert hat - nicht aber der vertikale.

Web in Motion
Das Objekt bewegt sich und wandert dabei mehr oder weniger fließend

Unförmige Bewegungen

Die Animation kann noch weiter verfeinert werden, indem sich die mittlere Phase nicht auf derselben Höhe befindet. Ist das Objekt in der mittleren Phase zum Beispiel höher platziert, macht der Button bei seiner Bewegung eine Kurve. Er wandert also zuerst nach oben und dann wieder nach unten, bis er schließlich die gewählte Endposition erreicht hat.

Web in Motion
Eine verkrümmte Bewegung

Pfadanimationen

Ganz kompliziert wird die Animationsform, wenn das Objekt einen Weg "kreuz und quer" durch das Bild geht. Dies wäre eine so genannte Pfadanimation. Dazu sind zahlreiche, verschiedene Hauptphasen notwendig.

Objektverformungen

Der nächste Animationstyp kann sich wieder als stehende Variante abspielen. Natürlich kann sich das Objekt dabei auch zusätzlich bewegen. Während der Animation können sich die Eigenschaften des Objekts verändern. So kann es im ersten Bild noch ein Kreis sein, im letzten aber eine Ellipse. Diese Veränderung erreichen Sie durch das Dehnen des Objekts. Ebenso gut kann sich das Objekt durch Rotation drehen oder auch neigen. Bei aufwändigeren Animationsprogrammen könnte sich der Kreis auch in ein Rechteck mit abgerundeten Ecken verwandeln.

Web in Motion
Eine mögliche Verformung des Objektes ist das Stauchen

Eigenschaftsveränderungen

Zu den Eigenschaften gehört natürlich auch, dass der Button in der Animation sein Erscheinungsbild ändern kann. So kann das Objekt beispielsweise seine Farbe verändern - oder eine stärkere Kontur erhalten - soweit vorhanden. Diese Veränderung bezieht sich auf alle Eigenschaften, die Sie Objekten in dem jeweiligen Programm zuordnen können. Leider gibt es aber von Programm zu Programm einige Objekteigenschaften, die in einer fließenden Bewegung nicht geändert werden können. So lässt sich bei Flash MX die verwendete Schrifttype nicht verändern, um nur ein Beispiel zu nennen.

Web in Motion
Weitere Effekte erzielt man durch das Ändern von Objekt-Eigenschaften

Die Flash-Spezialität

In Flash MX gibt es als Besonderheit einen Animationstyp, der in vielen anderen derartigen Programmen fehlt: Der so genannte Form-Tween. Dabei kann sich die Objektform frei verändern. Im Extremfall können Sie dabei auch völlig gegensätzliche Formen per Animation erzielen und so einem Betrachter im wahrsten "Sinne des Bildes" ein "X für ein U vormachen".

Web in Motion
Ein Form-Tween ermöglicht es auch, ein "X für ein U vorzumachen"

Die dritte Dimension

Einen Animationstyp können wir hier unberücksichtigt lassen: die dreidimensionale Bewegung. Dieses Genre bleibt - meist teuren - Spezialprogrammen wie etwas 3D Studio Max vorbehalten. Zwei Einzelbilder einer solchen Animation sehen Sie in den Abbildungen. Es handelt sich dabei um eine Kamerafahrt - dies ist ein spezieller Animationstyp der 3D-Animationen. Da solche3D-Animationsprogramme nicht von allzu vielen Anwendern eingesetzt werden, soll hier nicht auf deren spezielle Animationsformen eingegangen werden. Flash MX oder LiveMotion beherrschen die dritte Dimension nicht, so dass Sie beim Einsatz dieser Tools auf derartige Animationen verzichten müssen.

Web in Motion
Bilder einer 3D-Animation, die sich jedoch nur selten fürs Web eignen

Einzelbildanimationen

Eine "Animationsart", die Flash MX ebenfalls unterstützt, ist eigentlich keine: Die so genannte Einzelbildanimation. Sie ist von Zeichentrickfilmen bekannt. Dabei werden die einzelnen Bilder eines Bewegungsablaufs gezeichnet und Einzelbild für Einzelbild nacheinander aufgenommen. Handzeichnungen können per Scan übertragen und aufgenommen werden. Das macht alles eine Menge Arbeit, und Sie müssen zeichnen können. Ein Beispiel aus der Musterbibliothek des älteren Flash 4 sehen Sie abgebildet.

Web in Motion

Fazit

Auch wenn es zunächst anders aussehen mag, wenn Sie sich aufwändige Animationen ansehen: Das sind wirklich alle unterschiedlichen Animationstypen. Was immer Sie sonst noch an tollen Animationen irgendwo sehen: Alles sind Abwandlungen oder Kombinationen beziehungsweise Überlagerungen der vorgestellten Animationstypen. Oft wird es natürlich schwierig, sie nachträglich voneinander zu unterscheiden. Wirken einzelne Animationstypen vielleicht langweilig: In der Kombination wird es spannender. Wenn zum Beispiel ein Objekt während einer Bewegung seine Form und sein Aussehen verändert, passiert eine Menge im Film.

Zurück