Beethoven compuso en 1811 esta marcha como música incidental para la obra teatral "Las Ruinas de Atenas", de August von Kotzebue. Este musicograma en flash da animación a uno propuesto por la profesora Batia Strauss en un curso de audición activa hace ya varios años.
Los niños siguen el musicograma con onomatopeyas (chassss! en los signos verticales, brrrrr en los ondulados y clac-clac-clac en los punteados) . En una segunda audición sobreinstrumentando con instrumentos de pequeña percusión (triángulos y crótalos, sonajas y cascabeles y cajas chinas y claves, respectivamente).
Pincha aquí para pantalla completa
Archivo de la etiqueta: recursos PDI
En este minitutorial voy a intentar explicar la forma de hacer musicogramas con Flash. Si bien este no es un programa de software libre, es hoy por hoy uno de los más potentes para realizar actividades interactivas, y corre aceptablemente bien bajo Wine.
Le dedico este tutorial especialmente a Nani, activa maestra de música en Galicia a la que se lo prometí hace meses. Más vale tarde que nunca.
El resultado que se trata de conseguir es algo así:
Pincha aquí para pantalla completa
Generalmente los alumnos siguen los musicogramas sobre el papel señalando rítmicamente sobre los dibujos de corazones o los simbolos que representan el pulso musical. Así que esta actividad ejemplifica lo que han de hacer, y pueden además intentar seguirla en la PDI. Una variante, que podemos ver más adelante, es hacerla aún más interactiva, de forma que si el alumno no la sigue 'a tempo', ésta pueda pararse y dar un mensaje de error, o bien de felicitación en caso contrario.
Se trata de un musicograma muy simple, pero la dinámica es válida para cualquiera otra que queramos realizar, cambiando solamente los elementos gráficos y decorativos, o aumentando el número de acciones (letra que aparezca tipo karaoke, etc)
Esquema general
En esencia, lo que queremos conseguir es reproducir una canción y que, en determinados instantes de esta reproducción, aparezcan elementos gráficos en la escena. Por tanto, tendremos que introducir en la escena un archivo de sonido con sus correspondientes botones de reproducción, y definir unas funciones que se ejecuten cuando el archivo de sonido pase por determinados tiempos.
Paso 1 Preparando elementos de la escena.
Como se puede ver, ésta consta simplemente del título, la letra de la canción y 16 dibujos de corazones que representan el pulso musical y que deben ir apareciendo a tiempo conforme la música va sonando. Estos son instancias de un símbolo y les hemos puesto nombres de instancia c1, c2....c16
4) 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. Aquí se han utilizado los disponibles en la carpeta 'Playback'
Por último daremos a los botones los nombres de instancia btn_play, btn_pause y btn_stop respectivamente.
5) Código de acciones de los botones play, pause y stop
Volvemos a la capa acciones y escribimos el código siguiente
//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);
Le dedico este tutorial especialmente a Nani, activa maestra de música en Galicia a la que se lo prometí hace meses. Más vale tarde que nunca.
El resultado que se trata de conseguir es algo así:
Pincha aquí para pantalla completa
Generalmente los alumnos siguen los musicogramas sobre el papel señalando rítmicamente sobre los dibujos de corazones o los simbolos que representan el pulso musical. Así que esta actividad ejemplifica lo que han de hacer, y pueden además intentar seguirla en la PDI. Una variante, que podemos ver más adelante, es hacerla aún más interactiva, de forma que si el alumno no la sigue 'a tempo', ésta pueda pararse y dar un mensaje de error, o bien de felicitación en caso contrario.
Se trata de un musicograma muy simple, pero la dinámica es válida para cualquiera otra que queramos realizar, cambiando solamente los elementos gráficos y decorativos, o aumentando el número de acciones (letra que aparezca tipo karaoke, etc)
Esquema general
En esencia, lo que queremos conseguir es reproducir una canción y que, en determinados instantes de esta reproducción, aparezcan elementos gráficos en la escena. Por tanto, tendremos que introducir en la escena un archivo de sonido con sus correspondientes botones de reproducción, y definir unas funciones que se ejecuten cuando el archivo de sonido pase por determinados tiempos.
Paso 1 Preparando elementos de la escena.
Como se puede ver, ésta consta simplemente del título, la letra de la canción y 16 dibujos de corazones que representan el pulso musical y que deben ir apareciendo a tiempo conforme la música va sonando. Estos son instancias de un símbolo y les hemos puesto nombres de instancia c1, c2....c16
Paso 2 Vinculando la música y diseñando el reproductor
Este paso ya está explicado aquí. Los pasos, rápidamente, son los siguientes:
1) Importamos el sonido wav de la canción a la biblioteca
2) Sobre el sonido importado en la biblioteca, con el botón derecho del ratón seleccionamos 'vinculación' y rellenamos las opciones de vinculación.
3) Añadimos una capa, la llamamos 'acciones' y escribimos el código siguiente
//VINCULANDO WAVAhora tenemos un objeto de sonido, 'sonidoCancion' que podemos manejar con ActionScript
musica1 = "XimoBoticari.wav"; //asignamos una variable al wav vinculado
sonidoCancion = new Sound(); //creamos un objeto de sonido
sonidoCancion.attachSound(musica1);// relacionamos ese objeto con la variable del wav
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. Aquí se han 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.
5) Código de acciones de los botones play, pause y stop
Volvemos a la capa acciones y escribimos el código siguiente
//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 soltar el boton del 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);
// La canción está sonando así que hacemos que el botón play se vuelva invisible y el pause visible.
this._visible = 0;
btn_pause._visible = 1;
};
//++++++++++++++++++++++++++++
//ACCIONES DEL BOTON PAUSE al soltar el boton del ratón
btn_pause.onRelease =function(){
//almacena 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 BOTON '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;
};
Paso 3 Determinando los tiempos relevantes de la canción
Esta es la fase más engorrosa de todo el proceso, ya que hay que hacer una lista con los tiempos en milisegundos en que se producen los eventos que nos interesan.
Abrimos el archivo de sonido con Audacity
Una manera rápida de proceder es averiguar el tiempo en que se inicia el primer compás de la melodía y el tiempo correspondiente al inicio del noveno compás. Si la música está interpretada con un tempo exacto, dividiendo por 16 (ya que estamos en un compás de 2/4) tendremos la duración de cada pulso. De ahí podemos sacar las cifras qe nos interesan.
Por ejemplo, en este caso, la melodia se inicia en t1= 5.960 milisegundos (ms). y el compás noveno se inicia en t17= 17.240 ms. Por tanto la duración de cada pulso será 705 ms.
Podemos hacer más rápido el proceso utilizando una tabla de hoja de cálculo. Así, obtendremos los tiempos en que los dibujos deben aparecer, de acuerdo con el pulso de la canción:
Con esos datos vamos a pegar, en la capa 'acciones', un array que contendrá los tiempos en que se inicia cada pulsación y debe aparecer cada simbolo:
Pegamos en la capa 'acciones':
//Array que contiene los tiempos de cada pulso musical de la melodía
tiempoCancion = new Array(0, 5960, 6665, 7370, 8075, 8780, 9485, 10190, 10895, 11600, 12305, 13010, 13715, 14420, 15125, 15830, 16535, 17240);
Paso 4 El momento del código
El código con el que vamos a conseguir que la reproducción active los símbolos es el siguiente:
Empezamos haciendo todos los corazones invisibles: Introducimos este código en la capa 'acciones'
//++++++++++++++++++++++++++++++
corazones = new Array(0, "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10", "c11", "c12", "c13", "c14", "c15", "c16", "c17");
for (a = 0; a < 20; a++)
{
_root[corazones[a]]._visible = 0;
}
//+++++++++++++++++++++++++++++++
Ahora vamos a definir una función, 'mostrarPulsación', que irá haciendo visibles los corazones cuando la canción pase por los tiempos definidos en el array 'tiempoCanción'
//++++++++++++++++++++++++++++++++
function mostrarPulsacion()
{
if ((sonidoCancion.position > tiempoCancion[n]) && (sonidoCancion.position < tiempoCancion[n + 1]))
{
_root[corazones[n]]._visible = 1;
}
//cuando la canción rebasa l
if ((sonidoCancion.position > tiempoCancion[n + 1]) && (sonidoCancion.position < tiempoCancion[n + 2]))
{
n++;
}
}
//++++++++++++++++++++++++++++++++++
Veamos el código con detenimiento:
sonidoCancion.position devuelve el tiempo en milisegundos conforme la canción se va reproduciendo. La primera condición if detecta si la canción se encuentra entre los valores n y n+1. En ese caso hace visible el corazón 'n' .
La segunda condición if aumenta el valor de 'n', con lo que el proceso vuelve a repetirse nuevamente, y así sucesivamente.
Solo falta ahora introducir, en el boton 'play', dos cosas. Una es que se ejecute esta función, mostrarPulsacion.
La otra es introducir una funcion setInterval, que llamaremos 'refresco' para que se compruebe continuamente el paso del tiempo. Así, el boton 'play' quedará así:
//++++++++++++++++++++++++++++++++++++++++++
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);
mostrarPulsacion();
refresco = setInterval(mostrarPulsacion, 20);
// La canción está sonando así que hacemos que el botón play se vuelva invisible y el pause visible.
this._visible = 0;
btn_pause._visible = 1;
};
//+++++++++++++++++++++++++++++++++++++++++
En este minitutorial voy a intentar explicar la forma de hacer musicogramas con Flash. Si bien este no es un programa de software libre, es hoy por hoy uno de los más potentes para realizar actividades interactivas, y corre aceptablemente bien bajo Wine.
Le dedico este tutorial especialmente a Nani, activa maestra de música en Galicia a la que se lo prometí hace meses. Más vale tarde que nunca.
El resultado que se trata de conseguir es algo así:
Pincha aquí para pantalla completa
Generalmente los alumnos siguen los musicogramas sobre el papel señalando rítmicamente sobre los dibujos de corazones o los simbolos que representan el pulso musical. Así que esta actividad ejemplifica lo que han de hacer, y pueden además intentar seguirla en la PDI. Una variante, que podemos ver más adelante, es hacerla aún más interactiva, de forma que si el alumno no la sigue 'a tempo', ésta pueda pararse y dar un mensaje de error, o bien de felicitación en caso contrario.
Se trata de un musicograma muy simple, pero la dinámica es válida para cualquiera otra que queramos realizar, cambiando solamente los elementos gráficos y decorativos, o aumentando el número de acciones (letra que aparezca tipo karaoke, etc)
Esquema general
En esencia, lo que queremos conseguir es reproducir una canción y que, en determinados instantes de esta reproducción, aparezcan elementos gráficos en la escena. Por tanto, tendremos que introducir en la escena un archivo de sonido con sus correspondientes botones de reproducción, y definir unas funciones que se ejecuten cuando el archivo de sonido pase por determinados tiempos.
Paso 1 Preparando elementos de la escena.
Como se puede ver, ésta consta simplemente del título, la letra de la canción y 16 dibujos de corazones que representan el pulso musical y que deben ir apareciendo a tiempo conforme la música va sonando. Estos son instancias de un símbolo y les hemos puesto nombres de instancia c1, c2....c16
4) 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. Aquí se han utilizado los disponibles en la carpeta 'Playback'
Por último daremos a los botones los nombres de instancia btn_play, btn_pause y btn_stop respectivamente.
5) Código de acciones de los botones play, pause y stop
Volvemos a la capa acciones y escribimos el código siguiente
//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);
Le dedico este tutorial especialmente a Nani, activa maestra de música en Galicia a la que se lo prometí hace meses. Más vale tarde que nunca.
El resultado que se trata de conseguir es algo así:
Pincha aquí para pantalla completa
Generalmente los alumnos siguen los musicogramas sobre el papel señalando rítmicamente sobre los dibujos de corazones o los simbolos que representan el pulso musical. Así que esta actividad ejemplifica lo que han de hacer, y pueden además intentar seguirla en la PDI. Una variante, que podemos ver más adelante, es hacerla aún más interactiva, de forma que si el alumno no la sigue 'a tempo', ésta pueda pararse y dar un mensaje de error, o bien de felicitación en caso contrario.
Se trata de un musicograma muy simple, pero la dinámica es válida para cualquiera otra que queramos realizar, cambiando solamente los elementos gráficos y decorativos, o aumentando el número de acciones (letra que aparezca tipo karaoke, etc)
Esquema general
En esencia, lo que queremos conseguir es reproducir una canción y que, en determinados instantes de esta reproducción, aparezcan elementos gráficos en la escena. Por tanto, tendremos que introducir en la escena un archivo de sonido con sus correspondientes botones de reproducción, y definir unas funciones que se ejecuten cuando el archivo de sonido pase por determinados tiempos.
Paso 1 Preparando elementos de la escena.
Como se puede ver, ésta consta simplemente del título, la letra de la canción y 16 dibujos de corazones que representan el pulso musical y que deben ir apareciendo a tiempo conforme la música va sonando. Estos son instancias de un símbolo y les hemos puesto nombres de instancia c1, c2....c16
Paso 2 Vinculando la música y diseñando el reproductor
Este paso ya está explicado aquí. Los pasos, rápidamente, son los siguientes:
1) Importamos el sonido wav de la canción a la biblioteca
2) Sobre el sonido importado en la biblioteca, con el botón derecho del ratón seleccionamos 'vinculación' y rellenamos las opciones de vinculación.
3) Añadimos una capa, la llamamos 'acciones' y escribimos el código siguiente
//VINCULANDO WAVAhora tenemos un objeto de sonido, 'sonidoCancion' que podemos manejar con ActionScript
musica1 = "XimoBoticari.wav"; //asignamos una variable al wav vinculado
sonidoCancion = new Sound(); //creamos un objeto de sonido
sonidoCancion.attachSound(musica1);// relacionamos ese objeto con la variable del wav
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. Aquí se han 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.
5) Código de acciones de los botones play, pause y stop
Volvemos a la capa acciones y escribimos el código siguiente
//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 soltar el boton del 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);
// La canción está sonando así que hacemos que el botón play se vuelva invisible y el pause visible.
this._visible = 0;
btn_pause._visible = 1;
};
//++++++++++++++++++++++++++++
//ACCIONES DEL BOTON PAUSE al soltar el boton del ratón
btn_pause.onRelease =function(){
//almacena 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 BOTON '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;
};
Paso 3 Determinando los tiempos relevantes de la canción
Esta es la fase más engorrosa de todo el proceso, ya que hay que hacer una lista con los tiempos en milisegundos en que se producen los eventos que nos interesan.
Abrimos el archivo de sonido con Audacity
Una manera rápida de proceder es averiguar el tiempo en que se inicia el primer compás de la melodía y el tiempo correspondiente al inicio del noveno compás. Si la música está interpretada con un tempo exacto, dividiendo por 16 (ya que estamos en un compás de 2/4) tendremos la duración de cada pulso. De ahí podemos sacar las cifras qe nos interesan.
Por ejemplo, en este caso, la melodia se inicia en t1= 5.960 milisegundos (ms). y el compás noveno se inicia en t17= 17.240 ms. Por tanto la duración de cada pulso será 705 ms.
Podemos hacer más rápido el proceso utilizando una tabla de hoja de cálculo. Así, obtendremos los tiempos en que los dibujos deben aparecer, de acuerdo con el pulso de la canción:
Con esos datos vamos a pegar, en la capa 'acciones', un array que contendrá los tiempos en que se inicia cada pulsación y debe aparecer cada simbolo:
Pegamos en la capa 'acciones':
//Array que contiene los tiempos de cada pulso musical de la melodía
tiempoCancion = new Array(0, 5960, 6665, 7370, 8075, 8780, 9485, 10190, 10895, 11600, 12305, 13010, 13715, 14420, 15125, 15830, 16535, 17240);
Paso 4 El momento del código
El código con el que vamos a conseguir que la reproducción active los símbolos es el siguiente:
Empezamos haciendo todos los corazones invisibles: Introducimos este código en la capa 'acciones'
//++++++++++++++++++++++++++++++
corazones = new Array(0, "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10", "c11", "c12", "c13", "c14", "c15", "c16", "c17");
for (a = 0; a < 20; a++)
{
_root[corazones[a]]._visible = 0;
}
//+++++++++++++++++++++++++++++++
Ahora vamos a definir una función, 'mostrarPulsación', que irá haciendo visibles los corazones cuando la canción pase por los tiempos definidos en el array 'tiempoCanción'
//++++++++++++++++++++++++++++++++
function mostrarPulsacion()
{
if ((sonidoCancion.position > tiempoCancion[n]) && (sonidoCancion.position < tiempoCancion[n + 1]))
{
_root[corazones[n]]._visible = 1;
}
//cuando la canción rebasa l
if ((sonidoCancion.position > tiempoCancion[n + 1]) && (sonidoCancion.position < tiempoCancion[n + 2]))
{
n++;
}
}
//++++++++++++++++++++++++++++++++++
Veamos el código con detenimiento:
sonidoCancion.position devuelve el tiempo en milisegundos conforme la canción se va reproduciendo. La primera condición if detecta si la canción se encuentra entre los valores n y n+1. En ese caso hace visible el corazón 'n' .
La segunda condición if aumenta el valor de 'n', con lo que el proceso vuelve a repetirse nuevamente, y así sucesivamente.
Solo falta ahora introducir, en el boton 'play', dos cosas. Una es que se ejecute esta función, mostrarPulsacion.
La otra es introducir una funcion setInterval, que llamaremos 'refresco' para que se compruebe continuamente el paso del tiempo. Así, el boton 'play' quedará así:
//++++++++++++++++++++++++++++++++++++++++++
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);
mostrarPulsacion();
refresco = setInterval(mostrarPulsacion, 20);
// La canción está sonando así que hacemos que el botón play se vuelva invisible y el pause visible.
this._visible = 0;
btn_pause._visible = 1;
};
//+++++++++++++++++++++++++++++++++++++++++
Continuando con el post anterior, vamos ahora a insertar en la partitura dinámica la música de acompañamiento junto con un reproductor. El resultado es este:
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 este archivo.
Para utilizar el archivo en las operaciones de programación en 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:
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 este archivo.
Para utilizar el archivo en las operaciones de programación en 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ónmusicaAliki = "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. El botón 'stop' quedará a la izquierda de ambos. En la siguiente imagen, el botón 'pause' se ve ya que queda oculto por el 'play'.
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, introducimos 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 soltar el boton del ratónbtn_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 soltar el boton del ratónbtn_pause.onRelease = function(){ //almacena 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. 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.
Continuando con el post anterior, vamos ahora a insertar en la partitura dinámica la música de acompañamiento junto con un reproductor. El resultado es este:
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 este archivo.
Para utilizar el archivo en las operaciones de programación en 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:
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 este archivo.
Para utilizar el archivo en las operaciones de programación en 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ónmusicaAliki = "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. El botón 'stop' quedará a la izquierda de ambos. En la siguiente imagen, el botón 'pause' se ve ya que queda oculto por el 'play'.
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, introducimos 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 soltar el boton del ratónbtn_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 soltar el boton del ratónbtn_pause.onRelease = function(){ //almacena 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. 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.