Synfig Studio, Part 9 – Linien animieren, Write On Effect

Write On-Effect nennt man die Möglichkeit Erweiterte-Umrandungen so zu animieren das man damit Schreibschriften simulieren und Linien-Pfade animieren kann. In diesem Beispiel animieren wir eine Route, vom Anlegeplatz eines Piratenschiffes zu einem verborgenen Schatz.

 

Wichtiger Hinweis

Mit dem Erscheinen von Blender 2.8 und der Weiterentwicklung der 2D-Animation in Blender werden spätestens Anfang 2020 Tutorials zu dem Thema hier erscheinen. Synfig hat hingegen lange gebraucht um sich zu entwickeln und ist dadurch leider stark ins Hintertreffen geraten.

Für Freunde dieser Software und aufgrund der im Gegensatz zu Blender nicht ganz so komplexen Oberfläche bleiben die Synfig-Tutorials erhalten.

 

 

Beispiel

Bisher wurde immer mit Flächen, Regionen und einfache Umrandungen gearbeitet. Für den Write On-Effekt werden Erweiterte Umrandungen benötigt.

Alle Einstellungen zur Linie (erweiterten Umrandung), werden in dem nachfolgend beschriebenen Dialogfenster der Linieneigenschaften vorgenommen.

Das betrifft die leichte Unschärfe von 1 Pixel in den Beispielen, die Linienstärke und die Liniendynamik aus dem der letzten Beispiel-Animation unten.

 

Projekteinstellungen

Zur Zeit verwendet ihr als Projekteinstellungen (Animation – Eingenschaften) noch die Standardwerte, was die Größe von 480 x 270 Pixeln (Bildverhältnis 16:9) betrifft. Im Zeit-Dialog stelle werden 10 Bilder die Sekunde bei einer Dauer von 5 Sekunden eingestellt.

 

PNG-Import

Über Datei – Importieren oder dem Shortcut STRG-I importiert man dann die drei folgenden Dateien: Zuerst die Map (Landkarte) die auch den Hintergrund darstellt. Danach die Route, als Vorlage. Sie wird später ausgeschaltet, kann aber auch nach der Fertigstellung gelöscht werden. Ganz zuletzt importiere man das Piratenschiff, dessen Anfahrt zur Insel ebenfalls animiert werden kann (siehe Bild unten).

 

Pfad aus erweiterter Umrandungslinie

Nun kann auch schon der Streckenpfad gezeichnet werden. Dafür wurde hier das Pfadwerkzeug verwendet, aber – erstmalig in dieser in dieser Tutorialreihe, eine zusätzliche Erweiterte Umrandungs-Ebene verwendet. Alle anderen Buttons bleiben deaktiviert!

Die erweiterte Umrandungslinie bringt Einstellungsmöglichkeiten, die ein normaler Linienpfad nicht mitbringt, hier aber dringend benötigt werden (siehe Bild unten).

Über den Navigator, rechts oben, neben dem Arbeitsbereich stellt ihr einen geeigneten Zoomfaktor ein. Das rot umrandete Feld zeigt den aktuellen Sichtbereich. Der Sichtbereich kann je nach Bedarf (im Navigator selbst) verschoben und angepasst werden. Die Ansicht passt sich im Arbeitsbereich automatisch an (siehe Bild unten).

Man zeichnet nun meinen Pfad so genau wie möglich nach der Vorlage. Noch sieht man keinen Unterschied zu einer normalen Outline. Das werden die späteren Einstellungen erst ändern (siehe Bild unten).

In der Ebenenpalette, rechts unten, neben dem Arbeitsbereich kann die Vorlage der Routen-Ebene schon abschalten werden, indem das Häkchen vor der Ebene deaktiviert wird. Im Prinzip könnte die Ebene auch schon gelöscht werden. Die Deaktivierung führt in jedem Falle dazu, dass dieses Bild auch beim späteren Rendern unsichtbar bleibt (siehe Bild unten).

 

Erweiterte Umrandung – Einstellungen

Jetzt folgt der spannende Teil. Lasst euch durch die Fülle der Einstellungsoptionen nicht verwirren, wir benötigen nur wenige davon! (Siehe Bild unten.)

In der Hauptsache benötigen wir nur den Bereich Breitenpunkt Liste der aufklappen ist. Schlicht und einfach kann man sagen, Breitenpunkt 001 betrifft die Start- und Breitenpunkt 002 betrifft die Zielposition (siehe Bild unten).

Am besten man schaut sich beide Felder einmal gelassen an und vergleicht die Einstellungen. Bisher unterscheiden sich nur die Einstellungen zur Position, alles andere ist zurzeit noch gleich (siehe Bild unten).

Unter Breitenpunkt 001, in der Zeile Seitentyp davor klicken wir auf den voreingestellten Wert Interpolieren, es erscheint daraufhin eine Auswahl und wählen aus dieser Auswahl Flach aus (siehe Animation unten).

Das Gleiche tun wir bei Breitenpunkt 002, aber bei Seitentyp danach (siehe Bild unten).

Anschließend wechselt ihr durch einen Klick auf den grünen Kameraden in den Animationsmodus. Der Animationsmodus trägt das rote Walkcycle-Symbol und der Arbeitsbereich erhält einen roten Rahmen (siehe Bild unten).

In der Zeitleiste springt man auf Bild 1 (Frame 1). Bei beiden Breitenpunkten ist bei Position den Wert 0,0 einzustellen. Das bedeutet das Start- und Endpunkt derzeit auf der gleichen Position liegen und keine Linie auf Frame 1 zu sehen ist. Ihr wechselt nebenan auf das Schlüsselsymbol und setzt für Frame 1 ein Schlüsselbild, indem ihr auf das Pluszeichen im Schlüsselbild-Dialog klickt.

In der Zeitleiste wechsele ihr nun jetzt zum letzten Bild. Um den Write On-Effect abzuschließen, muss jetzt nur noch die Position des Breitpunkt 002 auf den Wert 1,0 setzen. Das bedeutet soviel wie 100 % der Strecke (siehe Bild unten).

 

Vorschaufenster

Eine Vorschau in einem Vorschaufenster ist schöner als die über die Zeitleiste. Über Datei – Vorschau werden die nötigen Einstellungen aufgerufen. Standardmäßig ist die Qualität auf 0,89 gesetzt. Auch hier bedeutet der Wert von 1,0 eine Qualität von 100 %. Die Frame per Sekunde (FPS) setzte ich auf 10, das entspricht den Voreinstellungen für diese Animation (siehe Bild unten).

Links befindet sich der Play- und Pausebutton. Der links markierte Schalter stellt die Animation auf Loop (Endlosschleife). In der Endlosschleife der Effekt sehr gut betrachtet werden (siehe Bild unten).

Habt ihr die leichte Unschärfe des Pfades in den Linieneinstellungen auf 0 (Null) und die Farbe auf Rot eingestellt, sollte eure Animation ausschauen wie in der fertigen Animation unten.

Der Write On-Effect kann auf verschiedenste Weise eingesetzt werden. So könnt ihr beispielsweise Schriftzüge in Schreibschrift animieren und vielerlei mehr.

Viel Spaß und Erfolg beim Animieren eurer Pfade.