Share
I denne opplæringen vil jeg gå deg gjennom å bygge et 3D-beregningsspekter. Vi bruker Away3D til 3D-motoren og benytter en prøvesang fra Envato-aktivitetsbiblioteket.
Opprett ny ActionScript3-fil.
Trykk på Edit-knappen i Egenskaper-panelet.
Velg Flash Player 9-profilen og klikk OK.
Lagre filen som "Compute Spectrum.fla" i Compute Spectrum-mappen. Nå må du laste ned Away3D-motoren fra Away3D-nedlastinger. Vi bruker versjon 2.3.3 for Flash Player 9. Pakke ut et arkiv og kopier alle mapper til Compute Spectrum-mappen.
Den animasjonen vi skal forberede beveger seg i henhold til stemmen. Så vi må velge vår sang riktig. Publikum må virkelig føle; "Woow dette beveger seg innenfor lyden". Hvis du laster ned kildefilen, ser du song.mp3. Kopier den til Compute Spectrum-mappen din. Mappen din skal nå se slik ut:
OK, vi er klare til å starte kodingen. Vi fyller de første linjene ved å importere våre klasser:
importere away3d.cameras. *; importere away3d.containers. *; importere away3d.materials. *; importere away3d.primitives. * Import away3d.lights.DirectionalLight3D
Etter å ha importert våre klasser, definerer vi våre variabler for bruk i de kommende trinnene.
var scene: Scene3D; Var kamera: HoverCamera3D; var visning: View3D; var lys: DirectionalLight3D;
var bars_up: Array = new Array (); var bars_down: Array = new Array () var lydbyte: ByteArray = ny ByteArray (); var lydstyrker: Array = ny Array () var scaleoffset_low: Number = 15; var scaleoffset_mid: Number = 150; var skalaoffset_hig: Nummer = 150; var jeg: int; var t: tall;
De første er for Away3D. bars_up array holder våre viktigste barer. bars_down er for de reflekterte stolper. soundforces og Soundbyte er for beregne spektrum. Endelig, scaleoffsets er for skaleringsstenger.
Nå må vi bygge Away3D.
funksjon initAway3D (): void scene = new Scene3D ();
kamera = ny HoverCamera3D (); camera.distance = 300
light = new DirectionalLight3D (color: 0xFFFFFF, ambient: 0.25, diffuse: 0.75, specular: 0.9) scene.addChild (light) view = new View3D (scene: scene, kamera: kamera); view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (syn);
Den første linjen i vår funksjon skaper vår 3D-scene. Vi legger da til 3D-objekter i den. For kameraet velger vi HoverCamera3D som jeg finner det er den beste måten å snu kameraet rundt objekter. Du trenger egentlig ikke å bruke lys for dette prosjektet, men det gjør animasjonen litt bedre :) Til slutt lager vi Vis og setter det midt på scenen.
funksjon createBarUp (farge: tall, x: tall): void var bar: Cube = new Cube (bredde: 30, høyde: 50, dybde: 30) bar.material = nytt ShadingColorMaterial ) bar.x = x // bar.blendMode = BlendMode.ADD bars_up.push (bar) scene.addChild (bar) funksjonen createBarDown (farge: tall, x: tall): void var bar: Cube = new Cube bredde: 30, høyde: 50, dybde: 30) bar.material = nytt ShadingColorMaterial (farge, ala: 0,1) bar.x = x // bar.blendMode = BlendMode.ADD bars_down.push .addChild (bar)
Som du kan se, er det 2 funksjoner for å lage barer. Den første er for hovedstenger og den andre er for reflekterte barer. Den andre reduserer alfa-verdien av stolpene ytterligere.
Først skal vi lage en kube. Vi velger ShadingColorMaterial, fordi vi bruker lyse og solide farger. Funksjonene har to parametre: den første dikterer fargene på linjen og den andre er dens x-posisjon.
Vi vil også legge til blendMode til terningene, bare fordi det gjør dem ser kule ut. Etter disse legger vi til en terning i sitt array og til scenen.
createBarDown (0x00CCFF, 0) createBarDown (0xFF90080, -45) createBarUp
Her lager vi 3 hovedstenger og 3 reflekterte barer. Som du ser, er deres farger og stillinger de samme. Vi stiller inn stillingene som vist i diagrammet nedenfor:
funksjon gjengivelse (e: Event): void view.render (); SoundMixer.computeSpectrum (soundbyte, true); lydstyrker [0] = 0 lydstyrker [1] = 0 lydstyrker [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 = stage.mouseX/stage.stageWidth*360 camera.targettiltangle = stage.mouseY/stage.stageHeight*30 camera.hover();
Dette er den vanskelige delen. I gjengivelsesfunksjonen gir vi først 3D. Så bruker vi SoundMixer for å få lydverdier (computeSpectrum er metoden for dette). Vi utjevner lydstyrkenes første 3 elementer til 0, og nullstiller lydverdiene effektivt. Etter det kommer en for løkke.
lave verdier: sangkrefter [0]
mellomverdier: sangkrefter [1]
høye verdier: sangkrefter [2]
Etter at vi får sangverdiene, skalerer vi våre barer. Vi bruker 2 funksjoner for dette. Den første er for hovedstengene og den andre er for refleksjonene. Disse funksjonene har 2 parametere; den første er linjen som skaleres og den andre er målhøydeverdien av linjen.
Vi utjevner deretter lysets posisjon til kameraets posisjon. Dette gjør vår lysdynamikk og animasjonen mer effektive. Vi bruker sann andel i matte for å endre kameraposisjonene i forhold til mouseX og mouseY.
funksjonsskalaBarUp (bar: kube, høyde: tall): tomrom bar.height + = (høyde - bar.høyde) * 0.3 bar.y + = (høyde * 0.5 - bar.y) * 0.3 funksjonsskalaBarDown (bar: Kube, høyde: Nummer): tomrom bar.height + = (høyde - bar.height) * 0.3 bar.y + = (-height * 0.5 - bar.y) * 0.3
Vi bruker en enkel teknikk for animasjon, dette diagrammet viser et eksempel:
OK, vi skaller våre barer. Men vi må også endre y-verdien av dem. Dette diagrammet viser hvorfor vi må endre dem:
I den første funksjonen er y-verdien på stolpene positive og i den andre funksjonen er den negativ. Hovedstenger glir opp, reflekterte barer glir ned.
funksjon startToRender (): void addEventListener (Event.ENTER_FRAME, gjengivelse);
Accentsconagua
funksjon startToPlay (): void var lyd: Lyd = nytt lyd (); sound.load (ny URLRequest ("song.mp3")); sound.play (); initAway3D (); createBars (); startToRender (); startToPlay (); I disse funksjonene begynner vi å kjøre gjengivelsesfunksjonen og laste inn vår "song.mp3" -fil. Da kaller vi alle våre funksjoner en etter en. Nå kan du teste filmen og se barene hoppe :)
I denne leksjonen lærte vi hvordan vi bruker refleksjon i Away3D og hvordan vi får lyddata. Nøkkelen til disse typer effekter er sangen: du må velge den beste sangen for å få animasjonen til å fungere. Prøv det med dine egne mp3-spor :)
Jeg håper du likte denne opplæringen, takk for å lese!
