Share
En este tutorial te guiaré a través de la construcción de un espectro de cómputo 3D. Usaremos Away3D para el motor 3D y utilizaremos una canción de muestra de la biblioteca de activos de Envato..
Crear nuevo archivo ActionScript3.
En el panel Propiedades presione el botón Editar..
Elija el perfil de Flash Player 9 y haga clic en Aceptar.
Guarde su archivo como "Compute Spectrum.fla" en la carpeta Compute Spectrum. Ahora deberá descargar el motor de Away3D desde las descargas de Away3D. Usaremos la versión 2.3.3 para Flash Player 9. Desempaquete un archivo y copie todas las carpetas en la carpeta Compute Spectrum.
La animación la prepararemos de acuerdo a la voz. Así que tenemos que elegir nuestra canción correctamente. El público realmente debe sentir; "woow esto se mueve dentro del sonido". Si descarga el archivo fuente, verá song.mp3. Cópialo en tu carpeta de Compute Spectrum. Tu carpeta ahora debería verse así:
OK, estamos listos para empezar a programar. Rellenaremos las primeras líneas importando nuestras clases:
importar away3d.cameras. *; importar away3d.containers. *; importar away3d.materials. *; importar away3d.primitives. * importar away3d.lights.DirectionalLight3D
Después de importar nuestras clases, definimos nuestras variables para usar durante los próximos pasos.
var escena: Scene3D; cámara var: HoverCamera3D; vista de var: 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: Número;
Los primeros son para Away3D.. bars_up matriz mantiene nuestros principales barras. bars_down es para las barras reflejadas. fuerzas de sonido y soundbyte Son para el espectro de cómputo. Finalmente, compensaciones son para barras de escala.
Ahora necesitamos construir 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 (ver);
La primera línea en nuestra función crea nuestra escena 3D. Luego le agregamos objetos 3D. Para la cámara elegimos HoverCamera3D ya que me parece que es la mejor manera de hacer que la cámara gire alrededor de los objetos. En realidad, no necesita usar la luz para este proyecto, pero hace que la animación sea un poco mejor :) Finalmente, creamos la Vista y la colocamos en el centro de la escena..
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) función createBarDown (color: Number, x: Number): void var bar: Cube = new Cube ( ancho: 30, altura: 50, profundidad: 30) bar.material = nuevo ShadingColorMaterial (color, alpha: 0.1) bar.x = x // bar.blendMode = BlendMode.ADD bars_down.push (bar) escena .addChild (barra)
Como puedes ver, hay 2 funciones para crear barras. El primero es para barras principales y el segundo para barras reflejadas. El segundo reduce aún más el valor alfa de las barras..
Primero vamos a crear un cubo. Elegimos ShadingColorMaterial, porque usamos colores claros y sólidos. Las funciones tienen 2 parámetros: el primero determina el color de la barra y el segundo es su posición x.
También agregaremos blendMode a los cubos, solo porque los hace lucir geniales. Después de estos agregamos un cubo a su matriz y a la escena..
function createBars (): void createBarUp (0x00CCFF, 0) createBarUp (0xFF3300, -45) createBarUp (0xF9C806, + 45) createBarDown (0x00CCFF, 0) createBarDown (0xFF3300, -45) createBarDown
Aquí creamos 3 barras principales y 3 barras reflejadas. Como puedes ver, sus colores y posiciones son los mismos. Vamos a establecer sus posiciones como en el siguiente diagrama:
función render (e: Evento): void view.render (); SoundMixer.computeSpectrum (soundbyte, true); soundforces [0] = 0 soundforces [1] = 0 soundforces [2] = 0 para (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();
Esta es la parte difícil. En la función de renderizar primero renderizamos el 3D. Luego usamos SoundMixer para obtener valores de sonido (computeSpectrum es el método para esto). Igualamos los primeros 3 elementos de las fuerzas de sonido a 0, restableciendo efectivamente los valores de sonido. Después de eso, viene un bucle for..
valores bajos: songforces [0]
valores medios: songforces [1]
valores altos: songforces [2]
Después de que obtengamos los valores de la canción escalamos nuestros compases. Usamos 2 funciones para esto. El primero es para las barras principales y el segundo para las reflexiones. Estas funciones tienen 2 parámetros; el primero es la barra a escalar y el segundo es el valor de altura objetivo de la barra.
Luego igualamos la posición de nuestra luz a la posición de la cámara. Esto hace que nuestra luz dinámica y nuestra animación sean más efectivas. Usamos la proporción real en matemáticas para cambiar las posiciones de la cámara en relación con el mouseX y mouseY.
function scaleBarUp (barra: cubo, altura: número): void bar.height + = (altura - bar.height) * 0,3 bar.y + = (altura * 0,5 - bar.y) * 0,3 función scaleBarDown (barra: Cubo, altura: Número): void bar.height + = (altura - bar.height) * 0.3 bar.y + = (-height * 0.5 - bar.y) * 0.3
Usamos una técnica simple para la animación, este diagrama muestra un ejemplo:
OK, escalamos nuestros bares. Pero también necesitamos cambiar el valor y de ellos. Este diagrama muestra por qué necesitamos cambiarlos:
En la primera función, el valor y de las barras es positivo y en la segunda función es negativo. Las barras principales se deslizan hacia arriba, las barras reflejadas se deslizan hacia abajo.
function startToRender (): void addEventListener (Event.ENTER_FRAME, render);
Accentsconagua
function startToPlay (): void var sound: Sound = new Sound (); sound.load (nueva URLRequest ("song.mp3")); sound.play (); initAway3D (); createBars (); startToRender (); startToPlay (); En estas funciones, comenzamos a ejecutar la función de renderizado y cargamos nuestro archivo "song.mp3". Entonces llamamos a todas nuestras funciones una por una. Ahora puedes probar tu película y ver saltar las barras :)
En esta lección aprendimos cómo usar la reflexión en Away3D y cómo obtener datos de sonido. La clave de estos tipos de efectos es la canción: debe elegir la mejor canción posible para que la animación realmente funcione. Pruébalo con tus propias pistas de mp3 :)
Espero que te haya gustado este tutorial, gracias por leerlo.!
