Dies ist die Fortsetzung von den beiden ersten Teilen:
http://www.digital-workshop.at/animiertes-gif-erstellen-teil-1/
http://www.digital-workshop.at/animiertes-gif-erstellen-teil-2/

Einen Bewegungstween erstellen wieder so wie den “fade in” Effekt.

Zuerst die Ebene wieder einblenden.
Dann auf die Uhr klicken um ein “Keyframe” zu setzen.
Die Textebene an die gewünschte Stelle schieben.

Ich habe es bei diesem Beispiel auserhalb der Arbeitsfläche geschoben um den Text ins Bild reinlaufen
zu lassen.

Dann wieder den Blauen Zeitleisten Regler an die gewünschte stelle schieben.
Und jetzt erst mit dem “Verschiebe Werkzeug” den Text an die richtige Stelle schieben.
Durch das verschieben wird wieder ein passender Keyframe gesetzt.

Dies kann man jetzt weiterverfolgen wie man möchte.
Hier mein Beispiel:

Wie ihr seht ist aber das Ende noch zu lang.
Das kürzen wir jetzt.

Bei dem Blauen Zeitleisten Regler können wir nachsehen wie lang unsere Animation sein soll.
Ich hab hier 3 Minuten ausgesucht da nach 3 Minuten nichts mehr passiert.

Nun rechts bei dem Animationsfenster auf den kleinen Pfeil klicken.

Dann auf “Dokumenteneinstellung”.

Hier stellen ihr den Wert ein den ihr benötigt:

Nun nurnoch abspeichern.

Datei – für Web und Geräte speichern

Hier stellen wir entweder bei der Vorgabe das GIF aus mit den gewünschten Einstellungen
oder einfach links darunter im Dropdown Menü.

Bei “Optionen für Schleifenwiedergabe” kann man noch einstellen ob das GIF einmal oder Unbegrenzt
abgespielt werden soll.

Darunter könnt ihr euch noch das GIF ansehen wie es gespeichert wird und dann noch eventuell etwas ausbessern.

Hier mein “Animiertes GIF” :

Dieses Tutorial ist die Fortsetzung von Teil 1:  http://www.digital-workshop.at/animiertes-gif-erstellen-teil-1/

Zuerst mach ich immer alle Ebenen die ich momentan nicht benötige unsichtbar.
Das macht man mit einem einfachen klick auf das “Auge” Symbol in der Ebenenpalette.

Dann die zu bearbeitetende Ebene aussuchen.

Im Animationfenster wird dann automatisch zur passenden Ebene gesprungen.

Nun auf den kleinen Pfeil klicken der nach rechts zeigt damit wir die Einstellungen bei den Animationen sehen.

Dort wollen wir die “Deckkraft” bearbeiten. Diesen Effekt wählen wir mit einen klick auf die “Uhr” aus.

Sobald wir auf die “Uhr” klicken wird unser erstes “Schlüsselbild”= “Keyframe” gesetzt. Das sagt der Animation das sich ab hier etwas verändert.

Um einen “fade-in” Effekt zu erzielen setzen wir einfach die “Deckkraft” auf 0 %.

Jetzt schieben wir  den blauen Zeitleisten Regler auf die gewünschte Zeit in der unsere Schrift erscheinen soll.
Da kann man am besten ein wenig herumprobieren. Man kann den “Keyframe” im nachhinein einfach verschieben wenn
es nicht passt.

Und sobald wir die “Deckkraft” wieder auf 100% setzen weiß der Animator das sich etwas geändert hat und setzt einen
neuen Keyframe.

Das Ergebnis sieht bis jetzt so aus:

Um das nächste Element zu Animieren wieder die Ebene auswählen. Den Pfeil nach rechts anklicken
damit sich die Einstellungen öffnen. Nun ist aber bereits ein “Keyframe” eingefügt.

Das entfernen wir ganz einfach in dem wir auf die “Uhr” klicken.

Nun den blauen “Zeitregler” an die Stelle schieben in der die Animation starten soll.
Erneut auf die “Uhr” klicken damit ein “Keyframe” eingefügt wird und die “Deckkraft” auf 0% setzen.

Den blauen Regler erneut an die stelle schieben in der der Text erscheinen soll und die “Deckkraft”
auf 100% setzen. Der Animator fügt dann ein Keyframe ein.

Wenn man jetzt den blauen Zeitleistenregler hin und her bewegt sieht man bereits die Animation.

Unsere Animation sieht bis jetzt so aus:

Das wars wieder fürs erste.

Ein Teil kommt noch und in dem zeig ich euch wie man ein “Bewegungstween” erstellt und wie man das
Animierte-Gif richtig abspeichert.

Hier geht es weiter zu Teil 3:
http://www.digital-workshop.at/animiertes-gif-erstellen-teil-3/

Kommentare sind wie immer sehr erwünscht.

Diese Funktion ist leider ein wenig versteckt und auch nicht ganz selbsterklärend.

Da es ein wenig ausführlicher wird hab ich es aufgeteilt.

Hier der Teil 1:

Die Oberfläche

Der Animator funktioniert eigentlich genauso wie Flash. Also wenn ihr schon in Flash Erfahrung habt,
werdet ihr euch hier sehr leicht tun.

Zuerst öffnen wir ein Dokument mit beliebiger Größe.

Ich fange immer damit an das ich mir die Animation quasi komplett Designe, nur vorerst ohne Bewegung.

Erstellt für jedes Objekt eine neue Ebene.

Wenn ihr euren Banner oder dergleichen fertig Designt habt geht es an die Animation.

Die Animations Zeitleiste findet ihr unter “Fenster – Animation”.

Jetzt solltet ihr ein neues Fenster sehen.

Dies ist das Animations Zeitleisten Fenster:

Am Anfang eines neuen Projektes solltet ihr euer Dokument voreinstellen.

Rechts beim Animationsfenster befindet sich ein kleiner Pfeil nach unten.

Diesen Anklicken und die “Dokumenteneinstellungen” aufrufen.

Dort könnt ihr nun die Framerate einstellen. Diese Regelt wieviele Frames/Bilder pro Sekunde abgespielt werden.

Hier kann man fürs Web auf 25 Frames runterstellen.

Auserdem könnt ihr noch die Dauer/Länge eurer Animation voreinstellen.

Nun kommen wir zum Hauptfenster.

In dem gibt es folgende Punkte:

Ebenen:
Sind die Ebenen die wir vorher Erstellt haben. Somit kann man jede Ebene einzeln Ansprechen und Steuern.

Zwiebelschicht:
Kommt noch aus der Zeit des Trickfilmes. Hier kann man die unteren Ebenen aus und einblenden lassen.
Wie wenn Folien aufeinander liegen und man dadurch die untere Folie sieht.

Die Stopuhr:
Mit dieser kann man Eigenschaftsänderungen aktivieren/deaktivieren.
Auf Deutsch heißt das nichts anderes als wenn man etwas verändert muss man einen Start und Endpunkt setzen.
Dazu später mehr.

Position:
Regelt wo sich etwas auf dem Dokument befindet:

Deckkraft:
Regelt wie der Name schon sagt die Deckkraft. Wird benutzt um fade-in und out Effekte zu erstellen.

Stil:
Hier kann man die Ebenenstile steuern. Sprich Schlagschatten,Kontur,Schein nach au?en usw..

Textumbruch:
Kommt nur bei Text Animation.

Das wars vorerst mal fürs Erste. Teil 2 folgt in kürze, dann geht es an die Animation.

Hier geht es weiter zu Teil 2:
http://www.digital-workshop.at/animiertes-gif-erstellen-teil-2/