Anzeige
Tutorialbeschreibung

3D-Würfel-Effekt

3D-Würfel-Effekt

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

DVD-Werbung

Passend zum Inhalt empfehlen wir: Das ultimative Training für JavaScript und jQuery

Deine App, dein Spiel, deine Website! Lege den Grundstein zur programmiertechnischen Umsetzung deiner Ideen, gehe sogleich darüber hinaus und wende direkt und praktisch an, was du gelernt hast. Dieses Training mit 52 Lektionen lässt dich in kurzer Zeit professionell und versiert Programmzeilen schreiben. Über 10,5 Stunden Video-Tutorials, in denen du alles Wissenswerte zu Variablen, Schleifen, Funktionen oder Operatoren in JavaScript erfährst. Dazu: jQuery – die Bibliothek, die auf über 75 Prozent der weltweit erfolgreichsten Webseiten zum Einsatz kommt und dich noch coolere Internetauftritte programmieren lässt. Einmal miteinander kombiniert, ist das, was du aus JavaScript und jQuery formen kannst, mit einem Wort: mächtig! Leicht zu erlernen für Einsteiger, vertiefend für Kenner und mit den Do-it-yourself-Praxisbeispielen relevant für alle, die von noch leeren Seiten Zeile für Zeile direkt zum fertigen Programm aufsteigen möchten.

  • 52 Lektionen in über 10,5 Stunden Video-Training zu JavaScript und jQuery
  • Erlerne die Grundlagen, gehe darüber hinaus und schreibe sodann eigene Programme
  • Inklusive Praxis-Herausforderungen: Programmiere ein Quiz, ein Spiel, eine FAQ-Seite und App
  • Von Programmier-Künstler und Profi-Trainer Denis Panjuta

Setze um, was dir vorschwebt! Mit Mitteln, die sich mehr als eignen, und mit fachlich glänzender Kompetenz!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
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 ;)



Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
x
×
×