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.
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.
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.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.
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.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:
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

Passend zum Inhalt empfehlen wir:
Programmieren lernen für Anfänger
Nettes Tutorial, nicht aufwendig und man sieht schnell etwas.
Bei der Kante die Konvertierung in ein Symbol nicht vergessen.
hilft auch einem anfänger wie mir
Super! Braucht zwar bisschen Hilfe aber..... auch egal! :) Super Tutorial! LG Linus
Ein wirklich 1 a Tutorial. Habe damit einen super 3D Würfel hinbekommen
Vielen Dank:-).
gutes tut aber mich würde interessieren wie ich die bewegungen in as3 programmiere
gutes tut aber mich würde interessieren wie ich die bewegungen in as3 programmiere
ist ein nettes tut! ausführlich erklärt gerade für anfänger, die eine ihrer erste animationen bauen wollen!
Sehr einfach und sehr verständlich, vielen Dank :)
simpel aber nett.
anschaulich und klar verständlich..Danke.
Gut beschrieben! Einfach, aber gut! und Funktioniert perfekt Vielen Dank!
Einfacher, aber toller Effekt! Da sieht man mal wieder, dass man eigentlich zu wenig mit Form-Tweens und Formmarken arbeitet.
Vielen Dank!
Gruß, Selonian.
Sehr einfach, Vielen Dank!
Schönes Tutorial, allerdings könnte es doch auch für CS3 veröffentlicht werden, oder!?
Sehr gut Beschrieben das Tut und es klappt zu 100% :)
Gut beschrieben! Gerade für Einsteiger empfehlenswert.
Kleine Spielerei, die aber Lust auf mehr macht. Ein Blickfang der schnell umzusetzten ist. Danke für die gut Beschreibung
Sehr gut beschrieben und auch für Anfänger verständlich ;). Da merkt man erst, wie mächtig das Programm ist :). Danke.
Na ja, so toll finde ich das nicht!
super !
gut und schnell zu verstehen
Sehr nette Beschreibung. Jetzt müssen wir das nur noch in y-Richtung probieren ;)
Mehr anzeigen