Flash CS6 Isolde Kommer 1. Ausgabe, Oktober 2012 Grundlagen FLACS6
8 Flash CS6 - Grundlagen 8 Animationen mit Tweens erstellen In diesem Kapitel erfahren Sie wie Sie klassische Tweens erstellen wie Sie Bewegungs-Tweens erstellen wie Sie Form-Tweens erstellen und anpassen wie Sie Animationen testen Voraussetzungen Bild-für-Bild-Animationen erstellen 8.1 Animationen mit klassischen Tweens erstellen Animationen mit Tweens erstellen Das Tweening stammt aus der Zeichentrickfilmbranche. Hier werden traditionell bestimmte Schlüsselbilder erstellt, die den groben Ablauf einer Animation festlegen. Die Schlüsselbilder werden an Zeichner weitergegeben, die die benötigten Zwischenbilder erstellen. Sie können die Zwischenbilder einer Animation von Flash automatisch berechnen lassen. Hier stellt Flash zwei Arten von Tweens zur Verfügung. Klassische Tweens Bewegungs- Tweens Mit klassischen Tweens erstellen Sie eine sogenannte Schlüsselbild-Animation. Sie legen ein Anfangs- und ein Endbild fest und lassen die Zwischenbilder berechnen. (In früheren Versionen von Flash wurde diese Tween-Art als Bewegungs-Tween bezeichnet.) In Flash CS6 können Tweens direkt auf Objekte angewendet werden. Sie markieren ein Objekt auf der Bühne, fügen ein Bewegungs-Tween ein und bestimmen die einzelnen Animationsattribute. Form- Tweens Sie können eine Form sich allmählich in eine andere verwandeln lassen. Beispielsweise verformt sich ein Stern schrittweise in ein Dreieck. Hier legen Sie die Ausgangs- und die Endform fest. Flash erstellt die Bilder für die Zwischenschritte. Verwandlung mit einem Form-Tween Startbild Endbild Von Flash berechnetes Zwischenbild Mit klassischen bzw. Bewegungs-Tweens können Sie beispielsweise schnell bewirken, dass sich ein Insekt über die Bühne bewegt. Soll das Insekt dabei seine Flügel und Beine bewegen, sind entsprechende Einzelbilder notwendig. Eine Animation mit Tweens benötigt weniger Speicherplatz als eine Einzelbild-Animation und kann deshalb im Web schneller geladen werden. 80 HERDT-Verlag
Animationen mit Tweens erstellen 8 Klassische Tweens erstellen Sie können mit Tweens die Eigenschaften einer einzelnen Form, gruppierter Formen oder eines Texts ändern. Sie fügen jeweils ein Schlüsselbild für die Start- und Endposition der Bewegung in die Zeitleiste ein und zeichnen falls erwünscht einen Pfad für die Bewegung. Die Zwischenstadien bzw. einzelne Füllbilder werden von Flash berechnet. Startbild Endbild Pfad Eine Beispielanimation mit klassischen Tweens erstellen Nun legen Sie die Bewegung der steigenden Sonne mit klassischen Tweens statt Einzelbildern fest. Achten Sie beim Erstellen klassischer Tweens darauf, dass Sie das Objekt (eine Gruppe bzw. ein Symbol), das sich bewegen soll, auf einer eigenen Ebene anlegen. Gibt es mehr als eine Gruppe bzw. ein Symbol auf einer Ebene, kann Flash kein Tween erstellen. Öffnen Sie die Beispieldatei Klassiktween. Das Bild auf der Bühne ist schon als Schlüsselbild in der Zeitleiste angelegt und gibt die Startposition der Sonne an. Das Bild wurde auf die drei Ebenen Haus, Sonne und Hintergrund verteilt. Markieren Sie in der Zeitleiste das Bildfeld 30 in allen drei Ebenen und fügen Sie bis hier mit % Füllbilder ein. Damit legen Sie die Dauer der Animation fest. Markieren Sie das Bildfeld 30 in der Ebene Sonne und fügen Sie hier ein neues Schlüsselbild mit & ein. Positionieren Sie im neuen Schlüsselbild die Sonne oben links auf der Bühne, um die Endposition festzulegen. Markieren Sie das erste Schlüsselbild (bzw. ein Füllbild) in der Ebene Sonne und rufen Sie EINFÜGEN - KLASSISCHES TWEEN auf. Der Tween-Bereich wird in der Zeitleiste mit einem Pfeil gekennzeichnet. Bewegen Sie den Abspielkopf. Flash ermittelt die Bewegung der Sonne automatisch. Die Sonne steigt in einer geraden Linie von unten rechts nach oben links. HERDT-Verlag 81
8 Flash CS6 - Grundlagen Tweens entfernen Markieren Sie ein Bildfeld im Tween-Bereich. Rufen Sie EINFÜGEN - TWEEN ENTFERNEN auf. Bewegung mit einem Pfad bestimmen Mithilfe eines Pfads können Sie einen Bogen für die aufgehende Sonne festlegen: Klicken Sie mit der rechten Maustaste auf die Ebene Sonne und rufen Sie KLASSISCHEN PFAD HINZUFÜGEN auf. Eine Pfadebene mit dem Namen Pfad: Sonne wird eingefügt. Markieren Sie die Pfadebene und zeichnen Sie mit dem Freihandbzw. Stiftwerkzeug einen Bogen auf der Bühne. Bevor Sie die Sonne und deren Pfad bearbeiten, ist es hilfreich, die Ebene Haus auszublenden. Klicken Sie hierzu in der Zeitleiste in der Ebene Haus auf den Punkt unter dem Symbol. Markieren Sie in der Ebene Sonne das erste Schlüsselbild. Platzieren Sie die Sonne, sodass der Mittelpunkt der Sonne direkt auf dem Pfadanfang liegt. Markieren Sie in der Zeitleiste das letzte Schlüsselbild und platzieren Sie die Sonne am Ende des Bogens. Der Mittelpunkt der Sonne muss auch hier direkt auf der Pfadlinie platziert werden. Sperren Sie die Ebene mit dem Bewegungspfad, indem Sie den Punkt unter dem Schlosssymbol anklicken. Blenden Sie die Ebene Haus mit einem Klick auf ein. Bewegen Sie den Abspielkopf, um die Animation zu überprüfen. Speichern Sie die Datei mit dem Namen Klassiktween_fertig. Testen Sie die Animation mit S Ü. Pfadebene Bewegungspfad Sonne auf Pfadanfang platziert Bewegungspfad gesperrt 82 HERDT-Verlag
Animationen mit Tweens erstellen 8 8.2 Bewegungs-Tweens erstellen Objektbasierte Animationen erstellen Mithilfe von Tweens können Sie das Aussehen eines Objekts während der Animation verändern. Beispielsweise kann das Objekt langsam wachsen bzw. schrumpfen, im Laufe der Animation eingeblendet bzw. ausgeblendet werden oder sich verfärben. Im folgenden Beispiel wird ein Heißluftballon über die Bühne schweben. Sie definieren den Bewegungspfad und bestimmen, welche Eigenschaften sich während der Bewegung ändern sollen. Schritt 1: Ein Bewegungs-Tween erstellen Öffnen Sie für dieses Beispiel die Beispieldatei BewegungsTween. Klicken Sie im Bedienfeld EIGENSCHAFTEN auf das Register BIBLIOTHEK. Alternative: FENSTER - BIBLIOTHEK oder S l In dieser Datei wurde bereits eine Illustrator-Grafik importiert und in ein Symbol konvertiert. Zusätzlich wurde eine Sternform erstellt und ebenfalls in ein Symbol konvertiert. 2 Vorschau betrachten 3 Vorschau aus der Bibliothek auf die Bühne ziehen und unten links neben Bühne platzieren 1 Symbol Ballon markieren Vergewissern Sie sich, dass das Symbol markiert ist, und rufen Sie EINFÜGEN - BEWEGUNGS-TWEEN auf. Standardmäßig werden 24 Füllbilder (eine Abspieldauer von einer Sekunde) in die Zeitleiste eingefügt und der Abspielkopf befindet sich auf dem letzten Bildfeld. Platzieren Sie das Symbol auf einer neuen Stelle der Bühne, z. B. rechts oben. Ein hellgrüner Bewegungspfad erscheint auf der Bühne. Schritt 2: Den Bewegungspfad anpassen Wenn Sie den Abspielkopf bewegen, sehen Sie, dass der Heißluftballon sich von unten links nach oben rechts bewegt. Den Bewegungspfad können Sie direkt auf der Bühne anpassen. Aktivieren Sie das Auswahlwerkzeug und ziehen Sie einen Punkt auf dem Bewegungspfad in die gewünschte Richtung. HERDT-Verlag 83
8 Flash CS6 - Grundlagen Punkt auf dem Bewegungspfad ziehen, um eine Kurve zu formen Bewegen Sie den Abspielkopf zum Bildfeld 7 und ziehen Sie das Objekt auf der Bühne auf eine neue Position. Der Bewegungspfad wird entsprechend angepasst und ein Diamantsymbol in die Zeitleiste eingefügt. Bewegen Sie den Abspielkopf zum Bildfeld 15 und ziehen Sie das Symbol auf der Bühne auf eine neue Position. Passen Sie den Bewegungspfad mithilfe des Unterauswahlwerkzeugs genau an. Sie können beispielsweise den ganzen Bewegungspfad nach oben, unten, links oder rechts ziehen. Den Anfangs-, den Endpunkt und die Zwischenpunkte des Bewegungspfads können Sie frei positionieren oder den Kurvenverlauf anpassen. 84 HERDT-Verlag
Animationen mit Tweens erstellen 8 Schritt 3: Veränderungen des Objekts definieren Sie veranlassen, dass die Eigenschaften des Ballons sich während der Animation verändern. Bewegen Sie den Abspielkopf zum Bildfeld, bei dem die Veränderung abgeschlossen sein soll. Markieren Sie das Objekt auf der Bühne und nehmen Sie Ihre Änderung gemäß der nachfolgenden Tabelle vor. Sie möchten... das Objekt allmählich vergrößern bzw. verkleinern Aktivieren Sie das Werkzeug FREI TRANSFORMIEREN und verändern Sie die Größe. Sie können auch die Rotation bzw. Neigung des Objekts ändern. das Objekt verfärben Öffnen Sie im Bedienfeld EIGENSCHAFTEN im Bereich FARBEFFEKT das Feld STIL und wählen Sie FARBTON. Legen Sie die gewünschten Werte mithilfe der eingeblendeten Schieberegler bzw. Felder fest. das Objekt schrittweise ein- bzw. ausblenden das Objekt aufhellen bzw. verdunkeln Farbton und Alphawert gleichzeitig ändern Wählen Sie im Feld STIL den Eintrag ALPHA. Wenn das Objekt schrittweise eingeblendet werden soll, müssen Sie den Alphawert für das Objekt im ersten Bild des Tweens ändern. Wählen Sie im Feld STIL den Eintrag HELLIGKEIT. Wählen Sie im Feld STIL den Eintrag ERWEITERT und geben Sie die gewünschten Rot-, Grün-, Blau- und Alphawerte ein. Alternativ können Sie zunächst den Eintrag FARBTON wählen und die Werte mithilfe der eingeblendeten Schieberegler definieren. Danach aktivieren Sie den Eintrag ERWEITERT, um den Alphawert festzulegen. 8.3 Bewegungs-Tweens bearbeiten Die Dauer einer objektbasierten Animation ändern Sie haben beispielsweise eine Animation erstellt, die eine Sekunde dauert, und entscheiden sich nun, die Dauer der Animation auf zwei Sekunden zu verlängern. Ziehen Sie den rechten Rand des blauen Balkens in der Zeitleiste nach rechts, um die Animation zu verlängern, bzw. nach links, um die Animation zu verkürzen. Die Positionen der einzelnen Schlüsselbilder werden proportional angepasst. 1 Balken bis Bildfeld 48 ziehen, um eine Dauer von 2 Sekunden zu definieren HERDT-Verlag 85
Animationen mit Tweens erstellen 8 8.7 Schnellübersicht Sie möchten... ein klassisches Tween erstellen Ein Füllbild in der Zeitleiste markieren, EINFÜGEN - KLASSISCHES TWEEN einen Pfad einer Ebene hinzufügen ein Bewegungs-Tween erstellen die Eigenschaften eines Objekts sich im Laufe der Animation verändern lassen ein Form-Tween erstellen eine Formmarke setzen Formmarken nachträglich einblenden eine Animation auf der Bühne abspielen lassen die Symbolleiste STEUERUNG einblenden eine Animation als Flash-Film betrachten ein neues Dokument mithilfe einer Vorlage erstellen Ebene mit der rechten Maustaste anklicken, KLASSISCHEN PFAD HINZUFÜGEN Objekte markieren, EINFÜGEN - BEWEGUNGS-TWEEN Abspielkopf auf Bildfeld bewegen, oder Bedienfeld EIGENSCHAFTEN, FARBEFFEKTE, STIL EINFÜGEN - FORM-TWEEN MODIFIZIEREN - FORM - FORMMARKE HINZUFÜGEN oder S H h ANSICHT - FORMMARKEN ANZEIGEN Abspielkopf auf gewünschter Startposition in der Zeitleiste positionieren, STEUERUNG - ABSPIELEN oder Ü FENSTER - SYMBOLLEISTEN - STEUERUNG STEUERUNG - FILM TESTEN Flash-Begrüßungsbildschirm, AUS VORLAGEN ERSTELLEN oder DATEI - NEU, Register VORLAGEN 8.8 Übung Eine Animation mit Bewegungs-Tweens erstellen Level Zeit ca. 15 min Übungsinhalte Übungsdatei -- Ergebnisdatei Formen zeichnen Formen in Symbole konvertieren Bewegungs-Tween erstellen Ball&Stern-E Erstellen Sie eine neue Flash-Datei. Erzeugen Sie einen roten Kreis und einen gelben Stern auf der Bühne und konvertieren Sie diese jeweils in Symbole (MODIFIZIEREN - IN SYMBOL KONVERTIEREN). Löschen Sie zunächst den Stern von der Bühne. Markieren Sie den Kreis und fügen Sie ein Bewegungs-Tween ein. Platzieren Sie den Kreis neu, um die Endposition des Tweens festzulegen. HERDT-Verlag 91
8 Flash CS6 - Grundlagen Legen Sie die aus der folgenden Abbildung zu entnehmende Zickzack-Bewegung für den Kreis fest. Bewegungspfad bestimmen Der Farbton des Kreises soll sich direkt nach dem Kontakt mit der Bühnenwand ändern. Bis Bildfeld 13 soll der Kreis sich vergrößern und sich dann bis zum letzten Bildfeld wieder verkleinern. Verlängern Sie die Dauer des Films auf 3 Minuten. Ersetzen Sie den Kreis durch den in der Bibliothek abgelegten Stern. Speichern Sie die Animation unter dem Namen Ball&Stern-E. Testen Sie die Animation. 92 HERDT-Verlag