Rendern Sie ein Funky Sound Visualizer mit Away3D

In diesem Tutorial gehe ich durch den Aufbau eines 3D-Berechnungsspektrums. Wir verwenden Away3D für die 3D Engine und verwenden ein Beispielsong aus der Envato-Asset-Bibliothek.

Schritt 1: Beginnen wir

Erstellen Sie eine neue ActionScript3-Datei.

Schritt 2: Profil bearbeiten

Klicken Sie im Eigenschaftenbereich auf die Schaltfläche Bearbeiten.

Schritt 3: Wählen Sie die Flash Player-Version

Wählen Sie das Flash Player 9-Profil und klicken Sie auf OK.

Schritt 4: Holen Sie sich die Away3D Engine!

Speichern Sie Ihre Datei als "Compute Spectrum.fla" im Ordner "Compute Spectrum". Jetzt müssen Sie die Away3D-Engine von den Away3D-Downloads herunterladen. Wir verwenden Version 2.3.3 für Flash Player 9. Entpacken Sie ein Archiv und kopieren Sie alle Ordner in den Compute Spectrum-Ordner.

Schritt 5: Holen Sie sich den Song!

Die Animation, die wir vorbereiten werden, bewegt sich entsprechend der Stimme. Also müssen wir unser Lied richtig wählen. Das Publikum muss sich wirklich fühlen; "woow das bewegt sich im Sound". Wenn Sie die Quelldatei herunterladen, wird song.mp3 angezeigt. Kopieren Sie es in Ihren Compute Spectrum-Ordner. Ihr Ordner sollte jetzt so aussehen:

Schritt 6: Starten Sie die Codierung

OK, wir können mit dem Programmieren beginnen. Wir füllen die ersten Zeilen aus, indem Sie unsere Klassen importieren:

import3d.cameras importieren. *; import away3d.containers. *; import3d.materials importieren. *; away3d.primitives importieren. * away3d.lights.DirectionalLight3D importieren

Schritt 7: Setup-Variablen

Nach dem Importieren unserer Klassen definieren wir unsere Variablen, die in den nächsten Schritten verwendet werden sollen.

Var-Szene: Scene3D; Var Kamera: HoverCamera3D; var view: View3D; var light: DirectionalLight3D;

var bars_up: Array = neues Array (); var bars_down: Array = new Array () var Soundbyte: ByteArray = neues ByteArray (); var soundforces: Array = neues Array () var scaleoffset_low: Number = 15; var scaleoffset_mid: Number = 150; var scaleoffset_hig: Number = 150; var i: int; var t: Anzahl;

Die ersten sind für Away3D. bars_up Array hält unsere Hauptbarren. bars_down ist für die reflektierten Balken. Klangkräfte und Soundbyte sind für Berechnungsspektrum. Endlich, Scaleoffsets sind für Skalierungsbalken.

Schritt 8: Away3D einrichten

Nun müssen wir Away3D bauen.

function initAway3D (): void scene = new Scene3D ();

 Kamera = neuer HoverCamera3D (); camera.distance = 300

 light = new DirectionalLight3D (color: 0xFFFFFF, Umgebung: 0,25, diffus: 0,75, spekular: 0,9) scene.addChild (light) view = new View3D (scene: scene, camera: camera); view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (view); 

Die erste Zeile unserer Funktion erstellt unsere 3D-Szene. Wir fügen dann 3D-Objekte hinzu. Für die Kamera wählen wir HoverCamera3D, da ich finde, dass dies die beste Möglichkeit ist, die Kamera um Objekte zu drehen. Sie brauchen eigentlich kein Licht für dieses Projekt, aber die Animation wird dadurch ein bisschen besser :) Zum Schluss erstellen wir die Ansicht und setzen sie in die Mitte der Szene.

Schritt 9: Einzelne Leiste erstellen

function createBarUp (color: Number, x: Number): void var bar: Cube = neuer Cube (width: 30, height: 50, tiefe: 30) bar.material = new ShadingColorMaterial (color, alpha: 0.5) ) bar.x = x // bar.blendMode = BlendMode.ADD bars_up.push (bar) scene.addChild (bar) Funktion createBarDown (color: Number, x: Number): void var bar: Cube = neuer Cube ( width: 30, height: 50, depth: 30) bar.material = new ShadingColorMaterial (color, alpha: 0.1) bar.x = x // bar.blendMode = BlendMode.ADD bars_down.push (bar) .addChild (bar)

Wie Sie sehen können, gibt es zwei Funktionen zum Erstellen von Balken. Der erste ist für Hauptbalken und der zweite für reflektierte Balken. Der zweite reduziert den Alpha-Wert der Balken weiter.

Zuerst erstellen wir einen Würfel. Wir haben uns für ShadingColorMaterial entschieden, weil wir helle und einfarbige Farben verwenden. Die Funktionen haben 2 Parameter: Der erste gibt die Farbe des Balkens vor und der zweite ist die x-Position.

Wir fügen den Cubes auch blendMode hinzu, einfach weil sie cool aussehen. Danach fügen wir einen Würfel zu seinem Array und zur Szene hinzu.

Schritt 10: Alle Bars erstellen

 Funktion createBars (): void createBarUp (0x00CCFF, 0) createBarUp (0xFF3300, -45) createBarUp (0xF9C806, + 45) createBarDown (0x00CCFF, 0) createBarDown (0xFF3300, -45) createBarDown (0xF9C806, + 45)

Hier erstellen wir 3 Hauptbalken und 3 Spiegelbalken. Wie Sie sehen, sind ihre Farben und Positionen gleich. Wir werden ihre Positionen wie in der folgenden Abbildung festlegen:

Schritt 11: Rendern

function render (e: Event): void view.render (); SoundMixer.computeSpectrum (soundbyte, true); Klangstärken [0] = 0 Klangstärken [1] = 0 Klangstärken [2] = 0 für (i = 0; i<300; i+=2)  t=soundbyte.readFloat(); if (i>= 0 && i<100)  soundforces[0]+=t*scaleoffset_low;  if (i>= 100 && i<200)  soundforces[1]+=t*scaleoffset_mid;  if (i>= 200 && i<300)  soundforces[2]+=t*scaleoffset_hig;   scaleBarUp(bars_up[0],soundforces[0]) scaleBarUp(bars_up[1],soundforces[1]) scaleBarUp(bars_up[2],soundforces[2]) scaleBarDown(bars_down[0],soundforces[0]) scaleBarDown(bars_down[1],soundforces[1]) scaleBarDown(bars_down[2],soundforces[2]) light.x = camera.x light.y = camera.y light.z = camera.z camera.targetpanangle = stage.mouseX/stage.stageWidth*360 camera.targettiltangle = stage.mouseY/stage.stageHeight*30 camera.hover(); 

Das ist der knifflige Teil. In der Renderfunktion rendern wir zuerst das 3D. Dann verwenden wir SoundMixer, um Soundwerte abzurufen (computeSpectrum ist die Methode dafür). Wir gleichen die ersten 3 Elemente von soundforces auf 0 aus und setzen die Soundwerte effektiv zurück. Danach kommt eine for-Schleife.

niedrige Werte: Gesangskräfte [0]

mittlere Werte: Gesangskräfte [1]

hohe Werte: Gesangskräfte [2]

Nachdem wir die Songwerte erhalten haben, skalieren wir unsere Takten. Wir verwenden dazu 2 Funktionen. Der erste ist für die Hauptstreben und der zweite für die Reflexionen. Diese Funktionen haben 2 Parameter; Der erste ist der zu skalierende Balken und der zweite ist der Zielhöhenwert des Balkens.

Wir gleichen dann die Position unseres Lichts an die Position der Kamera aus. Dies macht unser Licht dynamischer und unsere Animation effektiver. In der Mathematik verwenden wir den richtigen Anteil, um die Kamerapositionen in Bezug auf mouseX und mouseY zu ändern.

Schritt 12: Balken skalieren

 function scaleBarUp (bar: Cube, height: Number): void bar.height + = (Höhe - bar.height) * 0,3 bar.y + = (Höhe * 0,5 - bar.y) * 0.3 Funktion scaleBarDown (bar: Würfel, Höhe: Anzahl): leer bar.height + = (Höhe - bar.height) * 0,3 bar.y + = (- Höhe * 0,5 - bar.y) * 0,3

Wir verwenden eine einfache Technik für die Animation. Dieses Diagramm zeigt ein Beispiel:

OK, wir skalieren unsere Bars. Aber wir müssen auch den y-Wert von ihnen ändern. Dieses Diagramm zeigt, warum wir sie ändern müssen:

In der ersten Funktion ist der Y-Wert der Balken positiv und in der zweiten Funktion negativ. Hauptbalken gleiten nach oben, reflektierte Balken nach unten.

Schritt 13: Letzte Schritte

function startToRender (): void addEventListener (Event.ENTER_FRAME, Rendern); 

Funktion startToPlay (): void var sound: Sound = neuer Sound (); sound.load (neue URLRequest ("song.mp3")); sound.play ();  initAway3D (); createBars (); startToRender (); startToPlay ();

In diesen Funktionen starten wir die Renderfunktion und laden unsere "song.mp3" -Datei. Dann rufen wir alle unsere Funktionen nacheinander auf. Jetzt kannst du deinen Film testen und die Bars springen sehen :)

Fazit

In dieser Lektion haben wir gelernt, wie man Reflection in Away3D verwendet und wie man Klangdaten erhält. Der Schlüssel zu diesen Effekten ist der Song: Sie müssen den bestmöglichen Song auswählen, damit die Animation wirklich funktioniert. Probiere es mit deinen eigenen MP3-Tracks :)

Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!