Render en Funky Sound Visualizer med Away3D
Del
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil jeg lede deg gjennom å bygge en 3D beregne spektrum. Vi vil bruke Away3D for 3D-motor og gjøre bruk av en prøve sang fra Envato ressursbiblioteket

Trinn 1:. La oss begynne

Opprett ny ActionScript3 fil

Trinn 2:. Rediger profil

i Egenskaper-panelet trykke på knappen Rediger

Trinn 3:. Velg Flash Player versjon

Velg Flash Player 9-profil og klikk på OK

Trinn 4:.! Få Away3D Engine

Lagre filen som "Compute Spectrum.fla" i Compute Spectrum mappen. Nå må du laste ned Away3D motoren Away3D nedlastinger. Vi bruker versjon 2.3.3 for Flash Player 9. Pakk et arkiv og kopiere alle mapper til Compute Spectrum mappen

Trinn 5:.! Få Song

Animasjonen vi vil forberede beveger seg i henhold til stemmen. Så vi må velge vår sang riktig. Publikum må føle; "Woow dette beveger seg innenfor lyd". Hvis du laster ned kildefilen, vil du se song.mp3. Kopiere den til Compute Spectrum mappen. Mappen skal nå se slik ut:

Trinn 6: Starte Coding

OK, vi er klare til å starte koding. Vi vil fylle de første linjene ved å importere våre klasser:
import away3d.cameras *; import away3d.containers *; import away3d.materials *; import away3d.primitives * import away3d.lights.DirectionalLight3D trinn 7: Oppsett variabler

Når du har importert våre klasser definerer vi våre variabler for å bruke under de kommende trinnene
Var scene: Scene3D; Var kamera. HoverCamera3D; Var vis: View3D, Div lys: DirectionalLight3D; Var bars_up: Array = new Array (); Var bars_down: Array = new Array () Var Soundbyte: ByteArray = new ByteArray (); Var soundforces: Array = new Array () Var scaleoffset_low: Number = 15; Var scaleoffset_mid: Number = 150; Var scaleoffset_hig: Antall = 150; Var i: int; Var t: nummer,

De første er for Away3D. bars_up
rekke holder våre viktigste barer. bars_down
er for de reflekterte barer. soundforces Hotell og Soundbyte
er for beregne spektrum. Til slutt, scaleoffsets
er for skalering barer.

Trinn 8: Oppsett Away3D

Nå må vi bygge Away3D
fungere initAway3D (). void {scene = new Scene3D (); Kameraet = new HoverCamera3D (); camera.distance = 300 lys = ny DirectionalLight3D ({color: 0xFFFFFF, ambient: 0,25, diffuse: 0,75, blank: 0,9}) scene.addChild (lys) view = ny View3D ({scene: scene, kamera: Kameraet}); view.x = stage.stageWidth /2; view.y = stage.stageHeight /2; addChild (vis);}

Den første linjen i vår funksjon skaper vår 3D-scene. Vi legg deretter til 3D-objekter inn i den. For kameraet velger vi HoverCamera3D som jeg synes det er den beste måten å slå på kameraet rundt objekter. Du faktisk ikke trenger å bruke lys for dette prosjektet, men det gjør animasjon som litt bedre :) Endelig legger vi visningen og sette den i midten av scenen

Trinn 9:. Opprette Enkelt Bar &funksjon createBarUp (farge: Antall, x: Number): void {var bar: Cube = ny Cube ({width: 30, høyde: 50, dybde: 30}) bar.material = new ShadingColorMaterial (farge, { alfa: 0,5}) bar.x = x //bar.blendMode = BlendMode.ADD bars_up.push (bar) scene.addChild (bar)} funksjon createBarDown (farge: Antall, x: Number): void {var bar: Cube = ny Cube ({width: 30, høyde: 50, dybde: 30}) bar.material = new ShadingColorMaterial (farge, {alfa: 0,1}) bar.x = x //bar.blendMode = BlendMode.ADD bars_down.push (bar) scene.addChild (bar)}

Som du ser, det er 2 funksjoner for å skape barer. Den første er for viktigste barer og den andre er for reflekterte barer. Den andre reduserer ytterligere alfaverdien av barene.

Først vil vi lage en kube. Vi velger ShadingColorMaterial, fordi vi bruker lys og solide farger. Funksjonene har 2 parametre: den første dikterer fargen på baren og den andre er sin x posisjon

Vi vil også legge blendMode til kuber, bare fordi det gjør dem ser kul.. Etter disse legger vi en kube til sitt utvalg og til scenen

Trinn 10:. Opprette Alle Barer
funksjons createBars (): void {createBarUp (0x00CCFF, 0) createBarUp (0xFF3300, -45) createBarUp (0xF9C806, + 45) createBarDown (0x00CCFF, 0) createBarDown (0xFF3300, -45) createBarDown (0xF9C806, + 45)}

Her skaper vi 3 viktigste barer og tre reflektert barer. Som du kan se, deres farger og posisjoner er de samme. Vi setter sine posisjoner som i figuren nedenfor:

Trinn 11: Rende
funksjon render (e: Hendelses): void {view.render (); SoundMixer.computeSpectrum (Soundbyte, true); soundforces [0] = 0 soundforces [1] = 0 soundforces [2] = 0 for (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 = scenen .mouseX /stage.stageWidth * 360 camera.targettiltangle = stage.mouseY /stage.stageHeight * 30 camera.hover ();}

Dette er den vanskelige delen. I gjengi funksjonen første vi gjengi 3D. Deretter bruker vi SoundMixer å få sunne verdier (computeSpectrum er metoden for dette). Vi utjevne soundforces 'første 3 elementer til 0, effektivt tilbakestille lyden verdier. Etter det kommer en for loop.

lave verdier: songforces [0]

middelverdier: songforces [1]

høye verdier: songforces [2]

Etter at vi får sangen verdiene vi skalere våre barer. Vi bruker 2 funksjoner for dette. Den første er for de viktigste barer og den andre er for refleksjoner. Disse funksjonene har 2 parametre; den første er bar å bli skalert og den andre er målet høyden verdien av baren.

Vi deretter utjevne posisjonen til vår lys til posisjonen av kameraet. Dette gjør vårt lys dynamisk og vår animasjon mer effektive. Vi bruker ekte andel i regnestykket til å endre kameraposisjoner i forhold til mouseX og Mousey

Trinn 12:. Scaling Barer
funksjon scaleBarUp (bar: Cube, høyde: Number): void {bar.height + = (høyde - bar.height) * 0,3 bar.y + = (høyde * 0,5 - bar.y) * 0,3} funksjon scaleBarDown (bar: Cube, høyde: Number): void {bar.height + = (høyde - bar.height) * 0,3 bar.y + = (-Høyde * 0,5 - bar.y) * 0,3}

Vi bruker en enkel teknikk for animasjon, viser dette diagrammet et eksempel:

OK, vi skalere våre barer. Men vi må endre y verdien av dem også. Dette diagrammet viser hvorfor vi trenger å endre dem:

I den første funksjonen, er y-verdien av barene positiv og i den andre funksjonen er det negative. . Viktigste barer gli opp, reflektert barer gli ned

Trinn 13: siste trinnene
funksjon startToRender (): void {addEventListener (Event.ENTER_FRAME, render); } Funksjon startToPlay (): void {var lyd: Sound = new Sound (); sound.load (ny URLRequest ( "song.mp3")); sound.play ();} initAway3D (); createBars (); startToRender (); startToPlay ();

I disse funksjonene vi begynner å kjøre gjengi funksjon og laste vår "song.mp3" fil. Deretter kaller vi alle våre funksjoner en etter en. Nå kan du teste filmen og se barene hoppe :)

Konklusjon

I denne leksjonen vi lærte å bruke refleksjon i Away3D og hvordan du får lyddata. Nøkkelen til disse typer effekter er sangen: du trenger for å velge den best mulige sang å gjøre animasjonen virkelig fungerer. Prøv det med dine egne MP3-spor :)

Jeg håper du likte denne opplæringen, takk for lesing!