Animationen – Doppelte Animation

Das ist ein etwas älteres Tutorial und es ist auch nicht sonderlich schick zurecht gemacht (also die Grafik) da ich nur den Effekt zeigen mag und nicht eine fertige Grafik damit.

Ich euch mal die Grundzüge von einer Doppelten Animation. Sprich wie mache ich z.B. sowas hier.

[Bild: cungxkvb.gif]

Ich hab mir jetzt mal zwei fertige Gifs ausgesucht, damit ich da nicht vom Urschleim anfangen muss Und ja es sind nicht meine. Ich hab sogar die Links wo ich sie her hatte aber die Tumblr Accounts gibt es nicht mehr -.-

Meine Beispiele sind nicht mehr online -.- daher sucht euch am besten zum Testen zwei neue oder ihr erstellt euch gerade zwei schlichte Animationen.

Die öffne ich zuerst beide in Photoshop. (Am besten die sind schon fertig bearbeitet und einmal als Gif abgespeichert. Du kannst aber die bearbeitung mit Farbe usw auch später mit der ganzen Doppelani machen, ich denke das muss jeder wissen wie er es am liebsten hat.

Beim öffnen sehe ich, dass die Ani mit Eric 16 Frames hat und die Ani mit Pam 25. Das passt nicht so gut zusammen, daher muss ich bei Pam das ganze auf 16 Frames kürzen in dem ich die Frames die ich nicht haben möchte markiere und durch den Mülleimer in der Animationsleiste lösche.

Jetzt ist Erics Ani 500×280 Pixel groß und Pams 318×179 Pixel. Je nachdem was ich vorhabe muss ich die Größe jetzt noch anpassen.

In dem Fall von diesem Tutorial mach ich das einfach mal 😀
Dazu verkleiner ich die Ani von Eric auf die selbe Größe wie die von Pam (Bearbeiten –> Bildgröße) und wenn das nicht reicht dann noch das zuschneiden über die Arbeitsfläche (Bearbeiten –> Arbeitsfläche)
Danach sollten beide Animationen gleich groß sein.

So weit so gut, die Vorbereitungen musst du natürlich nicht machen, wenn du die Anis selbst erstellst und sie beide gleich groß sind. Daher kommen wir jetzt zum eigentlichen kniff. Die Anis zusammen bringen.

Dazu nehme ich jetzt die Ani von Pam. Markiere unten in der Zeitleiste alle Frames

[Bild: b68a79dm.png]

Dann gibt es an der Zeitleiste am rechten oberen Rand einen kleinen schraffierten Drop-Down-Pfeil auf den klicke ich und wähle dann in dem Kontextmenü welches sich öffnet “Frames kopieren

[Bild: ekbrnwb3.png]

Danach gehe ich auf die Ani von Eric und klicke dort wieder auf den Drop-Down-Pfeil und klicke dort auf “Frames einfügen

[Bild: he6vumgl.png]

Jetzt öffnet sich folgendes Fenster und dort klicke ich an “Über Auswahl einfügen” und mache unten einen Haken bei “Hinzugefügte Ebenen verknüpfen

[Bild: owia8aws.png]

Danach sind beide Anis in einer Datei. Bei beiden ist nun der 1 Frame aktiv.

Und nun beginnt die fisselarbeit Lach daher mach ich das immer nur mit kurzen Anis die max. 20 Frames haben, sonst is das echt ne Strafarbeit.

Zuerst ganz wichtig!!! ALLE ARBEITEN DIE JETZT KOMMEN IMMER IM ERSTEN FRAME AUSFÜHREN!!!! Also klick ich zuerst in der Zeitleiste in den ersten Frame

[Bild: r6wqia62.png]

Jetzt muss ich jedes einzelne Bild von Pam neben in der Ebenenvorschau anklicken und die Ebeneeinstellung auf “Aufhellen” stellen. (Das mach ich bei Anis die dunkel sind. Bei Anis die hell sind, stellt man die Ebeneeinstellung auf Abdunkeln oder Multiplizieren)

Wenn dann wieder nur Bild 1 von Eric und Bild 1 von Pam im ersten Frame angezeigt werden sieht das so aus.

[Bild: 8pppupl5.png]

Jetzt muss man die Zeitleiste wieder etwas kürzen. Durch das kopieren sind es ja nun 31 Frames aber wir wollen ja wieder nur die 16 Frames haben. Daher markiere ich Frame 17-31 und entferne sie durch den Mülleimer in der Zeitleiste.

Und jetzt bring ich meine Animationen zusammen. Dazu klick ich jetzt in die einzelnen Frames und mache die entsprechenden Bilder sichtbar.

Beispiel

Frame 1 = Bild 1 Eric + Bild 1 Pam einblenden rest ausblenden
Frame 2 = Bild 2 Eric + Bild 2 Pam einblenden rest ausblenden
Frame 3 = Bild 3 Eric + Bild 3 Pam einblenden rest ausblenden
usw usw

bis ich am letzten Frame angekommen bin. Das is halt eben fisselarbeit. Aber danach siehts gut aus Lach (vielleicht gibt es auch einen einfacheren Weg als mit dem manuell einzel anklicken aber ich kenn ihn leider nicht. Kniep )

Und im Grunde wars das auch schon. Wenn ich mit dem rumgeklicke durch bin und die Ani starte laufen beide Anis gleichzeitig ab.

Das ganze noch für Web und Geräte speichern und fertig is die Laube. Und das ganze sieht so aus.

[Bild: cungxkvb.gif]

Das is jetzt so das einfachste vom einfachen und ich hab jetzt Farbe oder verschieben oder oder oder weggelassen. Es ging in dem Tutorial mal echt nur um die reine Basicerklärung. Man kanns natürlich noch schick machen Happy

Ihr müsst die Animationen auch nicht ineinander laufen lassen sondern könnt eine Animation links und eine rechts in der Grafik haben, wie ihr das für gut findet. Das ist dann eine Sache von Versuch und Irrtum.


>> Back to Animationen