Tutorialbeschreibung

3D-Würfel-Effekt mithilfe von Form-Tweening

3D-Würfel-Effekt mithilfe von Form-Tweening

Im folgenden Tutorial wird beschrieben, wie sich mithilfe von Form-Tweening ganz einfach eine Würfel-Animation erstellen lässt. Diese kann dann noch erweitert werden, doch handelt es sich hier rein um eine 90° Drehung. Die Seiten des Würfels werden nicht beachtet. Actionscript kommt nicht vor und ich hoffe, es sollte auch für Einsteiger verständlich sein.


Schritt 1:

Als Erstes erstellen wir ein Quadrat, das die Vorderseite unseres Würfels darstellen soll. Farben spielen hierbei keine Rolle. Ich habe ein Grau für die Flache und Schwarz für den Rahmen verwendet.

Bilder




Schritt 2:

Als Nächstes erstellen wir ein weiteres Schlüsselbild, ungefähr bei Bild 25. In diesem Bild soll das gleiche Quadrat zu sehen sein, völlig unverändert.

Bilder

 

Schritt 3:

Nun wird den soeben erstellten Bildern von Frame 1 bis 25 ein Form-Tweening hinzugefügt. Dazu die Bilder mit einem Rechtsklick anwählen und dann "Form-Tween erstellen" auswählen.

Bilder


 

Schritt 4:

Nun haben wir definiert, dass sich das Quadrat in der Form verändern soll. Doch haben wir nicht gesagt, wie, da Anfangsbild und Ausgangsbild genau dieselben sind. Deshalb greifen wir jetzt zu den sogenannten Formmarken. Mit diesen lässt sich bestimmen, welcher Punkt sich während des Tweens wohin bewegt.

Dazu am besten auf das erste Bild klicken, dann Modifizieren>Form>Formmarke hinzufügen anwählen. Macht diesen Schritt zweimal. Falls dies nicht auswählbar ist, kann es daran liegen, dass das Quadrat gruppiert oder umgewandelt wurde. Um dies zu ändern, einfach das Quadrat anwählen und auf Modifizieren>Teilen klicken.

Bilder


 

Schritt 5:

Somit erscheinen im ersten wie auch im letzten Bild in der Mitte des Quadrates zwei kleine Kreise mit Buchstaben (a & b). Diese müsst ihr nun positionieren. Im ersten Bild setzt ihr am besten die Marke "a" in die obere linke Ecke und Marke "b" in die untere linke. Im letzten Frame macht ihr dasselbe, nur auf der anderen Seite. Das heißt Marke "a" in die obere rechte Ecke und Marke "b" in die untere rechte. Bei der Positionierung der Marken im letzten Bild sollten sie sich grün verfärben. Dies zeigt an, dass sie sich mit den Marken aus dem ersten Bild gefunden haben.

Bilder

Setzung der Formmarken im ersten...                                                 ...und im letzten Bild.

 

Schritt 6:

Nun sollte das meiste geschafft sein. Wenn alles richtig gemacht wurde, sollte es bereits so aussehen (die Pause sind nur ein paar weitere Bilder, die ich am Ende eingefügt habe):




Wer will, kann jetzt noch eine senkrechte Linie als Kante des Würfels einfügen. Diese muss sich als Bewegungs-Tween einfach von der linken Kante zur rechten bewegen. Am besten auf einer neuen Ebene. Wenn dieselbe Bilderzahl und Position der Bilder verwendet wird, sollte sich die Linie exakt zwischen den Ecken bewegen.

Dies sieht dann so aus:




Hier noch die Zeitleiste der fertigen Datei:

Bilder

Mit zusätzlichen Bildern, höherer BpS und "Beschleunigen/Bremsen" lässt sich das Ganze noch abrunden.



Ich hoffe, das Tutorial hat euch gefallen/geholfen.

MfG Scripter

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von isaura
  • 17.04.2010 - 07:56

tolle ani die werde ich ausprobieren
gruss sigrid

Portrait von luzi345
  • 16.04.2010 - 22:49

Funktioniert perfekt

Portrait von pascii
  • 16.04.2010 - 20:33

klappt einwandfrei, vielen Dank!

Portrait von skewster
  • 16.04.2010 - 15:58

Einfach, aber gut! Vielen Dank!

Portrait von Hack81
  • 16.04.2010 - 15:14

danke für das Tut!! gut gelungen...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.04.2010 - 23:34

sehr gelunge haben ihn sofort verstanden

Portrait von tofagoe
  • 15.04.2010 - 20:43

gut erklärt und sehr hilfreich.

Portrait von ikarus56
  • 15.04.2010 - 11:42

Dankfe für den Post...............

Portrait von vossy123
  • 13.04.2010 - 15:39

Das drehen eines Würfels sieht anders aus meine ich.

Portrait von VodooJaeger
  • 12.04.2010 - 23:28

Nett gemeint, aber ziemlich simpler Effekt. Habe ich schon anderweitig gesehen. Trotzdem danke für die Mühe.

Portrait von SpanishDonkey
Portrait von Elron
  • 12.04.2010 - 16:46

sehr schön, danke fürs posten!

Portrait von helgeschneider
x
×
×