Animationen

von Fries Websolutions

Animationen im Illustrator? Das ist kein Problem! Schauen wir mal, wie wir einen Fisch zum Blubbern bringen können.

Grundgrafik erstellen
Wir haben für dieses Beispiel einen vorhandenen Fisch, aus der Symbol-Palette benutzt.

Tipp: Wir finden diese Vorlage unter > Fenster > Symbole und weitere Beispiele finde wir unter >Fenster > Symbol-Bibliotheken.

Wir klicken einfach auf ein Symbol, und ziehen es auf die Arbeitsfläche..

Animation erstellen und vorbereiten
Um eine Animation erzeugen zu können, brauchen wir natürlich mehrere Bilder und jede Bewegung muss sich in einer eigenen Ebene dann befinden. Wir benutzen hier die Erstellung von Luftblasen.

Wie wir hier sehen, befindet sich der Fisch in jeder Ebene und wird auch nicht weiter verändert. Doch am einfachsten kommen wir ans Ziel, wenn wir die Ausgangsebene immer wieder kopieren, das wird gemacht, in dem die Ebene auf das Blattsymbol im Ebenenfenster ziehen, und nur die Blase verändern. Damit bleibt der Fisch immer an seiner Ausgangsposition, und das Bild fängt auch nicht an zu "zittern".

Auf der Arbeitsfläche sehen wir alle Bilder der Animation jetzt zusammengefügt und wem die vielen Grafiken stören, dann können wir die auszublenden, indem wir auf die Augen, der einzelnen Ebenen, im Ebenenfenster klicken.

Wichtig: Diese Animation wird im Illustrator, in der festgelegten Reihenfolge der Ebenen abgespielt. Denn das erste Bild stellt die zu unterste, dargestellte Ebene dar, daher sollten wir bevor wir die "Animation" exportieren, erst die Reihenfolge der Ebenen festlegen.

Exportieren der Animation
Da ImageReady keine Illustrator-Dateien öffnen kann, müssen diese erst exportiert werden.

Speichern wir nun die fertige Datei in Illustrator ab, und klicken anschließend auf >Datei > Exportieren. Wählen wir jetzt "Photoshop .PSD" aus.

Dann klicken wir auf "Speichern" und nun öffnet sich ein Optionsfenster. Hier wählen wir die gewünschte Auflösung und kontrollieren diese, ob als Farbmodell RGB auch ausgewählt wurde, hier für das Internet reicht eine Auflösung von 72 ppi völlig aus.

ImageReady
Jetzt öffnen wir die exportierte Datei im Programm ImageReady, dafür benötigen wir die "Animations-Palette", um weiter arbeiten zu können. Ist diese nicht auf der Arbeitsfläche eingeblendet, dann ist sie unter > Fenster > Animation > einblenden.

Zuerst sehen wir nur ein Bild, weil die anderen Frames erst aus den bestehenden Ebenen erstellt werden müssen.

Frames erstellen und Abspielgeschwindigkeit festlegen
Hier müssen wir auf den Pfeil, am rechten Rand der Animations-Palette, klicken und dann > Frames aus Ebenen erstellen, auswählen.

Klicken wir nun auf das "Play" Symbol in der Animations-Palette, dann wird die Animation auf der Arbeitsfläche jetzt abgespielt. Wem die Animation zu schnell ist, dann ist hier eine Verzögerung von uns eingebaut. Wollen wir die Verzögerung allen Frames hinzufügen, dann müssen wir alle Frames auswählen. Das geht so: wir klicken zuerst auf den ersten Frame in der Animations-Palette, und dann mit gedrückter Umschalt-Taste auf den letzten Frame, dann klicken wir auf den kleinen Pfeil neben "0,0", unter den Frames, jetzt in weiß dargestellt. Jetzt können wir eine Verzögerung auswählen, oder aber unter:"Andere", eine Zeitangabe selber festlegen.

Soll die Animation nur ein einziges Mal abspielen werden, dann müssen wir auf:"Unbegrenzt", links unten in der Animations-Palette, klicken und da:"Einmal", auswählen, aber selbstverständlich können auch unter: "Andere", jede Anzahl für Wiederholungen eingegeben werden.

Animation optimieren
Der Schritt beschränkt sich nur auf drei einfache Klicks: Erster Schritt, auf den Erweiterungs-Pfeil in der Animations-Palette klicken und da > Animation optimieren auswählen, das sich öffnende Fenster, bei Felder angehakt lassen, und dann auf OK klicken.

Für das Web speichern
Jetzt muss die nun erstellte GIF-Animation für das Internet optimieren,dann klicken wir auf der Arbeitsfläche: auf den Optimiert-Register und dann nehmen wir in der Optimiert-Palette unsere Einstellungen vor.

Wir haben uns hier für "GIF 32 Dithering" entschieden. Dann brauchen wir unsere Einstellungen nur noch unter > Datei > Optimierte Version speichern unter... abzuspeichern.

Damit die Animation in unsere Seite eingefügt werden kann, müssen wir die optimierte Version, nur noch als Bildquelle jetzt angeben.