Jetzt kann der Spaß beginnen.
Wir haben uns mit den Zeichenwerkzeugen von Animate vertraut gemacht und wissen, was ein Symbol ist und wie man damit arbeitet.
Jetzt werde ich ein sogenanntes klassisches Tween erstellen.
Hier klicke ich auf den ersten Keyframe und drücke die Löschtaste.
Zur Erinnerung: Wenn ich auf den Keyframe klicke, wird der gesamte Inhalt des Keyframes ausgewählt.
Darum sind jetzt alle drei Boote ausgewählt.
Ich drücke die Löschtaste.
Jetzt ziehe ich eine neue Instanz des Boot-Symbols auf die Bühne.
Das Boot ist zu groß, daher klicke ich auf das Frei-transformieren-Werkzeug (Free Transform Tool) oder drücke die Q-Taste und verkleinere es von der Ecke aus.
Ich halte dabei die Umschalttaste gedrückt, damit die Proportionen erhalten bleiben.
Ich verschiebe es von der Bühne nach links weg und nenne die Ebene „boat“.
Jetzt habe ich hier einen Keyframe.
Eine Animation besteht aber immer aus mindestens zwei Keyframes: Einer ist der Anfangspunkt, ein zweiter dient als Endpunkt.
Ich lege das Ende bei etwa 3 Sekunden fest.
An der 3-Sekunden-Marke öffne ich das Kontextmenü und wähle „Schlüsselbild einfügen“ (Insert Keyframe).
Nun habe ich zwei Keyframes.
Der erste Keyframe befindet sich links von der Bühne.
Jedes Mal, wenn ich einen neuen Keyframe erstelle, wird der Inhalt des vorherigen Keyframes kopiert.
Im zweiten Keyframe habe ich also dasselbe Boot in derselben Größe an derselben Stelle auf der Bühne.
Ich klicke hierauf und ziehe nach rechts (bei gedrückter Umschalttaste, damit es sich entlang derselben X-Achse bewegt).
Jetzt befindet sich der erste Keyframe links von der Bühne und der zweite rechts von der Bühne.
Ich richte jetzt ein, wie sich das Boot bewegen soll.
Normalerweise wären sogenannte „Inbetween Artists“ involviert, die jetzt die Zwischenbilder zeichnen würden, damit das Boot flüssig über die Bühne schwimmt.
Ich muss aber lediglich auf eine beliebige Stelle zwischen den ersten beiden Keyframes klicken, das Kontextmenü öffnen und „Klassisches Tween erstellen“ (Create Classic Tween) auswählen.
Wenn ich jetzt auf der Zeitleiste (Timeline) scrubbe, bewegt sich das Boot über die Bühne.
So entsteht eine einfache Animation.
Ich möchte eine Hintergrundgrafik einfügen, damit das Boot nicht durch die Luft schwimmt.
Ich erstelle eine neue Ebene und nenne sie „Sky“.
Ich habe bereits zuvor die Bitmap-Grafik „sky“ erstellt.
Sie ist in der Bibliothek (Library).
Diese ziehe ich jetzt auf die Bühne.
In Photoshop habe ich ein von mir erstelltes Bild verwendet.
Ich habe einen Teil des Himmels ausgewählt, kopiert und in eine neue Datei eingefügt.
Dann habe ich die Farbe korrigiert und das Bild in die Creative Cloud-Bibliothek gezogen.
Ich kann es hier in Animate direkt abrufen.
Das ist ziemlich einfach.
Ich ziehe den Himmel unter die Boot-Ebene, um ihn in den Hintergrund zu rücken.
Dann erstelle ich eine weitere Ebene.
Diese nenne ich „water“.
Dann ziehe ich eine Instanz des Wasser-Symbols auf die Bühne.
Ich habe einfach ein Rechteck ohne Kontur gezeichnet.
Wenn ich die Wahltaste bzw.
Alt-Taste gedrückt halte, kann ich per Klicken und Ziehen diese kleinen Punkte entlang der Linie setzen.
Dann ändere ich diese kleinen Kurven.
Ich wähle das Objekt per Klick aus und platziere es in der Bibliothek.
Dazu wähle ich „Modifizieren“ (Modify), „In Symbol konvertieren“ (Convert to Symbol).
Jetzt habe ich hier das Wasser und das Boot.
Vielleicht verschiebe ich das Boot besser unter das Wasser.
Ich klicke auf die Boot-Ebene und schiebe sie zwischen Wasser und Himmel.
Ich drücke die Eingabetaste.
Nicht schlecht.
Ich finde aber, wenn das Boot auf dem Wasser schwimmen soll, muss es sich ein bisschen bewegen.
Ich wähle die Boot-Ebene aus, öffne das Kontextmenü und wähle „Klassischen Pfad hinzufügen“ (Add Classic Motion Guide).
So kann ich einen Pfad zeichnen, auf dem das Boot dann animiert wird.
Eine neue Ebene namens „Pfad“ (Guide) wird erstellt.
Sie enthält einen leeren Keyframe.
Ich klicke auf diesen Keyframe, aktiviere das Freihand-Werkzeug (Pencil Tool) und wähle dafür „Glätten“ (Smooth) aus.
Nun ziehe ich vom Mittelpunkt des Boots aus nach oben und rechts den Wellen entlang und versuche, eine saubere Linie zu zeichnen.
Wenn mir das nicht gelingt, kann ich sie jederzeit verbessern.
Ich kann auch darauf doppelklicken, um sie komplett auszuwählen, und dann mit dem Werkzeug „Glätten“ (Smooth) hier unten die Linie etwas glätten.
Das sieht schon besser aus.
Dann kann ich einfach das Boot auswählen und am Pfad fixieren.
Standardmäßig wird das erste Bild am Pfad fixiert.
Das ist kein Problem.
Ich klicke jetzt auf den zweiten Keyframe.
Beim zweiten Keyframe ist der Mittelpunkt hier.
Ich ziehe ihn nach unten, damit er ebenfalls am Pfad ausgerichtet wird.
Jetzt bemerke ich, dass das Boot hier noch zu sehen ist.
Ich ziehe den Pfad etwas weiter nach rechts.
Dann wähle ich den Keyframe des Boots und ziehe ihn außerhalb des Bilds.
Das Boot wird von der Bühne verschwunden sein in der finalen Version.
Wenn ich auf der Zeitleiste (Timeline) scrubbe, sehe ich, dass sich das Boot entlang des Pfads auf und ab bewegt.
Pfade sind transparent.
Wenn ich eine Vorschau abspiele, wird der Pfad nicht zu sehen sein.
Mir fällt noch auf: Momentan bewegt sich das Boot auf und ab wie ein Karussell.
Ich klicke auf den ersten Keyframe und rufe das Bedienfeld „Eigenschaften“ (Properties) auf.
Dort gibt es die Option „An Pfad ausrichten“ (Orient to path).
Ich klicke darauf.
Jetzt richtet sich das Boot am Pfad aus.
Sieht das nicht gut aus?
Wenn es wirkt, als sei der Seemann oder das Boot betrunken, muss ich darauf achten, dass der erste Keyframe des Boots am Pfad ausgerichtet ist.
Der Pfad neigt sich hier nach oben.
Ich klicke auf das Boot und dann das Frei-transformieren-Werkzeug (Free Transform Tool).
Ich positioniere den Cursor neben der Ecke.
Dieses kleine Werkzeug zum Drehen wird angezeigt.
Damit sorge ich dafür, dass das Boot genauso ausgerichtet ist wie der Pfad.
Diesen Schritt führe ich beim ersten Keyframe und beim zweiten Keyframe durch.
Das ist ziemlich gut.
Es ist ziemlich gerade.
Alternativ kann ich die Linie einfach begradigen und dann das Boot verschieben, bis es daran ausgerichtet wird.
Wenn ich jetzt auf der Zeitleiste (Timeline) scrubbe, sehe ich, wie sich das Boot auf dem Wasser bewegt und sich dabei an einem Pfad orientiert.
Ich starte eine Vorschau der Animation über „Steuerung > Film testen“ (Control > Test Movie).
Oder ich drücke Strg/Befehl+Eingabetaste.
Das Ergebnis ist ein Bewegungs-Tween des Boots entlang eines Pfads.
Im nächsten Tutorial geht es um eine andere Art von Symbol: den sogenannten Movieclip.
Bis dann!
