Partituras dinámicas con Flash (2)

[Octavi Soler]

Continuando con el post anterior, vamos ahora a insertar en la partitura dinámica la música de acompañamiento junto con un reproductor y algún otro detalle. El resultado es algo parecido a esto:

Paso 1: Importar y vincular el archivo wav

 
Esta operación la realizaremos desde  el menú 'Archivo/Importar/Importar a biblioteca'. En este caso se trata del archivo 'aliki.wav'. En la biblioteca aparecerá ahora referenciado este archivo.
Para utilizar el archivo en las operaciones de programación con ActionScript, debemos definir las opciones de vinculación. Para ello, vamos a la biblioteca (recordemos que podemos mostrarla y ocultarla con Ctrl+l) y haciendo clic con el botón derecho sobre el archivo de sonido, seleccionamos 'vinculación' y completamos el cuadro de la siguiente forma:

Ahora regresemos a la capa 'acciones' , y escribimos en el 1r fotograma de la capa, después del código que insertamos en el post anterior, las siguientes líneas

//Vinculando al wav de la canción

musicaAliki = "aliki.wav";

sonidoCancion = new Sound();

sonidoCancion.attachSound(musicaAliki);

El resultado de estas tres lineas es que tenemos ahora disponible un objeto sonido, (sonidoCancion), que podemos utilizar en la programación con ActionScript.

Paso 2 Botones Play/Pause y Stop

Vamos a crear ahora tres nuevas capas, que llamaremos 'play', 'pause' y 'stop'. En cada una de ellas vamos a arrastrar desde Ventana/Biblioteca/Bibliotecas comunes los botones prefabricados que nos proporciona  el propio programa. Yo he utilizado los disponibles en la carpeta 'Playback'

Como el botón 'play' debe alternarse con el 'pause', colocaremos ambos superpuestos (pero en capas distintas). El botón 'stop' quedará a la izquierda de ambos. En la siguiente imagen, el botón 'pause' no se ve ya que queda oculto por el 'play', situado en una capa superior.

Por último daremos a los botones los nombres de instancia btn_play, btn_pause y btn_stop respectivamente.

Paso 3: Código de los botones

Lo que han de hacer los botones es bastante convencional: Todas las acciones deben además desencadenarse en el evento 'onRelease' que corresponde no al momento de presionar el botón del ratón (onPress), sino al de soltarlo una vez presionado.

Ahora, en el fotograma de la capa acciones, añadimos el código siguiente, que incluye las líneas correspondientes de comentarios:

//Definimos una variable que almacenará el punto de la canción (en milisegundos)en que nos encontramos. 

//Su valor inicial será 0 (inicio de la canción);

var pausa:Number = 0;

//Acciones del boton 'play' al accionar el boton co el ratón.

btn_play.onRelease = function()

{

//la canción comienza a sonar desde el principio la primera vez o desde el segundo en que se ha hecho pause, 

sonidoCancion.start(pausa / 1000);

// el botón 'play' se vuelve invisible y el 'pause' visible.

this._visible = 0;

btn_pause._visible = 1;

};

//Acciones del boton 'pause' al accionar el boton con el ratón

btn_pause.onRelease = function()

{

//almacena en la variable 'pausa' la posición de la canción en el momento de hacer pause

pausa = sonidoCancion.position;

//detiene la reproducción

sonidoCancion.stop();

//A la inversa que con play. El botón pause se hace invisible y el play visible

this._visible = 0;

btn_play._visible = 1;

};

//Acciones del botón 'stop'

btn_stop.onRelease = function()

{

//detiene la reproducción

sonidoCancion.stop();

//pone la variable 'pausa' a 0;

pausa = 0;

//hace visible el boton play e invisible el pause

btn_play._visible = 1;

btn_pause._visible = 0;

};

Como último detalle, hemos colocado una imagen de fondo, en su capa correspondiente. Gracias a que la partitura está en formato vectorial con fondo transparente (ver post anterior) , podemos verla sobreimpresa a la imagen 

En una próxima entrada, haremos que de forma opcional, el visor se desplace siguiendo las notas del pentagrama. 

[F Jesús G V]

Saludos de Florencio (recuerdas Albalat?)

Veo que estás muy puesto en estos menesteres.

Intentaré ponerme al día.

Enhorabuena, la innovación es muy necesaria para no estancarse.

[roger]

Me parece una idea y un trabajo estupendo Octavi. Gracias por tu aportación a esta red.

[Emilia Alcaraz Delgado]

Excelente tutorial, Octavi.

 

Como siempre. Espero sacarle todo el jugo.

 

Gracias por compartir.

 

Emilia