Share
In deze tutorial zal ik je begeleiden bij het bouwen van een 3D-compute-spectrum. We gebruiken Away3D voor de 3D-engine en maken gebruik van een voorbeeldnummer uit de Envato-bibliotheek.
Maak een nieuw ActionScript3-bestand.
Druk in het paneel Eigenschappen op de knop Bewerken.
Kies Flash Player 9-profiel en klik op OK.
Sla uw bestand op als "Compute Spectrum.fla" in de map Compute Spectrum. Nu moet je de Away3D-engine downloaden van Away3D-downloads. We gebruiken versie 2.3.3 voor Flash Player 9. Pak een archief uit en kopieer alle mappen naar de map Compute Spectrum.
De animatie die we voorbereiden, beweegt volgens stem. Dus we moeten ons liedje correct kiezen. Het publiek moet echt voelen; "woow dit beweegt binnen het geluid". Als u het bronbestand downloadt, ziet u song.mp3. Kopieer het naar uw Compute Spectrum-map. Uw map zou er nu als volgt uit moeten zien:
OK, we zijn klaar om te beginnen met coderen. We vullen de eerste regels door onze klassen te importeren:
import away3d.cameras. *; import away3d.containers. *; import away3d.materials. *; import away3d.primitives. * import away3d.lights.DirectionalLight3D
Na het importeren van onze klassen definiëren we onze variabelen om te gebruiken tijdens de komende stappen.
var scene: Scene3D; var camera: HoverCamera3D; var view: View3D; var light: Directional Light 3D;
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: Number = 150; var i: int; var t: Number;
De eerste zijn voor Away3D. bars_up array bevat onze belangrijkste balken. bars_down is voor de gereflecteerde balken. soundforces en soundbyte zijn voor compute spectrum. Tenslotte, scaleoffsets zijn voor het schalen van balken.
Nu moeten we Away3D bouwen.
functie initAway3D (): void scene = new Scene3D ();
camera = nieuwe 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, camera: camera); view.x = stage.stageWidth / 2; view.y = Stage.stageHeight / 2; addChild (view);
De eerste regel in onze functie maakt onze 3D-scène. We voegen er vervolgens 3D-objecten aan toe. Voor de camera kiezen we voor HoverCamera3D omdat ik vind dat dit de beste manier is om de camera rond objecten te draaien. Je hoeft echt geen licht te gebruiken voor dit project, maar het maakt de animatie wel iets beter :) Tot slot maken we de weergave en stellen deze in het midden van de scène in.
functie createBarUp (color: Number, x: Number): void var bar: Cube = new Cube (width: 30, height: 50, depth: 30) bar.material = new ShadingColorMaterial (kleur, alpha: 0.5 ) bar.x = x // bar.blendMode = BlendMode.ADD bars_up.push (bar) scene.addChild (bar) functie createBarDown (kleur: Number, x: Number): void var bar: Cube = new 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) scène .addChild (bar)
Zoals u kunt zien, zijn er 2 functies om balken te maken. De eerste is voor hoofdstaven en de tweede is voor gereflecteerde staven. De tweede verlaagt verder de alpha-waarde van de balken.
Eerst maken we een kubus. We kiezen voor ShadingColorMaterial, omdat we lichte en effen kleuren gebruiken. De functies hebben 2 parameters: de eerste dicteert de kleur van de balk en de tweede is de x-positie.
We voegen ook blendMode toe aan de kubussen, alleen maar omdat ze er cool uitzien. Hierna voegen we een kubus toe aan de array en aan de scène.
function createBars (): void createBarUp (0x00CCFF, 0) createBarUp (0xFF3300, -45) createBarUp (0xF9C806, + 45) createBarDown (0x00CCFF, 0) createBarDown (0xFF3300, -45) createBarDown (0xF9C806, + 45)
Hier maken we 3 hoofdstaven en 3 gereflecteerde staven. Zoals u kunt zien, zijn hun kleuren en posities hetzelfde. We zullen hun posities instellen zoals in het onderstaande schema:
function render (e: Event): void view.render (); SoundMixer.compute Spectrum (soundbyte, true); soundforces [0] = 0 geluidsvermogen [1] = 0 geluidsvermogen [2] = 0 voor (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();
Dit is het lastige deel. In de renderfunctie geven we eerst de 3D weer. Vervolgens gebruiken we SoundMixer om geluidswaarden te verkrijgen (compute Spectrum is de methode hiervoor). We vereffenen de eerste 3 elementen van soundforces naar 0, waardoor de geluidswaarden effectief worden gereset. Daarna komt er een for-loop.
lage waarden: songforces [0]
middelste waarden: songforces [1]
hoge waarden: songforces [2]
Nadat we de songwaarden hebben ontvangen, schalen we onze bars. We gebruiken hiervoor 2 functies. De eerste is voor de hoofdbalken en de tweede is voor de reflecties. Deze functies hebben 2 parameters; de eerste is de balk die moet worden geschaald en de tweede is de doelwaarde van de balk.
Vervolgens maken we de positie van ons licht gelijk aan de positie van de camera. Dit maakt ons licht dynamisch en onze animatie effectiever. We gebruiken de ware proportie in wiskunde om de cameraposities te veranderen in relatie tot de muisX en muisY.
functie scaleBarUp (bar: Cube, height: Number): void bar.height + = (height - bar.height) * 0.3 bar.y + = (height * 0.5 - bar.y) * 0.3 function scaleBarDown (bar: Cube, height: Number): void bar.height + = (height - bar.height) * 0.3 bar.y + = (-height * 0.5 - bar.y) * 0.3
We gebruiken een eenvoudige techniek voor animatie, dit diagram toont een voorbeeld:
OK, we schalen onze bars. Maar we moeten ook de y-waarde van hen veranderen. Dit diagram laat zien waarom we ze moeten wijzigen:
In de eerste functie is de y-waarde van de balken positief en in de tweede functie is deze negatief. Hoofdstaven schuiven omhoog, gereflecteerde staven glijden naar beneden.
function startToRender (): void addEventListener (Event.ENTER_FRAME, render);
Accentsconagua
function startToPlay (): void var sound: Sound = new Sound (); sound.load (nieuwe URLRequest ("song.mp3")); sound.play (); initAway3D (); createBars (); startToRender (); startToPlay (); In deze functies starten we met het renderen van de functie en laden we ons "song.mp3" bestand. Dan bellen we al onze functies één voor één. Nu kun je je film testen en de bars zien springen :)
In deze les hebben we geleerd hoe we reflectie in Away3D kunnen gebruiken en hoe we geluidsgegevens kunnen verkrijgen. De sleutel tot dit soort effecten is het nummer: je moet het best mogelijke nummer kiezen om de animatie echt te laten werken. Probeer het met je eigen mp3-tracks :)
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
