Sie sind auf Seite 1von 106

Peter Bühler

Patrick Schlaich
Dominik Sinner

Animation
Grundlagen · 2D-Animation · 3D-Animation
Bibliothek der Mediengestaltung
Konzeption, Gestaltung, Technik und Produktion von Digital- und Printmedien sind die zentralen Themen der Bibliothek
der Mediengestaltung, einer Weiterentwicklung des Standardwerks Kompendium der Mediengestaltung, das in seiner
6. Auflage auf mehr als 2.700 Seiten angewachsen ist. Um den Stoff, der die Rahmenpläne und Studienordnungen sowie
die Prüfungsanforderungen der Ausbildungs- und Studiengänge berücksichtigt, in handlichem Format vorzulegen,
haben die Autoren die Themen der Mediengestaltung in Anlehnung an das Kompendium der Mediengestaltung neu
aufgeteilt und thematisch gezielt aufbereitet. Die kompakten Bände der Reihe ermöglichen damit den schnellen Zugriff
auf die Teilgebiete der Mediengestaltung.

Weitere Bände in der Reihe: http://www.springer.com/series/15546


Peter Bühler
Patrick Schlaich
Dominik Sinner

Animation
Grundlagen – 2D-Animation – 3D-Animation
Peter Bühler Dominik Sinner
Affalterbach, Deutschland Konstanz-Dettingen, Deutschland

Patrick Schlaich
Kippenheim, Deutschland

ISSN 2520-1050 ISSN 2520-1069 (electronic)


Bibliothek der Mediengestaltung
ISBN 978-3-662-53921-7 ISBN 978-3-662-53922-4 (eBook)
DOI 10.1007/978-3-662-53922-4

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte
bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

Springer Vieweg
© Springer-Verlag GmbH Deutschland 2017
Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Jede Verwertung, die nicht ausdrücklich
vom Urheberrechtsgesetz zugelassen ist, bedarf der vorherigen Zustimmung des Verlags. Das gilt insbesondere für
Vervielfältigungen, Bearbeitungen, Übersetzungen, Mikroverfilmungen und die Einspeicherung und Verarbeitung
in elektronischen Systemen.
Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Werk berechtigt auch
ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Marken-
schutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften.
Der Verlag, die Autoren und die Herausgeber gehen davon aus, dass die Angaben und Informationen in diesem Werk
zum Zeitpunkt der Veröffentlichung vollständig und korrekt sind. Weder der Verlag noch die Autoren oder die Heraus-
geber übernehmen, ausdrücklich oder implizit, Gewähr für den Inhalt des Werkes, etwaige Fehler oder Äußerungen.
Der Verlag bleibt im Hinblick auf geografische Zuordnungen und Gebietsbezeichnungen in veröffentlichten Karten
und Institutionsadressen neutral.

Gedruckt auf säurefreiem und chlorfrei gebleichtem Papier

Springer Vieweg ist Teil von Springer Nature


Die eingetragene Gesellschaft ist Springer-Verlag GmbH Deutschland
Die Anschrift der Gesellschaft ist: Heidelberger Platz 3, 14197 Berlin, Germany
Vorwort

The Next Level – aus dem Kompendium welchen Band Sie in der Hand halten.
der Mediengestaltung wird die Biblio- Die Bibliothek der Mediengestaltung
thek der Mediengestaltung. richtet sich an alle, die eine Ausbildung
Im Jahr 2000 ist das „Kompendium oder ein Studium im Bereich der Digi-
der Mediengestaltung“ in der ersten tal- und Printmedien absolvieren oder
Auflage erschienen. Im Laufe der Jahre die bereits in dieser Branche tätig sind
stieg die Seitenzahl von anfänglich und sich fortbilden möchten. Weiterhin
900 auf 2700 Seiten an, so dass aus richtet sich die Bibliothek der Medien-
dem zunächst einbändigen Werk in der gestaltung auch an alle, die sich in ihrer
6. Auflage vier Bände wurden. Diese Freizeit mit der professionellen Gestal-
Aufteilung wurde von Ihnen, liebe tung und Produktion digitaler oder
Leserinnen und Leser, sehr begrüßt, gedruckter Medien beschäftigen. Zur
denn schmale Bände bieten eine Reihe Vertiefung oder Prüfungsvorbereitung
von Vorteilen. Sie sind erstens leicht enthält jeder Band zahlreiche Übungs-
und kompakt und können damit viel aufgaben mit ausführlichen Lösungen.
besser in der Schule oder Hochschule Zur gezielten Suche finden Sie im An-
eingesetzt werden. Zweitens wird durch hang ein Stichwortverzeichnis.
die Aufteilung auf mehrere Bände die Ein herzliches Dankeschön geht an
Aktualisierung eines Themas wesentlich Herrn Engesser und sein Team des Ver-
einfacher, weil nicht immer das Gesamt- lags Springer Vieweg für die Unterstüt-
werk überarbeitet werden muss. Auf zung und Begleitung dieses großen Pro-
Veränderungen in der Medienbranche jekts. Wir bedanken uns bei unserem
können wir somit schneller und flexibler Kollegen Joachim Böhringer, der nun
reagieren. Und drittens lassen sich die im wohlverdienten Ruhestand ist, für
schmalen Bände günstiger produzieren, die vielen Jahre der tollen Zusammen-
so dass alle, die das Gesamtwerk nicht arbeit. Ein großes Dankeschön gebührt
benötigen, auch einzelne Themenbände aber auch Ihnen, unseren Leserinnen
erwerben können. Deshalb haben wir und Lesern, die uns in den vergange-
das Kompendium modularisiert und in nen fünfzehn Jahren immer wieder auf
eine Bibliothek der Mediengestaltung Fehler hingewiesen und Tipps zur wei-
mit 26 Bänden aufgeteilt. So entstehen teren Verbesserung des Kompendiums
schlanke Bände, die direkt im Unterricht gegeben haben.
eingesetzt oder zum Selbststudium Wir sind uns sicher, dass die Biblio-
genutzt werden können. thek der Mediengestaltung eine zeitge-
Bei der Auswahl und Aufteilung der mäße Fortsetzung des Kompendiums
Themen haben wir uns – wie beim darstellt. Ihnen, unseren Leserinnen
Kompendium auch – an den Rahmen- und Lesern, wünschen wir ein gutes
plänen, Studienordnungen und Gelingen Ihrer Ausbildung, Ihrer Wei-
Prüfungsanforderungen der Ausbil- terbildung oder Ihres Studiums der
dungs- und Studiengänge der Medi- Mediengestaltung und nicht zuletzt viel
engestaltung orientiert. Eine Übersicht Spaß bei der Lektüre.
über die 26 Bände der Bibliothek der
Mediengestaltung finden Sie auf der Heidelberg, im Frühjahr 2017
rechten Seite. Wie Sie sehen, ist jedem Peter Bühler
Band eine Leitfarbe zugeordnet, so dass Patrick Schlaich
Sie bereits am Umschlag erkennen, Dominik Sinner
Vorwort

Bibliothek der Medien-


gestaltung
Titel und
Erscheinungsjahr
Visuelle Digitale Farbe Typografie Digitales Bild Digitale Fotografie
Kommunikation

2017 2018 2017 2017 2017

Zeichen und Grafik AV-Medien Animation Printdesign Druckvorstufe

2017 2018 2017 2018 2018

Druck Crossmedia PDF Webdesign HTML5 und CSS3


Publishing

2018 2019 2018 2017 2017

Webtechnologien Digital Publishing Daten- Informations- Internet


management technik

2018 2018 2019 2019 2019

Medienrecht Medienmarketing Medienworkflow Präsentation Produktdesign

2017 2019 2018 2019 2019

Designgeschichte

2019

VII
Inhaltsverzeichnis

1 Grundlagen 2
1.1 Prinzipien der Animation............................................................................................................... 2
1.1.1 Squash and Stretch......................................................................................................................... 3
1.1.2 Anticipation....................................................................................................................................... 3
1.1.3 Staging............................................................................................................................................... 4
1.1.4 Straight Ahead Action and Pose to Pose.................................................................................... 4
1.1.5 Follow Through and Overlapping Action..................................................................................... 5
1.1.6 Slow In and Slow Out...................................................................................................................... 5
1.1.7 Arcs.................................................................................................................................................... 5
1.1.8 Secondary Action............................................................................................................................ 6
1.1.9 Timing................................................................................................................................................. 6
1.1.10 Exaggeration..................................................................................................................................... 7
1.1.11 Solid Drawing................................................................................................................................... 7
1.1.12 Appeal................................................................................................................................................ 7
1.2 Animationstechniken..................................................................................................................... 8
1.2.1 Historische Animationstechniken................................................................................................. 8
1.2.2 Einzelbild-Animation........................................................................................................................ 9
1.2.3 Schlüsselbild-Animation................................................................................................................. 9
1.2.4 Pfadanimation................................................................................................................................ 10
1.2.5 Morphing......................................................................................................................................... 10
1.2.6 Kinematik......................................................................................................................................... 11
1.2.7 Motion Capture und Performance Capture............................................................................... 12
1.2.8 Reaktion und Interaktion.............................................................................................................. 13
1.3 Aufgaben......................................................................................................................................... 14

2 2D-Animation mit Animate 16


2.1 Einführung....................................................................................................................................... 16
2.1.1 Adobe Animate............................................................................................................................... 16
2.1.2 Entwicklungsumgebung............................................................................................................... 17
2.2 Animate-Projekte.......................................................................................................................... 18
2.2.1 Voreinstellungen............................................................................................................................ 18
2.2.2 Grafiken........................................................................................................................................... 18
2.2.3 Text................................................................................................................................................... 21
2.2.4 Symbole, Instanzen, Bibliothek................................................................................................... 22
2.2.5 Zeitleiste.......................................................................................................................................... 25
2.2.6 Sound und Video importieren...................................................................................................... 27
2.2.7 Veröffentlichen............................................................................................................................... 29
2.3 Animationen................................................................................................................................... 30
2.3.1 Einzelbild-Animation...................................................................................................................... 30
2.3.2 Schlüsselbild-Animation............................................................................................................... 31
2.3.3 Pfadanimation................................................................................................................................ 32
2.3.4 Morphing......................................................................................................................................... 36
2.3.5 Masken............................................................................................................................................ 37
Inhaltsverzeichnis

2.3.6 Inverse Kinematik.......................................................................................................................... 38


2.3.7 Verschachtelte Animationen....................................................................................................... 40
2.4 Programmierung............................................................................................................................ 41
2.4.1 Skriptsprachen............................................................................................................................... 41
2.4.2 Zeitleiste steuern........................................................................................................................... 41
2.4.3 Dynamischer Text.......................................................................................................................... 44
2.4.4 Dynamische Bilder........................................................................................................................ 47
2.4.5 Sound steuern................................................................................................................................ 48
2.4.6 Animationen.................................................................................................................................... 51
2.5 Aufgaben......................................................................................................................................... 55

3 3D-Animation mit Cinema 4D 60


3.1 Einführung....................................................................................................................................... 60
3.1.1 Maxon Cinema 4D.......................................................................................................................... 60
3.1.2 Entwicklungsumgebung............................................................................................................... 60
3.2 Animationen................................................................................................................................... 63
3.2.1 Einfache Schlüsselbild-Animation.............................................................................................. 63
3.2.2 Kombinierte Schlüsselbild-Animation........................................................................................ 65
3.2.3 Animation mit Deformer................................................................................................................ 69
3.2.4 Pfadanimation................................................................................................................................ 71
3.2.5 Spezial-Animationen..................................................................................................................... 74
3.3 Texturen........................................................................................................................................... 76
3.3.1 Texturen erstellen.......................................................................................................................... 76
3.3.2 Texturen zuweisen......................................................................................................................... 79
3.4 Szenen............................................................................................................................................. 80
3.4.1 Umgebung....................................................................................................................................... 80
3.4.2 Licht.................................................................................................................................................. 82
3.5 Rendern........................................................................................................................................... 83
3.6 Aufgaben......................................................................................................................................... 86

4 Anhang 90
4.1 Lösungen......................................................................................................................................... 90
4.1.1 Grundlagen..................................................................................................................................... 90
4.1.2 2D-Animation mit Animate........................................................................................................... 91
4.1.3 3D-Animation mit Cinema 4D....................................................................................................... 93
4.2 Links und Literatur........................................................................................................................ 95
4.3 Abbildungen................................................................................................................................... 96
4.4 Index................................................................................................................................................ 97

IX
1.1 Prinzipien der Animation
1 Grundlagen

Charakteranima-
tion im Film Ace
Age 3

animare [lat.]: Das Wort Animation kommt etymolo­ Frank Thomas und Olie Johnston ha­
Leben einhau­ gisch aus der lateinischen Wortfamilie ben in ihrem 1981 erschienenen Buch:
chen, beseelen „animus, anima = Lebenshauch, Seele“ „The Illusion of Life – Disney Anima­
und „animare = Leben einhauchen, be­ tion“ in dem Kapitel „The 12 Principles
seelen“. Ziel einer Animation ist es also of Animation“ die zwölf grundlegenden
nicht, Dinge nur zu bewegen, sondern Animations­prinzipien Disneys darge­
Dinge zum Leben zu erwecken. Nutzen stellt. Die für den klassischen Zeichen­
Sie die Möglichkeiten der Animation trickfilm aufgestellten Grundsätze sind
nicht um der Technik oder der Effekte auf andere Animationsmedien bzw.
willen, sondern machen Sie – wie bei -techniken übertragbar. Egal ob Sie eine
jeder Gestaltung – Ihren Aussage­ Bild-für-Bild-Animation, eine Tweening-
wunsch, Ihre Botschaft zur Basis und Animation oder Charakteranimation mit
Moti­vation für den Einsatz animierter Kinematik erstellen.
Elemente. Dies gilt für animierte Me­ Animationen lassen sich in einem
nüs, bei denen die Auswahl der Inhalte Buch nicht oder nur unzulänglich dar­
und verschiedene Schaltzustände stellen. Wir empfehlen Ihnen deshalb,
visualisiert werden, für Textanima­tionen sich die „12 principles of animation“
und animierte Infografiken bis hin zu als Videos von Alan Becker auf YouTube
komplexen Charakteranimationen. anzusehen.

Animierte Menü-
punkte

© Springer-Verlag GmbH Deutschland 2017


P. Bühler, P. Schlaich, D. Sinner, Animation, Bibliothek der Mediengestaltung,
DOI 10.1007/978-3-662-53922-4_1
Grundlagen

1.1.1 Squash and Stretch


Squash and Stretch, auf Deutsch Stau­
chung und Dehnung, ist das grundle­
gende Prinzip zur Animation bewegter
Objekte. Die elastische Verformung
durch die Wirkung der physikalischen
Kräfte bei der Bewegung verleiht dem
Körper Lebendigkeit. Durch den Grad
und die Art der Verformung kann der
Betrachter auf Masse und Festigkeit
des Materials des animierten Objektes
schließen. Bei figürlichen Bewegungs­
abläufen und Charakteranimationen
können Sie durch übertriebene Verfor­
mung auf einfache Weise das Spiel der
Figur unterstützen. Beachten Sie dabei
aber immer die physikalischen und
physiologischen Gesetzmäßigkeiten. Im
Beispiel bleibt das Volumen des Balles
trotz der Verformung immer konstant.

1.1.2 Anticipation
Anticipation, die Vorwegnahme zukünf­ eine bestimmte Stelle gelenkt. Anticipa­
tigen Geschehens, bedeutet in der Ani­ tion ist auch wichtig, um der Aktion eine
mation die Vorbereitung des Betrach­ natürliche Anmutung zu geben. Bewe­
ters auf die nachfolgende Aktion. Der gungen und Handlungen erfolgen auch
Betrachter bemerkt, dass etwas passie­ im „richtigen Leben“ nicht ansatzlos. Im
ren wird, und ist gespannt darauf, wie Beispiel holt der Sportler in den ersten
es passiert. Durch die Anticipation wird vier Phasen Schwung, bevor er den Ball
die Aufmerksamkeit des Betrachters auf wirft.

3
Blick erkennen, was in der dargestellten
Szene wichtig ist. Bedenken Sie, dass
die Bilder einer Animation im Unter­
schied zu einem Einzelbild nur kurz zu
sehen sind. Auf alle unnötigen Details
muss deshalb verzichtet werden.

1.1.4 Straight Ahead Action and


Pose to Pose
Straight Ahead Action und Pose to
Pose beschreiben zwei unterschiedliche
Vorgehensweisen zur Erstellung von
Bewegungsabläufen.
Bei Straight Ahead Action beginnen
Sie mit der ersten Phase der Animation
und entwickeln diese bis zum Ende der
Animation Schritt für Schritt weiter. Im
1.1.3 Staging Beispiel ist dies die Bewegung eines
Volleyball-Spielers.
Staging meint die Inszenierung der Bei Pose to Pose planen Sie zunächst
Objekte und Darsteller auf der Bühne. den Ablauf der gesamten Animation.
Dazu gehören neben der konkreten Ani­ Danach beginnen Sie mit der Erstellung
mation vor allem der gezielte Einsatz wichtiger Schlüsselbilder (Keyframes).
der Kamera und das Setzen des Lichts. Die fehlenden Zwischenpositionen kön­
Ziel des Stagings ist es, die gewünschte nen dann durch den Computer berech­
Stimmung und Wirkung auf den Be­ net und eingefügt werden.
trachter zu erzielen. Er muss auf einen

4
Grundlagen

1.1.5 Follow Through and Over-


lapping Action
Follow Through heißt auf Deutsch
durchziehen oder zu Ende bringen, mit
Overlapping Action ist gemeint, dass
sich Bewegungen überlagern. Ähnlich
wie Sie durch die Anticipation eine
Handlung vorbereitet oder eingeleitet
haben, schließen Sie jetzt die Animation
ab. Beachten Sie dabei, dass Bewe­
gungen nicht abrupt enden, sondern
kontinuierlich ausschwingen. Rechts ist
dies am Beispiel des roten Mantels dar­
gestellt, der die Bewegung der Person
überlagert und ihr folgt. Die Animation
wirkt hierdurch flüssig und realistisch.

1.1.6 Slow In and Slow Out


Jedes Objekt besitzt eine sogenannte
träge Masse, die bei der Beschleuni­
gung erst einmal überwunden wer­
den muss. Eine Bewegung beginnt
deshalb langsam. Im Beispiel rechts
wird der Geschwindigkeitsverlauf des
Einrad-Fahrers durch die rote Kurve
dargestellt. Am Ende der Bewegung
findet der umgekehrte Vorgang statt,
der Radfahrer muss bis zum Stillstand
abbremsen.

1.1.7 Arcs
Natürliche harmonische Bewegungen
folgen in ihrem Verlauf meist einer
bogenförmigen Bahn. Die Bewegung
von Dingen folgt physikalischen Ge­
setzmäßigkeiten. So ist z. B. der waag­
rechte Wurf eines Balls eine überlagerte
Bewegung aus einer gleichförmigen
Bewegung mit einer bestimmten Ge­
schwindigkeit in Richtung der x-Achse
und einer gleichmäßig beschleunigten
Bewegung (freier Fall) gegen die Rich­
tung der y-Achse.

5
überlagern und von diesen ablenken.
Sekundäre Handlungen in einer Szene
ergänzen und unterstützen die eigent­
liche primäre Handlung. Dadurch wer­
den Ihre Animationen lebendiger und
interessanter.

1.1.9 Timing
Die zeitliche Strukturierung und Abfolge
der Animation bestimmt wesentlich
die Wirkung auf den Betrachter. Die
Geschwindigkeit einer Bewegung löst,
bei gleichem Bewegungsablauf und
Umfeld, beim Betrachter unterschied­
liche Empfindungen aus. Schnelle
Bewegungen wirken hektisch, nervös
oder aktiv und dynamisch. Langsame
Bewegungen dagegen sind langweilig,
entspannt oder vorsichtig.
Durch das richtige Timing können
Sie auch Objekteigenschaften charakte­
1.1.8 Secondary Action risieren. Große Objekte bewegen sich
i.d.R. langsamer und träger als kleine
Menschen bewegen beim Sprechen Objekte. Ein Zeppelin bewegt sich maje­
nicht nur die Lippen. Die gesamte stätisch durch die Luft – ein Düsenjet
Mimik, Gestik und Körperhaltungen zieht schnell vorbei.
sind Teil der Kommunikation. Das reine Mit den Beschleunigungs­ und
Sprechen ist in unserem Beispiel die Bremsphasen nach dem Prinzip von
Primary Action, alles andere ist Teil Slow In and Slow Out legen Sie nur die
der Secondary Action, der sekundären Verhältnisse der Objektbewegung fest.
Handlung. Natürlich dürfen die sekun­ Die Gesamtdauer und Anmutung der
dären Handlungen nicht Selbstzweck Geschwindigkeit bestimmt das Timing
sein oder gar die primären Handlungen der Animation.

6
Grundlagen

1.1.10 Exaggeration
Natürliche Darstellung durch Übertrei­
bung? Tatsächlich wirken ausdruck­
starke Darstellungen erst durch gezielt
eingesetzte Übertreibungen. Das
Animationsprinzip der Exaggeration,
der Übertreibung, betont das Wesent­
liche der Darstellung. Die bloße Abbil­
dung der Realität wirkt meist blass und
langweilig

1.1.11 Solid Drawing


Ursprünglich bezog sich dieses Prinzip
auf die manuellen Zeichentechniken der
Trickfilmanimation. Aber auch für die
Arbeit mit einer Animationssoftware
gilt: Arbeiten Sie die animierten Objekte
sorgfältig aus. Nutzen Sie die Möglich­
keiten der Pfadanimation (siehe Seite
10) sparsam. Denn erst durch die Varia­
tionen gut gemachter und gestalteter
Schlüsselbilder, Keyframes, wird eine
Animation lebendig und dadurch für
den Betrachter attraktiv.
Ein weiterer wichtiger Punkt ne­
ben der sorgfältigen Ausarbeitung
ist die Beachtung der physikalischen
Regeln. Berücksichtigen Sie bei der
Animation eines Objektes die Perspek­
tive, die Masse und das Gewicht, die
Geschwindigkeit eines Objektes, aber
auch die Beleuchtung einer Szene und
den Standpunkt der Kamera bzw. des
Beobachters.

1.1.12 Appeal
Die animierten Objekte und Charakte­
re brauchen Persönlichkeit. Dadurch
wirken sie nicht nur lebendig, sondern
auch auf den Betrachter anziehend.
Auch hässliche oder bedrohliche Fi­
guren brauchen Charisma, um auf den
Betrachter nicht abstoßend zu wirken.

7
1.2 Animationstechniken

1.2.1 Historische Animationstech-


niken
Der Eindruck einer fließenden Bewe­
gung bei Animationen entsteht durch
eine schnelle Abfolge von einzelnen Bil­
dern. Schon im 19. Jahrhundert wurden
verschiedene Apparaturen konstruiert,
um beim Betrachter die Illusion eines
bewegten Bildes zu erzeugen.
Beim Praxinoskop schaut der Be­
trachter durch die Schlitze eines sich
drehenden Zylinders auf einen in den
Zylinder gelegten Pappstreifen mit ei­
ner aufgemalten oder gedruckten Bild­
folge. Durch die schnelle Rotation des
Zylinders sieht der Betrachter durch die Mutoskop (1896)
vorüberziehenden Schlitze jeweils ein
weiteres Bild der Bildserie und nimmt Aufnahmen einer bewegten Szene
diese als Bewegung wahr. Die unten in einer Abfolge abzuspielen und zu
dargestellte Weiterentwicklung erlaubt projizieren. Damit war der technologi­
mit Hilfe einer Spiegelkonstruktion die sche Schritt zur modernen Filmtechnik
Projektion des Bildes an die Wand. gemacht. Parallel zum klassischen Film
wurden schon um 1900 die ersten ani­
mierten Filme produziert.

Praxinoskop (1877)

Mit dem Mutoskop wurde das Prinzip


des Daumenkinos mechanisiert. Bis
zu 1500 Bilder waren auf der zentralen
radial angeordneten Walze befestigt.
Durch die Walzendrehung wurden die
Bilder nacheinander durchgeblättert
und durch das Okular betrachtet.
Der Kinematograph, von den Ge­
brüdern Lumière 1896 in Lyon gebaut,
ermöglichte es erstmals, fotografische Kinematograph (1892)

8
Grundlagen

1.2.2 Einzelbild-Animation (zweidimensionalen) Materialien, z. B.


aus Papier, Pappe oder Stoff
Bei den im vorherigen Abschnitt vorge­ ƒƒ Knetanimation
stellten Techniken entsteht der Eindruck Animationsfilm durch Verformung
einer Bewegung dadurch, dass Ein­ von Knet oder ähnlichem Material
zelbilder in schneller Abfolge nachei­ ƒƒ Puppenanimation
nander gezeigt werden. Dieses Prinzip Animation von Puppen, die einen
kennen Sie vermutlich als sogenanntes relativ starren, aber dennoch beweg­
Daumenkino. lichen Korpus haben
Die Einzelbild-Animation, auch als ƒƒ Einzelbild-Animation am Computer
Bild-für-Bild-Animation bezeichnet, ist Auch mittels Computersoftware
die ursprünglichste Animations­t­ech­nik. lassen sich Einzelbild-Animationen
Sie wurde im vergangenen Jahrhundert erzeugen. Bekanntestes Beispiel sind
zunehmend perfektioniert. Allen voran GIF-Animationen, die v. a. als Werbe­
ist hier der große Pionier des Zeichen­ banner auf Webseiten zu finden sind.
trickfilms, Walt Disney (1901– 1966), Eine Anleitung zur Erstellung von
zu nennen. Erst mit dem Computer Einzelbild-Animationen mit Adobe
war die Ära des klassischen Zeichen­ Animate finden Sie auf Seite 30.
trickfilms besiegelt, weil mit ihm neue
Animationstechniken möglich wurden. 1.2.3 Schlüsselbild-Animation
Dennoch kommen Einzelbild-Anima­
tionsfilme aufgrund ihres besonderen Die Produktion von Animationen aus
Charmes auch heute noch zum Einsatz Einzelbildern ist eine aufwändige Ange­
und werden als Stop-Motion-Filme legenheit, da Sie viele Bilder – z. B. 15
bezeichnet. Ihr Vorteil besteht darin, Bilder pro Sekunde – erstellen müssen,
dass sie ohne aufwändiges Equipment um eine flüssige und ruckelfreie Anima­
hergestellt werden können. Im Prinzip tion zu erhalten.
genügt eine Digitalkamera mit Stativ. Mit dem Aufkommen von Computern
Wichtige Gattungen sind: wurde eine neue Form der Animation
ƒƒ Brick-Animation möglich, bei der nicht mehr jedes ein­
Animation von Figuren oder Objekten zelne Bild, sondern nur noch sogenann­
aus Lego oder Playmobil te Schlüsselbilder (engl.: Keyframes) A
ƒƒ Cut-Out-Animation erstellt werden. Schlüsselbilder befin­
Animation von ausgeschnittenen den sich an der Anfangs- und Endposi­

A A
B

Brick-Animation Keyframe-Animation

9
tion der Bewegung. Die Zwischenbilder Aufwärtsbewegung wird der Ball lang­
B werden von der Software berechnet samer, die Anzahl an Bildern nimmt
und in korrekter zeitlicher Abfolge in der deshalb zu. Bei der Abwärtsbewegung
Zeitleiste eingefügt. beschleunigt er, die Anzahl nimmt des­
Diese Animationstechnik wird auch halb wieder ab.
als Tweening (von between, dt: da­ Die Animation wirkt noch realis­
zwischen) bezeichnet. Ein Tutorial zur tischer, wenn sich der Ball während des
Erstellung von Schlüsselbild-Anima­ Fluges dreht und er mit zunehmender
tionen mit Adobe Animate finden Sie Entfernung kleiner und in seiner Farb­
ab Seite 31. sättigung reduziert wird.

1.2.4 Pfadanimation 1.2.5 Morphing


Auch bei dieser Animationsart handelt Der Begriff Morphing leitet sich aus der
es sich um eine Schlüsselbild-Anima­ Morphologie, der Wissenschaft von den
tion, nur dass Sie auf der Animations­ Gestalten und Formen, ab. In der Com­
fläche oder, bei dreidimensionalen putergrafik und Animation bedeutet
Animationen, im virtuellen Raum den Morphing immer Gestaltwechsel oder
Weg (Pfad) vorgeben können, dem das -veränderung. Dazu werden zwei oder
animierte Objekt in seiner Bewegung mehr Bilder durch die Berechnung von
folgt. Auf diese Weise erreichen Sie, Zwischenbildern ineinander überführt.
dass sich ein Objekt nicht zwingend Nachdem Sie in der Morphingsoftware
linear von A nach B bewegt, sondern die Ausgangsbilder festgelegt haben,
einer beliebigen Kurve folgen kann. Die wählen Sie die gestalterisch markanten
Geschwindigkeit der einzelnen Bewe­ Punkte des Quell- und Zielbildes aus.
gungsphasen ergibt sich aus der Anzahl Die Software berechnet nun nach Ihren
an Zwischenbildern: Je mehr Zwischen­ Vorgaben die Morphingsequenz als
bilder vorhanden sind, umso länger Einzelbilder oder z. B. als Video. Beim
dauert die Bewegung. Im Screenshot Abspielen der Animation nimmt der
wird jedes Zwischenbild durch einen Betrachter das Morphing als Transfor­
schwarzen Punkt dargestellt. Bei der mation der Gestalt, z. B. des Gesichts

Pfadanimation Morphing

10
Grundlagen

einer Person in eine andere Person, geplant, bei einem Schritt ist dies das
oder als Transformation von Formen Hüftgelenk. Ihm folgen das Knie- und
und Gegenständen wahr. im letzten Schritt das Fußgelenk. Die
Die Filmindustrie erkannte das Abbildung illustriert dies:
enor­me Potenzial computergenerierter
Animationen früh. Bereits in den Acht­
zigerjahren des letzten Jahrhunderts
entstanden die ersten Filme, die sich
dieser Technik bedienten. Beispiele
sind Who Framed Roger Rabbit (1988),
Willow (1988), Terminator 2 (1991) oder
Jumanji (1995).

1.2.6 Kinematik
Die Kinematik ist ein Teilgebiet der Me­
chanik. Ihr Gegenstand ist die Geome­
trie von Bewegungen, ohne dabei die
Ursache der Bewegung (Kräfte) zu be­
achten. Von besonderem Interesse sind
hierbei sogenannte Mehrkörpersys­
teme, bei denen mehrere Körper über
Gelenke miteinander verbunden sind.
Beispiele für Mehrkörpersysteme sind
Roboter, Getriebe und Motoren.
Nun fragen Sie sich, was das al­
les mit Animation zu tun hat. Der Kinematik eines Schrittes
Zusammenhang besteht darin, dass
sich auch Menschen oder Tiere als Die Methode ist relativ aufwändig, so
Mehrkörpersys­teme beschreiben dass sowohl in der Robotik als auch in
lassen, da auch hier einzelne Körper der Animationstechnik häufig die umge­
(Knochen) über Gelenke miteinander kehrte Vorgehensweise bevorzugt wird.
verbunden sind.
Die Erkenntnisse der Kinematik las­ Inverse Kinematik (Rückwärtskinematik)
sen sich deshalb auch für eine realis­ Im Gegensatz zur Vorwärtskinematik
tisch und natürlich wirkende Bewegung wird bei der inversen Kinematik nicht
bei animierten Figuren heranziehen. vom Ausgangspunkt, sondern vom
Um beispielsweise einen Schritt zu Endpunkt einer Bewegung ausgegan­
animieren, muss die Figur an drei gen. Am Beispiel eines Schrittes wäre
Gelenken (Hüftgelenk, Kniegelenk und dies die Position der Figur nach dem
Fußgelenk) bewegt werden. Hierzu wer­ Schritt. Per Software kann nun berech­
den zwei Verfahren unterschieden: net werden, wie sich das Skelett bzw.
die Gelenke bewegen müssen, um
Vorwärtskinematik diesen Endzustand zu erreichen. Hierzu
Bei der Vorwärtskinematik wird eine muss im Vorfeld für jedes Gelenk defi­
Bewegung vom Ausgangspunkt her niert werden, um welche Achsen und

11
A

B A
B
A

Inverse Kinematik
um wieviel Grad es gedreht werden von Charakteren kommen deshalb reale
kann, da sonst unrealistische Bewe­ Schauspieler zum Einsatz. Beim Motion
gungsabläufe entstehen. Capturing werden die Bewegungen
Die inverse Kinematik ist die wich­ des Schauspielers durch eine Kamera
tigste Technik zur Animation von erfasst und einem Computer übertra­
Bewegungen einer Figur oder eines gen. Dieser ist mit einer mustererken­
Objekts. Alle 3D- und die fortgeschritte­ nenden Software ausgestattet, die aus
nen 2D-Animationsprogramme ermög­ den Aufnahmen ein dreidimensionales
lichen die Erstellung von Einzelbild- und Drahtgittermodell errechnet. Die Bewe­
Zeitleisten-Animationen mit inverser gungen des Schauspielers werden so­
Kinematik. mit synchron auf das Drahtgittermodell
Im Beispiel sehen Sie die Anima­ übertragen. Im nächsten Schritt wird
tion eines Baggers mit Adobe Animate. das Drahtgittermodell gerendert, also
Er besitzt drei Gelenke A, die mittels mit einer Oberfläche versehen, und in
sogenannter Bones (dt.: Knochen) die gewünschte Umgebung eingefügt.
B miteinander verbunden werden. Performance Capturing geht noch
Die Schaufel kann in die gewünschte einen Schritt weiter und erfasst die
Endposition bewegt werden, und die minimalen Bewegungen der Gesichts­
Software berechnet die für die Anima­ muskulatur, die bei mimischen Ge­
tion erforderlichen Zwischenbilder. Eine sichtsausdrücken gleichzeitig oder
Anleitung zur Erstellung von Anima­ nacheinander aktiviert werden. Dies ist
tionen mit inverser Kinematik finden ein aufwändiger Prozess. Um Lachen zu
Sie auf Seite 38. können, brauchen wir etwa 50 Muskeln!
Es ist deshalb erstaunlich, wie natür­
1.2.7 Motion Capture und Perfor- lich computergenerierte Charaktere in
heutigen Filmen wirken.
mance Capture
Einige Filmbeispiele, die sich der
Für die Ansprüche an heutige compu­ oben erwähnten Techniken bedienen,
teranimierte Filme (CGI = Computer sind: Der Polarexpress (2004), King
Generated Imagery) oder an Computer­ Kong (2005), Avatar – Aufbruch nach
spiele reichen selbst die Möglichkeiten Pandora (2009), Planet der Affen (2011)
der inversen Kinematik nicht mehr aus. oder die Neuverfilmung von Tarzan
Für eine noch realistischere Darstellung (2013).

12
Grundlagen

1.2.8 Reaktion und Interaktion somit nicht durch eine Fülle an Infor­
mationen überfordert.
Bisher haben wir uns damit beschäftigt, ƒƒ Animierte Icons (rechts: Windows 10)
wie sich möglichst (foto-)realistisch zeigen dem Nutzer z. B. den Lade­
wirkende Animationen erstellen lassen. zustand der Batterie, die Lautstärke
Diese kommen vor allem beim Spiel­ oder die Signalstärke des WLANs an.
film, bei Computerspielen und in der ƒƒ Fehlende oder falsche Angaben beim
Werbung zum Einsatz. Ausfüllen von Formularen werden op­
Im Bereich der digitalen Medien, also tisch hervorgehoben, um den Nutzer
z. B. bei Apps oder im World Wide Web, zur korrekten Eingabe aufzufordern.
sind animierte GIF-Grafiken, fliegende ƒƒ Bei Smartphones können Sie zwi­
Schriften oder blinkende Buttons nervig schen den Apps oder in Fotos blät­
und deshalb abzulehnen. Dennoch spie­ tern. Die Animation erinnert an das
len Animationen auch hier eine Rolle, Umblättern in einem Buch. Hierdurch
auch wenn ihnen eine andere Bedeu­ soll dem Nutzer die Bedienung ver­
tung zukommt. ständlich gemacht werden.
Im Unterschied zum Spielfilm, der
vom Betrachter passiv konsumiert wird, Animation zur Benut-
handelt es sich bei digitalen Medien zerführung
meistens um interaktive Medien, bei Das Blättern zwischen
den Apps erinnert an
denen der Nutzer aktiv eingreifen und
das Umblättern von
beispielsweise entscheiden kann, wohin Buchseiten. Diese
er als Nächstes navigieren möchte. Zur Metapher hilft dem
Steuerung nutzt er die Maus oder Tasta­ Nutzer bei der Bedie­
nung des Geräts.
tur oder, im Falle mobiler Endgeräte,
seine Finger oder Stimme.
In allen Fällen erwartet der Nutzer
eine schnelle Reaktion oder Rückmel­
dung des Systems. Sie können dies mit
einem Lichtschalter vergleichen: Geht
das Licht nicht sofort an, dann sagen
Sie: Das Licht ist kaputt. Nutzer erwar-
ten eine sofortige Reaktion, tritt diese
nicht ein, sind sie verunsichert.
Animationen können dazu beitragen,
die Reaktion auf Benutzereingaben zu
visualisieren. Beispiele sind:
ƒƒ Buttons ändern ihre Farbe oder Form,
wenn der Nutzer den Mauszeiger
darauf bewegt – ein sogenannter
Mouseover-Effekt. Der Nutzer weiß,
dass diese Fläche anklickbar ist.
ƒƒ Die Menüpunkte einer Website sind
nicht komplett sichtbar, sondern
klappen auf, wenn der Nutzer einen
Menüpunkt antippt. Der Nutzer wird

13
1.3 Aufgaben

1 Begriff „Animation“ erklären 4 Einzelbild- von Schlüsselbild-Anima­


tion unterscheiden
Erklären Sie den Begriff „Animation“.
a. Beschreiben Sie den wesentlichen
Unterschied zwischen Einzelbild- und
Schlüsselbild-Animationen.

2 Animationsprinzipien kennen

Zählen Sie vier der 12 Grundprinzipien b. Nennen Sie jeweils einen Vorteil.
der Animation nach Walt Disney auf.
Vorteil Einzelbild-Animation:
1.

2.

3.
Vorteil Schlüsselbild-Animation:
4.

3 Animationsphasen scribbeln

Scribbeln Sie die fehlenden Phasen zur


Animation einer sich setzenden Figur. 5 Animationspfad festlegen

Beachten Sie, dass sich die Länge von Zeichnen Sie auf dem Billardtisch rechts
Ober- und Unterschenkel nicht ändern oben den Animationspfad ein, damit
darf und dass eine Drehung nur an den die Kugel
Gelenken (rote Punkte) möglich ist.

Aufgabe 3

14
Grundlagen

a. über die untere Bande ins obere


mittlere Loch,
b. über zwei Banden ins obere rechte
Loch gespielt wird.
Achten Sie auf eine physikalisch kor­
rekte Bewegung der Kugel.

6 Inverse Kinematik erläutern

Erläutern Sie die Erstellung einer Ani­


mation nach dem Prinzip der inversen
Kinematik.

Aufgabe 5

8 Animationspfad festlegen

Die Animation einer Seifenkiste soll 2 s


dauern und mit 10 Bildern pro Sekunde
abgespielt werden.

a. Berechnen Sie die erforderliche


Anzahl an Zwischenbildern zwischen
den beiden (roten) Keyframes.
7 Buttons animieren

a. Erklären Sie, weshalb die Animation


von Buttons, z. B. beim Berühren
mit der Maus oder beim Anklicken, b. Zeichnen Sie die Zwischenbilder
sinnvoll ist. als Punkte auf der roten Linie ein.
Beachten Sie dabei, dass sich die
Geschwindigkeit der Seifenkiste ent­
sprechend dem Bahnverlauf verän­
dern sollte.
Aufgabe 8

b. Nennen Sie drei Möglichkeiten, wie


Buttons animiert werden können:
1.

2.

3.

15
2.1 Einführung
2 2D-Animation mit Animate

2.1.1 Adobe Animate z. B. für Webseiten oder Apps,


ƒƒ audiovisuelle Anwendungen, z. B.
Aus Flash … Video-Streaming,
Knapp 20 Jahre war Flash führend im ƒƒ Rich Internet Applications (RIAs), also
Bereich der Web-Animationen. Software, die ohne Installation direkt
Doch Flash war – im Unterschied via Internet genutzt werden kann, z. B.
zu den offenen Standards HTML5 und Computerspiele, Navigations- und
CSS3 – ein proprietäres, firmeneigenes E-Learning-Systeme.
Format. Zum Abspielen von Flash-Ani-
mationen war der Flash-Player erfor- Kein Player erforderlich!
derlich. Steve Jobs von Apple hatte sich Flash ist letztlich daran gescheitert, dass
jedoch geweigert, diesen Player in iOS zum Abspielen eine spezielle Software
bzw. den Browser Safari zu integrieren, namens Flash-Player erforderlich war.
so dass Flash-Filme auf iPhones und Mit HTML5, CSS3, JavaScript, Can-
iPads nicht abspielbar waren. Hierdurch vas haben sich hingegen – zur Freude
sahen sich große Portale wie YouTube­ der Entwickler – Technologien durch-
gezwungen, von Flash-Videos auf gesetzt, die quelloffen sind, und damit
HTML5-Videos umzusteigen. weltweit von jedermann frei genutzt
werden können. Das Internetkonsor-
… wurde Animate tium W3C trägt für die erforderliche
Mittlerweile hat Adobe reagiert und An- Standardisierung Sorge.
fang 2016 als Flash-Nachfolger Animate Adobe geht mit Animate folgenden
auf den Markt gebracht. Animate ist Weg: Animate-Anwendungen werden
Bestandteil der Adobe Creative Cloud in einem proprietären Dateiformat
(CC). Wer Flash kennt, dem wird der (Endung wie bei Flash: .fla) gespeichert.
Umstieg leicht fallen, weil die Bedie- Zur Nutzung im Web erfolgt der Export
nung fast identisch geblieben ist. Neu in eine HTML5-/JavaScript-Datei. Damit
ist, dass Adobe Animate auf offene ist das Abspielen auf allen Endgeräten
Standards setzt und Animationen z. B. und Betriebssystemen möglich, voraus-
in HTML5- und JavaScript-Dateien gesetzt, dass im Browser Java­Script
exportiert werden können. aus Sicherheitsgründen nicht deakti-
Adobe Animate stellt eine komplette viert wurde.
Entwicklungsumgebung für interaktive
multimediale Anwendungen bereit. Ausblick
Mit ihr können nicht nur Animationen, Adobe Animate ist seit 2016 auf dem
sondern komplette interaktive Anwen- Markt. Ob die Software den Stellenwert
dungen realisiert werden. Hierfür wurde erlangen wird, den Flash hatte, ist heu-
die Flash-eigene Programmiersprache te noch nicht abschätzbar.
Action­Script  3.0 bei Animate integriert. Es könnte sich aber wieder einmal
Typische Einsatzgebiete für Animate- als genialer Schachzug von Adobe
Applikationen könnten sein: erweisen, dass das „Look & Feel“ von
ƒƒ Animationen aller Art – von einfachen Animate exakt mit Flash übereinstimmt.
Bild-für-Bild-Animationen bis zu 3D- Der Umstieg auf Animate wird damit
Animationen mit inverser Kinematik, für frühere Flash-Entwickler einfach und
ƒƒ interaktive Benutzeroberflächen für könnte ein Anreiz sein, zukünftig mit
Online- und Offline-Anwendungen, dieser Software zu arbeiten.

© Springer-Verlag GmbH Deutschland 2017


P. Bühler, P. Schlaich, D. Sinner, Animation, Bibliothek der Mediengestaltung,
DOI 10.1007/978-3-662-53922-4_2
2D-Animation

2.1.2 Entwicklungsumgebung im Film jedoch nicht. Über die Zoom-


funktion D können Sie die Darstellung
Wenn Sie mit Adobe-Produkten wie der Bühne vergrößern oder verkleinern.
Photoshop, Illustrator oder InDesign Die Zeitleiste E können Sie mit einer
vertraut sind, werden Sie sich auf der früheren Filmrolle vergleichen, die
Animate-Benutzeroberfläche schnell zu- abgespult und durch einen Projektor
rechtfinden, da diese an die genannten bewegt wurde. Der Unterschied ist,
Produkte angepasst wurde. dass bei Animate der Film feststeht und
Stellen Sie als Grundlayout Ihrer Be- sich dafür der Abspielkopf F bewegt.
nutzeroberfläche in der oberen Menü­ Beim Abspielen bewegt er sich von
leiste Klassisch A ein. Dadurch werden links nach rechts über die Zeitleiste. Alle
die Werkzeuge B zur Erstellung und Be- Objekte, z. B. Texte oder Bilder, die sich
arbeitung von Objekten am linken Rand im Kästchen unter dem Abspielkopf in
platziert, wie Sie dies von den anderen Ebene 1 befinden, werden dargestellt.
Programmen gewohnt sind. Wie bei Photoshop und Illustrator
Die weiße Fläche in der Mitte heißt ist es auch bei Animate unerlässlich,
Bühne C – sie ist der eigentliche Ort mit sinnvoll bezeichneten Ebenen bzw.
des Geschehens. Alle Objekte, die sich Ebenengruppen zu arbeiten. Achten Sie
auf der Bühne befinden, sind später vor allem auf eine strikte Trennung von
sichtbar: Grafiken, Animationen, Texte, statischen Objekten, z. B. einem Hinter-
Videos, Buttons. Objekte im grauen grundbild, und animierten Objekten,
Bereich außerhalb der Bühne sind zwar da sonst schnell der Überblick verloren
in der Entwicklungsumgebung sichtbar, geht.

A Die Entwicklungsum-
B F gebung von Adobe
Animate
E Die Benutzerober-
fläche wurde an die
anderen Produkte der
Adobe Creative Suite
bzw. Creative Cloud
angepasst.
D

17
2.2 Animate-Projekte

2.2.1 Voreinstellungen 6 Wie bei Photoshop und Illustrator


können Sie im Menü Ansicht > Line-
Bereits zu Beginn Ihres Projekts sollten ale ein horizontales und vertikales
Sie wichtige Voreinstellungen vorneh- Lineal einblenden, aus dem sich mit
men. gedrückter Maustaste Hilfslinien auf
die Bühne ziehen lassen.
Making of …
7 Ein Gestaltungsraster können Sie
1 Legen Sie über Datei > Neu... ein im Menü Ansicht > Raster einstel-
neues Projekt an. Belassen Sie es len. Ebenfalls im Menü Ansicht
bei der Grundeinstellung HTML5 legen Sie unter Ausrichten fest,
Canvas A. wie Objekte an Hilfslinien bzw. am
Raster ausgerichtet werden sollen.
2 Legen Sie die Bühnengröße B fest:
Breite x Höhe in Pixel. Beachten 2.2.2 Grafiken
Sie, dass der Rechenaufwand mit
zunehmender Größe steigt. Zur Erstellung und Bearbeitung von
Grafiken gibt es zwei Möglichkeiten:
3 Die Bildrate C, also die Anzahl der
Bilder pro Sekunde [BpS], spielt bei Grafikmodus – Making of …
Animationen eine wichtige Rolle. Ist
sie zu niedrig, „ruckelt“ die Anima­ Der Grafikmodus ermöglicht eine indi-
tion. Ist sie zu hoch, kommt der viduelle Bearbeitung von Objekten bzw.
Prozessor nicht mit und der Film von deren Bestandteilen. Hierin unter-
stockt. Die Grundeinstellung von 24 scheidet sich Animate von Illustrator.
BpS ist fürs Erste ein guter Wert.
1 Zeichnen Sie ein Objekt mit Kontur
4 Falls Sie keinen eigenen Hinter- und Füllung, z. B. ein Rechteck.
grund wünschen, geben Sie hier die
Hintergrundfarbe der Bühne D vor. 2 Wenn Sie nur die Kontur bearbeiten
wollen: Doppelklicken Sie auf die
Voreinstellungen 5 Beenden Sie die Voreinstellungen Kontur, danach können Sie diese lö-
eines Animate-Pro- mit OK. schen, verschieben, umfärben oder
jekts die Strichstärke ändern E.

3 Um nur die Füllung bearbeiten zu


können, klicken Sie einmal auf die
Füllung F.
A
B 4 Die Kombination von Kontur und
Füllung erhalten Sie durch Doppel-
klick auf die Füllung G.
C
D 5 Animate ermöglicht die direkte Ver-
änderung der Form eines Objekts:
Berühren Sie die Kontur hierzu mit

18
2D-Animation

Eigenschaften einer
E Form
Neben der Kontur-
und Füllfarbe lassen
sich die Strichstärke
und Art der Kontur
einstellen.
F
I

1 Aktivieren Sie den Objektzeich-


nungsmodus I.

H 2 Zeichen Sie ein Objekt, z. B. ein


Rechteck.

3 Klicken Sie mit dem Auswahl-


werkzeug J auf das Objekt: An der
hellblauen Konturlinie erkennen
Sie, dass es sich um ein zusammen-
der Maus (Mauszeiger ändert sich) hängendes Objekt handelt.
J
und ziehen Sie die Teilkontur da-
nach mit gedrückter Maustaste H. 4 Um das Objekt im Grafikmodus zu
bearbeiten, klicken Sie auf Teilen K.
6 Sich überlagernde Objekte werden
verbunden. Wenn Sie nachträglich L
ein Teilobjekt verschieben, wird der
überlappende Teil aus dem unteren
Objekt ausgeschnitten. K
M O
N
Grafikwerkzeuge
Die Grafikwerkzeuge entsprechen in
ihrer Funktion den Grafikwerkzeugen in
Illustrator und Photoshop – wir gehen
hier nicht näher darauf ein: P

Objektzeichnungsmodus – Making of … ƒƒ Zeichenstift L


ƒƒ Freihand M
In diesem Modus werden grafische ƒƒ Einfacher Pinsel N
Elemente – wie Sie das von Illustrator ƒƒ Pinsel mit unterschiedlichen Strich-
kennen – als zusammengehörige Ob- Stilen O
jekte behandelt. ƒƒ Radiergummi P

19
Farbeinstellungen ermöglicht, Objekte mit einer Füll-
In Animate können farbe zu versehen, selbst wenn die
Sie RGB-Farbwerte Kontur des Objekts nicht komplett
definieren, lineare
geschlossen ist.
oder radiale Farbver-
läufe erstellen oder
Texturen importieren. G Bild-/Grafikimport – Making of …
H Sind Sie ein Fan der Animate-Grafik
E geworden? Wenn nicht, dann können
Sie Bilder bzw. Grafiken aus Photoshop
F
bzw. Illustrator importieren:

1 Wählen Sie im Menü Datei > Impor-


tieren > In Bühne importieren. (Auf
Farben und Farbverläufe – Making of … die Möglichkeit, in die Bibliothek zu
importieren, gehen wir später ein.)
1 Wählen die Konturfarbe A bzw. Füll- Neben Illustrator-Dateien (AI) und
farbe B in der Werkzeugleiste. Photoshop-Dateien (PSD) können
Sie auch GIF-, PNG-, JPG- oder
2 Verwenden Sie den Fülleimer C, um SVG-Dateien importieren.
die Füllung eines Objekts mit der
gewünschten Farbe zu versehen. 2 Eine wichtige Option ist, dass Sie in
Illustrator oder Photoshop ange-
3 Verwenden Sie das Tintenfass D, legte Ebenen in Animate-Ebenen K
I um die Kontur eines Objekts mit der umwandeln können.
gewünschten Farbe zu versehen.

4 Das Menü Fens­ter > Farbe bietet


einige zusätzliche Möglichkeiten:
ƒƒ Farbangaben als RGB-Werte E
ƒƒ Transparenz über Alphakanal F
ƒƒ Linearer oder radialer Farb­-
verlauf G
ƒƒ Verwenden von Texturen H
C
D 5 Zur Bearbeitung von Farbverläufen
steht in der Werkzeugleis­te hinter
dem Frei-Transformieren-Werkzeug
ein Farbverlaufs-Werkzeug I bereit.
Es ermöglicht beispielsweise,
A lineare Farbverläufe zu drehen oder
B den Mittelpunkt radia­ler Farbver-
K
läufe zu verändern.

J 6 Ein interessantes Tools ist das


„Lücke schließen“-Werkzeug J: Es

20
2D-Animation

Text formatieren
Animate stellt etliche
Funktionen zur Ver-
fügung, die Sie aus
Satzprogrammen wie
InDesign kennen.

C
A

B B

2.2.3 Text Texterfassung – Making of …

Adobe Animate unterscheidet drei Alle unveränderlichen (statischen) Texte


Arten von Textfeldern: Ihres Projekts erstellen und formatieren
ƒƒ Statischer Text Sie direkt in Animate.
Text, der in Animate erstellt wird. Er
ist in der späteren Anwendung unver- 1 Wählen Sie das Textwerkzeug A der
änderlich. Werkzeugleiste aus und klicken Sie
ƒƒ Dynamischer Text an einer beliebigen Stelle auf die
Text, der aus einer Datei oder Da- Bühne.
tenbank in Animate eingefügt wird,
wird als dynamisch bezeichnet. 2 Geben Sie den Text manuell ein
Dynamischer Text wird immer dann oder kopieren Sie ihn aus einer
benötigt, wenn der Text veränderbar Textverarbeitung ins Textfeld.
sein muss, z. B. zur Anzeige eines
Börsenkurses. Mehr hierzu finden Sie 3 Passen Sie die Größe des Textfelds
auf Seite 44. durch Ziehen der kleinen Quadrate
ƒƒ Eingabetext B wie gewünscht an.
Text, der in der späteren Anwendung
durch den Nutzer verändert werden 4 Zur Formatierung des Textes stehen
kann, z. B. in einem Formular. Ihnen unter den Eigenschaften
Diese Option ist nur möglich, wenn rechts mit den Paletten Zeichen C
die Datei mit ActionScript 3.0 erstellt und Ab­satz D die in der Textver-
wird. arbeitung üblichen Optionen zur
Verfügung.

21
2.2.4 Symbole, Instanzen, Bibliothek
Bisher haben Sie das Erstellen oder D
Importieren von Grafiken und Bildern
Zeichen und Grafik Digitales Bild A
sowie die Texterfassung kennengelernt.
B
Um zu jeder Zeit in Ihrem Projekt darauf
C
zurückgreifen zu können, ist es sinnvoll,
diese an zentraler Stelle zu hinterlegen.
Adobe Animate stellt hierfür eine rahmens, bei einer Grafik durch
­Bibliothek zur Verfügung. Um die Umrahmung der Grafik mit ge-
Grafiken und Texte Ihres Projekts in drückter linker Maustaste. (Alterna-
der Bibliothek speichern zu können, tiv können Sie das Lasso-Werkzeug
müssen diese in sogenannte Symbole verwenden.)
umgewandelt (konvertiert) werden.
Bei Webapplikationen geht es ­immer 3 Wählen Sie im Menü Modifizieren
auch darum, durch geringe Daten- > In Symbol konvertieren oder ma-
mengen kurze Ladezeiten zu erhalten. chen Sie einen Rechtsklick und wäh-
Dies spielt insbesondere bei Grafiken, len Sie In Symbol konvertieren …
Sounds und Videos eine ­wichtige Rolle.
Um dies zu erreichen, wird jedes Objekt 4 Geben Sie Ihrem Symbol einen
einmalig als sogenanntes Symbol aussagekräftigen Namen D.
gespeichert und kann aber beliebig oft
verwendet werden. Animate unterschei- 5 Wählen Sie den Symboltyp, z. B.
det drei Typen von Symbolen: Movieclip A, und bestätigen Sie
ƒƒ Movieclip-Symbole A mit OK. Das in ein Symbol konver-
benötigen Sie immer dann, wenn Sie tierte Text- oder Grafikobjekt wird
Animationen erstellen wollen. Sie durch einen dunkelblauen Rahmen
erhalten eine eigene Zeitleiste. gekennzeichnet.
ƒƒ Schaltflächen-Symbole B
dienen, wie der Name sagt, zur 6 Wählen Sie im Menü Fenster >
Erstellung von Buttons oder anderer Bibliothek. Das neue Symbol taucht
anklickbarer Elemente. dort auf.
ƒƒ Grafik-Symbole C
werden für alle stati­schen Elemente Jedes Symbol der Bibliothek kann im
Ihres Films verwendet, z. B. Hin- Animate-Projekt beliebig oft eingesetzt
tergründe, Grafiken. Animationen werden. Die Verwendung eines Sym-
sind zwar auch hier möglich, jedoch bols auf der Bühne wird als Symbolin-
unflexibler. stanz oder kurz Instanz bezeichnet.

Symbol erstellen – Making of … Instanzen erstellen – Making of …

1 Wählen Sie das Auswahlwerkzeug F. 1 Ziehen Sie ein Symbol E mit ge-
drückter Maustaste auf die Bühne.
2 Markieren Sie das Objekt, aus dem
ein Symbol erstellt werden soll: 2 Wiederholen Sie den Vorgang, um
Bei Text durch Anklicken des Text­ weitere Instanzen zu erzeugen.

22
2D-Animation

Symbole und In­stan­


G zen
Um ein Objekt, z. B.
F Text oder Grafik,
steuerbar zu machen,
H muss es in ein
Sym­bol konvertiert
werden. Danach steht
es in der Bibliothek
zur Verfügung.
E Instanzen sind
Kopien des Symbols
auf der Bühne. Wie
zu sehen ist, können
sich Instanzen z. B. in
Farbe und Größe vom
Original unterschei-
den.

Jede Instanz kann individuell in Form Symbol ändern – Making of …


und Aussehen verändert werden:
1 Um Symbole bearbeiten zu können,
3 Klicken Sie hierzu die gewünschte doppelklicken Sie entweder auf eine
Instanz mit dem Auswahlwerkzeug Instanz des Symbols oder auf das
F an. Symbol E in der Bibliothek.

J I
4 Wählen Sie Eigenschaften G, um
Änderungen der Farbe, Helligkeit
oder Durchsichtigkeit (Alpha) vorzu-
nehmen. 2 Am oberen Bühnenrand erkennen
Sie, dass Sie sich nun im Bearbei-
5 Wählen Sie das Frei-Transformie- tungsmodus des Symbols (hier:
ren-Werkzeug H, um die Größe Luftballon) befinden I.
zu ändern oder um die Instanz zu
drehen. 3 Zur Bearbeitung des Symbols
stehen Ihnen sämtliche Grafik-
Die Änderungen einer Instanz wirken werkzeuge zur Verfügung – siehe
sich nicht auf das Symbol selbst aus. Abschnitt 2.2.2.
Umgekehrt gilt dies nicht: Die nachträg-
liche Änderung des Symbols wirkt sich 4 Verwirrend ist, dass Sie auch im
auf alle Instanzen des Symbols aus. Bearbeitungsmodus eines Symbols
Hier ist also Vorsicht geboten! eine Zeitleiste sehen: Diese hat
nichts mit der Hauptzeitleiste Ihres
Projekts zu tun, sondern gehört zum

23
Symbol. Wir werden diese Symbol-
zeitleiste später nutzen, um innere
Animationen zu erstellen. Dies
könnten bei einem animierten Auto
die sich drehenden Räder sein. Die
äußere Animation (auf der Haupt-
zeitleiste) ist dann die Bewegung
des Autos.

5 Um den Bearbeitsmodus des Sym-


bols wieder zu verlassen, klicken
Sie entweder auf den blauen Pfeil
oberhalb der Bühne (J vorige Seite)
oder doppelklicken Sie auf die Büh-
ne. Die Änderungen wirken sich auf
alle Instanzen aus.

3 Konvertieren Sie die Grafik in ein


Symbol. Wählen Sie in diesem Fall
die Option Schaltfläche.

4 Um die Schaltfläche zu duplizieren,


rechtsklicken Sie in der Bibliothek
auf das Symbol und wählen Dupli-
zieren.

5 Geben Sie der Kopie einen aussa-


Oft kommt es vor, dass Sie Symbole gekräftigen Namen.
in mehreren Varianten benötigen, z. B.
Schaltflächen, die einen unterschied- 6 Doppelklicken Sie auf das dupli-
lichen Text erfordern, aber ansonsten zierte Symbol, um den Text zu
identisch sind. Mit Instanzen ist dies verändern.
nicht möglich. Es bietet sich jedoch an,
ein bereits erstelltes Symbol zu ver- 7 Verlassen Sie den Bearbeitungs-
vielfältigen und danach die Kopie zu modus durch Anklicken des Pfeils A
ändern. links oberhalb der Bühne.

Symbol duplizieren – Making of … A

1 Entwerfen Sie einen Home-Button,


z. B. wie im Screenshot dargestellt.
8 Wiederholen Sie die Schritte 4 bis 7
2 Markieren Sie die Grafik. für die weiteren Schaltflächen.

24
2D-Animation

E F G

A B C H I

2.2.5 Zeitleiste 4 Die gerade aktive Ebene erkennen


Sie am Stift-Icon D. Sie können
Die Zeitleiste ist die Steuerzentrale Ihres sie mit gedrückter Maustaste nach
Animate-Projekts: In der Zeitleiste legen oben oder unten verschieben.
Sie fest, welche Objekte wann und wie
lange sichtbar sein sollen. 5 Um die Ebene auszublenden, kli-
Der Umgang mit der Zeitleiste erfor- cken Sie in der Ebene auf den Punkt
dert einige Übung. Wir versuchen des- unter dem Auge-Icon E.
halb zunächst, Ihnen den Aufbau und
das Prinzip der Zeitleiste zu erklären. 6 Um ein wesentliches Verschieben
In senkrechter Richtung der Zeitleiste oder Löschen der Elemente zu
sind die Ebenen angeordnet. Die Ebe- verhindern, ist es sinnvoll, fertig
nentechnik ist Ihnen aus Programmen bearbeitete Ebenen zu sperren
wie Photoshop, Illustrator oder InDe- (Schloss-Icon F).
sign bekannt. Ebenen ermöglichen eine
strukturierte Anordnung von Objekten, In waagrechter Richtung der Zeitleis­
wobei obere Ebenen untere Ebenen te befindet sich die Zeitachse. Beim
überdecken. Bei Animate sollten Sie Abspielen der Animation läuft der rote
grundsätzlich mit Ebenen arbeiten Abspielkopf G von Bild 1 nach rechts,
und für den Hintergrund, Bilder, Texte, wobei die eingestellte Anzahl an Bildern
Animationen, Sound und Video immer pro Sekunde [BpS] H die Geschwindig-
eigene Ebenen verwenden. keit bestimmt.
Die Einstellung 24 BpS besagt, dass
Ebenen – Making of … der Abspielkopf nach einer Sekunde in
Bild 24 angelangt ist. Zwischen Bildern
1 Durch Anklicken des Blatt-Icons A und Zeit I besteht folgender Zusam-
werden neue Ebenen erzeugt. Diese menhang:
sollten Sie durch Doppelklick auf
den Namen sinnvoll benennen. Abspieldauer einer Animation

2 Wie bei Photoshop und Illustrator t=


B
[s]
können Sie Ebenen zu Gruppen BpS
zusammenfassen B.
t: Gesamtdauer in Sekunden
3 Um eine markierte Ebene zu B: Gesamtanzahl der Bilder (frames)
löschen, klicken Sie auf das Papier- BpS: Bilder pro Sekunde (Bild- oder Framerate)
korb-Icon C.

25
E
D
C
B
A

Symbole können nicht direkt in der 4 Weitere Schlüsselbilder


Zeitleiste platziert werden. Aus einem Um eine Ebene mit weiteren
Symbol muss immer erst eine Instanz Schlüsselbildern D zu versehen, kli-
auf der Bühne erstellt werden. Diese cken Sie ins gewünschte Kästchen
Instanz wird in ein leeres Schlüsselbild und wählen Einfügen > Zeitleiste >
der Zeitleiste eingefügt. Schlüsselbild oder nach Rechtsklick
Schlüsselbild einfügen.
Zeitachse – Making of …
5 Schlüsselbilder verschieben
1 Leeres Schlüsselbild Markieren Sie die Schlüsselbilder,
Erzeugen Sie eine neue Ebene. Die- die Sie verschieben möchten, mit
se enthält immer ein leeres Schlüs- gedrückter Maustaste. Markierte
selbild in Bild 1. Leere Schlüssel- Bilder werden hellblau E darge-
bilder werden durch einen weißen stellt. Verschieben Sie danach die
Kreis A symbolisiert. markierten Bilder.

2 Schlüsselbild mit Inhalt versehen 6 Nicht benötigte Bilder oder Schlüs-


Klicken Sie auf ein leeres Schlüssel- selbilder können Sie löschen, in-
bild. Ziehen Sie nun ein Symbol aus dem Sie diese markieren und nach
der Bibliothek auf die Bühne (nicht Rechtsklick Bilder entfernen wählen.
in die Zeitleis­te!) – eine Instanz wird
erstellt. Das Schlüsselbild mit Inhalt 7 Sie können Ihre Animation mittels
wird durch einen schwarzen Kreis B Play-Button F oder per Return-Taste
symbolisiert. abspielen.

3 Schlüsselbild verlängern Ein Animate-Projekt besitzt nicht nur


Um ein Schlüsselbild beim Abspie- eine Zeitleiste – jedem Symbol ist eine
len über mehrere Bilder anzuzeigen, eigene Zeitleiste zugeordnet. Sie öffnen
müssen Sie es verlängern: Klicken diese Zeitleiste durch Doppelklick auf
Sie hierzu in das Kästchen, an dem das Symbol. Eine Besonderheit stellen
das Schlüsselbild enden soll. Wäh- Schaltflächen-Symbole dar, da sich
len Sie Einfügen > Zeitleiste > Bild deren Zeitleiste von der „normalen“
oder nach Rechtsklick Bild einfügen. Zeitleiste unterscheidet. Dies hat den
Ein weißes Rechteck C kennzeichnet Grund, dass eine Schaltfläche ein inter-
das Ende des Schlüsselbilds. aktives Element ist, das auf Benutzer-
verhalten (optisch) reagieren sollte.

26
2D-Animation

A B C D anklickbaren Bereich, indem Sie ein


Rechteck zeichnen, das größer ist
als das Textfeld. Wichtig: Der aktive
Bereich ist für den Nutzer unsicht-
bar! Es handelt sich lediglich um
Schaltflächen animieren – Making of … eine Maske, die den anklickbaren
Bereich definiert.
1 Erstellen Sie ein neues Symbol des
Typs Schaltfläche oder doppelkli- 2.2.6 Sound und Video importieren
cken Sie – falls vorhanden – auf
eine bereits bestehende Schaltflä- Sounds und Videos lassen sich auf
che. Die Zeitleiste bietet die Mög- einfache Weise in Ihr Animate-Projekt
lichkeit, vier Zustände einer Schalt- integrieren, indem sie in die Bibliothek
fläche zu definieren. importiert und im gewünschten Schlüs-
selbild auf der Bühne platziert werden.
2 Grundzustand „Auf“ A In Animate können Sie folgende
Der schwarze Kreis zeigt, dass sich Audioformate importieren:
hier bereits ein Schlüsselbild befin- ƒƒ WAV: Sounddateien ohne Qualitäts-
det. Es enthält die Schaltfläche in verlust, aber mit großer Datenmenge
ihrem Grundzustand. ƒƒ MP3: Sounddateien mit Qualitätsver-
lust, der aber bei einer Bitrate von 128
3 Zustand „Darüber“ B kbit/s oder höher vernachlässigbar ist.
Der Zustand ist später aktiv, wenn Grundsätzlich gilt, dass Sie Sounds
sich der Mauszeiger auf der Schalt- bevorzugt in hoher Qualität importieren
fläche befindet. Erstellen Sie ein sollten. Animate bietet die Möglichkeit
Schlüsselbild: Menü Einfügen > der Datenreduktion an, so dass Sie – in
Zeitleiste > Schlüsselbild. Ändern Abhängigkeit von Ihrem Projekt – einen
Sie das Aussehen der Schaltfläche Kompromiss zwischen möglichst hoher
wie gewünscht. Qualität und möglichst niedriger Daten-
menge wählen können.
4 Zustand „Gedrückt“ C
Der Zustand ist aktiv, wenn der Nut- Sound – Making of …
zer die Maustaste gedrückt hält. Er-
stellen Sie ein Schlüsselbild: Menü 1 Wählen Sie Menü Datei > Importie-
Einfügen > Zeitleiste > Schlüssel- ren > In Bibliothek importieren, um
bild. Ändern Sie das Aussehen der einen Sound in die Bibliothek Ihres
Schaltfläche wie gewünscht. Animate-Projekts zu importieren.

5 Zustand „Aktiv“ D 2 Erstellen Sie in der Zeitleiste eine


Mit diesem Schlüsselbild können neue Ebene für den Sound und
Sie den anklickbaren Bereich defi­ fügen Sie dort ein Schlüsselbild ein,
nieren. Beispiel: Sie verwenden wo der Sound beginnen soll.
als Schaltfläche Text in geringer
Schriftgröße. Damit der Nutzer 3 Ziehen Sie den gewünschten Sound
nicht „zielen“ muss, um den Text aus der Bibliothek auf die Bühne
anzuklicken, vergrößern Sie den (nicht in die Zeitleiste).

27
G
A

D
B
H
C

4 Verlängern Sie das Schlüsselbild 2 Um ein Video zu importieren, wäh-


auf die Länge des Sounds. len Sie im Menü Datei > Importie-
ren > Video importieren… Animate
5 Testen Sie den Sound durch Ab- startet einen Assis­tenten zur Einbin-
spielen der Animation. dung des Videos.

Um die Datenmenge und damit Lade- 3 Wählen Sie die gewünschte Video-
zeit zu verringern: datei aus E. Mögliche Videoformate
sind u. a.:
6 Machen Sie in der Bibliothek einen FLV, F4V: Flash-Video
Rechtsklick auf den Sound und MP4: MPEG-Video
wählen Sie Eigenschaften. MOV: Quicktime-Video

7 Entfernen Sie das Häkchen A. 4 Nur die Flash-Videoformate lassen


sich tatsächlich importieren, alle
8 Wählen Sie die Bitrate B: 128 kBit/s anderen Formate müssen als exter-
entspricht nahezu CD-Qualität. Im ne Dateien F vorliegen und werden
Beispiel wird hierdurch die Daten- lediglich verknüpft. Da Videos eine
menge mehr als halbiert C. große Datenmenge besitzen, ist

Bei Video ist es leider etwas kompli-


zierter: Mit HTML5-Canvas-Dateien
ist die Verwendung von Video (Stand:
2016) leider nicht möglich. Sie müs-
sen hierfür auf die Flash-Technologie
zurückgreifen.

Video – Making of … F

1 Legen Sie über Datei > Neu...


ein neues Projekt an. Wählen Sie E
Action­Script 3.0 D.

28
2D-Animation

es ohnehin sinnvoll, sie extern zu 1 Sie können Ihr Projekt vorab im


belassen. Klicken Sie auf Weiter. Browser testen, indem Sie im Menü
Steuerung > Testen wählen.
5 Suchen Sie sich eine der Kompo-
nenten zur Steuerung des Videos 2 Speichern Sie die finale Version
aus und wählen deren Farbe. Ihres Films (Dateiendung: .FLA) ab.

6 Das Video wird in die Bibliothek 3 Legen Sie einen Projektordner an,
eingefügt und kann verwendet da mehrere Dateien erzeugt werden.
werden.
4 Wählen Sie im Menü Datei > Ein-
2.2.7 Veröffentlichen stellungen für Veröffentlichungen...
– Setzen Sie das Häkchen A, wenn
Veröffentlichen bedeutet, dass Ihr sich die Animation als Endlosschlei-
Animate-Projekt ohne Entwicklungs- fe wiederholen soll.
umgebung im Webbrowser abspielbar – Wählen Sie Option B nur, wenn
wird. Folgende Varianten sind möglich: auch ausgeblendete Ebenen berück-
ƒƒ Bei HTML5 Canvas (G auf vorheriger sichtigt werden sollen.
Seite) handelt es sich um eine Tech- – Die übrigen Häkchen können Sie
nologie, die ohne Zusatzsoftware mit gesetzt lassen.
allen Betriebssystemen und mit allen
aktuellen Browsern genutzt werden 5 Wählen Sie den Projektordner für
kann – der optimale Fall! Animate ge- die Ausgabedateien C.
neriert hierzu zwei Dateien, eine HT-
ML5-Datei und eine JS-(JavaScript-) 6 Beenden Sie mit Veröffentlichen D.
Datei. Einzige Einschränkung ist, dass Alternativ ist dies im Menü Datei >
Video nicht möglich ist. Veröffentlichen möglich.
ƒƒ ActionScript 3.0 (D auf vorheriger
Seite) benötigt zum Abspielen einen 7 Testen Sie das Ergebnis durch Dop-
Flash-Player, der bekanntlich auf iOS- pelklick auf die HTML5-Datei.
Geräten nicht vorhanden ist. Animate
erzeugt neben einer HTML5-Datei
eine SWF-(Flash-)Datei.
ƒƒ Bei AIR (Adobe Integrated Runtime)
(H auf vorheriger Seite) handelt es
sich um eine sogenannte Laufzeitum-
gebung. Diese kann die Flash-Tech- C
nologie einbetten und somit platt-
formunabhängig verfügbar machen. A
Mit AIR können Sie Apps für Desktop, B
Android und iOS generieren.

Making of …

Wir beschreiben hier die Veröffent­


lichung eines HTML5-Canvas-Projekts: D

29
2.3 Animationen

Der langjährige Erfolg von Flash – das 3 Importieren Sie die Photoshop-
jetzt zu Animate wurde – ist nicht zuletzt Datei in die Animate-Bibliothek:
auf die umfangreichen Animationsmög- Datei > Importieren > In Bibliothek
lichkeiten zurückzuführen, die diese importieren.
Programme bieten. Wir stellen Ihnen im
Folgenden die Umsetzung der in Kapitel 4 Platzieren Sie den Hintergrund
1.2 eingeführten Animationstechniken (hier: schwarze Ampel) im Schlüs-
vor. selbild der Ebene 1 A.

2.3.1 Einzelbild-Animation 5 Erstellen Sie eine neue Ebene. Plat-


zieren Sie die erste Phase (hier: rote
Wie der Name sagt, wird für eine Ampel) im Schlüsselbild in Bild 1 B.
Einzelbild- oder auch Bild-für-Bild-Ani-
mation für jede Phase der Animation 6 Stellen Sie im Menü Modifizieren
ein Bild benötigt. Diese werden nachei- > Dokument die Bild- oder Frame-
Einzelbild-Animation
nander angeordnet und wie bei einem rate der Animation ein (hier auf 1
Einzelne Bilder
werden wie beim
Daumenkino abgespielt. Im Beispiel BpS = 1 Bild pro Sekunde). Aus der
„Daumenkino“ nach- animieren wir eine Verkehrsampel: Bildrate und der gewünschten Dau-
einander gezeigt. er der Animation lässt sich berech-
nen, wo das nächste Schlüsselbild
platziert werden muss:

Zusammenhang Bilder und Anzeigedauer

B = t x BpS

t: Dauer einer Phase in Sekunden


BpS: Bild- oder Framerate (Bilder pro Sekunde)

Making of … B: Erforderliche Anzahl an Bildern (frames)

1 Erstellen Sie in Photoshop die Bil-


der für die Animation. Im Beispiel Beispiel: Phase 1 (rote Ampel) soll
wurden vier Ebenen erstellt: Ampel, fünf Sekunden lang sichtbar sein.
gelbes, grünes und rotes Licht. Die Bildrate wurde auf 1 BpS ge-
Zeitleiste stellt. Für fünf Sekunden werden B
Eine Vorschau auf den 2 Erstellen Sie in Animate ein neues = 5 s · 1 BpS = 5 Bilder benötigt, das
Inhalt der Schlüssel- HTML5-Canvas-Projekt. Passen Sie nächste Schlüsselbild muss also in
bilder erhalten Sie
durch Anklicken der
die Bühnengröße der Bildgröße Bild 6 (rot-gelbe Ampel) platziert
Schaltfläche oben Ihrer Photoshop-Datei an. werden C.
rechts D.
D 7 Platzieren Sie die weiteren Schlüs-
selbilder und tauschen Sie die Bild-
B C teile aus, die sich verändern sollen.
A
8 Mit der Return-Taste können Sie die
Animation testen.

30
2D-Animation

2.3.2 Schlüsselbild-Animation
Einzelbild-Animationen sind aufwändig,
da für jede Phase der Bewegung einzel- A
ne Bilder benötigt werden.
Die grundsätzliche Idee einer Schlüs- B
selbild-Animation besteht darin, für
das zu animierende Objekt lediglich 5 Die Zeitleiste ändert sich nun
die Startposition und die Endposition folgendermaßen: Animate kopiert
zu definieren. Die Animation entsteht das zu animierende Symbol in eine
dadurch, dass der Computer die Zwi- neue Tween-Ebene. Sie erkennen
schenbilder zwischen Start- und Endpo- diese am Icon A und sollten die
sition beim Abspielen berechnet. Ebene sinnvoll benennen. Außer-
Bei Animate wird diese Animations- dem wird das Schlüsselbild um die
technik als Tweening bezeichnet. Der in der Bildrate B eingestellte Anzahl
Begriff leitet sich vom Englischen „bet- Bilder verlängert und hellblau
ween“ (dt.: dazwischen) ab. Im Beispiel hinterlegt.
animieren wir ein Billardspiel.
6 Die Dauer der Animation beträgt
Making of … aktuell eine Sekunde – dies ist uns
für den Stoß des Queues zu lang.
1 Erstellen Sie alle benötigten Um die Animation zu verkürzen,
Objekte (hier: Tisch, Queue, weiße ziehen Sie das letzte hellblaue Bild
und rote Kugel) direkt in Animate mit gedrückter Maustaste nach links
oder importieren Sie sie als externe (hier: auf Bild 5).
Dateien in die Bibliothek.
7 Verlängern Sie das Schlüsselbild
2 Platzieren Sie die Objekte auf der der Hintergrund-Ebene. Im Beispiel
Bühne und richten Sie sie wie ge- ist der Tisch bis Bild 35 sichtbar.
wünscht aus. Klicken Sie auf Bild 35 der Ebene
Tisch. Wählen Sie im Menü Ein-
3 Konvertieren Sie alle Objekte, die fügen > Zeitleiste > Bild, um das
Sie animieren wollen, in Movieclip- Schlüsselbild zu verlängern (alter-
Symbole: Menü Modifizieren > In nativ: Taste F5).
Symbol konvertieren. Im Beispiel
sind dies die beiden Billardkugeln
und der Queue.

4 Klicken Sie auf das Symbol, das


Sie zuerst animieren wollen (hier: C
Queue). Wählen Sie im Menü
Modifizieren > Bewegungs-Tween.
(Alternative: Rechtsklicken Sie
auf das Symbol und wählen Sie
Bewegungs-Tween erstellen).

31
Erstellen Sie Im nächsten Schritt die 2.3.3 Pfadanimation
eigentliche Animation:
Bisher haben Sie geradlinige (lineare)
8 Klicken Sie auf die Ebene mit dem Animationen kennengelernt. Im nächs­
Animationsobjekt (hier: Queue). ten Schritt erstellen wir eine Anima­tion
entlang einer beliebigen Kurve am
9 Bewegen Sie den roten Abspielkopf Beispiel eines Ballwurfs.
auf das letzte hellblaue Bild (hier:
auf Bild 5). Animationspfad ändern – Making of …

10 Verschieben Sie das Animations­ 1 Erstellen Sie alle benötigten Ob-


objekt an die gewünschte Endposi- jekte (hier: Ball, Korb, Hintergrund)
tion. Im Beispiel wurde der Queue und importieren Sie sie in Animate.
bis zur weißen Kugel verschoben. Beachten Sie, dass der Korb aus
Auf der Bühne wird der Anima- zwei Teilen bestehen muss: Ein hin-
tionspfad sichtbar. Jeder Punkt terer Teil mit der Rückwand und ein
symbolisiert ein Bild. vorderer Teil mit dem Netz. Der Ball
wird später auf einer Ebene dazwi-
11 Testen Sie Ihre Animation (Return- schen platziert, damit er scheinbar
Taste). Nehmen Sie ggf. Ände- im Netz landet.
rungen der Start- oder Endposition
des Animationsobjekts vor. 2 Konvertieren Sie den Ball in ein
Symbol.
12 Erstellen Sie die nächste Anima­
tion – im Beispiel die weiße Kugel. 3 Erstellen Sie zunächst eine gerad-
Die Animation beginnt bei Bild 6 linige Schlüsselbild-Animation von
und endet bei Bild 30. Beachten Sie, links außen zum Korb und vom
dass die Kugel langsamer werden Korb nach unten.
muss. Dies erreichen Sie, indem
die Anzahl der Bilder gegen Ende Um aus der geradlinigen Bewegung
zunimmt (vgl. Animationspfad C auf eine Kurve zu machen:
vorheriger Seite).
4 Wählen Sie das Auswahlwerkzeug
13 Verlängern Sie wie unter Punkt 7 (schwarzer Pfeil).
beschrieben die Schlüsselbilder
der übrigen Objekte (hier: Queue, 5 Ziehen Sie den Pfad mit gedrückter
Kugeln), damit sie die ganze Zeit Maustaste.
sichtbar bleiben.
6 Zur exakten Bearbeitung des
14 Die dritte Animation (hier: rote Bewegungsablaufs können Sie die
Kugel) verläuft von Bild 17 bis 34. Schlüsselbilder mit dem Unteraus-
Im letzten Bild (35) ist die Ku- wahl-Werkzeug (weißer Pfeil)
gel nicht mehr sichtbar, sodass anklicken. Danach erhalten Sie die
der Eindruck entsteht, dass die im Screenshot gezeigten Anfasser
Kugel„eingelocht“ wurde. A, die sich beliebig verschieben
lassen.

32
2D-Animation

Damit die Animation realistischer wirkt,


muss der Ball beim Aufsteigen immer
langsamer werden und beim Fallen B
beschleunigen.

7 Fügen Sie weitere Schlüsselbilder


ein, indem Sie in der Tween-Ebene
auf das gewünschte Bild klicken
A A
und im Menü Einfügen > Zeitleiste
> Schlüsselbild wählen (alternativ:
Taste F6) B.

8 Verschieben Sie das Schlüsselbild


in der Tween-Ebene horizontal, um
hierdurch die Anzahl an Zwischen-
bildern zu verändern. Je weniger
Bilder sich zwischen zwei Schlüs-
selbildern befinden, umso schneller C
läuft die Bewegung ab. Sie erken-
nen dies am Animationspfad daran,
dass der Abstand zwischen den
Punkten (= Zwischenbildern) größer
wird C.

Für das „Feintuning“ einer Animation


stellt Animate zusätzlich einen – aus un- 12 Kopieren Sie den Pfad in die Tween-
serer Sicht wenig brauchbaren – Bewe- Ebene und löschen Sie die Hilfs­
gungs-Editor zur Verfügung. Doppelkli- ebene.
cken Sie auf die Tween-Ebene.
Neben dem Bewegungsverlauf entlang
9 Experimentieren Sie mit den Mög- einer Kurve können Sie Änderungen an
lichkeiten, die dieser Editor bietet den Schlüsselbildern Ihrer Animation
– vielleicht kommen Sie damit zu vornehmen. Im Beispiel animieren wir
guten Ergebnissen. ein Bowlingspiel.

10 Ein weiterer Doppelklick auf die Schlüsselbilder bearbeiten –


Tween-Ebene beendet den Editor. Making of …

Eine alternative Vorgehensweise zur 1 Erstellen Sie alle Objekte, die Sie
Erstellung eines Animationspfads ist für die Animation benötigen (hier:
folgende: Bowlingbahn, Kugel, Kegel) und
importieren Sie diese in die Biblio-
11 Zeichnen Sie den gewünschten thek.
Pfad mit Hilfe eines Zeichenwerk-
zeugs in einer eigenen Ebene. 2 Platzieren Sie die Objekte auf der
Bühne.

33
3 Animieren Sie zunächst den Kegel:
Konvertieren Sie ihn in ein Symbol.

A 4 Wählen Sie das Frei-Transformie-


ren-Werkzeug A und passen Sie die
Größe des Kegels an.
D
5 Verschieben Sie den Drehpunkt B
nach unten. C

6 Bringen Sie einen Bewegungs-


Tween am Kegel an (Rechtsklick: E
Bewegungs-Tween erstellen).

7 Klicken Sie auf das letzte Bild des Zusätzlich können Sie folgende Schlüs-
hellblauen Tweens in der Zeitleiste. selbild-Eigenschaften anpassen:
Drehen Sie den Kegel in eine hori-
zontale Position. 11 Nach Anklicken eines Schlüssel-
bildes in der Zeitleiste können Sie
8 Noch realistischer wirkt die Ani- das Animationsobjekt:
mation, wenn der Kegel zur Seite – im oder gegen den Uhrzeigersinn
„springt“ und etwas kleiner wird. mehrfach drehen lassen C,
– beschleunigen (negative Zahlen)
9 Erstellen Sie ein Symbol der Bow- oder abbremsen (positive Zahlen) D.
lingkugel und bringen Sie einen
Bewegungs-Tween an. 12 Nach Anklicken eines Schlüssel-
bildes auf der Bühne können Sie
10 Verkleinern Sie die Kugel am Ende – dessen Farbe,
der Animation mit Hilfe des Frei- – Helligkeit oder
Transformieren-Werkzeugs. – Transparenz (Alpha) ändern.

34
2D-Animation

In manchen Fällen ist es erwünscht,


dass ein animiertes Objekt immer in
Richtung des Animationspfads zeigt:

An Pfad ausrichten – Making of …

1 Erstellen Sie das zu animierende


Objekt (hier: Papierflieger) und im- B
portieren Sie es auf die Bühne.

2 Erstellen Sie ein Symbol. Bringen


Sie einen Bewegungs-Tween an.

3 Erstellen Sie den Animationspfad.


In diesem Fall bietet es sich an, den
Pfad separat zu zeichnen und dann
mit dem Tween zu verbinden (vgl.
Punkt 11 und 12 auf Seite 33).

4 Wählen Sie nun die Option An Pfad


ausrichten (E auf vorheriger Seite).
Wie Sie sehen, wird in der Zeitleiste
jedes Bild zum Schlüsselbild A.

5 Das animierte Objekt ist an seinem


Drehpunkt B mit dem Pfad verbun-
den. Verschieben Sie diesen Punkt
mit Hilfe des Frei-Transformieren-
Werkzeugs, falls die Animation
unrealistisch aussieht.

6 Um den Bewegungsablauf besser


beurteilen zu können, lassen sich
mehrere Bilder als sogenannte
Zwiebelschalen bzw. Zwiebelscha-
lenkonturen C einblenden. Die
Anzahl an dargestellten Bildern
wählen Sie mit Hilfe der Anfasser D
in der Zeitleiste.

D D
A

35
C
B

B C

2.3.4 Morphing Beispiel ist dies die Bevölkerungs-


pyramide im Jahr 1950. Konver-
Bei Morphing handelt es sich – wie tieren Sie das Objekt nicht in ein
auf Seite 10 beschrieben – um eine Symbol – Form-Tweens funktionie-
Animations­technik, bei der sich ein Bild ren nur mit grafischen Formen.
in ein anderes Bild umwandelt. Sie ken-
nen diese Effekte aus Spielfilmen wie 2 Fügen Sie in der Zeitleiste in einem
beispielsweise Terminator 2. zweiten Bild ein leeres Schlüsselbild
Adobe Animate ist keine Morphing- ein. Erstellen Sie nun die Grafik, in
Software und spricht deshalb beschei­ die sich die erste Grafik umwandeln
dener von Form-Tweening. Die Um- soll, im Beispiel die Bevölkerungs­
wandlung einer Form in eine andere pyramide im Jahr 2050.
funktioniert nur mit relativ einfachen
Formen, z. B. Buchstaben oder geome- 3 Klicken Sie mit der rechten Maus­
trischen Objekten. Komplexe Grafiken tas­te zwischen die beiden Schlüs-
oder gar Fotos lassen sich mit Animate selbilder und wählen Sie Form-
nicht morphen! Tween erstellen. Ein Form-Tween
wird in grüner Farbe dargestellt
Making of … und ist durch einen schwarzen Pfeil
gekennzeichnet A. Die Animation
1 Erstellen Sie ein erstes grafisches können Sie nun mit der Return-
Objekt im ersten Schlüsselbild. Im Taste testen.

36
2D-Animation

Zur Verbesserung der Animation dienen das sichtbare Objekt verändert wird.
Formmarken: Mit ihnen legen Sie Im Beispiel wird ein Text nach und nach
fest, wie einzelne Stützpunkte von der aufgedeckt werden, so dass der Be-
Start- in die Zielgrafik überführt werden trachter den Eindruck bekommt, dass
sollen: der Text geschrieben wird.

4 Aktivieren Sie im Menü Ansicht > Making of …


Ausrichten > An Objekten ausrich-
ten. 1 Erstellen Sie einen kurzen Text z. B.
in einer Schreibschrift.
5 Klicken Sie in Schlüsselbild 1 und
wählen Sie im Menü Modifizieren 2 Erzeugen Sie eine neue Ebene
> Form > Formmarken einfügen. oberhalb der Ebene mit dem Text.
Ziehen Sie die Formmarke auf die Rechtsklicken Sie auf diese Ebene
Kontur der Grafik, z. B. in die untere und wählen Sie die Option Maske.
Ecke. Eine richtig platzierte Form- Sie erkennen die Maskenebene am
marke wird gelb dargestellt (B auf geänderten Icon A.
linker Seite).
Die Maskenebene überdeckt die darun-
6 Klicken Sie ins Schlüsselbild mit terliegende Ebene komplett. Wenn Sie
der Zielgrafik und platzieren Sie beispielsweise mit dem Pinsel-Werk-
die Formmarke, z.B. ebenfalls in zeug auf dieser Ebene zeichnen, wird
die untere Ecke (C auf linker Seite). die Maske an dieser Stelle durchsichtig.
Eine richtig platzierte Formmarke
erscheint in der Zielgrafik grün. 3 Entsperren Sie die Ebene durch
Anklicken des Schloss-Icons B.
7 Wiederholen Sie die Schritte 2 und
3, um weitere Formmarken einzu- 4 Erzeugen Sie in Bild 2 der Masken­
fügen und zu platzieren. Testen Sie ebene ein Schlüsselbild (Menü Ein-
zwischendurch Ihre Animation. fügen > Zeitleiste > Schlüsselbild).

2.3.5 Masken 5 Übermalen Sie mit dem Pinsel


einen Teil des ersten Buchstabens,
Animationen lassen sich auch indirekt und zwar so, wie Sie ihn von Hand
erzeugen, indem das zu animierende schreiben würden (siehe Screen­
Objekt mit Hilfe einer Maske ganz oder shot auf der nächsten Seite).
teilweise überdeckt wird. Durch Ände-
rung der Maske, z. B. Verformung oder 6 Fügen Sie in Bild 3 der Masken­
Bewegung, entsteht der Eindruck, dass ebene das nächste Schlüsselbild ein

B
A

37
und übermalen Sie einen weiteren einer Zeichentrickfigur, lassen sich
Teil des Buchstabens. Gelenke definieren, die über Bones (dt.:
Knochen) verbunden sind. Auf diese
7 Wiederholen Sie den Vorgang für Weise können Sie realistisch wirkende
den gesamten Text. Bewegungsabläufe erstellen.

8 Um die Animation zu testen, sper- Making of …


ren Sie die Maskenebene (Schloss-
D
Icon). Spielen Sie die Animation mit 1 Zeichnen oder importieren Sie das
E der Return-Taste ab. zu animierende Objekt. Zum Testen
der inversen Kinematik ist es emp-
9 Zur weiteren Bearbeitung müssen fehlenswert, mit einfachen Objekten
Sie die Maskenebene durch An­ zu beginnen, z. B. mit zwei Stangen,
klicken des Schloss-Icons zunächst die über ein Gelenk verbunden
wieder entsperren. werden sollen.

2.3.6 Inverse Kinematik 2 Damit eine Grafik mit Bones ver-


sehen werden kann, muss sie als
Der Begriff inverse Kinematik oder auch Form vorliegen. Importierte Objekte
A Rückwärtskinematik entstammt der oder Symbole müssen im Menü
Robotik und bedeutet, dass ein Roboter Modifizieren > Teilen in Formen
in die gewünschte Endposition gebracht umgewandelt werden. Das Objekt
wird. Aus dieser Position wird er um- erscheint dann punktiert.
gekehrt (invers) zurück in die Startposi­
tion bewegt, um hierdurch die zur 3 Wählen Sie das Bone-Werkzeug
Durchführung der (Vorwärts-)Bewegung A. Beginnen Sie das Zeichnen der
erforderliche Drehung und Positions­ Bones an der Stelle, die unver-
änderung der Gelenke zu ermitteln. änderlich bleiben soll: Bei einem
Auch bei Animate-Objekten, wie z. B. Arm wäre dies das Schultergelenk,

38
2D-Animation

bei einem Bein das Hüftgelenk B. 7 Klicken Sie auf den Kreisring, um
Ziehen Sie den Bone mit gedrück­ter die Drehwinkel festzulegen. Ein
Maustaste bis zum nächsten Ge- Arm lässt sich beispielsweise nur
lenk. Wiederholen Sie den Vorgang, etwa 45 ° nach hinten, aber fast
um weitere Gelenke einzufügen. 180 ° nach vorne drehen E. (Alterna-
Animate erzeugt automatisch tiv können Sie diese Einstellungen E
eine Posenebene C und fügt das auch numerisch im Eigenschaften-
„Skelett“ in diese Ebene ein. Die Fenster vornehmen.)
ursprüngliche Ebene können Sie
löschen. 8 Wiederholen Sie die Schritte 5 bis 7
für die anderen Gelenke.
4 Testen Sie die inverse Kinematik,
indem Sie das Auswahlwerkzeug Um eine Animation zu erstellen:
D (auf linker Seite) wählen. Die
einzelnen Gelenke können Sie nun 9 Bringen Sie die Bones und Gelenke
anklicken und bewegen. in Bild 1 der Posenebene in die
gewünschte Startposition.
Animate bietet zahlreiche Möglichkeiten
zur Nachbearbeitung der Bones. 10 Rechtsklicken Sie in der Posen­
ebene auf das Bild, bei dem die Ani-
5 Klicken Sie auf einen Bone – er wird mation enden soll und wählen Sie
hellgrün dargestellt. Pose einfügen.

6 Klicken Sie auf das zugeordnete 11 Bringen Sie die Bones und Gelenke
Gelenk – es wird als Kreis mit Dop- in die gewünschte Endposition.
pelpfeil dargestellt. Testen Sie mit der Return-Taste.

39
B D

2.3.7 Verschachtelte Animationen Erstellen Sie die innere Animation:


C A
Bislang haben wir unsere Animationen
in der (Haupt-)Zeitleiste des Films er-
stellt. Dies ist für einfache Animationen
auch ausreichend. Komplexere 3 Doppelklicken Sie auf das Symbol
Animationen erfordern jedoch eine Ver- (hier: Hubschrauber). Sie befinden
schachtelung mehrerer Bewegungen: sich nun im Symbol A, das eine
Ein Vogel bewegt sich vorwärts, wäh- eigene Zeitleiste besitzt.
rend er mit den Flügeln schlägt. Die
Figur im letzten Beispiel bewegt Arme, 4 Nehmen Sie die gewünschte innere
Beine, Oberkörper und Kopf, während Animation vor. Im Beispiel wurde
sie sich vorwärts bewegt. die Drehung der Hubschrauber-
Damit dies möglich wird, lassen sich Rotoren mit Hilfe einer Bild-für-Bild-
(innere) Animationen auch direkt in Animation B realisiert.
den Zeitleisten der Symbole erstellen.
Das Beispiel zeigt einen Hubschrauber, 5 Kehren Sie durch Anklicken des
der sich von rechts nach links über den Pfeils C zur Hauptzeitleiste zurück.
Hintergrund bewegt (äußere Anima­
tion). Die innere Animation simuliert die Erstellen Sie die äußere Animation:
Drehung der Rotorblätter.
6 Erstellen Sie einen Bewegungs-
Making of … Tween D, so dass sich das Objekt
über die Bühne bewegt.
1 Erstellen Sie das Animationsobjekt
in Animate oder importieren Sie es. 7 Mit der Return-Taste lässt sich nur
die äußere Animation testen. Um
2 Konvertieren Sie das Objekt in ein die komplette Animation zu sehen,
Movieclip-Symbol: Modifizieren > wählen Sie im Menü Steuerung >
In Symbol konvertieren (Taste F8). Testen oder die Tastenkombination
Strg + Return-Taste.

40
2.4 Programmierung 2D-Animation

2.4.1 Skriptsprachen
Wenn Sie das Animate-Kapitel bis hier
durchgearbeitet haben, dann können
Sie jetzt Projekte erstellen, die Text, Bil-
der, Sound, Video und selbstablaufende
Animationen enthalten. Damit haben A
Sie die Grenze dessen erreicht, was
ohne Programmierung möglich ist.
B
Programmierung ist immer dann
erforderlich, wenn der Nutzer die Mög-
lichkeit erhalten soll, in die Anwendung C
einzugreifen, um beispielsweise
ƒƒ eine Anwendung über Buttons oder
die Tastatur zu steuern, allen aktuellen Browsern integriert ist.
ƒƒ Text zu ändern oder zu erzeugen, Einzige Ausnahme stellt das Betriebs-
ƒƒ auf externe Dateien zuzugreifen, system iOS dar. Für Abhilfe sorgt hier
z. B. auf Bilder, AIR (Adobe Integrated Runtime) C, eine
ƒƒ Sound zu steuern, sogenannte Laufzeitumgebung, die das
ƒƒ Objekte mit der Maus verschiebbar Abspielen von Animate-Projekten ohne
zu machen. Flash-Player ermöglicht.
Animate bietet zwei unterschiedliche Wenn Sie bereits über Program-
Möglichkeiten, um Anwendungen mit mierkenntnisse verfügen, wird Ihnen
Interaktivität zu versehen. das Programmieren in ActionScript
leichtfallen. Andernfalls müssen Sie
JavaScript sich zunächst an die Struktur und
Wenn Sie Ihr Projekt als HTML5 Can- Punktnota­tion dieser objektorientierten
vas A anlegen, dann können Sie ein Skriptsprache gewöhnen. Animate un-
Animate-Projekt ohne Flash-Player in terstützt Sie jedoch hierbei, da Sie auf
jedem Browser abspielen. Damit dies eine Biblio­thek mit vorprogrammierten
möglich wird, erzeugt Animate bei der Funktionen zurückgreifen können.
Veröffentlichung des Projekts (siehe Sei-
te 29) eine HTML5- und eine JavaScript- 2.4.2 Zeitleiste steuern
Datei. In HTML5-Canvas-Projekten
können Sie aus diesem Grund direkt in Ohne Steuerung durch ein Skript läuft
JavaScript programmieren. Wir gehen ein Animate-Projekt von Anfang bis
in dieser Einführung nicht darauf ein. Ende ab und wiederholt sich dann,
wenn nichts anderes eingestellt.
ActionScript 3.0 In diesem Abschnitt lernen Sie,
ActionScript ist die mächtige Skript- wie Sie eine Animation stoppen und
sprache des Animate-Vorgängers Flash. Buttons programmieren können, damit
In Animate können Sie diese Sprache ein Hin- und Herspringen in verschie-
weiterhin benutzen, wenn Sie Ihr dene Bilder der Zeitleiste möglich wird.
Projekt als ActionScript 3.0 B anlegen. Als Beispiel realisieren wir eine kleine
Für die Ausführung von ActionScript Diashow.
ist der Flash-Player erforderlich, der in

41
D

Making of … 6 Platzieren Sie den Abspielkopf in


Bild 1 der Zeitleiste.
1 Erstellen Sie eine neue Datei. Wäh-
len Sie ActionScript 3.0. 7 Doppelklicken Sie im Menü Fenster
> Codefragmente unter Action­
2 Bereiten Sie in Photoshop einige Script > Zeitleistennavigation auf
Fotos in passender Größe vor und den Befehl Bei diesem Bild stoppen
importieren Sie diese in die Ani- D. Es öffnet sich das Aktionen-Fens­
mate-Bibliothek. ter und das zugehörige Skript wird
angezeigt. In diesem Fall handelt
3 Platzieren Sie die Bilder in Bild 1, 2, es sich um den Befehl stop(). Die
3, 4, 5 … der Zeit­leis­te A. restlichen Zeilen sind Kommentare,
die Sie wahlweise löschen können.
4 Fertigen Sie vier Buttons an (Vor,
Zurück, Ende, Anfang) B. Konvertie- 8 Animate hat in der Zeitleiste eine
ren Sie diese in Schaltflächen-Sym- neue Ebene Actions erzeugt und
bole, wie auf Seite 22 beschrieben. das Skript dort in Bild 1 eingefügt,
wie Sie am -Zeichen E erkennen.
5 Erstellen Sie eine neue Ebene für
die Buttons C und platzieren Sie die Im nächsten Schritt erfolgt die Program-
Buttons an der gewünschten Posi­ mierung der vier Buttons:
tion auf der Bühne.
9 Um Schaltflächen per Skript anspre-
Nun erfolgt die Programmierung. Zu- chen zu können, muss ihnen ein
nächst wird dafür gesorgt, dass die Ani- eindeutiger Instanzname gegeben
mation in Bild 1 der Zeitleiste stoppt. werden. Wichtig: Der Name hat
nichts mit dem Namen des Schalt-
flächen-Symbols in der Bibliothek
E zu tun. Klicken Sie die Schaltfläche
(hier: Vorwärts-Button) auf der
A Bühne an und geben Sie ihr in den
C Eigenschaften einen Namen F, z. B.
vor. Umlaute, Leer- und Sonderzei-
chen sind nicht gestattet!

42
2D-Animation

F 1
2 stop();
3 F G H
4 vor.addEventListener(MouseEvent.CLICK,f1_ClickToGoToNextFrame_1);
5
6 function f1_ClickToGoToNextFrame_1(event:MouseEvent):void{
7 nextFrame();
8
9 }

10 Klicken Sie auf den Vorwärts-Button. den Namen in Zeile 4 umbenannt


haben, müssen Sie ihn hier eben-
11 Doppelklicken Sie im Menü Fenster falls umbenennen. In der Klammer
> Codefragmente auf den Befehl wird der Funktion der Parameter
Klicken, um zum nächsten Bild zu MouseEvent übergeben, void
gehen und anzuhalten. Das Skript (dt.: Leere, Lücke) besagt, dass
bedarf einiger Erklärung: sie keinen Wert zurückgibt. next­
Frame() in Zeile 7 bewirkt, dass
Zeile 4: sich der Abspielkopf um genau ein
Dem Vorwärts-Button mit Namen Bild weiterbewegt. Dies ist also die
vor F wurde, durch einen Punkt eigentliche Funktion des Buttons.
getrennt, ein sogenannter Event-
Listener G angefügt. Wie der Name 12 Wiederholen Sie die Schritte 9 bis
sagt, wartet bzw. hört (to listen, dt.: 11 für den Zurück-Button. Vergeben
hören) der Button nun auf ein Event Sie ihm einen eindeutigen Namen,
(dt.: Ereignis). Die runde Klammer z.B. zurueck. Doppelklicken Sie
gehört zum Event-Listener dazu im Menü Fenster > Codefragmente
und liefert zwei Informationen: Der auf den Befehl Klicken, um zum vor-
erste Parameter bewirkt, dass auf herigen Bild zu gehen und anzuhal-
ein Maus-Ereignis (MouseEvent) ten. Das Skript enthält die Funktion
gewartet wird, genauer gesagt auf prevFrame(), wobei prev für
ein Mausklick (CLICK). Der zweite previous (dt.: vorherig) steht.
Parameter gibt den Namen der
Funktion H an, die durch das Maus- 13 Für den Zum-Anfang- bzw. Zum-
Ereignis aufgerufen wird. Den von Ende-Button benötigen wir das
Animate vergebenen Namen (hier: Codefragment Klicken, um zum
f1_ClickToGoToNextFrame_1) Bild zu gehen und zu stoppen. In
können Sie ändern, z. B. in naechs­ Action­Script heißt diese Funktion
tesBild. Umlaute und Sonderzei- gotoAndStop(…). Setzen Sie in der
chen sind nicht gestattet. Klammer die gewünschte Bild-
nummer ein, also z. B. gotoAnd­
Zeilen 6 bis 9: Stop(1), um in Bild 1 der Zeitleiste
Die Zeilen definieren die oben zu navigieren.
erwähnte function. Wenn Sie

43
2.4.3 Dynamischer Text
Das manuelle Einfügen von Texten in A
ein Animate-Projekt ist nur bei geringer B
Textmenge sinnvoll. Abgesehen vom
hohen Aufwand besteht der Nachteil,
dass die Ausgabedatei bei jeder Text­
änderung neu erstellt werden muss.
Die Idee liegt nahe, Texte in exter-
nen Dateien oder einer Datenbank zu
speichern und sie bei Bedarf an der
gewünschten Stelle zu platzieren. Auf
diese Weise können sie jederzeit bear- C
beitet werden, ohne dass der Nutzer
etwas von Animate verstehen muss.

Text laden – Making of …

1 Starten Sie einen Texteditor wie


Editor oder TextEdit und geben Sie
einen kurzen Text ein. (Verwenden
D
Sie kein Textverarbeitungspro-
gramm wie Word, weil dort viele
Zusatzinformationen gespeichert E
werden.)

2 Speichern Sie den Text, z. B. unter 5 Vergeben Sie der Textfeld-Instanz
dem Namen textdatei.txt, ab. einen eindeutigen Namen (hier:
textfeld A), damit es per Action­
3 Öffnen Sie ein neues Animate-Pro- Script angesprochen werden kann.
jekt. Wählen Sie ActionScript 3.0.
6 Wichtig: Wählen Sie die Option
4 Ziehen Sie auf der Bühne ein Text- Dynamischer Text B.
feld auf.
7 Wählen Sie die gewünschten Eigen-
schaften des Textfelds, z. B.:
– Schriftart, -größe, -farbe C
1 //Text laden – Satzart, Abstände, Ränder D
2 var meineDatei:URLRequest = new URLRequest("textdatei.txt"); – mehrzeiliger Text E
3 var meinText:URLLoader = new URLLoader(meineDatei);
4 meinText.load(meineDatei);
5 meinText.addEventListener(Event.COMPLETE, zeigeText); 8 Öffnen Sie – falls geschlossen – im
6 //Text anzeigen
Menü Fenster > Aktionen. Geben
7 function zeigeText(e:Event):void {
8 var meinInhalt:String = e.target.data; Sie das im Screenshot links dar-
9 textfeld.text = meinInhalt; gestellte ActionScript ein – achten
10 }
Sie auch auf Groß- und Kleinschrei-
bung.

44
2D-Animation

Zeile 2:
Diese Schreibweise ist für objekt­
F
orientierte Sprachen typisch – für
Anfänger sehr verwirrend. Mit var
wird eine Variable mit frei wähl-
barem Namen (hier: meineDatei)
definiert. Dieser Variablen wird mit 9 Beim Testen (Menü Steuerung >
new ein Objekt der Klasse URLRe­ Testen) müsste der Text im Textfeld
quest zugewiesen. Dieses Objekt auf der Bühne angezeigt werden.
fordert eine URL (für Uniform Geschafft? Wenn nicht, dann lesen
Resource Locator) an (request, dt.: Sie die Fehlermeldung des Com-
Anforderung). Bei einer URL handelt pilers. Im Beispiel ist zu erkennen,
es sich allgemein um eine Inter­ dass in der Eigenschaft COMPLETE
netadresse, in diesem Fall um eine ein „L“ fehlt F.
Textdatei (hier: textdatei.txt).
Nun werden Sie zurecht sagen, dass
Zeile 3/4: dies furchtbar umständlich ist. Die Ver-
Sie benötigen eine zweite Variable wendung von vordefinierten Klassen,
(hier: meinText) und ein zweites bietet jedoch den Vorteil, dass Sie auf
Objekt, dieses Mal jedoch von der die Methoden und Eigenschaften der
Klasse URLLoader. Dieses bewirkt, Klasse mit Hilfe von Objekten zugreifen
dass der Inhalt der angeforderten können. Hierdurch reduziert sich der
Datei auch tatsächlich geladen wer- Programmieraufwand erheblich.
den kann. Im letzten Beispiel wurde das Textfeld
manuell erstellt und die Schrift von
Zeile 5: Hand formatiert. Eine elegan­tere Lö-
Event-Listener kennen Sie bereits sung ist es, auch das Textfeld mit Hilfe
aus dem letzten Abschnitt: Er wartet von ActionScript 3.0 zu erzeugen.
auf das Eintreten eines Ereignisses
und ruft danach eine Funktion (hier: Textfeld generieren – Making of …
zeigeText) auf. Wie der Name an-
deutet, tritt das Ereignis ein, wenn 1 Öffnen Sie ein neues Animate-Pro-
die Datei komplett (COMPLETE) jekt. Wählen Sie ActionScript 3.0.
geladen ist.
2 Geben Sie in Bild 1 das im Screen­
Zeilen 7 bis 10: shot auf der nächsten Seite darge-
In der Funktion wird eine Textvari- stellte Action­Script ein.
able (String) mit Namen mein­
Inhalt definiert. Ihr wird der Inhalt Zeile 2:
der Textdatei über e.target.data Hier wird einer Variablen (hier:
zugewiesen. Zeile 9 bewirkt schließ- meinFeld) ein Objekt der Klasse
lich, dass der Inhalt der Variablen TextField zugewiesen.
im Textfeld angezeigt wird. Dabei ist
textfeld der Instanzname, den Sie Zeilen 3 bis 8:
dem dynamischen Textfeld zugewie- Dem Textfeld-Objekt werden fol-
sen haben A. gende Eigenschaften zugeordnet:

45
meinFormat), der ein Objekt der
Klasse TextFormat zugeordnet
1 //Textfeld erzeugen wird.
2 var meinFeld:TextField = new TextField();
3 meinFeld.x = 0;
4 meinFeld.y = 0; Zeilen 12 bis 14:
5 meinFeld.width = 300; Der Variablen werden zwei Eigen­
6 meinFeld.height = 100;
schaf­ten zugewiesen: Schriftart und
7 meinFeld.wordWrap = true;
8 addChild(meinFeld); -größe. In Zeile 14 werden diese
9 Eigenschaften auf das Textfeld
10 //Text formatieren
11 var meinFormat:TextFormat = new TextFormat();
übertragen.
12 meinFormat.font = „Calibri“;
13 meinFormat.size = 20; Zeile 15:
14 meinFeld.defaultTextFormat = meinFormat;
15 meinFeld.text = “Hallo Welt“;
In dieser Zeile wird der Text „Hallo
Welt“ in das Textfeld eingetragen.
Alternativ können Sie hier das
Skript einfügen, das Sie im vorhe-
Seine xy-Position auf der Bühne, rigen Abschnitt zum Laden einer
gemessen von der linken oberen externen Textdatei erstellt haben.
Ecke, die Breite und Höhe des
Textfeldes und die Angabe, dass ActionScript-Referenzhandbuch
Zeilenumbruch (wordwrap) möglich In diesem Kapitel haben Sie Klassen
sein soll. Zeile 8 sorgt dafür, dass kennengelernt, die zahlreiche Eigen-
das Textfeld erzeugt wird. schaften (engl.: properties) und Metho-
den (engl.: methods) besitzen. Natürlich
Zeile 11: ist es unmöglich, sich dies alles mer-
Zur Formatierung der Schrift im ken zu wollen. Abhilfe schafft hier das
Textfeld dient eine Variable (hier: ActionScript-Referenzhandbuch, das Sie
im Internet unter http://help.adobe.com/
de_DE/FlashPlatform/reference/actions-
cript/3/ aufrufen können.

B Making of …

1 Wählen Sie die gesuchte Klasse A.

2 Klicken Sie auf Eigenschaften B.


A
3 Durchsuchen Sie die Eigenschaften
C dieser Klasse C.

Beachten Sie:
Klassennamen, z.B. TextFormat, wer-
den großgeschrieben, Eigenschaften,
z.B. color, kleingeschrieben. Weitere,
angehängte Begriffe werden großge-
schrieben, z. B. letterSpacing.

46
2D-Animation

2.4.4 Dynamische Bilder


Oft ist es wünschenswert, dass Bilder
aktualisiert werden können. Für diesen
Zweck ist es sinnvoll, die Bilder in exter-
nen Dateien zu belassen.
In dieser Übung erstellen wir eine
Bildergalerie aus Vorschaubildern
(Thumbnails). Die großen Bilddateien
liegen als externe Dateien vor und wer-
den erst geladen, wenn der Nutzer das
Thumbnail mit der Maus berührt.
Zeilen 4 bis 10:
Bilder laden – Making of … Zunächst wird eine Variable der
Klasse URLRequest benötigt (hier:
1 Öffnen Sie ein neues Animate-Pro- meinBild), das den Dateinamen
jekt. Wählen Sie ActionScript 3.0. (hier: Bild1.jpg) erhält. Das Laden
des Bildes ermöglicht ein Objekt
2 Bereiten Sie Ihre Bilder in Photo- der Loader-Klasse (hier: ladeBild).
shop vor und speichern Sie sie in In Zeile 8 und 9 wird die Position
zwei Varianten ab: als Thumbnail der linken oberen Ecke festgelegt.
und in hoher Auflösung. Das Platzieren des Bildes auf der
Bühne erfolgt schließlich in Zeile 10.
3 Importieren Sie nur die Thumbnails
und platzieren Sie diese auf der 5 Wenn Sie das Skript für das erste
Bühne. Bild erstellt und getestet haben,
lässt es sich für die weiteren Bilder
4 Konvertieren Sie die Thumbnails in durch „Copy & Paste“ zügig erwei-
Schaltflächen. Geben Sie den Sym- tern: Kopieren Sie die Zeilen 3 bis
bolen einen eindeutigen Instanzna- 11 und fügen Sie die Zeilen mehr-
men, z. B. bild1, bild2 usw. fach ein. Ändern Sie danach ledig-
lich die Nummerierung: bild2,
Öffnen Sie im Menü Fenster > zuBild2, Bild2.jpg.
Aktionen und geben Sie das rechts
unten dargestellte ActionScript ein.

Zeile 3: 1 stop();
An die Instanz des ersten Bildes 2 //Bild 1 laden
3 bild1.addEventListener(MouseEvent.MOUSE_OVER, zuBild1);
wird ein Event-Listener angebracht.
4 function zuBild1(e:Event):void {
Er wartet in diesem Fall auf das 5 var ladeBild:Loader = new Loader;
Ereignis MOUSE_OVER: Es tritt ein, 6 var meinBild:URLRequest = new URLRequest(“Bild1.jpg“);
7 ladeBild.load(meinBild);
wenn der Mauszeiger das Bild 8 ladeBild.x = 310;
berührt – ein Mausklick (CLICK) ist 9 ladeBild.y = 10;
nicht erforderlich. Die hierdurch 10 addChild(ladeBild);
11 }
aufgerufene Funktion heißt hier
zuBild1.

47
2.4.5 Sound steuern
Für die Verwendung von Sound haben A
Sie grundsätzlich zwei Möglichkeiten:
Kurze Sounds können Sie in die Biblio­
thek Ihres Animate-Projekts importieren B
und direkt per ActionScript steuern.
Bei längeren Sounds empfiehlt es
sich, diese in externen Dateien zu belas- Eigenschaften einen eindeutigen
sen und erst bei Bedarf zu laden. Hier- Namen, z. B. playbutton, pausebut-
durch reduziert sich die Datenmenge. ton, stopbutton.

Internen Sound steuern – Making of … 5 Erstellen Sie zunächst das Skript für
den Play- und Stop-Button:
1 Öffnen Sie ein neues Animate-Pro-
jekt mit ActionScript 3.0. Zeile 1:
Zunächst wird eine Variable (hier:
2 Importieren Sie einen Sound im meinSound) der Klasse Song er-
WAV- oder MP3-Format in die zeugt, die Sie gerade neu definiert
Biblio­thek (siehe Seite 27). haben B.

3 Rechtsklicken Sie auf den Sound Zeile 2:


und setzen Sie in den Eigenschaften Mit Animate können mehrere
unter ActionScript das Häkchen bei Sounds abgespielt werden. Deshalb
Export für ActionScript A. muss jedem Sound eine Varia-
ble (hier: meinKanal) der Klasse
4 Erstellen Sie drei Schaltflächen für SoundChannel zugeordnet werden.
die Play-, Pause- und Stop-Funk­
tion. Geben Sie den Buttons in den Zeilen 4 bis 8:
Skript des Play-Buttons: Bei Eintre-
ten des Ereignisses (CLICK) wird
der dem Kanal zugeordnete Sound
1 var meinSound: Song = new Song(); abgespielt.
2 var meinKanal: SoundChannel = new SoundChannel();
3
Zeilen 10 bis 14:
4 playbutton.addEventListener(MouseEvent.CLICK,soundStart);
5 function soundStart(event:MouseEvent):void Skript des Stop-Buttons: Bei Eintre-
6 { ten des Ereignisses (CLICK) wird
7 meinKanal = meinSound.play();
8 }
der dem Kanal zugeordnete Sound
9 beendet.
10 stopbutton.addEventListener(MouseEvent.CLICK,soundStop);
11 function soundStop(event:MouseEvent):void
12 { 6 Testen Sie Ihr ActionScript – der
13 meinKanal.stop(); Sound müsste sich nun starten und
14 } und stoppen lassen.

7 Das ActionScript besitzt noch eine


Schwäche: Wenn Sie mehrmals

48
2D-Animation

auf den Play-Button klicken, wird


der Sound mehrmals gestartet und
lässt sich dann nicht mehr stoppen. 1 var meinSound: Song = new Song();
Diesen Fehler beheben wir (siehe 2 var meinKanal: SoundChannel = new SoundChannel();
3 var spiele:Boolean = false;
Screenshot rechts), indem wir mit-
4
tels Variable prüfen, ob der Sound 5 playbutton.addEventListener(MouseEvent.CLICK,soundStart);
bereits läuft. 6 function soundStart(event:MouseEvent):void
7 {
8 if (spiele==false) {
Zeile 3: 9 meinKanal = meinSound.play();
Eine Variable (hier: spiele) vom 10 spiele = true;
11 }
Typ Boolean wird eingeführt. Die- 12 }
ser Typ zeichnet sich dadurch aus, 13
dass er nur zwei Werte, wahr (true) 14 stopbutton.addEventListener(MouseEvent.CLICK,soundStop);
15 function soundStop(event:MouseEvent):void
oder falsch (false), annehmen 16 {
kann. Zu Beginn wird die Variable 17 meinKanal.stop();
auf false gesetzt, weil der Sound 18 spiele = false;
19 }
noch nicht abgespielt wird. 20

Zeile 8 bis 11:


Das Abspielen des Sounds wird nun
an die Bedingung (if) geknüpft, (Das Skript finden Sie auf der näch-
dass die Variable spiele auf false sten Seite.)
gesetzt ist. Nachdem der Sound
gestartet wurde, wird spiele auf Zeile 4:
true gesetzt. Beim erneuten An- Für den Pause-Button wird eine
klicken ist die Bedingung deshalb Variable (hier: pos) vom Datentyp
nicht mehr erfüllt und der Sound int definiert, mit dem sich ganze
kann kein zweites Mal gestartet Zahlen speichern lassen. Der Start-
werden. Beachten Sie die zwei wert beträgt 0 (Sekunden).
schließenden Klammern in den Zei-
len 11 und 12. Sie sind erforderlich, Zeile 10:
weil in den Zeilen 7 und 8 auch zwei Die Angabe der Variablen pos in
Klammern geöffnet werden. der Klammer bewirkt, dass der
Sound ab dem dort gespeicherten
Zeile 18: Wert gestartet wird. Wurde zuvor
Nach dem Stoppen des Sounds der Pause-Button betätigt, wird der
wird spiele wieder auf false ge- Sound also ab der aktuellen Stelle
setzt, so dass ein erneutes Starten fortgesetzt.
möglich wird.
Zeile 20:
8 Im letzten Schritt erweitern wir das Wenn der Stop-Button gedrückt
Skript um den Pause-Button. Hierzu wird, muss die Variable pos wieder
benötigen wir eine Variable, in der auf null gesetzt werden, damit der
die aktuelle Abspielzeit gespeichert Sound bei Neustart wieder von
wird. vorne abgespielt wird.

49
Dateien zu belassen. Der Vorteil dabei
ist, dass die SWF-Datei klein bleibt
1 var meinSound: Song = new Song(); und schnell geladen wird. Der oder die
2 var meinKanal: SoundChannel = new SoundChannel(); Sounddateien werden erst bei Bedarf
3 var spiele:Boolean = false; (nach-)geladen.
4 var pos:int = 0;
5 Um das Abspielen eines externen
6 playbutton.addEventListener(MouseEvent.CLICK,soundStart); Sounds zu ermöglichen, muss das im
7 function soundStart(event:MouseEvent):void
vorherigen Abschnitt erarbeitete Skript
8 {
9 if (spiele==false) { lediglich an einer Stelle verändert
10 meinKanal = meinSound.play(pos); werden.
11 spiele = true;
12 }
13 } Externen Sound steuern – Making of …
14
15 stopbutton.addEventListener(MouseEvent.CLICK,soundStop);
16 function soundStop(event:MouseEvent):void 1 Verwenden Sie Ihr Animate-Projekt
17 { aus dem vorherigen Abschnitt.
18 meinKanal.stop();
19 spiele = false;
20 pos = 0; 2 Löschen Sie den importierten
21 } Sound aus der Bibliothek und fügen
22 pausebutton.addEventListener(MouseEvent.CLICK,soundPause); Sie stattdessen eine Sounddatei in
23 function soundPause(event:MouseEvent):void
24 { das Verzeichnis, in dem sich auch
25 pos = meinKanal.position; das Animate-Projekt befindet (hier:
26 meinKanal.stop(); Song.mp3).
27 spiele = false;
28 }
3 Ändern Sie die beiden obersten
Zeilen des ActionScripts.

Zeile 22 bis 28: Zeile 1:


Durch Betätigung des Pause-But- Für den externen Sound benötigen
tons ändert sich der Wert von pos Sie eine Variable (hier: meinSong)
auf die gerade aktuelle Abspiel­ der Klasse URLRequest. Geben Sie
position im Sound. Danach wird der in der Klammer in Anführungszei-
Soundkanal gestoppt. chen den Dateinamen des Sounds
an (hier: “Song.mp3“).
Wenn Sie mehrere Sounds verwenden,
empfiehlt es sich, diese in externen Zeile 2:
Im Unterschied zu einem impor-
tierten Sound müssen Sie bei exter-
nen Sounds die vordefinierte Klasse
1 var meinSong: URLRequest = new URLRequest(“Song.mp3“); Sound verwenden. Dieser Klasse
2 var meinSound: Sound = new Sound(meinSong); wird der Name der URLRequest-­
3 var meinKanal: SoundChannel = new SoundChannel(); Variablen übergeben, hier mein­
4 var spiele: Boolean = false;
5 var pos: int = 0; Song.
6
7 // Buttonprogrammierung siehe oben
Das übrige Skript unterscheidet sich
8
9 nicht vom vorherigen, so dass die Steu-
erung bereits funktionieren sollte.

50
2D-Animation

2.4.6 Animationen B
0 100 200 300 400 500 600 700 800 x
In Kapitel 2.3 haben Sie einige Möglich- 100 y
keiten kennengelernt, wie Sie Anima­
tionen ohne ActionScript erstellen
200

heigth
können. Wozu also Anima­tionen mit x
ActionScript? A
Die Vorteile der Programmierung von 300
Animationen bestehen darin, dass
ƒƒ sich Animationen exakt(er) steuern width
400
lassen, wenn Sie deren Parameter
y
numerisch vorgeben,
ƒƒ Sie letztlich Zeit und Arbeit sparen,
wenn Sie Animationen mehrfach (kleines schwarzes Kreuz) A an
benötigen und hierfür lediglich ein der gewünschten Stelle befindet.
Skript kopieren müssen, Verlassen Sie das Symbol durch
ƒƒ die Zeitleiste „aufgeräumt“ ist und Anklicken des Pfeils links oberhalb
damit übersichtlich bleibt, der Bühne.
ƒƒ viele Funktionen, z. B. die Bewegung
von Objekten mit der Maus, ohne 4 Platzieren Sie die Symbolinstanz
ActionScript nicht möglich sind. an einer beliebigen Stelle auf der
Die Animationsmöglichkeiten per Bühne. Vergeben Sie ihr in den
ActionScript sind praktisch grenzenlos. Eigenschaften einen eindeutigen
Wir zeigen hier lediglich einen kleinen Namen ohne Umlaute und Sonder-
Einblick in diese Möglichkeiten. In der zeichen, z. B. ballon – er wird für
ersten Übung bewegt sich ein Ballon das Action­Script benötigt.
von links unten nach rechts oben über
die Bühne, verkleinert sich hierbei und 5 Bevor wir uns mit dem Skript be-
wird am Ende unsichtbar. schäftigen, werfen wir einen Blick
auf das Koordinatensystem: In der
Lineare Bewegung – Making of … Informatik ist es üblich, dass sich
der Nullpunkt B links oben befindet
1 Erstellen Sie das zu animierende und die y-Achse nach unten zeigt.
Objekt (hier: Ballon) in Animate In der Grafik besitzt das Objekt
oder importieren Sie es aus einer (genauer: seine Registrierung) also
Grafiksoftware in die Bibliothek. die Koordinaten x = 400 (Pixel) und
y = 250 (Pixel).
2 Konvertieren Sie das Objekt im
Menü Modifizieren > In Symbol kon- 6 Geben Sie das ActionScript in Bild 1
vertieren in ein Movieclip-Symbol. ein (siehe nächste Seite).

3 Legen Sie den Bezugspunkt Zeilen 4 bis 8:


(Registrierung) des Objekts fest: Der Ballon wird auf die gewünsch-
Doppelklicken Sie hierzu auf das ten Startwerte (Position, Größe)
Symbol und verschieben Sie das gesetzt: Der y-Wert befindet sich
Objekt, bis sich die Registrierung außerhalb der Bühne, damit der

51
diesem Fall wird das Event ENTER_
FRAME, also „Betreten des Bildes“,
1 stop(); geprüft. Obwohl der Abspielkopf
2 auf Bild 1 scheinbar steht, wird
3 //Startwerte dieses Ereignis ständig wiederholt,
4 ballon.x = 100;
5 ballon.y = 600; weil das Skript prüft, ob irgend-
6 ballon.width = 320; welche Ereignisse eintreten. Hierzu
7 ballon.height = 410;
verlässt der Abspielkopf das Bild
8 ballon.alpha = 1;
9 (EXIT_FRAME), um es gleich darauf
10 //Animation wieder zu betreten (ENTER_FRAME).
11 ballon.addEventListener(Event.ENTER_FRAME,bewegeBallon);
12 function bewegeBallon(e:Event):void {
13 e.target.x += 1; Zeilen 12 bis 18:
14 e.target.y -= 2; In der Funktion bestimmen Sie, was
15 e.target.scaleX -=0.006;
16 e.target.scaleY -=0.006;
sich bei jeder Wiederholung ändern
17 if (e.target.y < 150) e.target.alpha -= 0.005; soll. Zunächst wird die Position
18 } verändert: Die Kurzschreibweise +=
19
bzw. –= bewirkt, dass die x- bzw.
y-Koordinate um die angegebene
Anzahl an Pixel erhöht bzw. verrin-
gert wird. Im Beispiel bewegt sich
Ballon zu Beginn nicht sichtbar ist. der Ballon pro Wiederholung 2 Pixel
Die Eigenschaft alpha definiert die nach oben und 1 Pixel nach rechts.
Durchsichtigkeit zwischen 0 (un- Über scaleX bzw. scaleY lässt
sichtbar) und 1 (sichtbar). sich das Objekt skalieren, wobei
die 1 für 100 % steht. Im Beispiel
Zeile 11: verkleinert sich der Ballon pro
Wie schon oft, benötigen wir auch Wiederholung um 0,6 %. Die letzte
hier wieder einen Event-Listener. In Anweisung ändert die Transparenz
um 0,5 % pro Wiederholung. Die if-
Anweisung sorgt dafür, dass dies
erst geschieht, wenn der Ballon die
y-Koordinate 150 unterschritten hat
– also gegen Ende der Bewegung.

Als zweite Möglichkeit, Objekte zu be-


wegen, zu drehen oder zu transformie-
ren, bietet sich die Zeitsteuerung an. In
der nächsten Übung animieren wir eine
analoge Uhr.

Zeitgesteuerte Animation – Making of …

1 Erstellen Sie eine Uhr ohne Zeiger


und importieren Sie die Grafik in
ein neues ActionScript-Animate-
Projekt.

52
2D-Animation

2 Erstellen Sie einen Sekunden-,


Minuten- und Stundenzeiger in
Animate und konvertieren Sie die 1 //Sekundenzeiger
Zeiger in Movieclip-Symbole. 2 var sekunden:Timer = new Timer(1000);
3 sekunden.addEventListener(TimerEvent.TIMER, zeigeSek);
4 sekunden.start();
3 Doppelklicken Sie nacheinander auf 5 function zeigeSek(e:TimerEvent):void {
die Symbole, um diese bearbeiten 6 sekundenzeiger.rotation +=6;
7 }
zu können. Verschieben Sie die Gra-
8 //Minutenzeiger
fik so, dass sich die Registrierung 9 var minuten:Timer = new Timer(60000);
(schwarzes Kreuz) am späteren 10 minuten.addEventListener(TimerEvent.TIMER, zeigeMin);
11 minuten.start();
Drehpunkt des Zeigers befindet. 12 function zeigeMin(e:TimerEvent):void {
13 minutenzeiger.rotation +=6;
4 Platzieren Sie die drei Zeiger auf 14 }
15 //Stundenzeiger
der Uhr und vergeben Sie den 16 var stunden:Timer = new Timer(120000);
Symbol­instanzen in den Eigen- 17 stunden.addEventListener(TimerEvent.TIMER, zeigeStd);
schaften ein­deutige Namen. 18 stunden.start();
19 function zeigeStd(e:TimerEvent):void {
20 stundenzeiger.rotation +=1;
5 Geben Sie in Bild 1 das Action­Script 21 }
rechts oben ein.

Zeilen 2, 9, 16:
Für die drei Zeiger werden drei – Der Minutenzeiger dreht sich pro
Variable der Klasse Timer benötigt. Minute um 6°, erreicht also nach 60
Die Werte in Klammer geben die x 6° = 360° eine volle Umdrehung.
Zeit in Millisekunden an: 1.000 ms = – Der Stundenzeiger dreht sich alle
1 s für den Sekundenzeiger; 60.000 zwei Minuten um 1°. Dies ergibt in
ms = 60 s = 1 min für den Minuten- einer Stunde eine Drehung um 30
zeiger; 120.000 ms = 120 s = 2 min x 1° = 30°, so dass er dann auf dem
für den Stundenzeiger (Erklärung nächsten Teilstrich steht.
siehe unten).

Zeilen 3, 10, 17:


An das Timer-Objekt werden Event-
Listener angebracht. Diese rufen
die jeweilige Funktion nach Ablauf
der eingestellten Zeit auf. Danach
wiederholt sich der Vorgang.

Zeilen 6, 13, 20:


Die Funktionen führen zur Drehung
der Zeiger:
– Der Sekundenzeiger dreht sich
pro Aufruf, also jede Sekunde, um
6°. Nach einer Minute hat er sich 60
x 6° = 360° gedreht, also eine volle
Umdrehung gemacht.

53
Zum Schluss möchten wir an einem
Beispiel zeigen, dass Objekte mit Hilfe
eines Skripts beweglich gemacht und
durch den Nutzer bewegt werden kön-
nen. Der Fachbegriff hierfür lautet Drag
& Drop (dt.: ziehen und loslassen).
Als Beispiel realisieren Sie in dieser
Übung das bekannte Logikspiel „Türme
von Hanoi“ (Spielregeln siehe Wiki­
pedia).

Drag & Drop – Making of … MOUSE_DOWN, also die gedrückte


Maustaste. Danach wird die Funk­
1 Erstellen Sie die fünf Spielsteine tion startBraun aufgerufen.
direkt in Animate oder importieren
Sie sie aus einer Grafiksoftware. Zeilen 3 bis 5:
Die aufgerufene Funktion start­
2 Konvertieren Sie die Spielsteine in Braun versieht den Stein mit einem
Movieclip-Symbole und platzieren neuen Listener, der auf MOUSE_
Sie diese (als Turm) auf der Bühne. MOVE, also Mausbewegung, reagiert
und die Funktion zieheBraun
3 Vergeben Sie jeder Instanz in den aufruft.
Eigenschaften einen Namen.
Zeilen 10 bis 14:
4 Geben Sie in Bild 1 das ActionScript Die Funktion zieheBraun platziert
unten für den ersten Stein ein. den Stein auf den Koordinaten der
Maus. Bei Bewegung der Maus
Zeile 2: mit gedrückter Maustaste wird der
Der Event-Listener des braunen Stein deshalb mitbewegt.
Steins wartet auf das Ereignis
Zeilen 6 bis 9:
Der dritte Listener wartet auf das
Ereignis MOUSE_UP, also das Loslas-
1 //Brauner Stein sen der Maustaste. Die aufgerufene
2 braun.addEventListener(MouseEvent.MOUSE_DOWN,startBraun); Prozedur entfernt (engl.: remove)
3 function startBraun(e:MouseEvent):void { den MOUSE_MOVE-Listener, so dass
4 braun.addEventListener(MouseEvent.MOUSE_MOVE,zieheBraun);
5 } der Stein nicht mehr bewegt wer-
6 braun.addEventListener(MouseEvent.MOUSE_UP,stopBraun); den kann.
7 function stopBraun(e:MouseEvent):void {
8 braun.removeEventListener(MouseEvent.MOUSE_MOVE,zieheBraun);
9 } 5 Für die anderen Steine brauchen
10 function zieheBraun(e:MouseEvent):void { Sie das Skript nur zu kopie­ren und
11 braun.x = mouseX;
12 braun.y = mouseY;
die Farben zu ändern.
13 e.updateAfterEvent();
14 } 6 Jetzt ist Ihr Spiel einsatzbereit und
15
Sie müssen das Rätsel um die
Türme von Hanoi nur noch lösen.

54
2.5 Aufgaben 2D-Animation

1 Animate und Flash unterscheiden 3 Schaltflächen-Symbol kennen

Nennen und erklären Sie den wesent- Erklären Sie die Besonderheit der Zeit-
lichen Vorteil von Adobe Animate im leiste eines Schaltflächen-Symbols.
Vergleich zu Flash.

4 Animationsdauer berechnen

Eine Animation soll 7 s lang dauern. Die


2 Symbol und Instanz unterscheiden Bildrate beträgt 24 BpS.

a. Unterscheiden Sie folgende Begriffe. a. Berechnen Sie, in welchem Bild die


Animation endet.
Symbol:

b. Die Animation wird nun bis Bild 210


Instanz: verlängert.
Berechnen Sie die notwendige Ände-
rung der Bildrate, damit die Anima­
tion wieder 7s lang dauert.

b. Erklären Sie, wie sich Änderungen,


z. B. Größe, Farbe, auswirken:
Änderung des Symbols: c. Erklären Sie, wie sich die Änderung
der Bildrate auf die Animation aus-
wirkt.

Änderung der Instanz:

55
5 Animationstechniken unterscheiden ƒƒ Luftballon, der aufsteigt, kleiner und
unsichtbar wird
a. Unterscheiden Sie Einzelbild- von ƒƒ Uhr mit sich drehenden Zeigern
Schlüsselbild-Animationen. ƒƒ (eigene Idee)

7 Diashow erstellen

Erstellen Sie eine selbstablaufende


Diashow mit mindestens zehn Bildern,
bei der jedes Bild fünf Sekunden zu
sehen ist.

8 Werbebanner realisieren

b. Nennen Sie für jede Technik einen Realisieren Sie einen selbstablaufenden
wesentlichen Vorteil. animierten Werbebanner im Format
„Wide Skyscraper“ (160 x 600 Pixel) für
ein Produkt oder Event Ihrer Wahl.

9 Grußkarte animieren

a. Erstellen Sie in Illustrator eine Gruß-


karte, z. B. für einen Geburtstag, zu
Weihnachten oder für einen sons­ti­
gen Anlass.
b. Importieren Sie die Karte in Animate.
c. Ergänzen Sie Animationen.
6 Schlüsselbild-Animationen erstellen d. Ergänzen Sie eventuell einen Hinter-
grund-Sound.
Erstellen Sie folgende Schlüsselbild-
Animationen: 10 Cartoon animieren
ƒƒ Lauftext von unten nach oben
ƒƒ Ball, der auf und ab springt a. Entwerfen Sie einen Cartoon oder
ƒƒ Windrad mit drei Flügeln, die sich eine kurze Bildergeschichte. (Alter-
drehen nativ können Sie auf eine Datei aus
dem Internet zurückgreifen. Diese
darf aus urheberrechtlichen Gründen
jedoch nur für private Übungszwecke
verwendet werden.)
b. Importieren Sie die Grafik(en).
c. Ergänzen Sie Animationen, z. B.
Sprechblasen, Augen- oder Mundbe-
wegungen bei Figuren.
d. Ergänzen Sie eventuell Geräusche
oder Sound. Im Internet finden Sie
auch lizenzfreie Archive.

56
2D-Animation

11 Animation mit inverser Kinematik 14 Funktion von ActionScript 3.0


erstellen kennen

a. Testen Sie die Vorgehensweise mit a. Erklären Sie die Funktion von Action­
einfachen Objekten, z. B. mit zwei Script 3.0?
verbundene Stangen.
b. Animieren Sie eine Maschine, z.B.
einen Bagger (siehe Seite 12).
c. Animieren Sie eine einfache Bewe-
gung (siehe Seite 14).
d. Animieren Sie eine Zeichentrickfigur
(siehe Seite 39)

12 Verschachtelte Animation erstellen

Erstellen Sie verschachtelte Anima­ b. Zählen Sie fünf Anwendungsbei-


tionen. Vorschläge: spiele auf.
ƒƒ Auto mit sich drehenden Rädern
ƒƒ Vogel mit Flügelschlag
1.
ƒƒ Dampflok mit Rauchwolken
ƒƒ Rettungswagen mit Blaulicht
2.
ƒƒ Hubschrauber mit Rotoren
ƒƒ Rakete mit animiertem Düsenantrieb
3.
ƒƒ (eigene Idee)
4.
13 Animate-Projekt veröffentlichen 5.
Animate-Projekte können auf unter-
schiedliche Weise veröffentlicht werden. 15 ActionScript-Befehle kennen
Nennen Sie die erforderlichen Dateien,
um ein Projekt wiedergeben zu können: Erklären Sie kurz die Funktion folgender
ActionScript-Befehle:
a. im Webbrowser a.
stop();
b. ohne Browser auf Windows-PCs (nur
ActionScript 3.0)
b.

c. ohne Browser auf Apple-PCs (nur


nextFrame();
ActionScript 3.0)

c.
d. mit dem Flash-Player (nur Action­
Script 3.0)
gotoAndStop();

57
Zeile 1:
16 Schaltflächen programmieren

Um Schaltflächen (Buttons) program-


mieren zu können, erhalten Sie einen
sogenannten Event-Listener.
Zeile 2:

a. Erklären Sie, wozu ein Event-Listener


dient.

b. Erweitern Sie das Skript, so dass die


Animation bei Mausklick auf but­
ton1 zu Bild 15 springt und stoppt.
(Ergänzen Sie die Lösung links unten.)
c. Erweitern Sie das Skript, so dass die
Animation bei Mausklick auf einen
b. Nennen Sie drei typische „Events“. zweiten Button (button2) ab Bild 30
fortgesetzt wird.
1.
(Ergänzen Sie die Lösung links unten.)
2.

3. 18 Lampe animieren

17 Zeitleiste steuern

Gegeben sind zwei Zeilen eines Action­


Scripts 3.0:

1 stop();
2 button1.addEventListener(MouseEvent.CLICK,aktion);

a. Erklären Sie die Funktion der beiden


Zeilen.

58
2D-Animation

Gestalten und programmieren Sie eine


Lampe, die sich mit Hilfe eines Schal-
ters ein- und ausschalten lässt.

19 Stoppuhr animieren

Gestalten und programmieren Sie eine


funktionsfähige Stoppuhr. Sehen Sie
drei Buttons vor:
ƒƒ Starten
ƒƒ Stoppen
ƒƒ Rücksetzen

Hinweise:
ƒƒ Start-Button: Setzen Sie den Abspiel-
kopf auf das Bild, das die Animation
des Zeigers enthält. Die Animation
kann wahlweise programmiert (siehe
Uhr auf Seite 53) oder als innere Ani-
mation im Symbol realisiert werden.
ƒƒ Stop-Button: Der stop()-Befehl
kann mit einem Symbol verknüpft
werden, z.B. zeiger.stop();
ƒƒ Rücksetzen-Button: Setzen Sie den
Abspielkopf auf Bild 1 zurück.

59
3.1 Einführung
3 3D-Animation mit Cinema 4D

3.1.1 Maxon Cinema 4D 3.1.2 Entwicklungsumgebung


Für dieses Kapitel haben wir uns für die Der Screenshot auf der rechten Sei­
Software Cinema 4D der Firma Maxon te zeigt die Benutzeroberfläche von
Computer GmbH entschieden. Mit Cine­ Cinema 4D – die sogenannte Entwick­
ma 4D können Sie nicht nur professio­ lungsumgebung. Bevor wir mit den
nelle 3D-Grafiken erstellen, sondern Workshops beginnen, stellen wir Ihnen
diese auch durch entsprechende Be­ die wichtigsten Bereiche und Funktio­
leuchtung in Szene setzen und animie­ nen kurz vor.
ren. Das vierte „D“ in 4D symbolisiert
die vierte Dimension Zeit. Editor
Cinema 4D wird einerseits zur Mo­ Der – hier rot umrahmte – Editor ist der
dellierung dreidimensionaler Objekte eigentliche Arbeitsbereich von Cinema
aus den Bereichen Technik oder Archi­ 4D. Hier modellieren Sie Ihre Objekte,
tektur genutzt und stellt andererseits setzen diese in Szene und sehen die
zahlreiche Möglichkeiten zur Charakter­ Vorschau Ihrer Animationen. Zur Ände­
animation bereit. rung der Ansicht im Editor haben Sie
Die in diesem Kapitel beschriebene vier Möglichkeiten.
Version R18 (Release 18) ist seit 2016 A Ändern der (Kamera-)Position:
sowohl für macOS als auch für Win­ ­Klicken Sie auf das Icon und ziehen
dows verfügbar. Die gute Nachricht Sie die Maus mit gedrückter Maus­
ist, dass Sie, falls Sie Schüler/-in oder taste in die gewünschte Richtung.
Student/-in sind, Cinema 4D kostenfrei B Zoomfunktion: mit gedrückter Maus­
nutzen können (www.maxon.net/de/ taste ziehen
training/studentenversion). Für Lehrer­/ C Drehen: mit gedrückter Maustaste
-innen oder Dozenten und Dozentinnen ziehen
gibt es eine im Vergleich zur Vollversion D Vier Ansichten: Ein Mausklick auf das
deutlich vergünstigte Version für derzeit Icon stellt die Szene zusätzlich von
knapp 180 Euro. vorne, rechts und oben dar. Diese
Bitte beachten Sie, dass wir im Rah­ Ansichten sind bei der Modellierung
men dieses Buches nur einen kleinen äußerst hilfreich. Klicken Sie auf das
Einblick in Cinema 4D geben können gleiche Icon im jeweiligen Fenster,
und hierbei den Fokus auf Animation um dieses im Vollbild darzustellen.
legen. Einige weitere Möglichkeiten
zur Erstellung von 3D-Grafiken finden XYZ-Koordinatensystem
Sie im Band Zeichen und Grafik dieser Um im 3D-Raum arbeiten zu können,
Buchreihe. Zur Vertiefung verweisen benötigen wir ein Koordinatensystem.
Zeichen und Grafik
wir auf einschlägige Literatur oder auf Cinema 4D unterscheidet zwischen
Videotutorials. einem unveränderlichen Welt-Koor­
Der Umgang mit Cinema 4D erfor­ dinatensystem E und Objekt-Koor­
dert viel Übung und kann nicht in dinatensystemen F. Letztere befinden
wenigen Stunden erlernt werden. Bitte sich im Mittelpunkt der Objekte. Wird
haben Sie etwas Geduld mit sich, Sie ein Objekt verschoben oder ge­
werden sehen, dass sich mit der Zeit dreht, verschiebt oder dreht sich das
auch die Erfolgserlebnisse einstellen ­Objekt-Koordinatensystem mit, das
werden. Welt-Koordinatensystem ist unver­

© Springer-Verlag GmbH Deutschland 2017


P. Bühler, P. Schlaich, D. Sinner, Animation, Bibliothek der Mediengestaltung,
DOI 10.1007/978-3-662-53922-4_3
3D-Animation

H L P I G

A B C D

N F

O
E

J M Q

Entwicklungsumge-
änderlich. Klicken Sie auf Icon G, um die X-, Y- und Z-Werte auch in Zentime­ bung von Cinema 4D
zwischen Welt- und Objekt-Koordinaten ter (cm) eingeben J. Die Werte können
umzuschalten. Beide Koordinatensys­ positiv oder negativ sein, entsprechend
teme besitzen folgende Achsen: ändert sich die Richtung. Jede Eingabe
muss mit Anwenden K beendet werden.
XYZ-System
Objekt skalieren
X­Achse: Waagrechte
Y­Achse: Senkrechte Klicken Sie auf Icon L, um ein Objekt zu
Z­Achse: Tiefe skalieren. Wie beim Verschieben können
Sie wahlweise mit gedrückter Maus­
taste oder (exakter) durch Eingabe der
Objekt verschieben Zahlenwerte M arbeiten. Im zweiten Fall
Klicken Sie auf Icon H, um ein Ob­ geben Sie den X-Wert ein, die Y- und Z-
jekt mit der gedrückten Maustaste Werte werden automatisch angepasst.
zu verschieben. Durch Anklicken der Um ein Objekt zu verzerren, also
Icons I können Sie Achsen sperren. Im nicht proportional zu skalieren, ziehen
Screenshot sehen Sie die Standard­ Sie an den kleinen, orangefarbigen
einstellung, bei der alle Achsen ent­ Punkten N auf den Achsen. Alternativ
sperrt sind. Alternativ zur Bewegung können Sie auch in den Objekteigen­
eines Objekts mit der Maus können Sie schaften O neue Werte zuweisen.

61
HPB-Koordinaten­
system H
Im Flugverkehr wird
mit HPB-Koordinaten
z. B. auch Licht, Farben, Verformungen
gearbeitet:
ƒƒ H(eading): Senk­ oder die Kamera(s) animieren. Den
rechte Achse Möglichkeiten sind (fast) keine Grenzen
ƒƒ P(itch): Querachse gesetzt – an heutigen Animationsfilmen
ƒƒ B(ank): Längsachse B sind ganze Heerscharen von Anima­
teuren beteiligt. Wir stellen Ihnen im
P nächsten Kapitel einige grundlegende
Techniken vor.

HPB-Koordinatensystem Texturen
Für Drehungen eignet sich das HPB- Texten dienen dazu, um Objekten eine
System, das im Flugverkehr zur Anwen­ realistisch aussehende Oberfläche zu
dung kommt, besser. Jedes Flugzeug geben. Cinema 4D stellt hierfür links
kann sich um drei Achsen drehen: unten einen Material-­Manager bereit,
Heading (H) dreht es um die senkrechte den Sie ab Seite 73 kennenlernen.
Achse, Bank (B) um die Längsachse und
Pitch (P) um die Querachse.

HBP-System
H­Achse: Senkrechte Achse
B­Achse: Längsachse
P­Achse: Querachse
Szene
Sind die Objekte model­
Objekt drehen liert, müssen sie in
Um Drehungen vornehmen zu können, Szene gesetzt werden. Hierzu dienen im
klicken Sie auf Icon P (vorherige Seite) Wesentlichen:
oder geben den Drehwinkel Q (vorhe­ ƒƒ Umgebung, z. B. Boden, Himmel,
rige Seite) in Grad ein. ƒƒ eine oder mehrere Kameras,
ƒƒ Beleuchtung, z. B. Sonnenlicht, Spot-
Modellieren Licht, Flächenlicht.
Jedes Cinema-­
4D-Projekt be­- Rendern
ginnt mit der Modellierung. Die wich­ Der letzte Schritt eines
tigsten Tools zur Modellierung ver­ Cinema-4D-­Projekts ist
bergen sich hinter diesen fünf Icons. schließlich die Berechnung und Ausga­
Wir gehen an dieser Stelle nicht näher be der erstellten Szene(n). Dabei kann
darauf ein, sondern wenden sie in den es sich um Einzelbilder, aber auch um
Workshops an. Bildfolgen handeln. Je nach Komplexi­
tät Ihres Projekts und Leistungsstärke
Animation Ihres Computers kann das Rendern
Mit Cinema 4D lassen sich Objekte nicht lange, seeeehr lange, dauern.
nur bewegen oder drehen, Sie können

62
3.2 Animationen 3D-Animation

3.2.1 Einfache Schlüsselbild- A


Animation
In diesem ersten Workshop drehen sich
Zahnräder gegeneinander.

Modellierung – Making of …

1 Beim Öffnen von Cinema 4D wird


automatisch ein neues Projekt an­
gelegt. Speichern Sie es unter dem
Namen zahnräder.c4d ab.

2 Halten Sie die linke Maustaste


auf Icon A so lange gedrückt, bis
das Menü aufklappt. Wählen Sie
B
Zahnrad.
C
Das Zahnrad besteht bislang nur aus
einer Kontur – einem sogenannten
Spline. Damit es zum 3D-Objekt wird
braucht es ein Volumen, der Fachbegriff
heißt Extrudieren.

3 Halten Sie die linke Maustaste auf E


Icon B so lange gedrückt, bis das D
Menü aufklappt. Wählen Sie Extru­
dieren. Sie sehen das Extrudieren-
Objekt im Objekt-Manager C.
H
I
4 Ziehen Sie das Zahnrad im Objekt-
Manager mit gedrückter Maustaste
auf das Extrudieren-Objekt, bis ein 7 Da der Mittelpunkt des Zahnrads in F
Pfeil nach unten sichtbar wird. Las­ der Bodenebene liegt, verschieben
G
sen Sie los. Das Zahnrad ist nun mit wir es nach oben. Geben Sie unter
dem Extrudieren-Objekt verbunden. Y = 220 cm H ein und bestätigen Sie
mit Anwenden I.
5 Vergrößern Sie unter D die Tiefe auf
40 cm. 8 Duplizieren Sie das Extrudieren-
Objekt mit dem Zahnrad C mit den
6 Klicken Sie auf Deckfl. E und wählen bekannten Tastenkombinationen
Sie bei Start die Option Deckflächen Strg (ctrl) + C und Strg (ctrl) + V.
und Rundung F. Reduzieren Sie den
Start-Radius G auf 3 cm. Wiederho­ 9 Verschieben Sie das neue Objekt
len Sie den Vorgang bei Ende für Extrudieren.1 auf X = 430 cm.
die Rückseite des Zahnrads.

63
Die Animation erstellen wir in der Zeit­ werden als hellblaue Flächen,
achse der Animationspalette im unteren markierte Schlüsselbilder als gelbe
Teil der Benutzeroberfläche. Flächen angezeigt D.

Animation – Making of … 3 Ziehen Sie den grünen Abspielkopf


nach rechts auf Bild 100. Geben Sie
1 Wählen Sie eines der beiden Extru­ als Drehwinkel bei E –180° ein und
dieren-Objekte A durch Anklicken bestätigen Sie mit Anwenden. Er­
im Objekt-Manager aus. zeugen Sie nun wieder ein Schlüs­
selbild C.
2 Der grüne Abspielkopf B befindet
sich auf Bild 1. In diesem Bild benö­ 4 Spielen Sie die Animation ab F. Das
tigen wir ein sogenanntes Schlüs­ Zahnrad müsste sich drehen, aller­
selbild (engl.: keyframe). Klicken dings nicht gleichmäßig. Der Grund
Sie auf den Aufnahme-Button mit dafür ist, dass Cinema 4D Schlüs­
Schlüssel-Icon C. Schlüsselbilder selbilder standardmäßig „weich“
verbindet. Dies heißt, dass ein Ob­
jekt zunächst beschleunigt und am
Ende abgebremst wird. Dies wollen
A wir in diesem Fall nicht.

5 Klicken Sie nacheinander auf die


beiden Schlüsselbilder G (hellblaue
Flächen in der Zeitachse). Rechts
sehen Sie die Keyeigenschaften.
Ändern Sie bei Interpolation die
B Einstellung von Spline auf Linear H.
C
6 Wiederholen Sie die Schritte 1 bis 5
D für das zweite Zahnrad. Ändern Sie
E
lediglich die Drehrichtung, indem
Sie einen Drehwinkel von +180°
eingeben.

7 Duplizieren Sie das linke Extrudie­


ren-Objekt und platzieren Sie es
ganz rechts. Spielen Sie die Anima­
tion ab. Wie Sie sehen, wurde auch
die Animation dupliziert, sodass
Sie schnell ein komplettes Getriebe
animieren könnten.
F H
8 Speichern Sie Ihr Projekt ab.
(Auf die nächsten Schritte bezüglich
G Material, Szene und Rendern gehen
wir später ein.)

64
3D-Animation

A
3.2.2 Kombinierte Schlüsselbild-
Animation
Im zweiten Workshop modellieren und
animieren wir einen Würfelwurf. Dabei
führt der Würfel eine lineare Bewegung
und eine Drehbewegung aus.

Modellierung – Making of …

1 Öffnen Sie ein neues Cinema-4D- C


Projekt und speichern Sie es unter
dem Namen würfel.c4d ab. B

2 Klicken Sie auf Icon A, um einen A G


Würfel zu erzeugen. F

3 Verschieben Sie ihn durch Eingabe


von Y = 100 cm B über die Boden­
ebene.

4 Setzen Sie das Häkchen bei Run­


dung C und geben Sie eine Größe
von 25 cm ein.
D
Die Zahlenwerte auf Würfeln sind nor­
malerweise nicht aufgedruckt, sondern
E
halbkugelförmige Vertiefungen. Diese
modellieren Sie, indem eine kleine
Kugel ein Stück weit in den Würfel „ein­
taucht“ und dieser Bereich vom Würfel 8 Halten Sie die linke Maustaste auf
mit Hilfe eines sogenannten Boole- Icon G so lange gedrückt, bis das
Objekts entfernt wird. Menü aufklappt. Wählen Sie Boole.

5 Halten Sie die linke Maustaste auf 9 Ziehen Sie im Objekt-Manager


Icon A so lange gedrückt, bis das zuerst den Würfel und danach die
Menü aufklappt. Wählen Sie Kugel. Kugel auf das Boole-Objekt H. Das
untere Objekt wird vom oberen H
6 Reduzieren Sie den Radius auf Objekt abgezogen.
20 cm D und verschieben Sie die
Kugel auf Y
  = 210 cm E. 10 Klicken Sie auf Icon F, um zur Zen­
tralperspektive zurückzukehren. Die
7 Klicken Sie auf Icon F, um die vier Vertiefung müsste zu sehen sein.
Ansichten angezeigt zu bekommen.
Die Kugel sitzt wie gewünscht exakt 11 Speichern Sie Ihr Zwischenergebnis
mittig und taucht in den Würfel ein. ab.

65
A
Kugel 1 2 3 4 5 6
C B X-Wert 0 0 -40 -40 40 40
Z-Wert -40 40 -40 40 -40 40

Nun muss das Null-Objekt Sechs


ebenfalls ins Boole-Objekt verschoben
werden. Sie können dies testen und
werden sehen, dass – je nach Reihenfol­
ge – entweder die Kugel der Eins oder
das Null-Objekt abgezogen werden. Die
Lösung ist, dass beide Objekte in ein
neues Null-Objekt platziert werden.

17 Erzeugen Sie ein neues Null-Objekt


und nennen Sie es Punkte.
Die Modellierung des restlichen Würfels
ist nun etwas Fleiß- und Rechen­arbeit. 18 Verschieben Sie die einzelne Kugel
Beachten Sie, dass bei Würfeln zwei und das Null-Objekt Sechs in das
gegenüberliegende Seiten immer 7 er­ Null-Objekt Punkte D.
geben. Gegenüber der 1 liegt also die 6.
19 Platzieren Sie das Null-Objekt nun
12 Klicken Sie auf die Kugel im Objekt- im Boole-Objekt, so dass sich fol­
Manager und erzeugen Sie mit den gende Hierarchie ergibt:
Tastenkombinationen Strg (ctrl) + C
und Strg (ctrl) + V sechs Kopien.

Um die Übersicht zu behalten, fassen


wir die sechs neuen Kugeln in einem D
sogenannten Null-Objekt zusammen.

13 Halten Sie die linke Maustaste auf


Icon A so lange gedrückt, bis das
Menü aufklappt. Wählen Sie Null.

14 Doppelklicken Sie auf das Null-Ob­


jekt im Objekt-Manager und geben
Sie ihm den Namen Sechs B.

15 Um die Kugeln korrekt zu platzie­ 20 Wiederholen Sie die Schritte 12


ren, wechseln Sie am besten wieder bis 16 und 18 für die vier weiteren
in die vier Ansichten C. Seiten des Würfels.

16 Platzieren Sie das Null-Objekt Sechs 21 Bevor wir mit der Animation begin­
vertikal auf den Wert Y = –10 cm. Die nen, speichern Sie den Würfel ab.
X- und Z-Werte der Kugeln sind:

66
3D-Animation

Die Animation des Würfels erfolgt in E


drei Schritten:
ƒƒ Waagrechte Bewegung in X-Richtung
ƒƒ Drehung um seine B-Achse A
ƒƒ Senkrechte Bewegung in Y-Richtung
D
Für eine exakte Ausgestaltung von C
Animationen stellt Cinema 4D die soge­
nannte Zeitleiste bereit.

Animation – Making of …

1 Öffnen Sie die Zeitleiste im Menü


Fenster > Zeitleiste (Dope Sheet)

2 Die Zeitleiste zeigt in der Grundein­


stellung nur animierte Objekte an
– in unserem Fall also noch nichts.
Deaktivieren Sie die Funktion im
Menü Ansicht > Anzeigen > Alles
Animierte anzeigen.

3 Klicken Sie auf das Boole-Objekt A


– es enthält ja den kompletten Wür­ B
fel. Wählen Sie im Menü Erzeugen
> Eigenschaftsspuren hinzufügen >
Position > X.
8 Klicken Sie auf den kleinen Pfeil C.
4 Bringen Sie den Würfel im Koordi­ Sie sehen eine Vorschau des Bewe­
naten-Manager auf seine Startposi­ gungsverlaufs D. Der Würfel startet
tion X = 800 cm B. langsam (flache Kurve), wird dann
schneller (steile Kurve) und bremst
5 Wählen Sie in der Zeitleiste im gegen Ende ab (flache Kurve).
Menü Einfügen > Momentanen Ein geworfener Würfel muss sich
Zustand aufnehmen. Cinema 4D jedoch zu Beginn schnell bewegen
erzeugt ein Schlüsselbild. und dann langsamer werden.

6 Verschieben Sie den Abspielkopf 9 Um diese Anpassung vorzuneh­


in der Zeitleiste auf Bild 100 und men, klicken Sie auf F-Kurven­
geben Sie im Koordinaten-Manager modus E. Sie sehen eine
die Endposition X = – 800 cm ein. vergrößerte Darstellung des Bewe­
gungs-Splines. Nach An­klicken
7 Fügen Sie in der Zeitleiste im Menü eines Schlüsselbildes erhält dieses
Einfügen > Momentanen Zustand einen „Anfasser“, mit dem die Kurve
aufnehmen ein Schlüsselbild ein. verändert werden kann.

67
A B 15 Fügen Sie in der Zeitleiste im Menü
Einfügen > Momentanen Zustand
aufnehmen ein Schlüsselbild ein.

16 Nehmen Sie auch bei dieser Kurve


im F-Kurvenmodus B eine Anpas­
sung vor: Zu Beginn dreht sich der
Würfel schnell und dann immer
langsamer.

Die Animation besitzt noch einen


Schönheitsfehler. Durch die Drehung
müsste der Würfel in den Boden „ein­
tauchen“ C. Sie sehen dies am besten
in der Ansicht Vorne:
D

C
10 Verändern Sie den Kurvenverlauf
wie oben dargestellt und testen Sie
das Resultat, indem Sie die Anima­
tion abspielen. Ergänzen Sie aus diesem Grund noch
eine Animation in Y-Richtung:
11 Im nächsten Schritt ergänzen Sie
die Drehbewegung. Kehren Sie zur 17 Fügen Sie im Menü Erzeugen >
Dope-­Sheet-Ansicht A zurück. Eigenschaftsspuren hinzufügen >
Position > Y hinzu.
12 Fügen Sie im Menü Erzeugen >
Eigenschaftsspuren hinzufügen > 18 Erzeugen Sie ein Schlüsselbild in
Winkel > B hinzu. Bild 1 mit Y = 300 cm und in Bild 100
mit Y = 100 cm.
13 Belassen Sie in Bild 1 den Winkel
auf B = 0°. Wählen Sie in der Zeit­ 19 Erzeugen Sie weitere Schlüssel­
leiste im Menü Einfügen > Momen­ bilder in Bild 25 mit Y = 100 cm und
tanen Zustand aufnehmen. in Bild 50 mit Y = 200 cm, so dass
der Würfel einmal auf dem Boden
14 Verschieben Sie den Abspielkopf aufspringt. Im F-Kurvenmodus
in der Zeitleiste auf Bild 100 und sollte sich der grüne Kurvenverlauf
geben Sie im Koordinaten-Manager D ergeben.
den Endwinkel B = – 1080° ein. Dies
entspricht drei kompletten Umdre­ 20 Testen Sie die Animation und spei­
hungen (3 x 360°). chern Sie Ihr Projekt ab.

68
3D-Animation

3.2.3 Animation mit Deformer C A

Bisher haben wir starre, unveränder­ B


liche Objekte animiert. Unsere Natur ist
jedoch „belebt“, viele Materialien und
natürlich alle Lebewesen können ihre
Form ändern, denken Sie an Wolken,
Wellen, Nebel, Schnee, Sand, Pflanzen,
Tiere oder Menschen. Um diese Objekte
zu animieren, stellt uns Cinema 4D so­
genannte Deformer zur Verfügung. Wir
wenden dies am Beispiel eines schmel­
zenden Schneemanns an – sorry.

Modellierung – Making of …

1 Öffnen Sie ein neues Cinema-4D- D


Projekt und speichern Sie es unter
dem Namen schneemann.c4d ab.

2 Halten Sie die Maustaste kurze Zeit


auf Icon A gedrückt, um (nacheinan­ E
der) drei Kugel-Objekte zu erzeu­
gen.

3 Passen Sie die Größe der Kugeln an


und setzen Sie sie aufeinander.

4 Damit die Kugeln gestaucht wer­


den können, wandeln Sie sie durch
Anklicken von Icon B in Polygon-
Objekte um. er mit Hilfe eines Splines, das um die
Y-Achse gedreht wird.
5 Drücken Sie die Kugeln mittels
Skalieren-Werkzeug C in Z-Richtung 8 Wählen Sie den Spline-Stift D und
etwas zusammen, da dies realis­ zeichnen Sie die Kontur des Hutes.
tischer aussieht. Sie können wahlweise klicken, um
Eckpunkte (harte Tangenten) zu
6 Modellieren Sie die Knöpfe und erzeugen, oder klicken und ziehen,
Augen aus Kugel-Objekten. um Kurven (weiche Tangenten) zu
erzeugen. Beenden Sie die Eingabe
7 Modellieren Sie die Nase aus einem durch Drücken der ESC-Taste.
Zylinder-Objekt.
9 Nach Anklicken des Punkte-
Den Hut (Zylinder) könnten Sie aus zwei bearbeiten-Werkzeugs E können
Zylinder-Objekten erstellen. Besser wird Sie das „Feintuning“ des Splines

69
vornehmen. Klicken Sie hierzu auf an, dass Formänderungen ledig­
einen Ankerpunkt und ziehen Sie an lich in Animationen zu sehen sind
seinen Anfassern A. Mit gedrück­ und sich nicht auf das eigentliche
A
ter Shift-Taste kann ein einzelner Modell – unseren Schneemann –
Anfasser verändert werden. Durch auswirken.
Rechtsklick auf einen Ankerpunkt
können Sie weiche in harte Tangen­ 3 Erzeugen Sie auf Bild 1 der Zeitach­
ten umwandeln – oder umgekehrt. se ein Schlüsselbild durch Anklicken
Wichtig ist, dass der Spline an der des Aufnahme-Icons F.
Y-Achse beginnt und endet.
4 Wählen Sie unter den Deformer-
10 Klicken Sie auf Icon B und wählen Werkzeugen G Schmelzen aus.
Sie Lathe (dt.: Drehbank). Ziehen ­Ziehen Sie das Null-Objekt Körper
Sie den Spline mit der Hut-Kontur unter das Deformer-Objekt D.
unter das Lathe-Objekt C. Die Kon­
tur rotiert 360° um die Y-Achse und 5 Bewegen Sie den Abspielkopf auf
erzeugt einen Hut. Bild 100.

Animation – Making of … 6 Klicken Sie auf das Deformer-Objekt


und wählen Sie das Skalieren-Werk­
1 Erzeugen Sie ein Null-Objekt und zeug. Deformieren Sie das Null-Ob­
verschieben Sie die drei Schnee­ jekt Körper entlang der Y-Achse bis
kugeln in das Null-Objekt. Benen­ er komplett flach (geschmolzen) ist.
nen Sie das Objekt Körper D. Erzeugen Sie ein Keyframe durch
Anklicken des Aufnahme-Icons F.
2 Wechseln Sie durch Anklicken von
Icon E vom Modell-bearbeiten- in 7 Spielen Sie die Animation ab. Der
den Objekt-bearbeiten-Modus. Schnee „schmilzt“, aber die rest­
Die kleine Filmrolle im Icon zeigt lichen Objekte hängen in der Luft.

B G 8 Erzeugen Sie ein weiteres Null-


Objekt und verschieben Sie die
restlichen Objekte hinein.
E C
9 Animieren Sie nun dieses Null-
Objekt, indem Sie auf Bild 1 ein
D Schlüsselbild erzeugen, den Ab­
spielkopf auf Bild 100 setzen, das
Objekt nach unten verschieben und
noch ein Schlüsselbild erzeugen.

F 10 Spielen Sie die Animation ab. Neh­


men Sie ggf. Optimierungen vor.

11 Speichern Sie das Projekt ab – wir


werden es später weiterbearbeiten.

70
3D-Animation

A C
3.2.4 Pfadanimation
D
Ein weiteres Animationsverfahren ist, G
E
den Animationspfad mit Hilfe eines
Splines festzulegen. Sie können als
Splines wahlweise geometrische For­
men, z. B. Kreis oder Reckteck, verwen­ F
den oder mit Hilfe des Spline-Stiftes ei­
nen beliebigen eigenen Pfad zeichnen.
Im Workshop modellieren wir einen
– sehr einfachen – Fisch, der dann im
Wasser seine Runden drehen soll. Zur B
Modellierung verwenden wir das Sub­
division-Surface-Objekt. Dieses versieht
glatte Fläche, Ecken und Kanten mit
einer Oberfläche und lässt das Objekt
somit organisch aussehen. I J K

Modellierung – Making of …

1 Öffnen Sie ein neues Cinema-4D-


Projekt und speichern Sie es unter
dem Namen fisch.c4d ab.
H
2 Beginnen Sie mit dem Grundobjekt
Würfel A. Teilen Sie den Würfel in
Z-Richtung in drei Teile B, um die
Modellierung von Kopf, Rumpf und
Schwanzflosse zu erleichtern.

3 Erzeugen Sie ein Subvision-Sur­


face-Objekt C und ziehen Sie den
Würfel unter das Objekt D.
7 Wählen Sie im Polygon-bearbeiten-
4 Um die Linien angezeigt zu bekom­ Modus H eine Fläche aus. Diese
men, wählen Sie im Menü Darstel­ können Sie wahlweise verschieben
lung > Gouraud-Shading (Linien) E I, skalieren J oder drehen K.
und Isobaten F.
8 Wiederholen Sie Schritt 7 mit ande­
5 Klicken Sie auf den Würfel und wan­ ren Flächen, um dem Rumpf nach
deln Sie ihn in ein Polygon-Objekt und nach die gewünschte Form zu
G um. geben.

6 Zur Modellierung des Rumpfes 9 Zur Modellierung der Flossen


wechseln Sie am besten in die vier empfiehlt es sich, Subvison Surface
Ansichten. auszuschalten (A nächste Seite).

71
Flosse nach oben. Passen Sie auch
A das obere Rechteck C in Form und
C Größe an.

B 13 Wiederholen Sie die Schritte 10 bis


12 für Seiten- und Schwanzflossen.
Tipp: Um die Seitenflossen gleich­
zeitig zu erzeugen, markieren Sie
das rechte und linke Rechteck.

14 Für das „Feintuning“ schalten Sie


Subdivision Surface wieder ein D.

15 Wählen Sie den Punkte-bearbeiten-


Modus E, um einzelne Punkte
verschieben zu können. Zur Markie­
F rung einzelner Punkte eignet sich
das Live-Selektions-Werkzeug F:
D Ziehen Sie die Maus mit gedrückter
linker Maustaste einfach auf alle
Punkte, die Sie selektieren möch­
ten.
E
16 Platzieren Sie zwei kleine Kugeln,
von denen nur ein kleiner Teil sicht­
bar ist, zur Modellierung der Augen,

Die Modellierung des Mauls erfolgt


schließlich mit Hilfe eines Boole-Ob­
jekts.

17 Erzeugen Sie eine Kugel und wan­


deln Sie sie in ein Polygon-Objekt
10 Wählen Sie das obere Rechteck um. Passen Sie die Größe und
des Rumpfes und im Menü Mesh > Form des Objekts wie gewünscht
Befehle > Innen extrudieren. Ziehen an. Platzieren Sie die Kugel vor dem
Sie mit der Maus, so dass ein inne­ Kopf, so dass ein kleiner Teil in den
res Rechteck entsteht B. Kopf hineinragt.

11 Klicken Sie auf das innere Rechteck 18 Erzeugen Sie ein Boole-Objekt.
und bringen Sie es mit dem Ver­ Ziehen Sie zunächst die Kugel und
schieben- und Skalieren-Werkzeug danach das Subdivision-Surface-
in die gewünschte (Flossen-)Form. Objekt (also den Fisch) unter das
Boole-Objekt.
12 Wählen Sie im Menü Mesh >
Befehle > Bevel und ziehen Sie die 19 Speichern Sie den Fisch ab.

72
3D-Animation

Animation – Making of … E A G B H

Die Animation erfolgt in zwei Schritten: F C


ƒƒ Körperbewegung des Fisches mit
1
Hilfe des Wind-Deformers
ƒƒ Vorwärtsbewegung durch eine Pfad­
animation
D
1 Erzeugen Sie ein Null-Objekt A mit
Namen Fisch und verschieben Sie I
alle Teilobjekte des Fisches in dieses M J
L
Objekt. K

2 Wählen Sie unter den Deformer-


Objekten B Wind und weisen Sie
dem Null-Objekt den Deformer und wählen Sie im Menü Tags >
zu C. Platzieren Sie den Deformer Auf Spline ausrichten H.
knapp hinter den Augen.
8 Ziehen Sie den Animationspfad mit
3 Spielen Sie die Animation ab. Falls gedrückter Maustaste auf Spline-
der Fisch in Querrichtung defor­ Pfad I – der Fisch müsste an den
miert wird, drehen Sie den Defor­ Anfang des Pfades „springen“. Set­
mer um 90°. zen Sie das Häkchen bei Tangential
J und prüfen Sie, ob die Z-Achse
4 Passen Sie – während die Anima­ K eingestellt ist. Bei Erhöhung der
tion abgespielt wird – die Objekt- Prozentwerte bei Position L müsste
eigenschaften Amplitude, Größe, sich der Fisch vorwärts bewegen.
Frequenz und Turbulenz des Defor­
mers an, bis die Bewegung einer 9 Platzieren Sie den Abspielkopf auf
Schwimmbewegung ähnelt. Bild 1 M. Rechtsklicken Sie auf Posi­
tion L und danach auf Animation >
5 Der Fisch soll sich in Richtung der Spur hinzufügen. Rechtsklicken Sie
(blauen) Z-Achse bewegen. Falls die erneut auf Position und wählen Sie
Richtung der Achse am Fisch-Objekt Animation > Key hinzufügen.
nicht stimmt, klicken Sie auf Achse
D und drehen Sie die Achsen mit 10 Platzieren Sie den Abspielkopf auf
Hilfe des Drehen-Werkzeugs E. Bild 100. Geben Sie bei Position
L 100 % ein. Rechtsklicken Sie auf
6 Wechseln Sie in Ansicht Rechts F. Position und wählen Sie Animation
Wählen Sie den Spline-Stift G und > Key hinzufügen.
zeichnen Sie den Animationspfad.
11 Spielen Sie die Animation ab. Neh­
7 Klicken Sie auf das Fisch-Objekt men Sie ggf. Korrekturen vor (Menü
Fenster > Zeitleiste (F-Kurven)).
1 Dies ist die einfachste Lösung. Mit Cinema
4D sind auch „echte“ Charakter-Animationen 12 Speichern Sie die Datei ab.
mit inverser Kinematik möglich.

73
3.2.5 Spezial-Animationen 3 Erstellen Sie die Abdeckung aus
einer Kugel bzw. Halbkugel:
Natürliche Bewegungen sind oft so Radius = 10 cm
komplex, dass es unmöglich ist, diese Typ = Halbkugel
von Hand zu animieren. Beispiele X = 0 cm
hierfür sind Haare, Kleidung oder Ge­ Y = 300 cm
sichtszüge. Cinema 4D stellt glücklicher­ Z = 0 cm
weise eine Reihe von (programmierten)
Zusatzmodulen bereit, mit denen die Der Fuß ist im Prinzip auch ein Zylinder.
oben genannten Animatio­nen möglich Da wir jedoch unterschiedliche Deckflä­
werden. Wir stellen Ihnen dies am Bei­ chen benötigen, erstellen wir den Fuß
spiel einer wehenden Flagge vor. aus einem Kreis, der extrudiert wird.

Modellierung – Making of … 4 Wählen Sie aus den Splines B einen


Kreis. Geben Sie ihm einen Radius
1 Öffnen Sie ein neues Cinema-4D- von 40 cm.
Projekt und speichern Sie es unter
dem Namen flagge.c4d ab. 5 Wählen Sie unter C das Extrudie­
ren-Objekt und ziehen Sie den Kreis
Der Flaggenmast besteht aus drei Tei­ unter das Extrudieren-Objekt D.
len: Mast, Abdeckung und Fuß.
6 Geben Sie bei Objekteigenschaften
2 Erstellen Sie den Mast aus einem unter Verschiebung 8 cm ein E.
Zylinder A mit den Werten:
Radius = 5 cm 7 Geben Sie unter Deckfl. F die im
Länge = 300 cm Screenshot gezeigten Werte ein:
X = 0 cm
Y = 150 cm
Z = 0 cm

A B C

8 Drehen und platzieren Sie das


F Extrudieren-Objekt.
E
9 Erzeugen Sie unter A ein Null-
Objekt und nennen Sie es Mast.
Verschieben Sie die eben erstellten
Teilobjekte in das Null-Objekt Mast.

74
3D-Animation

10 Die Flagge wird aus einer Ebene F A C


modelliert, die Sie unter A finden.
Geben Sie der Ebene die Werte: B
Breite = 150 cm G
Tiefe = 100 cm D
Richtung = + Z E

11 Platzieren Sie die Ebene im oberen H


Drittel des Flaggenmastes.

12 Um die Ebene bearbeiten zu kön­


nen, muss sie in ein Polygon-Objekt I
umgewandelt werden. Klicken Sie
hierzu auf Button B links oben.

Animation – Making of …

Zur Animation von Kleidung bietet


­ inema 4D ein geniales Tool an. Da
C
Flaggen ebenfalls aus Stoff sind, wen­
den wir es hierfür an.

1 Weisen Sie der Flagge im Menü L K


Tags > Simulation Tags > Kleidung
zu C. Sie erkennen dies am neuen
Icon D. J

2 Nun muss die Flagge am Mast


befestigt werden. Wählen Sie das
Punkte-bearbeiten-Werkzeug E und
danach das Rechteck-Auswahl-
Werkzeug F aus. Vergrößern Sie die 5 Klicken Sie auf Kräfte K und geben
Flagge so, dass Sie die einzelnen Sie die Parameter v. a. für die Wind­
Polygon-Punkte gut erkennen. richtung und Windstärke ein. Soll
Umfahren Sie mit Hilfe des eben die Flagge weniger herunterhän­
gewählten Werkzeugs die linke gen, setzen Sie die Gravitation auf
Punktreihe G. 0. Sie können alle Werte während
der Animation verändern, dann
3 Klicken Sie auf das Kleidungs-Tag D sehen Sie gleich die Auswirkung.
und danach auf Ankleide H. Klicken
Sie bei Punkte fixieren auf Setzen I. 6 Falls Sie noch nicht zufrieden sind,
können Sie auch die Parameter
4 Spielen Sie die Animation ab J: Die unter Tags L verändern.
Flagge müsste animiert werden,
aber nach unten fallen. Dies liegt 7 Speichern Sie das Ergebnis ab.
daran, dass noch kein Wind weht.

75
3.3 Texturen

1 Öffnen Sie eine neue Datei und


G speichern Sie diese unter dem
­Namen texturen.c4d ab.

2 Wählen Sie im Menü Erzeugen >


A
Neues Material des Material-Mana­
B gers oder machen Sie einfach einen
D Doppelklick im Material-Manager.
E
C F 3 Doppelklicken Sie auf das neue Ma­
terial, um in den Material-Editor zu
gelangen. Geben Sie dem Material
den ­Namen Metall A.

Im linken Bereich sehen Sie zahlreiche


Materialeigenschaften, die Sie durch
Setzen der Häkchen aktivieren können.

4 Klicken Sie auf Farbe B und wählen


Bis jetzt sind die modellierten und ani­ Sie die gewünschte Metallfarbe,
mierten Objekte mausgrau. In diesem z. B. ein helles Grau.
Kapitel werden wir darauf eingehen,
wie Sie Ihre Modelle mit einer Textur 5 Klicken Sie auf Reflektivität C. Für
versehen können. Dies ist im einfachs­ polierte Metalle eignen sich Glanz­
ten Fall eine Farbe. Sogenannte Shader lichter vom Typ Beckmann oder
können wesentlich mehr und verleihen GGX D.
der Oberfläche eine dreidimensionale
Wirkung, z. B. Holzrinde oder Gras.
G

3.3.1 Texturen erstellen H

Cinema 4D bietet vorkonfigurierte


Texturen für alle möglichen Materialen 6 Die Stärke der Spiegelung stel­
als sogenannte Presets an. Diese finden len Sie vor allem über die beiden
Sie im Material-Manager links unten im Schieberegler Rauigkeit E und Spie­
Menü Erzeugen > Material-Presets la­ gelungsstärke F ein. Je geringer
den. Um einige typische Materialeigen­ die Rauigkeit gewählt wird, umso
schaften kennenzulernen, verwenden stärker spiegelt das Material.
wir selbst erstellte Materialien.
7 Klicken Sie auf Ebenen G und wäh­
Metall – Making of … len Sie, wie stark sich die Reflektivi­
tät auswirken soll H.
Polierte Metalle besitzen eine glatte und
glänzende Oberfläche. Ihre Farbe hängt 8 Schließen Sie den Material-Editor.
von der Metallart (z. B. Gold, Kupfer,
Stahl, Aluminium) ab.

76
3D-Animation

A F
G
H

B D

E
I
C

Kunststoff – Making of … Glas – Making of …

Kunststoffe sind in unserem Alltag weit Das zentrale Merkmal von Glas ist –
verbreitet – es gibt sie in allen Formen wenn es sich nicht gerade um Milchglas
und Farben. Wie Metalle weisen die handelt – seine Transparenz.
meisten Kunststoffe eine glatte Oberflä­
che auf. Wenn es sich nicht gerade um 1 Erzeugen Sie ein neues Material
hochglänzende Lacke handelt, besitzen und geben Sie ihm den Namen
Kunststoffe im Vergleich zu Metallen Glas.
eine deutlich weniger glänzende und
spiegelnde Oberfläche. 2 Geben Sie dem Glas die gewünsch­
te Farbe D. Falls Sie ein komplett
1 Erzeugen Sie ein neues Material durchsichtiges (Fenster-)Glas benö­
und geben Sie ihm den Namen tigen, muss als Farbe Weiß gewählt
Kunststoff. werden.

2 Da wir das Material später auf den 3 Setzen Sie das Häkchen bei Trans­
Würfel übertragen wollen, ändern parenz E. Hier legen Sie über die
Sie die Vorschau A nach Rechtsklick Farbe F (Weiß = maximale Transpa­
in Gerundeter Würfel. renz, Schwarz = keine Transparenz)
und den Helligkeitswert G fest,
3 Geben Sie dem Material die ge­ wie transparent das Glas werden
wünschte Farbe B. soll. Wählen Sie schließlich unter
Brechungs-Preset H Glas aus.
4 Ändern Sie die Parameter unter
Reflektivität C, bis der Kunststoff 4 Nehmen Sie unter Reflektivität I
das gewünschte Reflexionsverhal­ ähnliche Einstellungen vor wie bei
ten zeigt. Metallen.

5 Schließen Sie den Material-Editor. 5 Schließen Sie den Material-Editor.

77
G
B

A D

C F
E

Holz – Making of … Schnee – Making of …

Um eine Holzoberfläche zu erhalten, Auch Schnee weist – wie Holz – eine


benötigen Sie eine Holztextur. Diese leichte Reliefstruktur auf, die mit Hilfe
finden Sie teilweise kostenfrei im Inter­ eines Shaders modelliert werden kann.
net oder Sie verwenden eine der von
Cinema 4D mitgelieferten Texturen. 1 Erzeugen Sie ein neues Material
und benennen Sie es Schnee.
1 Erzeugen Sie ein neues Material
und benennen Sie es Holz. 2 Klicken Sie auf Farbe D und geben
Sie dem Schnee – na logisch – als
2 Rechtsklicken Sie auf das Vorschau­ Farbe ein reines Weiß.
bild links oben, wählen Sie Würfel.
3 Setzen Sie das Häkchen bei Relief E,
3 Klicken Sie auf Farbe A und danach klicken Sie auf den kleinen Pfeil und
auf den kleinen Pfeil bei Textur B. In wählen Sie Noise. Noise lässt sich
unserem Beispiel wurde die Textur am besten mit Störung übersetzen.
unter Oberflächen > Holz gewählt.
4 Ändern Sie Globale Größe und
4 Um einen 3D-Effekt zu erhalten, Relative Größe F auf 30 % bzw.
klicken Sie nochmals auf den Pfeil 50 %. Das Schwarz-Weiß-Muster G
und wählen Shader/Bild kopieren. ist später als Relief zu sehen.

5 Setzen Sie das Häkchen bei Relief C 5 Verleihen Sie dem Schnee unter
und fügen Sie die Kopie ein, indem ­ eflektivität noch etwas Glanz, da
R
Sie bei Textur auf den kleinen Pfeil er im Sonnenlicht durchaus glänzt.
klicken und Shader/Bild einfügen
wählen. (Den Relief-Effekt erkennen 6 Erstellen Sie die Materia­lien für
Sie erst, wenn das Material einem Augen, Nase und Hut des Schnee­
größeren Objekt zugewiesen wird.) manns selbst.

6 Schließen Sie den Material-Editor. 7 Schließen Sie den Material-Editor.

78
3D-Animation

E
D

Stoff – Making of … 3.3.2 Texturen zuweisen


Die Textur für die Flagge soll selbst Während die Erstellung von Texturen
erstellt und in Cinema 4D importiert ­relativ mühsam ist, geht ihre Zuwei­
werden. sung zu den Objekten einfach und
schnell.
1 Erstellen Sie in Illustrator (oder in
einer anderen Grafiksoftware) eine Making of …
Grafik der Größe 15 cm x 10 cm an,
damit das Seitenverhältnis mit der 1 Öffnen Sie die Datei zahnräder.c4d.
Flagge auf Seite 72 übereinstimmt.
2 Klicken Sie im Menü Erzeugen C auf
2 Gestalten Sie die Flagge wie Hinzuladen. Wählen Sie die Datei
gewünscht und speichern Sie sie texturen.c4d aus. Löschen Sie alle
als PNG-Datei unter dem Namen nicht benötigten Texturen.
flagge.png ab.
3 Weisen Sie das Material Metall
3 Erzeugen Sie ein neues Material zu, indem Sie es mit gedrückter
und benennen Sie es Flagge. Maustaste entweder direkt auf
das Zahnrad-Objekt oder auf den
4 Rechtsklicken Sie auf das Vorschau­ Objekt-Namen im Objekt-Manager
bild links oben, wählen Sie Ebene. ziehen. Am Icon D erkennen Sie,
dass die Textur zugewiesen wurde.
5 Klicken Sie auf Farbe A und da­
nach auf die drei Punkte B. Wählen 4 Rendern Sie das Bild durch Ankli­
Sie die eben erstellte Datei aus. cken des Icons E. Das Ergebnis ist
Falls die Datei in einem anderen enttäuschend, weil noch das Licht
Verzeichnis liegt, fragt Cinema 4D, fehlt.
ob eine Kopie erstellt werden soll.
Bestätigen Sie dies. 5 Öffnen Sie nacheinander Ihre an­
deren Dateien und weisen Sie die
6 Schließen Sie den Material-Editor. eben erstellten Texturen zu.

79
3.4 Szenen

Obwohl unsere Modelle mit Texturen 4 Klicken Sie auf Sonne C und wählen
versehen sind, kommen sie noch nicht Sie bei Schatten den Typ Fläche.
so richtig zur Geltung. Dies liegt daran,
dass der Editor lediglich ein Standard­ 5 Unter Basis D können Sie weitere
licht besitzt und wir uns auch noch Einstellungen vornehmen, z. B.
nicht um die Umgebung der Objekte Wolken.
gekümmert haben. Dies holen wir jetzt
nach. Auch hier gilt, dass wir in diesem 6 Halten Sie die linke Maustaste
Kapitel nur die Grundlagen besprechen nochmals auf Icon A so lange
können. Insbesondere das Licht-Setting gedrückt, bis das Menü aufklappt.
ist aufwändig und schwierig. Wählen Sie Boden.

3.4.1 Umgebung 7 Weisen Sie dem Boden die Schnee-


Textur E zu.
Außenumgebung – Making of …
8 Klicken Sie auf Aktuelle Ansicht
1 Öffnen Sie die Datei schneemann. rendern F – das Bild wird berechnet.
c4d. Nehmen Sie gegebenenfalls Kor­
rekturen an Ihrem Setting vor und
2 Halten Sie die linke Maustaste auf wiederholen Sie den Vorgang. Tipp:
Icon A so lange gedrückt, bis das Oft genügt es, einen Bildausschnitt
Menü aufklappt. Wählen Sie Physi­ zu rendern. Klicken Sie hierzu etwas
kalischer Himmel. länger auf Icon G und wählen dann
Interaktiver Renderbereich. Der
3 Klicken Sie auf Zeit und Position Editor zeigt ein Fenster, dessen Po­
B und stellen Sie das gewünschte sition und Größe Sie anpassen kön­
Datum und die gewünschte Uhrzeit nen. Der Bildausschnitt wird „live“
ein. Wie Sie sehen, passt sich die gerendert, so dass Änderungen
Lichtsituation automatisch an. sofort sichtbar werden. Kameras >

F G A

D B
C

80
3D-Animation

E
F
C

A
B

Innenraum – Making of … einzelnen Flächen des Quaders, um


das Material zuzuweisen.
Die Zahnräder sollen in einer Fabrikhal­
le platziert werden. 7 Um in den Innenraum zu gelangen,
brauchen Sie eine weitere Kamera.
1 Öffnen Sie die Datei zahnräder.c4d. Klicken Sie auf Icon E. Benennen
Sie die Kamera Innenkamera.
2 Erzeugen Sie die Halle aus einem
Würfel mit folgenden Maßen A: 8 Platzieren Sie die Kamera an der
X = 1500 cm gewünschten Stelle im Raum.
Y = 800 cm Wechseln Sie hierzu in die vier An­
Z = 1500 cm sichten F. Der Screenshot zeigt die
Ansicht Rechts:
3 Verschieben Sie das Objekt nach
oben auf die Position Y = 400 cm.

4 Erstellen Sie die Materialien für den


Boden, die Decke und Wände B. Die
Ziegel-Textur erhalten Sie, indem
Sie im Material-Editor Farbe > Tex­
tur > Oberflächen > Ziegel wählen.

5 Klicken Sie auf Icon C, um den


Würfel in ein Polygon-Objekt umzu­
wandeln.
9 Um auf die neue Kamera umzu­
6 Wählen Sie das Polygon-Auswahl­ schalten, haben Sie zwei Mög­
werkzeug D und klicken Sie auf die lichkeiten: Wählen Sie im Menü

81
G C
A

E
H
B

Kamera verwenden > Innenkamera 3 Platzieren Sie die Lichtquelle knapp


A. Alternativ klicken Sie auf Icon unterhalb der Decke.
B: Weiß = Kamera an, Schwarz =
Kamera aus. 4 Duplizieren Sie die Lichtquelle
dreimal, um vier Lichtbänder zu
3.4.2 Licht erhalten E, und platzieren Sie sie.

Jetzt fehlt noch das Licht-Setting. Die 5 Markieren Sie mit gedrückter Strg-
Variationsmöglichkeiten sind hierbei Taste (ctrl) alle vier Lichtquellen.
grenzenlos, und es benötigt viel Übung, Stellen Sie unter Allgemein F die
um hier schnell zu brauchbaren Ergeb­ gewünschte Intensität ein und wäh­
nissen zu kommen. Für obiges Szenario len Sie als Schattentyp Shad.-Maps
sollen vier Lichtbänder platziert werden, (Weich).
um eine Beleuchtung mit Leuchtstoff­
lampen zu simulieren. 6 Rendern Sie die Szene durch An­
klicken von Icon G.
Making of …
7 Nehmen Sie ggf. Korrekturen vor.
1 Halten Sie die Maustaste kurze Zur Aufhellung der Szene kann bei­
Zeit auf Icon C gedrückt, um die spielsweise eine weitere Flächen-
gewünschte Lichtquelle auswählen Lichtquelle vor den Zahnrädern
zu können. Wählen Sie Flächen- platziert werden.
Lichtquelle.
8 Um die Wirkung einzelner Licht­
2 Skalieren Sie die Lichtquelle durch quellen besser beurteilen zu kön­
Eingabe der Faktoren D und drehen nen, lassen sich alle Lichtquellen im
Sie die Lichtquelle um P = 90°, da­ Objekt-Manager ein- oder ausschal­
mit sie von oben nach unten strahlt. ten H.

82
3.5 Rendern 3D-Animation

Unter Rendern versteht man die Um­ kann. Die Rechenzeit steigt aller­
rechnung eines 3D-Drahtgittermodells dings stark an, so dass Sie bei Ani­
in ein Pixelbild unter Berücksichtigung mationen mit vielen Bildern eher
der zugewiesenen Texturen, Umgebung darauf verzichten sollten.
und Lichtsituation. Je nach Komplexität
des Modells und Leistungsstärke des 6 Beenden Sie die Voreinstellungen.
Computers dauert der Rendervorgang
lang, v. a., wenn für Animationen viele 7 Klicken Sie auf Icon Im Bild-
Einzelbilder berechnet werden müssen. Manager rendern. Das Bild
oder die Bilder werden geren­
Making of … dert. Im Verlauf rechts unten sehen
Sie den Fortschritt und auch frühere
1 Klicken Sie auf Icon Ren­dervor­ Versionen. Auf diese Weise können
ein­stellungen bearbeiten. Sie Rendereinstellungen miteinan­
der vergleichen.
2 Geben Sie unter Ausgabe A das
benötigte Bildformat B und die Auf­
lösung C ein. Unter Dauer D legen
Sie fest, ob nur das aktuelle Bild A
B
oder – im Falle einer Animation –
alle Bilder berechnet werden sollen. C

3 Klicken Sie auf Speichern E. Wichtig


ist hier die Auswahl des Dateifor­
mats. Wählen Sie TIFF F, um die
Bilder unkomprimiert in maximaler D
Qualität zu speichern. Um aus einer
Animation ein Video zu erstellen,
könnten Sie ein Videoformat, z.B.
AVI, auswählen. Der bessere Weg
ist aber, durch Cinema 4D die Ani­
mation als Einzelbilder ausgeben
zu lassen und diese im Anschluss in
einem Videoschnittprogramm wie
Adobe Premiere oder After Effects E G
in ein Video umzurechnen. F

4 Wählen Sie bei Datei G den Spei­


cherort für Ihre Bilder. I

5 Klicken Sie auf Effekte H und wäh­


len Sie Global Illumination. Durch
Setzen des Häkchens I aktivieren
H
Sie den Effekt. Er führt zu einer
geringen Bildaufhellung, die eine
Qualitätsverbesserung bewirken

83
Rendern
Die Screenshots zei­gen
mögliche Ergebnisse
der in diesem Kapitel
durchgeführten Work­
shops.

84
3D-Animation

85
3.6 Aufgaben

1 Begriff 4D erklären

In diesem Kapitel geht es um 3D-Ani­


Shader:
mation. Erklären Sie, weshalb die Firma
Maxon ihr Programm Cinema 4D und
nicht Cinema 3D genannt hat.

4 Schlüsselbild-Animation erklären

Erklären Sie das Funktionsprinzip einer


Schlüsselbild- oder Keyframe-Anima­
tion.

2 Koordinatensysteme unterscheiden

a. Nennen Sie die beiden Koordinaten­


systeme von Cinema 4D:
1.

2.
5 Bewegungs-Splines verstehen
b. Beschreiben Sie (oder untersuchen
Sie in Cinema 4D) den Unterschied Schlüsselbilder einer Animation sind
zwischen den Systemen, wenn durch Splines verbunden. Die Grafiken
nacheinander eine Drehung um drei auf der rechten Seite zeigen Beispiele.
Achsen erfolgt. Nehmen Sie eine Bewegungsanalyse
vor.

a. Notieren Sie, welche Objekte sich zu


Beginn abwärts bewegen.

b. Notieren Sie, welche Objekte sich am


Ende nach links bewegen.

c. Notieren Sie, welche Objekte gegen


3 Fachbegriffe kennen Ende schneller werden.

Erklären Sie den Unterschied zwischen d. Notieren Sie, welche Objekte am


einer Textur und einem Shader. Ende am selben Ort sind.
Textur:
e. Notieren Sie für jede Bewegung
(rechts unten) ein Alltagsbeispiel.

86
3D-Animation

A 1 50 Bild B 1 50 Bild

100 100

0 0

-100 -100

Y X

C 1 50 Bild D 1 50 Bild

100 100

0 0

-100 -100

Y Y

E 1 50 Bild F 1 50 Bild

100 100

0 0

-100 -100

X/Y X/Y

A: D:

B: E:

C: F:

87
6 Animation planen ƒƒ sehr wichtig 3
ƒƒ eher wichtig 2
Ein animiertes Auto soll 3 s beschleu­ ƒƒ eher unwichtig 1
nigen, dann 4 s konstant fahren und ƒƒ unwichtig 0
danach 2 s lang abbremsen.

a. Berechnen Sie die Dauer der Anima­

Foto für Textur

Glanzlicht(er)
tion, wenn die Bildrate 25 Bilder/s

Transparenz

Spiegelung

3D-Shader
beträgt.

Farbe
Goldring 3 0 0 3 3 0
Marmorboden

Trinkglas

Plastikschüssel

Stahlträger

Hausschlüssel

b. Das Auto fährt von X = –100 m bis ­ Stofftasche


X = 100 m. Zeichnen Sie die erforder­
Glasflasche
lichen Schlüsselbilder sowie einen
möglichen Bewegungsverlauf ein. Holzfass

0 9 Zeit Tierfell

Verkehrsschild
100
Grasfläche

0
8 Rotationskörper modellieren

Mit Hilfe des Spline-Stifts und des


Lathe-Objekts können Sie in Cinema 4D
-100 Rotationskörper modellieren.

7 Texturen erstellen a. Zählen Sie sechs Alltagsobjekte auf,


die sich auf diese Weise modellieren
Materialien besitzen unterschiedliche lassen.
Eigenschaften, die Sie bei der Erstel­
lung von Texturen beachten müssen.
1.
Bewerten Sie die Wichtigkeit der Eigen­
schaft für die genannten Objekte.
2.

88
3D-Animation

3.

4.

5.

6.
b. Modellieren Sie die Objekte in
Cinema 4D.
Weinfass:

Billardstock (Queue):

Runder Tisch:
9 Splines extrudieren Bilderrahmen:
Mit Hilfe des Spline-Stifts und des Ex­
trudieren-Objekts können Sie in Cinema
Musik-CD:
4D zweidimensionalen Grafiken Tiefe
verleihen und Sie damit zu 3D-Objekten
Hantel:
machen.
a. Zählen Sie sechs Alltagsobjekte auf,
Eiskugeln in Waffel
die sich auf diese Weise modellieren
lassen.
Armreif:

1. Rettungsring:

2. Saturn (Planet):
b. Modellieren Sie die Objekte in
3. Cinema 4D.
4.
11 Schachspiel modellieren
5. Modellieren Sie ein Schachspiel in
Cinema 4D.
6.
b. Modellieren Sie die Objekte in
Cinema 4D.

10 Aus Grundobjekten modellieren

Cinema 4D stellt die rechts oben darge­


stellten Grundobjekte zur Verfügung:
a. Nennen Sie das oder die Grund­
objekt(e), um die Objekte zu model­
lieren.

89
4.1 Lösungen
4 Anhang

4.1.1 Grundlagen 4 Einzelbild- von Schlüsselbild-Anima­


tion unterscheiden
1 Begriff „Animation“ erklären
a. Bei Einzelbild-Animationen muss
Bei einer Animation wird eine Folge jedes einzelne Bild manuell erstellt
sich unterscheidender Einzelbilder werden, während bei Schlüsselbild-
nacheinander gezeigt, um beim Be- Animationen die Bilder zwischen
trachter den Eindruck einer Bewegung zwei Schlüsselbildern durch den
zu erwecken. Computer berechnet werden.
b. Vorteil Einzelbild-Animation:
2 Animationsprinzipien kennen ƒƒ maximale Flexibilität,
ƒƒ Formenänderungen möglich
ƒƒ Squash & Stretch Vorteil Schlüsselbild-Animation:
ƒƒ Anticipation ƒƒ geringerer Zeitaufwand
ƒƒ Staging ƒƒ exakte Bewegungsabläufe
ƒƒ Straight Ahead & Pose to Pose
ƒƒ Follow Through & Overlapping 5 Animationspfad festlegen
Action
ƒƒ Slow In & Slow Out a.
ƒƒ Arcs
ƒƒ Secondary Action
ƒƒ Timing
ƒƒ Exaggeration
ƒƒ Solid Drawing
ƒƒ Appeal

3 Animationsphasen scribbeln

Lösungsvorschlag siehe unten. b.

Wichtig ist, dass der Oberkörper nach


vorne geneigt werden muss, damit der
Schwerpunkt des Körpers relativ lange
über den Füßen bleibt. Erst beim Absit-
zen verlagert sich der Schwerpunkt über
den Stuhl nach hinten.

© Springer-Verlag GmbH Deutschland 2017


P. Bühler, P. Schlaich, D. Sinner, Animation, Bibliothek der Mediengestaltung,
DOI 10.1007/978-3-662-53922-4
Anhang

Die Physik sagt, dass der Einfalls- und 4.1.2 2D-Animation mit Animate
der Ausfallswinkel identisch sind.
1 Animate und Flash unterscheiden
6 Inverse Kinematik erläutern
Der wesentliche Vorteil von Animate
Mit Hilfe der inversen Kinematik ist es besteht darin, dass zum Abspielen der
möglich, die Bewegung von Mehrkör- Animationen kein Flash-Player erforder-
persystemen, bestehend aus Körpern lich ist. Somit sind diese Animationen
(z.B. Stangen, Skelettknochen) und auch auf iDevices abspielbar.
Gelenke von der Endposition der Bewe- Damit dies möglich ist, wird bei
gung rückwärts (invers) zu berechnen. der sogenannten Veröffentlichung aus
der Animate-Datei (Endung: FLA) eine
7 Buttons animieren HTML5- und eine JavaScript-Datei
erstellt. Diese können in allen Browsern
a. Der Nutzer erhält hierdurch die dargestellt werden.
Rückmeldung, dass er sich auf einem
anklickbaren Element befindet. 2 Symbol und Instanz unterscheiden
b. Mögliche Animationen:
ƒƒ Farbänderung a. Symbole speichern Objekte (z.B.
ƒƒ Formänderung Grafiken, Texte) in geschlossener
ƒƒ Änderung der Position Form ab und ermöglichen deren
ƒƒ Änderung der Schrift Animation.
Instanzen sind Kopien des Symbols
8 Animationspfad festlegen auf der Bühne. Aus einem Symbol
lassen sich beliebig viele Instanzen
a. 2 s · 10 BpS = 20 Bilder erzeugen.
20 Bilder – Startbild – Endbild = b. Änderungen eines Symbols wirken
18 Zwischenbilder sich auf alle Instanzen des Symbols
b. Je näher die Punkte beieinander aus.
sind, umso langsamer verläuft die Änderungen einer Instanz wirken
Bewegung, da mehr Bilder pro sich auf die anderen Instanzen nicht
Sekunde angezeigt werden. Die aus.
Seifenkiste beschleunigt bei der Ab-
wärtsbewegung, ist also im tiefsten 3 Schaltflächen-Symbol kennen
Punkt der Bahn am schnellsten. Wäh-
rend der Aufwärtsbewegung wird sie Die Zeitleiste eines Schaltflächen-Sym-
abgebremst. bols besitzt vier besondere Zustände,
die Veränderungen des Aussehens der
Schaltfläche bei Mauskontakt ermögli-
chen.

4 Animationsdauer berechnen

a. 7 s · 24 BpS = 168
Die Animation muss in Bild 168
enden.

91
b. 210 Bilder / 7 s = 30 BpS ƒƒ Soundsteuerung
Die Bildrate muss auf 30 BpS erhöht ƒƒ Videosteuerung
werden. ƒƒ Animationen
ƒƒ Drag & Drop
c. Durch eine höhere Bildrate wird die
Animation flüssiger (weicher) darge- 15 ActionScript-Befehle kennen
stellt.
a. Anhalten des Abspielkopfes, bleibt
5 Animationstechniken unterscheiden auf Bild stehen
b. Bewegung des Abspielkopfes um ein
a. Bei Einzelbild-Animationen muss für Bild nach vorne
jede Phase der Animation ein Bild c. Sprung auf ein Bild und Anhalten
vorliegen. Bei Schlüsselbild-Anima­ des Abspielkopfes
tionen werden fehlende Zwischen-
bilder durch die Software berechnet. 16 Schaltflächen programmieren
b. Einzelbild-Animationen besitzen eine
hohe Qualität, weil jedes Bild indivi- a. Ein Event-Listener ermöglicht einer
duell gestaltet werden kann. Schaltfläche, eintretende Ereignisse
Schlüsselbild-Animationen lassen zu registrieren und auf diese reagie-
sich deutlich einfacher und schneller ren zu können.
erstellen. b. Ereignisse (Events) sind beispiels-
weise:
ƒƒ Maustaste drücken
Zu den Aufgaben 6 bis 12 gibt es keine ƒƒ Maustaste loslassen
Musterlösung, da es sich um praktische ƒƒ Maus über Schaltfläche bewegen
Aufgaben handelt. ƒƒ Doppelklick
ƒƒ Texteingabe

13 Animate-Projekt veröffentlichen 17 Zeitleiste steuern

a. HTML- und JavaScript-Datei a. Zeile 1 hält den Abspielkopf an. Die


b. Windows-Projektor (EXE-Datei) Zeile 2 versieht button1 mit einem
c. Apple-Projektor Event-Listener (Funktion siehe
d. SWF-Datei Aufgabe 16) und ruft beim Eintreten
eines Klick-Ereignisses die Funktion
14 Funktion von ActionScript 3.0 aktion auf.
kennen b. function aktion(event:
MouseEvent):void {
a. Bei ActionScript 3.0 handelt es sich gotoAndStop(15);
um eine objektorientierte Program- }
miersprache für Adobe Animate button2.addEventListener
(bzw. AIR). (MouseEvent.CLICK,aktion2);
b. Anwendungsbeispiele: function aktion2(event:
ƒƒ Zeitleistensteuerung MouseEvent):void {
ƒƒ Laden externer Texte gotoAndPlay(30);
ƒƒ Laden externer Bilder }

92
Anhang

bremste Vorwärtsbewegung, z. B.


Zu den Aufgaben 18 bis 19 gibt es keine Auto, Fahrrad
Musterlösung, da es sich um praktische C: gleichförmige Abwärtsbewegung,
Aufgaben handelt. z.B. Aufzug, Kranhaken
D: abgebremste Aufwärtsbewegung,
dann beschleunigte Abwärtsbewe-
4.1.3 3D-Animation mit Cinema 4D gung, z. B. Ball, Luftsprung
E: gleichförmige Vorwärtsbewegung
1 Begriff 4D erklären mit Richtungswechsel, z. B. Billardku-
gel an Bande
Die drei Dimensionen (3D) beziehen F: beschleunigte Vorwärts- und
sich auf den Raum, als vierte Dimension Abwärtsbewegung, z. B. Seifenkiste,
kommt die Zeit hinzu. Skifahrer

2 Koordinatensysteme unterscheiden 6 Animation planen

a. XYZ und HPB a. Dauer: 3 s + 4 s + 2 s = 9 s


b. Der Unterschied liegt darin, dass es Bilder: 9 s x 25 Bilder/s = 225
bei HPB egal ist, in welcher Reihen- b. (andere Lösungen sind möglich)
folge die Winkel geändert werden.
Bei XYZ ist dies nicht der Fall. 0 9 Zeit

3 Fachbegriffe kennen 100

Eine Textur überzieht ein Objekt zwei-


dimensional, während ein Shader der
Oberfläche zusätzlich eine Tiefenstruk- 0

tur verleiht. (Es gibt auch abweichende


Definitionen.)
-100
4 Schlüsselbild-Animation erklären
X
Bei Schlüsselbild-Anima­tionen werden
fehlende Zwischenbilder zwischen zwei
fest definierten Schlüsselbildern durch 7 Texturen erstellen
die Software berechnet.
Mögliche Lösung:
5 Bewegungs-Splines verstehen
Foto für Textur

Glanzlicht(er)
Transparenz

Spiegelung

3D-Shader

a. A, C und F
b. E und F
Farbe

c. A und D
d. D und E Goldring 3 0 0 3 3 0
e. A: beschleunigte Abwärtsbewegung Marmorboden 1 0 3 3 2 2
(freier Fall), z. B. fallender Stein Trinkglas 1 3 0 3 3 0
B: erst beschleunigte, dann ge- Plastikschüssel 3 1 0 1 1 0

93
ƒƒ Saturn (Planet): Kugel, Ring (Saturn-

Foto für Textur

Glanzlicht(er)
ringe)

Transparenz

Spiegelung

3D-Shader
b. Praktische Aufgabe ohne Musterlö-
sung

Farbe
Stahlträger 3 0 1 2 2 1
Hausschlüssel 3 0 1 3 3 1 11 Schachspiel modellieren
Stofftasche 2 0 2 0 0 + Praktische Aufgabe ohne Musterlösung
Glasflasche 3 3 1 3 3 0
Holzfass 1 0 3 1 1 + Lösungshinweise
Tierfell 3 0 1 0 0 3 ƒƒ Das Schachbrett lässt sich aus einem
Verkehrsschild 3 0 3 2 1 0 Würfel erzeugen, dessen Oberfläche
Grasfläche 3 0 0 0 0 3 mit einer Schachbrett-Textur verse-
hen wird. (Alternativ können Sie es
8 Rotationskörper modellieren aus 64 einzelnen Würfeln zusammen-
setzen.)
a. Trinkglas, Flasche, Tasse, Vase, ƒƒ Die Figuren lassen sich mit dem
Bowling­kegel, Fernsehturm, Rakete, Spline-Stift und dem Lathe- bzw.
Apfel, Spielfigur, Schreibstift, Lampe Extrudieren-Objekt erzeugen.
b. Praktische Aufgabe ohne Musterlö- ƒƒ Vertiefungen oder Aussparungen,
sung z. B. die Augen des Springers oder
Zinnen des Turms, werden mittels
9 Splines extrudieren Boole-Objekt erzeugt.

a. Hausschlüssel, Schraubenschlüssel,
Eisenbahnschiene, Schriftzug (z. B.
Firmenlogo), Kleiderbügel, Buch,
Kreuz, Griff (z. B. an Schulade)
b. Praktische Aufgabe ohne Muster­
lösung

10 Aus Grundobjekten modellieren

a.
ƒƒ Weinfass: Zylinder
ƒƒ Billardstock (Queue): Zylinder oder
Kapsel
ƒƒ Runder Tisch: Zylinder (Platte), Würfel
oder Zylinder (Beine)
ƒƒ Bilderrahmen: Würfel
ƒƒ Musik-CD: Röhre
ƒƒ Hantel: Zylinder (Stange), Röhre
(Scheiben)
ƒƒ Eiskugeln in Waffel: Kegel, Kugeln
ƒƒ Armreif: Röhre oder Ring
ƒƒ Rettungsring: Ring

94
4.2 Links und Literatur Anhang

Links

12 Prinzipien der Animation (von Frank


Thomas)
„12 principles of animation“ bei YouTube
eingeben

Bei YouTube finden Sie viele Videotutorials zu


Cinema-4D-Projekten.

Literatur

Joachim Böhringer et al.


Kompendium der Mediengestaltung
IV. Medienproduktion Digital
Springer Vieweg 2014
ISBN 978-3642548147

Maik Eckardt
Cinema 4D R18
mitp Verlag 2016
ISBN 978-3958454507

Arndt von Koenigsmarck


CINEMA 4D, Das Kompendium:
Band 2, Die Animation
Rodenburg Verlag 2015
ISBN 978-3981465624

Team Rising Polygon


Modeling Techniques with Cinema 4D R17
Studio
Rising Polygon 2016
ISBN 978-1533185297

95
4.3 Abbildungen

S2, 1: http://www.iceagemovies.com/de/videos S85, 1, 2: Autoren


(Zugriff: 24.04.2016) S87, 1a, b, 2a, b, 3a, b: Autoren
S2, 2: http://www.arte.tv/guide/de/ S90, 1, 2, 3: Autoren
plus7/?country=DE (Zugriff: 15.05.2016) S91, 1: Autoren
S3, 1, 2: Guido Schlaich, München S93, 1: Autoren
S4, 1, 2: Guido Schlaich, München
S5, 1, 2, 3: Guido Schlaich, München
S6, 1, 2: Guido Schlaich, München
S7, 1, 2, 3: Guido Schlaich, München
S8, 1, 2, 3: Public Domain, Wikipedia (Zugriff:
18.05.2016)
S9, 1: Public Domain, Wikipedia (Zugriff:
18.05.2016)
S9, 2a: Screenshot aus Schulprojekt an GS
Lahr, Katherina Deutscher
S9, 2b: Autoren
S10, 1a und 1b : Autoren
S11, 1: Public Domain, Wikipedia (Zugriff:
18.05.2016)
S12, 1a und 1b : Autoren
S14, 1: Autoren
S15, 1, 2: Autoren
S16, 1,2: Logos von Adobe
S19, 1,2: Autoren
S24, 1, 2: Autoren
S30, 1: ww.sxc.hu (Zugriff: 01.11.2013)
S31, 2: Autoren
S33, 2: Autoren
S34, 2a, b, c: Autoren
S35, 1, 2, 3: Autoren
S36, 1a, b: Autoren
S38, 1a, b: Autoren
S39, 1a-e: Autoren
S39, 2: Autoren
S40, 1a, b: Autoren
S42, 1a: Autoren
S47, 1a: Autoren
S51, 1: Autoren
S52, 2: Autoren
S53, 2: Autoren
S54, 1: Autoren
S56, 1: Autoren
S58, 2, 3: Autoren
S59, 1: Autoren
S62, 1: Autoren
S84, 1, 2, 3: Autoren

96
4.4 Index Anhang

A –– Appeal 7 –– Deformer-Objekt 70
–– Arcs 5 –– Dope Sheet 67
ActionScript 3.0 16, 41 –– Exaggeration 7 –– Editor 60
–– Animationen 51 –– Follow Through and Over- –– Entwicklungsumgebung 60
–– Drag & Drop 54 lapping Action 5 –– Extrudieren 63
–– Dynamische Bilder 47 –– Secondary Action 6 –– F-Kurvenmodus 67
–– Dynamischer Text 44 –– Slow In and Slow Out 5 –– Global Illumination 83
–– Sound steuern 48 –– Solid Drawing 7 –– Kamera 81
–– Zeitleiste steuern 41 –– Squash and Stretch 3 –– Kleidung 75
Adobe Animate 16 –– Staging 4 –– Koordinatensysteme 60
AIR 29 –– Straight Ahead Action and –– Lathe-Objekt 70
Animate Pose to Pose 4 –– Licht 82
–– Bibliothek 22 –– Timing 6 –– Null-Objekt 66
–– Bild/Grafik importieren 20 Animationstechniken 8 –– Objekt-bearbeiten-Modus
–– Bildrate 18, 25, 30 –– Brick-Animation 9 70
–– Einzelbild-Animation 30 –– Cut-Out-Animation 9 –– Pfadanimationen 71
–– Entwicklungsumgebung 17 –– Einzelbild-Animation 9, 30 –– Punkte-bearbeiten-Werk-
–– Farben 20 –– Inverse Kinematik 11, 38 zeug 69
–– Farbverläufe 20 –– Knetanimation 9 –– Rechteck-Auswahl-Werk-
–– Framerate 25, 30 –– Masken 37 zeug 75
–– Grafiken 18 –– Morphing 10, 36 –– Rendern 83
–– Grafikwerkzeuge 19 –– Motion Capture 12 –– Schatten 82
–– Hintergrundfarbe 18 –– Performance Capture 12 –– Schlüsselbild 64
–– Instanz 22 –– Pfadanimation 10 –– Schlüsselbild-Animation 63
–– Inverse Kinematik 38 –– Pfadanimationen 71 –– Shader 76
–– Masken 37 –– Puppenanimation 9 –– Simulation Tags 75
–– Morphing 36 –– Schlüsselbild-Animation 9, –– Spline-Stift 69
–– Pfadanimation 32 31, 63 –– Szene 80
–– Schaltflächen 24 –– Texturen 76
–– Schlüsselbild 26 B –– Umgebung 80
–– Schlüsselbild-Animation 31 –– Zeitleiste 67
–– Sound 27 Bibliothek (Animate) 22 Cut-Out-Animation 9
–– Symbole 22 Bildrate (Animate) 18, 30
–– Text 21 BpS 25 D
–– Veröffentlichen 29 Brick-Animation 9
–– Verschachtelte Animatio- Bühne (Animate) 17 Dateiformate
nen 40 –– C4D 63
–– Video 28 C –– FLA 29
–– Zeitleiste 25 –– FLV 28
–– Zwiebelschalen 35 C4D 63 –– MOV 28
Animation 2, 30, 63 Canvas 29 –– MP3 27
–– mit Animate 30 Cinema 4D 60 –– MP4 28
–– mit Cinema 4D 63 –– Bewegungs-Splines 67 –– TIFF 83
Animationsprinzipien 2 –– Boole-Objekt 65 –– WAV 27
–– Anticipation 3 –– Deformer 69 Daumenkino 8

97
E M –– Metall 76
–– Stoff 79
Einzelbild-Animation 9, 30 Masken (Animate) 37 TIFF 83
Entwicklungsumgebung Maxon Cinema 4D 60 Tweening (Animate) 31
–– Animate 17 Metall (Textur) 76
–– Cinema 4D 60 Morphing 10, 36 V
Extrudieren 63 Motion Capture 12
MOV 28 Video (Animate) 28
F MP3 27 Vorwärtskinematik 11
MP4 28
FLA 29 Mutoskop 8 W
Flash 16
FLV 28 P Walt Disney 2, 9
Framerate (Animate) 25, 30 WAV 27
Performance Capture 12
G Pfadanimation 10, 32, 71 Z
Praxinoskop 8
Glas (Textur) 77 Programmierung (Animate) 41 Zeitleiste 67
–– Animate 17, 25
H R –– Cinema 4D 67
Zeitleisten-Animation 9
Holz (Textur) 78 Rendern 83
HTML5 29 RIA 16
Rich Internet Application 16
I
S
Instanz (Animate) 22
Interaktion und Reaktion 13 Schaltflächen (Animate) 24
Inverse Kinematik 11, 38 Schlüsselbild 64
–– Animate 26
K –– Cinema 4D 64
Schlüsselbild-Animation 9,
Kamera 81 31, 63
Keyframe 9, 64 Shader 76
Kinematik 11 Stop-Motion-Film 9
Kinematograph 8 Symbol (Animate) 22
Koordinatensystem Szene 80
–– HPB 62
–– XYZ 60 T
Kunststoff (Textur) 77
Texterfassung (Animate) 21
L Textur 76
–– Glas 77
Licht 82 –– Holz 78
–– Kunststoff 77

98