Añadir sonido a botones y a la

línea de tiempo
Paso 1 de 14
En este tutorial vamos a aprender a añadir un sonido de fondo a nuestra película. También
añadiremos sonido a nuestros botones.
Crearemos nuevos botones para activar y desactivar el sonido general de la película. Estos
nuevos botones los crearemos duplicando los botones que ya teníamos en nuestra biblioteca.
En primer lugar vamos a abrir el archivo tutorial7.fla que creamos en el tutorial anterior, y lo
guardamos como tutorial8.fla.
Los sonidos que vamos a utilizar se encuentran en el archivo recursosTutorial8.zip. Para
importarlos seleccionamos Archivo > Importar > Importar a biblioteca, y seleccionamos los
archivos backgroundMusic.mp3 y Mouse.mp3.
Los sonidos pasarán automáticamente a formar parte de nuestra biblioteca.
Vamos a organizar el contenido de la biblioteca en carpetas.
Para crear una carpeta pulsaremos sobre el icono inferior Nueva carpeta.
Crearemos cuatro carpetas, una para gráficos, otra para clips, otra para botones y otra para
sonidos.
Seleccionamos los distintos objetos que queremos incluir en cada una de las carpetas haciendo
clic sobre ellos con la tecla Ctrl pulsada para hacer una selección múltiple.

Después arrastraremos los objetos seleccionados sobre la carpeta

en la que queremos incluirlos. El mapa de bits de la luna lo
incluiremos también en la carpeta de gráficos.

Ahora vamos a acceder a la línea de tiempo de los botones para

añadir el sonido del clic del ratón.
Para acceder a estas líneas de tiempo tenemos varios caminos
posibles, como por ejemplo buscar el símbolo correspondiente en la
biblioteca y hacer doble clic sobre su nombre.
Otra forma de acceder a cada botón es seleccionando su nombre
desde el icono Editar símbolos de la barra de edición. Aquí
aparecerá la misma estructura de carpetas que tengamos en la
biblioteca.
Accedemos a la línea de tiempo del botón gel Pause ' utilizando cualquiera de las formas antes
descritas.
Hacemos zoom sobre el escenario para ver con más detalle el aspecto del botón.
Las líneas de tiempo de los botones tienen cuatro fotogramas que representan diferentes estados
de un botón:
• Reposo. Aspecto inicial del botón. Representa el momento en que el puntero no está sobre
el botón.
• Sobre. Aspecto del botón cuando situamos el puntero sobre él.
• Presionado. Aspecto del botón cuando hacemos clic sobre él.
• Zona activa. Define el área que responde al clic del ratón. Esta zona no será visible para el
usuario final. Permite crear áreas de clic con diferente forma o tamaño que el propio aspecto
del botón. También permite que zonas aparentemente vacías puedan ser clicables.

Los botones, al igual que otras líneas de tiempo, p'ueden tener el número de capas que
queramos.
Los aspectos del botón pueden variar de un fotograma a otro o permanecer sin cambios. Aquí
podemos ver que entre el fotograma Reposo y el fotograma Sobre sólo hay cambios en la capa
superior, donde un punto negro indica que hay un fotograma clave, mientras que en el estado
Presionado hay diferencias en dos de las capas.

Vamos a añadir un pequeño sonido de clic en el momento de presionar el botón.

En primer lugar, añadimos una nueva capa a la que llamaremos sound.
Como queremos que el sonido se escuche en el momento de hacer clic sobre el botón,
insertaremos un fotograma clave para el estado Presionado. Para ello, hacemos clic con el
botón derecho del ratón en el fotograma Presionado de la capa sound, y seleccionamos Insertar
fotograma clave en el menú contextual.

Con ese fotograma seleccionado, vamos al área Sonido del inspector de Propiedades.
Seleccionamos en el desplegable Nombre el archivo Mouse.mp3 que ya tenemos en nuestra
biblioteca.
En Sinc (sincronización) elegimos Evento, que significa que el sonido se reproducirá
completamente cuando la cabeza lectora alcance el fotograma en el que se encuentra el sonido
(cuando presionemos el botón en este caso). Explicaremos más adelante las diferentes
opciones de sincronización.
 La capa sound mostrará, comenzando en el fotograma Presionado, una pequeña línea azul
que representa la onda del sonido seleccionado para ese fotograma.
Podemos observar que el sonido se extiende al fotograma de la Zona activa. En este caso,
esto no tendrá repercusión sobre el sonido, pero para mayor claridad insertaremos un
fotograma clave vacío en el fotograma de la Zona activa de la capa sound.
Para ello, seleccionamos el fotograma con el botón derecho del ratón, y seleccionamos
Insertar fotograma clave en blanco.

Repetimos el mismo proceso para añadir sonido al estado Presionado del botón gel Right y
probamos la película (Control > Probar película). Ahora se escuchará un pequeño clic cuando
pulsemos sobre cualquiera de los botones.
Ahora añadiremos un sonido de fondo a nuestra película.
Volvemos a la línea de tiempo principal de la película, y añadimos una nueva capa para el
sonido. Llamamos a esta capa music.

Seleccionando el primer fotograma de esta nueva capa, le asignamos el sonido

backgroundMusic.mp3 en el área de Sonido del inspector de Propiedades.
Veremos cómo la línea azul de la onda del sonido se extiende por los 600 fotogramas de
nuestra película.

• Evento. El sonido comenzará cuando la cabeza lectora alcance el fotograma que contiene el
inicio del sonido. Una vez haya comenzado, el sonido se reproducirá en su totalidad,
independientemente de la cabeza lectora. Por tanto, es suficiente que el sonido se
encuentre . ' en un solo fotograma para que se reproduzca en toda su extensión. Si la
cabeza lectora lee de nuevo el fotograma que contiene el sonido antes de que éste haya
terminado, comenzará una nueva reproducción del sonido que se mezclará con la anterior.
• Inicio. Es similar a Evento, con la diferencia de que si el sonido se está reproduciendo
previamente, no se iniciará una nueva reproducción.
• Detener. Detiene el sonido especificado.
• Flujo. El sonido estará sincronizado con la línea de tiempo. Por lo tanto, si la línea de tiempo
está detenida, el sonido se detendrá también. En este caso los fotogramas tienen que
extenderse durante todo el tiempo que queremos que se escuche el sonido. De esta forma
podemos sincronizar el sonido con las imágenes.
Seleccionamos en el inspector de Propiedades una sincronización de tipo Flujo para el sonido
backgroundMusic.mp3 y probamos la película. Podemos comprobar que la música se detiene y
se reanuda junto con el resto de la línea de tiempo.

La duración de la pista de música es mayor que los 600 fotogramas disponibles, por lo que no
hay ningún momento de silencio durante la reproducción. Si la línea de tiempo tuviera más
fotogramas, podríamos ver que la música se extendería hasta el fotograma 661
aproximadamente, y si la animación continuara más allá de estos fotogramas, la música cesaría.
Nuestra línea de tiempo llega al fotograma 600, y allí el código la envía de nuevo al fotograma 2
con la instrucción gotoAndPlay(2). Junto con el resto de la línea de tiempo, el sonido también
vuelve a ese fotograma. En este caso no encaja musicalmente el final del fotograma 600 con el
inicio en el fotograma 2, por lo que se escucha un salto en la música.
Cambiamos el tipo de sincronización de la pista a una sincronización de tipo Evento con una
repetición.

Probamos de nuevo la película (Ctrl+Intro). Ahora la reproducción del sonido es independiente de

la reproducción de la línea de tiempo. Por ello, podemos insertar un fotograma clave en blanco
en el segundo fotograma de la capa music.

Para que el sonido se repita de forma continua en un bucle, seleccionamos el fotograma que
contiene el sonido, y seleccionamos Reproducir indefinidamente. El sonido se reproducirá
ahora de forma continua.

Si no tuviéramos en el fotograma 600 la instrucción gotoAndPlay(2), la línea de tiempo volvería

al fotograma 1, fotograma en el que se encuentra el inicio del sonido de fondo. Al tener
seleccionada una sincronización tipo Evento, el sonido comenzaría de nuevo, sin por ello parar la
reproducción que estuviera en marcha, sonando de forma simultánea. En ese caso la
sincronización más adecuada sería Inicio.

En cada repetición del sonido, que dura unos 27 segundos, podemos escuchar una ligera
desincronización.
Podemos arreglar este pequeño desajuste con ayuda de la pantalla Editar envoltura. Para
abrir esta pantalla pulsaremos en el icono del lápiz que hay junto al desplegable Efecto.

En esta nueva pantalla, podemos ajustar el punto inicial y final del sonido. Podemos reducir el
zoom para visualizar la parte que nos interese de la onda de sonido.
Tras el final de la pista de audio (segundo 27), podremos ver en tono gris el comienzo de la
siguiente repetición. Probamos con el botón play nuestros ajustes. Cuando nos guste el
resultado, hacemos clic en Aceptar.
En esta pantalla también podríamos haber ajustado los volúmenes de ambos canales
seleccionando algún efecto predeterminado, o bien haciendo clic en la línea superior de cada
canal para crear nuevos puntos de control que podemos arrastrar para controlar el volumen.
Para crear el botón que muestre que el audio está desactivado, duplicaremos el botón gel Volume
On que acabamos de crear, y nombramos al nuevo botón gel Volume Off.
Editamos este nuevo botón gel Volume Off. Añadimos una nueva capa por encima de la capa
Layer4, y dibujamos una línea roja transversal que se mantenga durante los fotogramas Reposo,
Sobre y Presionado.

Arrastramos instancias de ambos botones en el escenario, en la capa buttons.

Al altavoz con la línea roja le daremos el nombre de instancia turnOn_btn, ya que cuando se
muestre estaremos sin audio, y por lo tanto, si lo pulsamos será para encender de nuevo el audio.
Al otro botón le damos el nombre de instancia turnOff_btn.
Recordemos que para dar nombres de instancia tenemos que seleccionar los clips en el
escenario, y escribir su nombre en el inspector de Propiedades.
Con ayuda del panel Alinear, colocamos un altavoz sobre el otro para que haga el efecto de
conmutador, y ambos al lado de los otros botones que conmutan entre play y stop.
Añadimos la siguiente programación en el fotograma 1 de la capa as, bajo la programación que
hemos creado en tutoriales anteriores:

turnOn_btn.visible = false;
turnOn_btn.addEventListener(MouseEvent.CLICK,
turnOn);
turnOff_btn.addEventListener(MouseEvent.CLICK,
turnOff);

function turnOn(e:MouseEvent):void
{
turnOff_btn.visible = true;
turnOn_btn.visible = false;
SoundMixer.soundTransform = new
SoundTransform(1);
}

function turnOff(e:MouseEvent):void
{
turnOn_btn.visible = true;
turnOff_btn.visible = false;
SoundMixer.soundTransform = new
SoundTransform(0);
}
Las únicas líneas nuevas están relacionadas con una clase llamada
SoundTransform:
SoundMixer.soundTransform = new SoundTransform(1);
SoundMixer.soundTransform = new SoundTransform(0);
La utilización de las clases excede de los límites de este tutorial. Sin
embargo, es útil conocer que simplemente con esta línea de código podemos
modificar el volumen general de todos los sonidos de una película.
El volumen varía entre 0 (apagado) y 1 (volumen máximo). Estos números los
colocaremos en el paréntesis del final de la línea.
Probamos la película y comprobamos que si pulsamos el botón para apagar
el audio, dejará de sonar no sólo la pista de la música de fondo, sino también
el clic de los botones.

Una forma de hacerlo es en la ventana

Propiedades de sonido, a la que se accede
pulsando con el botón derecho del ratón
sobre el nombre del sonido en la biblioteca
(backgroundMusic.mp3 en este caso), y
seleccionando Propiedades en el menú
contextual.
En primer lugar desactivamos la casilla Usar
calidad de MP3 importado. Es posible que
nos aparezca una velocidad de 16 kbps y
calidad rápida. Seleccionamos Probar y
escuchamos el principio del sonido. Después
pulsamos Detener. Podemos comprobar que
la calidad del audio en este caso es
demasiado baja.
Para complementar los conceptos desarrollados en es te tutorial, se recomienda hacer la
siguiente actividad:
1 Crea en el escenario un clip que contenga un texto con información sobre la película, y
hazlo invisible al inicio de la programación.
2 Añade botones para mostrar y ocultar esta información.
El sonido de fondo de una película puede resultar molesto en ocasiones, por lo que siempre es
conveniente facilitar la manera de enmudecerlo, así que añadiremos dos nuevos botones para
activar y desactivar el sonido de la película.
La forma más rápida de conseguir que los botones sean similares a los botones que ya tenemos,
es duplicar uno de los botones, y después transformarlo para que se adapte a nuestras
necesidades.
En la biblioteca, seleccionamos el botón gel Right con el botón derecho del ratón, y
seleccionamos Duplicar en el menú contextual. Al nuevo botón le damos el nombre gel Volume
On.

Para editar este símbolo hacemos doble clic sobre su nombre (gel Volume On) en la
biblioteca.
Vamos a sustituir el icono del play en el fotograma Reposo por el icono de un altavoz.
Activamos la capa Layer4 que es la que contiene el icono del play.
Para dibujar este altavoz, seleccionamos la herramienta Texto, familia Webdings y tamaño
de 20 pt. Para seleccionar el color, pinchamos sobre la casilla de Color, y después llevamos el
cuentagotas sobre el icono del play para que guarde su color.
Por último, pulsamos sobre el escenario para crear un cuadro de texto, y pulsamos la tecla X
mayúscula, que es el icono del altavoz.

Seleccionamos con el botón derecho del ratón el icono del altavoz que hemos creado, y
seleccionamos Separar para convertirlo en una forma.
Después borramos el icono del play, y situamos el icono del altavoz en el centro del botón.

Si observamos los fotogramas Sobre y Presionado, veremos que el icono play aparecía con
color blanco en estos fotogramas.

Seleccionamos los fotogramas Sobre y Presionado en los que todavía se encuentra el icono
del play y, haciendo clic con el botón derecho del ratón, seleccionamos Borrar fotograma
clave.