Animationen: Der 3-Frame-Trick

Kein Beitragsbild

Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der...

von Frank Puscher

Um Speicherplatz zu sparen sollte man möglichst wenige Schlüsselbilder in einer Animation einsetzen. Trotzdem braucht man auf tolle Effekte nicht zu verzichten.

Das menschliche Auge ist träge. Bei schnellen Bewegungen erkennt es das Animationsobjekt nur noch schemenhaft. Macht man sich diesen Umstand zunutze, dann kann man die Kausalität umkehren: Erzeugen Sie eine schemenhafte Darstellung eines Objekts und das menschliche Gehirn meint, es liegt eine Animation vor.

Der Trick basiert immer auf folgendem Grundprinzip. Jede Animation besteht nur aus drei Schlüsselbildern. Wenn Sie die Animation in Flash herstellen, können Sie dazu noch Tweenings für die Übergänge einsetzen. Das gilt aber nicht, wenn Sie ein animiertes GIF exportieren wollen. Hier würde Flash die Zwischenstadien des Tweenings ebenfalls in Schlüsselbilder umrechnen und so die Dateigröße deutlich erhöhen.

Schärfeverlagerung
Der Animationstrick besteht im Grund nur aus einem einzigen Bild, nämlich dem mittleren. Das erste und das letzte Bild der Animation stehen ja fest. Nehmen wir ein Motiv mit markantem Vorder- und Hintergrund. Im ersten Bild setzen Sie den Vordergrund, also beispielsweise den fotografierten Menschen unscharf. Hierzu wählen Sie das Objekt aus, und wenden einen Gaußschen Weichzeichner an. Exportieren Sie das Motiv als JPEG.

Screenshot
Die Schärfe verlagert sich von der Frau im Hintergrund zum Mann

Machen Sie nun das Weichzeichnen rückgängig und wenden Sie es statt dessen auf den Hintergrund an. Exportieren Sie das Ergebnis als Schlussbild. Machen Sie das Weichzeichnen erneut rückgängig und wenden Sie es auf beide Bilder an. Dieses unscharfe Bild ist der Zwischenschritt.

Wenn Sie nun alle drei Bilder in schneller Folge laufen lassen, haben Sie das Gefühl einer flüssigen Bewegung. Übrigens: Je nach Speicherplatz können Sie natürlich auch mehr als einen Zwischenschritt erzeugen.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

PowerZoom
Das Prinzip bleibt das Gleiche. Zeichnen Sie im ersten Frame das komplette Motiv weich. Erzeugen Sie als Zielbild einen vergrößerten Ausschnitt eines wichtigen Details. Für das mittlere Bild verwenden Sie wieder das Ausgangsmotiv in Originalgröße. Hier wenden Sie einen radialen Weichzeichner an und aktivieren die Option „strahlenförmig“. Der Filter verzerrt das Bild so, dass man den Eindruck bekommt, dass die Kamera mit hoher Geschwindigkeit in das Bild zoomt.

Screenshot
Der radiale Weichzeichner orientiert sich an der Mitte des Motivs

Tipp: Der Effekt wird noch verstärkt, wenn man mehrere Zwischenschritte erzeugt, die den Filter unterschiedlich stark einsetzen.

Reißschwenk
Statt der dynamischen Kamerafahrt, können wir selbige auch vor dem Objekt schwenken. Hierzu nehmen Sie ein breites Motiv oder vergrößern Ihr Bild so, dass es breiter wird, als die sichtbare Fläche. Nun schieben Sie es zuerst ganz nach links und exportieren das Startbild. Als nächstes schieben Sie das Motiv ganz nach rechts und erzeugend as Endbild. Nun schieben Sie das Motiv in die Mitte und wenden den Filter Bewegungsunschärfe an. Hier wählen Sie eine horizontale Achse und lassen den Filter stark wirken, so dass er das Ergebnis deutlich verfremdet.

Screenshot
Auch bei diagonalen Achsen funktioniert der Reißschwenk

Fly-In
Eine Variante des Reißschwenk ist eine Animation, in der nur ein Teil des Bilder bewegt wird. Typischerweise verwendet man diesen Effekt, um Texte ins Bild fliegen zu lassen. Erzeugen Sie also zunächst ein Motiv ohne Text und dann eines mit dem Text in der Endposition. Aus beiden Situationen exportieren Sie die JPEGs. Nun verschieben Sie den Text etwa in die Mitte der Bewegung und verwenden erneut die Bewegungsunschärfe in Flugrichtung. Wenn Sie Photoshop verwenden müssen Sie die Textebene vorher rastern.

Die Textebene muss vor dem verzerren gerastert werden

Flash-Fly-In
Sogar mit nur zwei Bildern kommt ein ganz ähnlicher Effekt in Flash aus. Die beiden Bilder markieren Anfangs- und Endpunkt des fliegenden Objekts. Um die Bewegung zu simulieren, erzeugen Sie dazwischen ein Oval mit einem runden Farbverlauf, der auf beiden Seiten die Hauptfarbe des animierten Objekts aufnimmt.

Screenshot
In Flash ersetzt ein ovaler Verlauf die Unschärfe

Die rechte Farbe wird aber im Farbmischer transparent gesetzt. Nun vergrößern Sie das Oval so, dass es mit den Rändern gerade die Anfangs- und Endposition des fliegenden Objekts berührt. Fertig. Demo ansehen.

Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.