Share
I denna handledning går jag igenom ett 3D-spektrum. Vi använder Away3D för 3D-motorn och använder en provlåt från Envato-tillgångsbiblioteket.
Skapa en ny ActionScript3-fil.
På fliken Egenskaper trycker du på knappen Redigera.
Välj Flash Player 9-profilen och klicka på OK.
Spara filen som "Beräkna Spectrum.fla" i Compute Spectrum-mappen. Nu behöver du ladda ner Away3D-motorn från Away3D-nedladdningar. Vi använder version 2.3.3 för Flash Player 9. Packa upp ett arkiv och kopiera alla mappar till Compute Spectrum-mappen.
Den animation som vi förbereder rör sig efter röst. Så vi måste välja vår sång korrekt. Publiken måste verkligen känna sig; "Woow detta rör sig inom ljudet". Om du hämtar källfilen ser du song.mp3. Kopiera den till din Compute Spectrum-mapp. Din mapp ska nu se ut så här:
OK, vi är redo att börja kodning. Vi fyller de första raderna genom att importera våra klasser:
importera away3d.cameras. *; importera away3d.containers. *; importera away3d.materials. *; importera away3d.primitives. * Importera away3d.lights.DirectionalLight3D
Efter att ha importerat våra klasser definierar vi våra variabler att använda under de kommande stegen.
var scen: Scene3D; var kamera: HoverCamera3D; Var View: View3D; var ljus: DirectionalLight3D;
var bars_up: Array = new Array (); var bars_down: Array = new Array () var soundbyte: ByteArray = ny ByteArray (); var soundforces: Array = ny Array () var scaleoffset_low: Number = 15; var scaleoffset_mid: Number = 150; var scaleoffset_hig: Number = 150; var jag: int; var t: Number;
De första är för Away3D. bars_up array håller våra viktigaste staplar. bars_down är för de reflekterade staplarna. soundforces och soundbyte är för beräkningsspektrum. Till sist, scaleoffsets är för skaleringsstänger.
Nu behöver vi bygga Away3D.
funktion 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 (scen: scen, kamera: kamera); view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (vy);
Den första raden i vår funktion skapar vår 3D-scen. Vi lägger sedan till 3D-objekt i den. För kameran väljer vi HoverCamera3D som jag tycker är det bästa sättet att vrida kameran runt objekt. Du behöver faktiskt inte använda ljus för det här projektet, men det gör animationen lite bättre :) Slutligen skapar vi Viewen och ställer den i mitten av scenen.
Funktion createBarUp (färg: Nummer, x: Nummer): void var bar: Cube = new Cube (bredd: 30, höjd: 50, djup: 30) bar.material = nytt ShadingColorMaterial (färg, alf: 0,5 ) bar.x = x // bar.blendMode = BlendMode.ADD bars_up.push (bar) scene.addChild (bar) funktion createBarDown (färg: Nummer, x: Nummer): void var bar: Cube = new Cube bredd: 30, höjd: 50, djup: 30) bar.material = nytt ShadingColorMaterial (färg, alf: 0,1) bar.x = x // bar.blendMode = BlendMode.ADD bars_down.push .addChild (bar)
Som du kan se finns det två funktioner för att skapa barer. Den första är för huvudstänger och den andra är för reflekterade stänger. Den andra reducerar dessutom alfavärdet av staplarna.
Först ska vi skapa en kub. Vi väljer ShadingColorMaterial, eftersom vi använder ljusa och solida färger. Funktionerna har 2 parametrar: den första dikterar färgen på stapeln och den andra är dess x-position.
Vi lägger också till blendMode i kuberna, bara för att det blir coolt. Efter dessa lägger vi till en kub till dess matris och till scenen.
funktion skapaBars (): void createBarUp (0x00CCFF, 0) createBarUp (0xFF3300, -45) createBarUp (0xF9C806, + 45) createBarDown (0x00CCFF, 0) createBarDown (0xFF3300, -45) createBarDown (0xF9C806, +45)
Här skapar vi 3 huvudstänger och 3 reflekterade staplar. Som du kan se är deras färger och positioner desamma. Vi ställer in sina positioner som i diagrammet nedan:
funktion render (e: Event): void view.render (); SoundMixer.computeSpectrum (soundbyte, true); ljudkrafter [0] = 0 ljudstyrkor [1] = 0 ljudstyrkor [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();
Detta är den knepiga delen. I renderfunktionen först gör vi 3D. Då använder vi SoundMixer för att få ljudvärden (computeSpectrum är metoden för detta). Vi utjämnar ljudstyrkarnas första 3 element till 0, vilket effektivt återställer ljudvärdena. Efter det kommer en för loop.
låga värden: låtstyrkor [0]
mellanvärden: låtstyrkor [1]
höga värden: sångkrafter [2]
Efter att vi har fått sångvärdena ska vi skala våra barer. Vi använder 2 funktioner för detta. Den första är för huvudstängerna och den andra är för reflektionerna. Dessa funktioner har 2 parametrar; Den första är stapeln som ska skalas och den andra är målhöjdsvärdet för stapeln.
Vi utjämnar då ljusets ställning till kamerans position. Detta gör vår ljusdynamik och vår animation effektivare. Vi använder sann andel i matte för att ändra kamerans positioner i förhållande till mouseX och mouseY.
FunktionsskalaBarUp (bar: Kub, höjd: Nummer): tomrum bar.höjd + = (höjd - bar.höjd) * 0.3 bar.y + = (höjd * 0.5 - bar.y) * 0.3 FunktionsskalaBarDown (bar: Kub, höjd: antal): void bar.height + = (height - bar.height) * 0.3 bar.y + = (-höjd * 0,5 - bar.y) * 0.3
Vi använder en enkel teknik för animering, detta diagram visar ett exempel:
OK, vi skala våra barer. Men vi måste också ändra y-värdet av dem. Detta diagram visar varför vi behöver ändra dem:
I den första funktionen är barens y-värde positivt och i den andra funktionen är det negativt. Huvudstavarna glider upp, reflekterade staplar glider neråt.
funktion startToRender (): void addEventListener (Event.ENTER_FRAME, render);
Accentsconagua
funktion startToPlay (): void var ljud: Ljud = nytt ljud (); sound.load (ny URLRequest ("song.mp3")); sound.play (); initAway3D (); createBars (); startToRender (); startToPlay (); I dessa funktioner börjar vi köra renderfunktionen och ladda vår "song.mp3" -fil. Då kallar vi alla våra funktioner en efter en. Nu kan du testa din film och titta på staplarna hoppa :)
I den här lektionen lärde vi sig att använda reflektion i Away3D och hur man får ljuddata. Nyckeln till dessa typer av effekter är låten: du måste välja den bästa möjliga sången för att animationen verkligen ska fungera. Prova med dina egna mp3 spår :)
Jag hoppas att du gillade den här handledningen, tack för att du läste!
