Share
În acest tutorial vă voi conduce prin construirea unui spectru 3D de calcul. Vom folosi Away3D pentru motorul 3D și vom folosi o piesă de probă din biblioteca de materiale Envato.
Creați un nou fișier ActionScript3.
În panoul Proprietăți, apăsați butonul Editare.
Alegeți profilul Flash Player 9 și faceți clic pe OK.
Salvați fișierul ca "Compute Spectrum.fla" în dosarul Compute Spectrum. Acum va trebui să descărcați motorul Away3D din Descărcări Away3D. Vom utiliza versiunea 2.3.3 pentru Flash Player 9. Despachetați o arhivă și copiați toate folderele în dosarul Compute Spectrum.
Animația pe care o vom pregăti se mută în funcție de voce. Așa că trebuie să alegem corect piesa noastră. Audiența trebuie să simtă cu adevărat; "Woow acest lucru se mișcă în interiorul sunetului". Dacă descărcați fișierul sursă, veți vedea song.mp3. Copiați-l în folderul Compute Spectrum. Dosarul dvs. ar trebui să arate astfel:
OK, suntem gata să începem codarea. Vom completa primele linii importând clasele noastre:
importa away3d.cameras. *; importați away3d.containers. *; importa departe3d.materiale. *; import away3d.primitives. * import away3d.lights.DirectionalLight3D
După importarea clasei noastre, definim variabilele pe care le folosim în pașii următori.
Var scena: Scene3D; camera var: HoverCamera3D; var vizual: View3D; var lumina: DirectionalLight3D;
var bars_up: Array = Array nou (); var bar_down: array = array nou () var soundbyte: ByteArray = new ByteArray (); var sunete: array = array nou () var scaleoffset_low: Number = 15; var scaleoffset_mid: Număr = 150; var scaleoffset_hig: Număr = 150; var i: int; var t: Număr;
Primele sunt pentru Away3D. bars_up array deține principalele noastre baruri. bars_down este pentru barele reflectate. soundforces și Soundbyte sunt pentru spectrul de calcul. In cele din urma, scaleoffsets sunt pentru barele de scalare.
Acum trebuie să construim Away3D.
funcția initAway3D (): void scene = nou Scene3D ();
camera = noua HoverCamera3D (); camera.distance = 300
lumina = noua DirectionalLight3D (culoare: 0xFFFFFF, ambient: 0.25, difuz: 0.75, specular: 0.9) view.addChild (lumina) view = new View3D (scena: camera; view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (vizualizare);
Prima linie a funcției noastre creează scena noastră 3D. Apoi adăugăm obiecte 3D în el. Pentru aparatul de fotografiat alegem HoverCamera3D, deoarece consider că este cel mai bun mod de a transforma camera în jurul obiectelor. De fapt, nu trebuie să folosiți lumină pentru acest proiect, dar face animația să fie mai bine :) În final, vom crea Vederea și o vom seta în mijlocul scenei.
functionare createBarUp (culoare: Numar, x: Numar): void var bar: Cube = Cub nou (lățime: 30, înălțime: 50, adâncime: 30) bar.material = ) bar.x = x // bar.blendMode = BlendMode.ADD bare_up.push (bar) scena.addChild (bar) funcția createBarDown (culoare: Număr, x: Număr): void var bar: width: 30, height: 50, depth: 30) bar.material = nou ShadingColorMaterial (culoare, alpha: 0.1) bar.x = x // bar.blendMode = BlendMode.ADD bars_down.push .addChild (bar)
După cum puteți vedea, există 2 funcții pentru a crea bare. Primul este pentru barele principale, iar al doilea pentru barele reflectate. Cel de-al doilea reduce în plus valoarea alfa a barelor.
Mai întâi vom crea un Cub. Alegem ShadingColorMaterial, pentru că folosim culori ușoare și solide. Funcțiile au 2 parametri: prima dictează culoarea barei, iar cea de-a doua este poziția x.
De asemenea, vom adăuga blendMode la cuburi, doar pentru că le face să arate misto. După acestea adăugăm un cub la matrice și la scenă.
(0xF9C806, + 45) createBarDown (0xF9C806, + 45) createBarDown (0xFCC0606, + 45) createBarDown
Aici vom crea 3 bare principale și 3 bare reflectate. După cum puteți vedea, culorile și pozițiile lor sunt aceleași. Vom stabili pozițiile lor ca în diagrama de mai jos:
funcția rendere (e: Eveniment): void view.render (); SoundMixer.computeSpectrum (soundbyte, true); [0] = 0 pentru sunete [1] = 0 pentru sunete [2] = 0 pentru (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();
Aceasta este partea complicată. În funcia de redare vom face mai întâi 3D. Apoi folosim SoundMixer pentru a obține valori de sunet (calculul este o metodă pentru acest lucru). Am egalizat primele 3 elemente de sunet la zero, resetând efectiv valorile sonore. După asta, vine o buclă.
valori scăzute: melodii [0]
valori de mijloc: melodii [1]
valori mari: melodii [2]
După ce vom obține valorile cântecului, vom scala barele noastre. Utilizăm 2 funcții pentru aceasta. Primul este pentru barele principale, iar al doilea este pentru reflecții. Aceste funcții au 2 parametri; prima este bara care trebuie scalată, iar a doua este valoarea înălțimii țintă a barei.
Apoi, egalizăm poziția luminii noastre la poziția camerei. Acest lucru face ca dinamica noastră dinamică și animația noastră să fie mai eficiente. Folosim proporția reală în matematică pentru a schimba pozițiile camerei în raport cu mouse-ul X și mouse-ulY.
(înălțime = 0.5 - bar.y) * 0.3) scara funcțieiBarDown (bar: Cub, înălțime: Număr): void bar.height + Cub, înălțime: Număr): void bar.height + = (înălțime - bar.height) * 0.3 bar.y + = (-pear * 0.5 - bar.y)
Folosim o tehnică simplă pentru animație, această diagramă arată un exemplu:
Bine, ne scuturăm barurile. Dar trebuie să schimbăm și valoarea lor. Această diagramă arată de ce trebuie să le schimbăm:
În prima funcție, valoarea y a barelor este pozitivă, iar în a doua funcție este negativă. Barele principale alunecă în sus, barele reflectate se aliniază.
funcția startToRender (): void addEventListener (Event.ENTER_FRAME, render);
Accentsconagua
funcția startToPlay (): void var sound: Sound = new Sound (); sound.load (noua adresă URLRequest ("song.mp3")); sound.play (); initAway3D (); createBars (); startToRender (); startToPlay (); În aceste funcții începem să executăm funcția de redare și să încărcăm fișierul "song.mp3". Atunci ne numim toate funcțiile unul câte unul. Acum puteți să vă testați filmul și să urmăriți saltul de la baruri :)
În această lecție am învățat cum să folosim reflecția în Away3D și cum să obținem date de sunet. Cheia acestor tipuri de efecte este piesa: trebuie să alegeți cea mai bună melodie posibilă pentru a face animația să funcționeze într-adevăr. Încercați-l cu propriile piese mp3 :)
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
