Einführung in Animationen mit PI und Gif-Animator

Teil 1: Unterschrift animiert.

Ein animiertes Bild wie dieser Stift unten, ist eine Gif-Datei die
mehrere Bilder hintereinander anzeigen kann, ähnlich wie ein Daumenkino.
Durch das schnelle Wechseln der einzelnen Bilder entsteht der Eindruck von Bewegung.
Wie man solch eine Animation  mit PI und den mit PI mitgelieferten Gif-Animator
selbst erstellen kann, ist Zweck dieses Tutorials.

Das Tutorial bezieht sich auf die Version 10 - 12 von PI
und den Gif-Animator 5 - 5.05

 

 


1.

Öffnen Sie in PI eine neue Seite, 320x200, Farbe wie Sie später den Hintergrund gerne hätten, hier im Beispiel weiß.
 


2.
Kopieren Sie nun den Stift links als Objekt in die neue Leinwand
Vorgehensweise:
Im Browser mit der rechten Maustaste auf den Stift klicken, Kopieren wählen, zu PI wechseln, dort den Menüpunkt: als Objekt einfügen.

Anschließend können Sie den Browser schließen.
 

3.

Erstellen Sie nun in PI den gewünschten Text in der gewünschten Farbe, Größe und Schriftart.
Schieben Sie den Text an die gewünschte Stelle und wandeln Sie den Textzug in ein Bildobjekt um.
Menüpunkt: Objekt - Objekttyp umwandeln - von Pfad/Text zu Bild.
Schieben Sie den Stift an den Beginn des Schriftzuges.
 

4.

Löschen Sie nun den Schriftzug und speichern das gesamte Dokument als z.B. a1.jpg ab.


5.

Nun einmal die UNDO-Taste drücken.
Zum weiteren Bearbeiten ist es nun sinnvoll, wenn Sie die Bildschirmansicht in PI auf 300% vergrößern.

Der Schriftzug erscheint wieder.
Den Stift ein Stück weiter schieben und den Rest des Schriftzuges mit dem Objektradierer löschen.
Anschließend wieder das gesamte Dokument, jetzt z.B. als a2.jpg speichern.
 

6.

Wieder die UNDO-Taste drücken, das der Schriftzug wieder ganz lesbar ist,
den Stift wieder ein wenig weiter schieben, den Rest wieder mit dem Objektradierer löschen.
Wieder speichern, als a3.jpg


7.

Auf diese Weise müssen Sie jetzt Schritt für Schritt die einzelnen Bildteile speichern, bis der gesamte Schriftzug zu sehen ist.
Für das gesamte W in Werner habe ich ca. 6 Einzelbilder,
ansonsten für jeden weiteren Buchstaben 2 Einzelbilder gemacht.
Sie müssen selbst entscheiden, je mehr Einzelbilder desto fließender wird später die Animation, aber auch umso größer wird die später fertige Gif-Datei.
Meistens muss man da einen Kompromiss schließen.
Sie können nun PI schließen und den Gif-Animator öffnen.


Nachdem alle Bilder gespeichert sind, geht es nun weiter mit
dem Gif-Animator.
 

8.

Wenn Sie den Gif_Animator geöffnet haben,
erscheint in der Regel der Startassistent.
Den können wir nun auch verwenden.
Klicken Sie im Startassistent auf Animationsassistent.

9.

Im Animationsassistent müssen Sie die Leinwandgröße einstellen.
Wir nehmen dazu die selbe Größe die wir in PI genommen haben,
in unserem Fall also  320 x 200.
Anschließend auf  -Weiter-

10.

Der Assistent fragt nun:  Video oder Bilder,
Wir wählen Bilder und suchen die Einzelbilder die wir mit PI erstellt haben.
Alle Bilder markieren und auf  -Öffnen- gehen.

Im Assistent wieder auf  -Weiter-
 

 

11.

Als nächstes werden Sie gefragt, wie lange jedes Bild gezeigt werden soll.
Sinnvoll ist es, hier die Bildrate zu verwenden.
Sie können hier ab 18  eingeben, fürs Auge gut ist 24 - 32.

Geben Sie in unserem Beispiel 18 ein.

12.

Jetzt noch auf -Fertigstellen-
das wars dann schon fast.

Klicken Sie auf -Vorschau- und sie sehen ihre Animation.

Sie werden feststellen, das sich die Animation nun immer wieder wiederholt. Das möchte ich etwas ändern. Es soll nach dem letzten Bild eine Pause von ca. 3 Sekunden sein, bis sich die Animation wiederholt.
deshalb gehe ich auf das letzte Bild in der Bilderleiste unten , rechte Maustaste, -Eigenschaften- und stelle folgendes ein:
Verzögerung: 300, das entspricht 3 Sekunden.

Jetzt noch einmal in der Vorschau betrachten, wenn alles passt,
können wir die Animation speichern.

Datei speichern unter: Gif-Datei.

Nun können Sie die Grafik in Ihre Homepage einbinden.