Share
In diesem Tutorial erstellen wir eine 3D-Visitenkarte. Wir verwenden nicht Away3D, Alternativa, Yogurt3D, Sandy3D, Papervision3D oder eine andere für Flash gebaute 3D-Engine. Wir verwenden nur die 3D-Funktionen von Flash Player 10.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Klick es!
Erstellen Sie eine neue ActionScript 3.0-Datei.
Speichern Sie vor der Bearbeitung unser Dokument als "BusinessCard3D.fla" in einem beliebigen Ordner.
Nachdem Sie das Dokument gespeichert haben, schreiben Sie "BusinessCard3D" in das Feld "Klasse", um eine Dokumentenklasse festzulegen. Wenn Sie nicht wissen, welche Dokumentenklasse verwendet wird oder wie sie verwendet wird, können Sie aus diesem Schnelltipp lernen.
Wir haben den Namen der Dokumentenklasse eingegeben, aber noch nicht erstellt.
Klicken Sie im Profilbereich auf das kleine Stiftsymbol neben der "BusinessCard3D"..
In diesem Tutorial verwenden wir Flash Professional. Klicken Sie auf OK, und Sie sehen eine neue ActionScript-Datei. Sie sehen eine einfache Klasse:
package import flash.display.MovieClip; öffentliche Klasse BusinessCard3D erweitert MovieClip öffentliche Funktion BusinessCard3D () // Konstruktorcode
Entfernen Sie die Zeile "// Konstruktorcode" und speichern Sie diese unter "BusinessCard3D.as" in demselben Ordner, der "BusinessCard3D.fla" enthält..
Sie benötigen zwei visuelle Elemente, um eine Visitenkarte zu erstellen. Eine davon ist für die Vorderseite und die andere für die Rückseite der Karte. Ich habe einige minimale Karten für dieses Tutorial entworfen:
Kopieren Sie diese Bilder grundsätzlich und fügen Sie sie in Ihr Flash-Dokument ein. Sie werden automatisch zur Szene hinzugefügt. Entfernen Sie sie jetzt und öffnen Sie das Bedienfeld Bibliothek:
Wir müssen ihre Verknüpfungsnamen einrichten, damit wir sie zur Laufzeit verwenden können. Das heißt, wir exportieren sie für ActionScript. Es gibt einen sehr schnellen Weg, dies zu tun.
Der Verknüpfungsabschnitt der Bilder ist standardmäßig leer. Klicken Sie auf die leeren Bereiche des Abschnitts "Verknüpfung" von CardBack.png:
Danach geben Sie "CardBack" ein:
Machen Sie dasselbe für das CardFront.png-Bild. Nachdem Sie die Verknüpfungsnamen eingegeben haben, sollte das Bedienfeld Bibliothek folgendermaßen aussehen:
Ja. Nun der lustige Teil. Wir können jetzt mit dem Programmieren beginnen :)
Zuerst importieren wir einige andere Klassen, die wir in den folgenden Schritten verwenden werden:
import flash.display.Bitmap; import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.Event; import flash.geom.Point;
Fügen Sie diese Zeilen zwischen ein Paket und öffentliche Klasse BusinessCard3D erweitert Sprite Zeilen.
Nachdem Sie Klassen importiert haben, richten Sie unsere Variablen ein. Fügen Sie diese Zeilen direkt über dem ein öffentliche Funktion BusinessCard3D () Linie:
private var businessCard: Sprite private var frontHolder: Sprite private var zurückHolder: Sprite private var frontTexture: Bitmap private var zurückTexture: Bitmap private var p1: Punkt private var p2: Punkt private var p3: Punkt private var p1_: Punkt = neuer Punkt (0) , 0) private var p2_: Punkt = neuer Punkt (100,0) private var p3_: Punkt = neuer Punkt (0,100)
Wie Sie sich vorstellen können Visitenkarte hält unsere anderen zwei Karten. Es ist der Haupthalter.
frontHolder hält die frontTexture, zurückHolder hält die zurückTextur.
frontTexture und zurückTextur sind die Bitmaps aus der Bibliothek.
Wir könnten nur einen Haupthalter verwenden und Bilder hinzufügen. Das Problem dabei ist jedoch, dass Anfänger verwirrt werden können. Da wir die Rückseite der Karte um 180 Grad drehen und da der Registrierungspunkt der Bitmap-Klasse oben links ist, müssen wir auch dessen ändern x Eigentum. Wenn Sie einen weiteren Halter hinzufügen, müssen Sie nur die Rotation ändern.
Nachdem wir die Variablen eingerichtet haben, schreiben wir unsere erste Funktion. Es werden im Wesentlichen Bilder aus der Bibliothek als BitmapData-Objekte erstellt und erstellt frontTexture und zurückTextur Bitmaps von ihnen.
public function getTextures () frontTexture = neues Bitmap (neues CardFront (0,0)) backTexture = neues Bitmap (neues CardBack (0,0))
Zuerst erhalten wir das CardFront-Bild, indem wir schreiben: neue CardFront (0,0)
Dies ist der einzige Weg, um ein BitmapData von einem Bild aus der Bibliothek zu erhalten. Wir können nicht verwenden nur BitmapData. Wenn wir eine 3D-Engine verwendet hätten, wäre dies wahrscheinlich ausreichend, aber bei nativem Flash 3D müssen wir ein Bitmap-Objekt verwenden. Daher erstellen wir ein Bitmap-Objekt aus BitmapData.
neue CardFront (0,0) gibt uns ein BitmapData zurück und dieses BitmapData wird in Bitmap zum Erstellen verwendet frontTexture. Wir machen dasselbe für zurückTextur und unsere Texturen sind fertig.
Jetzt schreiben wir unsere zweite Funktion. Diese Funktion baut unsere Halter auf und fügt unsere Halterungen hinzu:
public function addIntoHolders () businessCard = neu Sprite () frontHolder = neu Sprite () backHolder = neu Sprite () frontHolder.addChild (frontTexture) backHolder.addChild (backTexture) businessCard.addChild (frontHolder) Visitenkarte)
Wie Sie sehen, erstellen wir zuerst neue Sprites, die die perfekte Wahl für Halterzwecke sind. Dann fügen wir unsere Texturen in Texturhalter ein. Dann fügen wir diese Texturhalter in den Haupthalter ein.
Zum Schluss fügen wir den Hauptinhaber der Szene auf die Bühne hinzu. Wir werden den Inhaber als Visitenkarte verwenden.
Wir müssen die Rotation und die XY-Koordinaten der Karten ändern.
public function initCards () backHolder.rotationY = 180 frontTexture.x = -frontTexture.width / 2 frontTexture.y = -frontTexture.height / 2 backTexture.x = -backTexture.width / 2 backTexture.y = -backTexture.height / 2
Zuerst drehen wir die Rückseite der Karte um 180 Grad. Dann legen wir die Positionen der beiden Karten fest. Dies ist eigentlich ein einfacher Trick. Wir setzen den Registrierungspunkt des Karteninhabers tatsächlich in die Mitte. Dies liegt an der Perspektive der Standard-3D-Szene in unserem Dokument.
Dies ist wohl der schwierigste Schritt in unserem Tutorial. Wir bauen gerade eine Visitenkarte, und wenn wir die Vorderseite der Karte betrachten, sollte die Rückseite der Karte nicht gesehen werden. Wie können wir das machen? Wir können vielleicht einige schreiben ob Bedingungen durch Drehungen des Haupthalters… aber es ist einfacher möglich.
Stellen Sie sich vor, wir haben zwei rote Punkte und einen blauen Punkt auf einer Fläche. Stellen Sie sich nun vor, wir haben eine unendliche Linie, die durch die beiden roten Punkte verläuft. Diese Linie teilt die Flächen in zwei Seiten. Schauen Sie sich das Bild unten an:
Wie Sie sehen, hat der blaue Punkt zwei Chancen. Es kann sich auf der grünen Seite oder auf der gelben Seite befinden. Wenn wir herausfinden können, wo der blaue Punkt liegt, können wir unser Problem lösen.
Lass uns jetzt über 3D sprechen.
In diesem Bild haben wir eine 3D-Ebene. Stellen Sie sich vor, es ist etwas in der Y-Achse gedreht (also ist die Kante links von Ihnen weiter entfernt als die Kante rechts). Setzen wir rote Punkte und einen blauen Punkt an den Ecken der Ebene.
Sehen Sie die unendliche Linie? Schauen Sie sich das Bild unten an:
Es ist eigentlich das gleiche wie das erste Bild. Wenn der blaue Punkt jetzt auf die andere Seite der Linie geht, bedeutet dies, dass die andere Seite der Ebene gesehen wird. Daher können wir anhand der Positionen von nur drei Punkten bestimmen, welche Fläche der Ebene uns zugewandt ist.
Diese Methode wird in Away3D, PaperVision, Yogurt3D, Alternativa und anderen Engines verwendet und verbessert grundsätzlich die Leistung.
Für diese Methode verwenden wir eine Funktion:
public function isFrontFacing (displayObject: DisplayObject): Boolean p1 = displayObject.localToGlobal (p1_); p2 = displayObject.localToGlobal (p2_); p3 = displayObject.localToGlobal (p3_); return Boolean ((p2.x-p1.x) * (p3.y-p1.y) - (p2.y-p1.y) * (p3.x-p1.x)> 0);
Diese Funktion erstellt drei Punkte in der Karte (unserer Ebene). Und dann gibt es uns den Ort des dritten Punktes (blauer Punkt in Abbildungen). Wenn es zurückkehrt wahr dann sehen wir die Vorderseite der Karte (Ebene). Wenn nicht, bedeutet dies, dass wir die Rückseite der Karte sehen (Flugzeug).
Nun schreiben wir endlich unsere letzte Funktion. Diese Funktion dreht im Wesentlichen unsere Visitenkarte und prüft die Sichtbarkeit der Gesichter.
public function render (e: Event) businessCard.x = stage.stageWidth / 2 businessCard.y = stage.stageHeight / 2 businessCard.rotationY + = (mouseX - businessCard.rotationY) * 0,2 businessCard.rotationX + = (mouseY - businessCard.) .rotationX) * 0.2 frontHolder.visible = isFrontFacing (frontHolder); backHolder.visible = isFrontFacing (backHolder);
Die ersten beiden Zeilen legen die Position des Haupthalters in der Mitte fest. Dies liegt an der Perspektive der Standard-3D-Szene in unserem Dokument. Dann drehen wir unseren Haupthalter mit Mauskoordinaten. Wir fügen einen traditionellen und einfachen Effekt hinzu. Die letzten beiden Zeilen machen Karten sichtbar, wenn wir sie sehen.
Wir sind bereit. Rufen wir unsere Funktionen in der Reihenfolge auf:
öffentliche Funktion BusinessCard3D () getTextures () addIntoHolders () initCards () addEventListener (Event.ENTER_FRAME, render)
Wir fügen auch eine ENTER_FRAME Ereignis, um die Renderfunktion bei jedem Frame auszulösen.
Endlich können wir unseren Film testen.
Bewegen Sie die Maus und Sie werden sehen, dass auch die Visitenkarte gedreht wird. Wir haben unsere Karte getestet. Jetzt gehen wir noch ein bisschen weiter.
Die meisten von Ihnen und ich persönlich denken, dass Mausrotationen kühler sind, aber aufgrund meiner Erfahrungen mit 3D können sie Benutzer verwirren. Wir konvertieren dies daher in eine einfachere Animation. Wenn wir auf die Karte klicken, wird sie sich selbst drehen.
Zuerst verwenden wir für unsere Animation Tweener. Es ist wirklich einfach.
Laden Sie also die neueste Tweener-Version von code.google.com herunter. Ich verwende Version 1.33.74, ActionScript 3 (Flash 9+)..
Entpacken Sie die ZIP-Datei und verschieben Sie den Ordner "caurina" in den Ordner, der unser Flash-Dokument enthält.
In unseren ersten Zeilen ging es darum, Klassen zu importieren. Wir importieren Tweener und auch MouseEvent.
import flash.display.Bitmap; import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.Event; import flash.geom.Point; import caurina.transitions.Tweener importiere flash.events.MouseEvent
In unserer machen() Funktion war die Rotation der Karte direkt mit den Mauskoordinaten verbunden. Aber wir wollen das jetzt nicht. Wir werden im Grunde auf die Karte klicken und sie wird drehen.
Entfernen Sie also die hervorgehobenen Zeilen:
public function render (e: Event) businessCard.x = stage.stageWidth / 2 businessCard.y = stage.stageHeight / 2 businessCard.rotationY + = (mouseX - businessCard.rotationY) * 0,2 businessCard.rotationX + = (mouseY - businessCard.) .rotationX) * 0.2 frontHolder.visible = isFrontFacing (frontHolder); backHolder.visible = isFrontFacing (backHolder);
Wir fügen eine neue Variable hinzu, Vorderseite. Sein Typ ist Boolean. Wenn der Benutzer auf die Karte klickt, drehen wir unsere Karte je nach Wert auf 180 oder 0 Vorderseite.
private var frontFace: Boolean = true
Jetzt schreiben wir unsere letzte Funktion. Wenn wir auf die Karte klicken, wird diese Funktion ausgelöst.
public function onDown (e: MouseEvent) if (frontFace) Tweener.addTween (businessCard, rotationY: 180, time: 1) frontFace = false else Tweener.addTween (businessCard, rotationY: 0, time: 1) ) frontFace = true
Wir schauen uns zuerst das an Vorderseite Variable. Wenn es so ist wahr dann sehen wir gerade die Vorderseite der Karte. Wenn es falsch Dann schauen wir auf die Rückseite der Karte.
Wenn wir auf die Vorderseite der Karte schauen, sagen wir im Grunde "Drehen Sie sie um 180 Grad", damit wir die Rückseite der Karte sehen können. Wir verwenden dieselbe Idee, wenn wir die Rückseite der Karte betrachten (in diesem Fall drehen wir sie auf 0 Grad)..
Unsere letzte Zeile ist das Hinzufügen von a MouseEvent Listener, um das auszulösen onDown () Funktion, die wir gerade geschrieben haben. Wir fügen es unserer Visitenkarte hinzu. Sie könnten es sogar der Bühne hinzufügen.
businessCard.addEventListener (MouseEvent.MOUSE_DOWN, onDown)
Testen Sie Ihren Film und klicken Sie auf die Karte. Vielleicht kannst du einen flippigen Satz "Klicken, um meine Visitenkarte zu drehen;)" in deine Bilder einfügen :)
In dieser Lektion haben wir gelernt, wie man eine zweiseitige 3D-Ebene mit der nativen Flash Player 10 3D-API und ActionScript 3.0 erstellt. Zuerst haben wir es mit Mauskoordinaten gesteuert. Dann haben wir zur Klicksteuerung gewechselt, um die Benutzer nicht zu verwirren.
Wie Sie sehen, sind die Funktionen der 3D-Funktion in Flash Player nicht perfekt. Wir können jedoch immer Lösungen formulieren und einfache dynamische 3D-Animationen ohne Engine eines Drittanbieters erstellen.
Accentsconagua