Inkscape 078 – Animation, Ticker

Natürlich ist ein Ticker als GIF-Animation nicht komfortabel, da er nur mit relativ viel Aufwand aktualisiert werden kann. Für Ticker werden normalerweise Scripte verwendet. Das Prinzip dahinter ist dennoch interessant.

Skills: Easy
Plugin: Nein

 

Mögliche Anwendungsgebiete

  • Ein kleiner Pseudo-Ticker auf einer Webseite, als Eyecatcher. Ein Fake für brandheiße News und wichtige Mitteilungen in eigener Sache.
  • Als Avatar in einem Diskussionsforum
  • Diese Methode des nahtlosen aneinanderreihen kann zu verschiedenen Anlässen immer wieder verwendet werden.  Z.B. wenn es darum geht Farbmuster, hinter Text bzw. einer Maske zu verschieben und zu animieren.

 

Grundprinzip der Funktionsweise

Der Text muss zweimal in einer einzigen Zeile, hintereinander anlegt werden. Ein Text-Teil sollte circa ein Viertel, bis ein Drittel mehr als die gesamte Bildbreite einnehmen. Mehr geht immer, aber weniger als die Bildbreite ist zu wenig.

 

Ebenen Aufbau

Die erste Ebene, die unterste, ist die Hintergrundebene. Ich nenne sie stets BG (Background). Meine Textebene befindet sich in der Mitte. Auf dieser Ebene erstelle ich den Text, der gut 2 Mal so lang wie die Arbeitsfläche sein sollte (siehe Bild unten).

Textebene, in der Mitte

Textebene, in der Mitte

Oben auf liegt die Ebene die einerseits die grafischen Elemente trägt und gleichzeitig als Maske für den einfließenden Text dient (siehe Bild unten).

Maske, ganz oben

Maske, ganz oben

 

Der Text

Im Bild unten sieht man den Aufbau der Textzeile. Ein Satz ist etwas länger als der Ticker-Body. Ein zweiter – identischer –  Satz wird hinzugefügt, um den Endlos-Effekt zu erzeugen.

Text kopieren und hinten anhängen

Text kopieren und hinten anhängen

Die Zwischenräume der Schlagwörter fülle ich mit Dreiecken und gruppiere Text und Trennzeichen (die Dreiecke, damit ich beide gemeinsam verschieben kann (siehe Bild unten).

 

Text-Position und Verschieben

Den Text platziere ich nun an einer Position die ich mir gut merken kann. In diesem Fall ist es das „L“ des Wortes „Meldung…“ Das ist also meine Startposition.

Links am roten Balken das "L" ausrichten

Links am roten Balken das „L“ ausrichten

Jetzt wird der Text immer ein Stück nach links versetzt. Je geringer die Schrittweite, desto mehr Einzelbilder werden es und desto mehr Ebenen wird man in GIMP für die Animation haben. Mehr Schritte, bedeuten kleine Abstände und keine Sprünge. Macht mehr Arbeit, aber sieht edler aus.

Jeder Schritt des Text wird als PNG exportiert. Dann folgt der nächste Schritt. Wieder abspeichern usw. bis der zweite Satz wieder am „L“ angekommen ist.

Exportbereich = Seite -- Bildnummer ändern und Enter-Taste drücken

Exportbereich = Seite. Dateiname nur Nummer ändern und Enter-Taste drücken

In GIMP werden die PNGs dann als Ebenen geladen und als Animation weiterverarbeitet.

 

 

 

 

 

Das könnte Dich auch interessieren …

Translate »