Dieses Tutorial vermittelt Ihnen die Grundlagen,
um mit Macromedia Flash ein Figur in 3D zu animieren. Es handelt sich im kein
echtes 3D, sondern um einige optische Tricks, um einen pseudo 3D Effekt zu
erzielen. Dennoch scheint es so, als ob die fertige Person nach den Kopf nach
links/rechts und oben/unten neigen kann.
Dies läßt sich für Pixel- und
Vektorgrafiken anwenden. Sie benötigen dazu kein 3D-Modell der Figur.
Sie erreichen den Autoren dieses Tutorials per
Email unter
Diese Methode und dieses Tutorial wurde angeregt
durch das Buch "Flash 3D Cheats Most Wanted ". Sollten Sie sich
näher für 3D-Grafik in Flash interessieren, ist Ihnen dieses Buch
sehr zu empfehlen.
Schritt 1:
Vorbereitungen
Sie benötigen als Grundlage für die
3D-Person zwei Movieclips in Flash MX:
Kopf
Gesicht
Die hier abgebildeten Grafiken sind nur
exemplarisch zur Verdeutlichung der 3D-Methoden. Für Ihre eigene 3D-Figur
sollten Sie hochwertigere, kolorierte Grafiken verwenden.
Schritt 2:
Bewegung des Unterkiefers
Um den Unterkiefer zu bewegen, erzeugen Sie in
Flash zwei neue Movieclips "top" und "chin".
Im Movieclip "top" fügen Sie die den "Kopf"
(siehe Schritt 1) in die Bühne ein. Nun erzeugen Sie eine neue Ebene und
zeichnen Sie dort eine Maske (hier: grün), wie hier gezeigt:
Maske zeichnen
Movieclip "top" fertig maskiert
Wichtig: Der Mittelpunkt des
Movieclips muss unten am Rand der Maske liegen. Die sehen ihn hier in Form des
kleinen Kreuzes.
Im Movieclip "chin" gehen Sie ebenso vor. Hier
maskieren Sie jedoch den unteren Bereich des Gesichtes:
Maske zeichnen
Movieclip "chin" fertig maskiert
Am Besten funktioniert dies, wenn Sie den
Movieclip "top" klonen. Dort zeichnen Sie in einer neuen Ebene die untere
Maske. Dabei hilft Ihnen Flash, indem es das Zeichenwerkzeug an der Kante der
oberen Maske einrastet. Anschließend löschen Sie einfach die Ebene,
welche die obere Maske enthält.
Tipp: Verwenden Sie zum zeichnen
der Masken nur das Füllmuster, und verwenden Sie keine Farbe für die
umrandenden Striche. Dadurch passen die Masken später nahtloser
aneinander.
Erzeugen Sie nun einen neuen Movieclip
"head_top_chin". In diesen fügen Sie die gerade erstellten Movieclips
"top" und "chin" ein. Beide zusammen müssen wieder den Kopf ergeben.
Benennen Sie die Instanz des Movieclips "chin"
mit dem Instanznamen "chin".
Sie können bereits das Kinn nun für
spätere Sprechbewegungen animieren, indem Sie es einfach in Y-Ausdehnung
skalieren. Meist sind Werte zwischen 100% und 110% sinnvoll.
Testweise können Sie auch einen kleinen
Actionscript-Block einfügen, um das Kinn bewegt zu sehen:
Quellcode Kinnbewegung
der fertige Effekt (zur Verdeutlichung ist das Kinn
grün eingefärbt)
Was Sie in Schritt 2 für das Kinn
durchgeführt haben, wenden Sie auf für die Links/Rechts-Bewegung
an.
Erzeugen Sie einen neuen Movieclip "left".
Fügen Sie in diesem den Movieclip "head_top_chin" (aus Schritt 2) ein. Nun
maskieren Sie den linken Bereich des Kopfes. Lassen Sie dabei aber die Mitte
des Kopfes (etwa Nasenbreite) frei:
Maske zeichnen
Movieclip "left" fertig maskiert
Wichtig: Der Mittelpunkt des
Movieclips muss rechts am Rand der Maske liegen. Sie sehen ihn hier in Form des
kleinen Kreuzes.
Erzeugen Sie einen weiteren Movieclip "right".
In diesem maskieren Sie den rechten Bereich des Kopfes.
Maske zeichnen
Movieclip "right" fertig maskiert
Wichtig: Der Mittelpunkt des
Movieclips muss links am Rand der Maske liegen. Sie sehen ihn hier in Form des
kleinen Kreuzes.
Erzeugen Sie nun einen Movieclip "middle". In
diesem maskieren Sie den bisher nicht maskierten Bereich in der Mitte des
Kopfes.
Movieclip "middle" fertig maskiert
Wichtig: Der Mittelpunkt des
Movieclips muss links am Rand der Maske liegen. Sie sehen ihn hier in Form des
kleinen Kreuzes.
Wie schon in Schritt 1, setzen Sie nun die drei
maskierten Teile in einem neuen Movieclip zusammen. Nennen Sie diesen neuen
Movieclip "head_right_left". Die drei Instanzen der Movieclips benennen Sie mit
den Instanznamen "left", "middle" und "right".
left, middle und right zusammengefügt (middle ist zur
Verdeutlichung dunkel gefärbt)
Nun kommt der Trick: Um eine Drehung nach links
zu simulieren, skalieren Sie die Movieclips "left" und "right" in X-Ausdenhung.
Die Skalierung ist dabei genau umgekehrt: Ist "left" 20% breiter als normal
(=120%), so ist "right" 20% schmaler (=80%). Der Movieclip "middle" bleibt
dabei immer unverändert.
Sie müssen nun noch sicherstellen, dass die
drei Teile immer aneinander liegen. Dies funktioniert per Actionscript. Um den
Effekt noch realistischer zum machen, verschieben Sie den Movieclip "middle"
immer auf der X-Achse.
Hier ein kleines Beispielscript, um den Kopf
nach links/rechts zu drehen und gleichzeitig das Kinn zu bewegen:
Die Drehung nach oben und unten wird durch eine
einfache Rotation des Movieclips "head_right_left" simuliert. Dazu führen
Sie zuerst eine maximale Drehung links/rechts (aus Schritt 3). Dabei drehen Sie
den Movieclip.
Die Einbindung des Gesichtes ist simpel.
Erzeugen Sie einen Movieclip "face". Legen Sie diesen in einer eigenen Ebene im
Movieclip "head_top_chin" (siehe Schritt 2) ab. Nun stellen Sie per
Actionscript sicher, dass das Gesicht immer in der Mitte des Movieclips
"middle" positioniert ist.
Inhalt
