Anzeige
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 flora.walker
  • 13.04.2015 - 18:47

Nettes Tutorial, nicht aufwendig und man sieht schnell etwas.
Bei der Kante die Konvertierung in ein Symbol nicht vergessen.

Portrait von a_kroe
  • 07.10.2012 - 13:45

hilft auch einem anfänger wie mir

Portrait von Linus_H
  • 22.05.2012 - 15:20

Super! Braucht zwar bisschen Hilfe aber..... auch egal! :) Super Tutorial! LG Linus

Portrait von JamesBrown
  • 07.04.2012 - 10:15

Ein wirklich 1 a Tutorial. Habe damit einen super 3D Würfel hinbekommen

Vielen Dank:-).

Portrait von kingpin069
  • 02.03.2012 - 12:59

gutes tut aber mich würde interessieren wie ich die bewegungen in as3 programmiere

Portrait von kingpin069
  • 02.03.2012 - 12:59

gutes tut aber mich würde interessieren wie ich die bewegungen in as3 programmiere

Portrait von simonej
  • 09.01.2012 - 16:20

ist ein nettes tut! ausführlich erklärt gerade für anfänger, die eine ihrer erste animationen bauen wollen!

Portrait von didip
  • 26.08.2011 - 16:27

Sehr einfach und sehr verständlich, vielen Dank :)

Portrait von snapone
  • 26.08.2011 - 10:51

simpel aber nett.
anschaulich und klar verständlich..Danke.

Portrait von Vinicio
  • 05.08.2011 - 16:05

Gut beschrieben! Einfach, aber gut! und Funktioniert perfekt Vielen Dank!

Portrait von Selonian
  • 27.06.2011 - 13:54

Einfacher, aber toller Effekt! Da sieht man mal wieder, dass man eigentlich zu wenig mit Form-Tweens und Formmarken arbeitet.

Vielen Dank!

Gruß, Selonian.

Portrait von alkunz
  • 13.04.2011 - 16:48

Sehr einfach, Vielen Dank!

Portrait von flashintosh
  • 08.04.2011 - 10:56

Schönes Tutorial, allerdings könnte es doch auch für CS3 veröffentlicht werden, oder!?

Portrait von ScorpX
  • 22.10.2010 - 21:43

Sehr gut Beschrieben das Tut und es klappt zu 100% :)

Portrait von shiitake
  • 07.07.2010 - 12:03

Gut beschrieben! Gerade für Einsteiger empfehlenswert.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.05.2010 - 18:29

Kleine Spielerei, die aber Lust auf mehr macht. Ein Blickfang der schnell umzusetzten ist. Danke für die gut Beschreibung

Portrait von mats94
  • 25.05.2010 - 13:07

Sehr gut beschrieben und auch für Anfänger verständlich ;). Da merkt man erst, wie mächtig das Programm ist :). Danke.

Portrait von klausilein
  • 19.05.2010 - 16:16

Na ja, so toll finde ich das nicht!

Portrait von COM2000
  • 15.05.2010 - 17:42

super !
gut und schnell zu verstehen

Portrait von fetterwurm
  • 18.04.2010 - 22:34

Sehr nette Beschreibung. Jetzt müssen wir das nur noch in y-Richtung probieren ;)

x
×
×