Share
In questo tutorial ti guiderò attraverso la costruzione di uno spettro di calcolo 3D. Useremo Away3D per il motore 3D e useremo una canzone di esempio dalla libreria di risorse Envato.
Crea un nuovo file ActionScript3.
Nel pannello Proprietà premi il pulsante Modifica.
Scegli il profilo di Flash Player 9 e fai clic su OK.
Salva il tuo file come "Compute Spectrum.fla" nella cartella Compute Spectrum. Ora dovrai scaricare il motore Away3D da Away3D Downloads. Useremo la versione 2.3.3 per Flash Player 9. Disimballare un archivio e copiare tutte le cartelle nella cartella Spectrum Compute.
L'animazione che prepareremo si muoverà secondo la voce. Quindi dobbiamo scegliere la nostra canzone correttamente. Il pubblico deve davvero sentire; "woow this muove all'interno del suono". Se scarichi il file sorgente, vedrai song.mp3. Copialo nella tua cartella Compute Spectrum. La tua cartella dovrebbe ora apparire così:
OK, siamo pronti per iniziare la codifica. Riempiremo le prime righe importando le nostre classi:
importare away3d.cameras. *; import away3d.containers. *; import away3d.materials. *; import away3d.primitives. * import away3d.lights.DirectionalLight3D
Dopo aver importato le nostre classi, definiamo le nostre variabili da utilizzare durante i prossimi passi.
scena var: Scene3D; var camera: HoverCamera3D; var view: View3D; var light: 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: Number = 150; var i: int; var t: Number;
I primi sono per Away3D. bars_up array tiene le nostre barre principali. bars_down è per le barre riflesse. soundforces e soundbyte sono per lo spettro di calcolo. Finalmente, scaleoffsets sono per le barre di ridimensionamento.
Ora abbiamo bisogno di costruire Away3D.
function initAway3D (): void scene = new Scene3D ();
camera = new 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 (vista);
La prima riga nella nostra funzione crea la nostra scena 3D. Quindi aggiungiamo oggetti 3D al suo interno. Per la fotocamera scegliamo HoverCamera3D perché trovo che sia il modo migliore per ruotare la fotocamera attorno agli oggetti. In realtà non è necessario utilizzare la luce per questo progetto, ma rende l'animazione un po 'migliore :) Infine, creiamo la vista e la posizioniamo nel mezzo della scena.
function createBarUp (color: Number, x: Number): void var bar: Cube = new Cube (width: 30, height: 50, depth: 30) bar.material = new ShadingColorMaterial (color, alpha: 0.5 ) bar.x = x // bar.blendMode = BlendMode.ADD bars_up.push (bar) scene.addChild (bar) function createBarDown (color: 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) scena .addChild (bar)
Come puoi vedere, ci sono 2 funzioni per creare barre. Il primo è per le barre principali e il secondo è per le barre riflesse. Il secondo riduce ulteriormente il valore alfa delle barre.
Per prima cosa creeremo un cubo. Scegliamo ShadingColorMaterial, perché utilizziamo colori chiari e solidi. Le funzioni hanno 2 parametri: il primo determina il colore della barra e il secondo la sua posizione x.
Aggiungiamo anche blendMode ai cubi, solo perché li fa sembrare belli. Dopo questi, aggiungiamo un cubo al suo array e alla scena.
function createBars (): void createBarUp (0x00CCFF, 0) createBarUp (0xFF3300, -45) createBarUp (0xF9C806, + 45) createBarDown (0x00CCFF, 0) createBarDown (0xFF3300, -45) createBarDown (0xF9C806, + 45)
Qui creiamo 3 barre principali e 3 barre riflesse. Come puoi vedere, i loro colori e le loro posizioni sono gli stessi. Stabiliremo le loro posizioni come nello schema seguente:
function render (e: Event): void view.render (); SoundMixer.computeSpectrum (soundbyte, true); soundforces [0] = 0 soundforces [1] = 0 soundforces [2] = 0 per (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();
Questa è la parte difficile. Nella funzione di rendering per prima cosa rendiamo il 3D. Quindi usiamo SoundMixer per ottenere valori sonori (computeSpectrum è il metodo per questo). Equalizziamo i primi 3 elementi della soundforces su 0, ripristinando efficacemente i valori del suono. Dopo, arriva un ciclo for.
valori bassi: songforces [0]
valori medi: songforces [1]
valori alti: songforces [2]
Dopo aver ottenuto i valori della canzone, scaliamo le nostre barre. Usiamo 2 funzioni per questo. Il primo è per le barre principali e il secondo è per le riflessioni. Queste funzioni hanno 2 parametri; il primo è la barra da ridimensionare e il secondo è il valore di altezza target della barra.
Quindi equalizziamo la posizione della nostra luce alla posizione della telecamera. Questo rende la nostra luce dinamica e la nostra animazione più efficace. Usiamo la vera proporzione in matematica per cambiare le posizioni della telecamera in relazione al mouseX e al mouseY.
function scaleBarUp (bar: Cube, height: Number): void bar.height + = (height - bar.height) * 0.3 bar.y + = (altezza * 0.5 - bar.y) * 0.3 function scaleBarDown (bar: Cubo, altezza: numero): void bar.height + = (height - bar.height) * 0.3 bar.y + = (-height * 0.5 - bar.y) * 0.3
Usiamo una tecnica semplice per l'animazione, questo diagramma mostra un esempio:
OK, scaliamo le nostre barre. Ma dobbiamo anche cambiare il valore y di loro. Questo diagramma mostra perché dobbiamo cambiarli:
Nella prima funzione, il valore y delle barre è positivo e nella seconda funzione è negativo. Le barre principali scorrono verso l'alto, le barre riflesse scivolano verso il basso.
function startToRender (): void addEventListener (Event.ENTER_FRAME, render);
Accentsconagua
function startToPlay (): void var sound: Sound = new Sound (); sound.load (new URLRequest ("song.mp3")); sound.play (); initAway3D (); createBars (); startToRender (); startToPlay (); In queste funzioni iniziamo a eseguire la funzione di rendering e cariciamo il nostro file "song.mp3". Quindi chiamiamo tutte le nostre funzioni una ad una. Ora puoi testare il tuo film e guardare le barre saltare :)
In questa lezione abbiamo imparato come utilizzare reflection in Away3D e come ottenere dati audio. La chiave di questi tipi di effetti è la canzone: devi scegliere la canzone migliore per far funzionare davvero l'animazione. Provalo con le tue tracce mp3 :)
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
