Guía de aprendizaje de Flash CS5

Tutorial 8 - 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.

Paso 2 de 14 Vamos a organizar el contenido de la biblioteca en carpetas.

Ahora vamos a acceder a la línea de tiempo de los botones para añadir el sonido del clic del ratón.

Para crear una carpeta pulsaremos sobre el icono inferior Nueva carpeta.

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.

Crearemos cuatro carpetas, una para gráficos, otra para clips, otra para botones y otra para sonidos.

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.

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.

También podríamos hacer directamente doble clic sobre el objeto en el escenario. Para poder acceder a un objeto que se encuentra bajo otro en la misma capa, pulsamos sobre el que está en primer plano con el botón derecho del ratón, y seleccionamos Organizar > Enviar al fondo.

Paso 3 de 14 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, pueden 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. Aunque podemos añadir interactividad tanto a los clips de película como a los botones, es la diferencia en las características de la línea de tiempo lo que hace que pueda ser más adecuado utilizar un tipo u otro de símbolo dependiendo de nuestras necesidades. Si queremos que, de forma sencilla y sin programación, el símbolo muestre distintos aspectos dependiendo de su estado (reposo, sobre, presionado), entonces los botones son una buena elección.

Paso 4 de 14 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.

Paso 5 de 14 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.

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.

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.

Seleccionando el primer fotograma de esta nueva capa, le asignamos el sonido backgroundMusic.mp3 en el área de Sonido del inspector de Propiedades.

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.

Veremos cómo la línea azul de la onda del sonido se extiende por los 600 fotogramas de nuestra película.

Paso 6 de 14 Analicemos las diferentes opciones de sincronización que podemos asignar a un sonido: 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. Por tanto, en los casos en los que nos interese escuchar de forma continua una música de fondo que no necesite estar sincronizada con la animación, la opción de sincronización como flujo no es la más adecuada.

Paso 7 de 14 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. Como en nuestra película la cabeza lectora sólo pasa por el primer fotograma una vez, podemos mantener la sincronización como tipo Evento.

Paso 8 de 14 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.

Paso 9 de 14 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.

Paso 10 de 14 Seleccionamos con el botón derecho del ratón el icono del altavoz que hemos creado, y seleccionamos Separar para convertirlo en una forma.

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.

Después borramos el icono del play, y situamos el icono del altavoz en el centro del botón.

Ahora tendremos el icono del altavoz en el fotograma Reposo, que se mostrará en los tres fotogramas.

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

Hacemos clic sobre el fotograma Sobre con el botón derecho del ratón y seleccionamos Insertar fotograma clave para crear un fotograma clave con el mismo contenido que el fotograma Reposo. Seleccionamos el altavoz en el fotograma Sobre y le cambiamos el color a blanco en el inspector de Propiedades. Este color se mantendrá sin cambios en el fotograma Presionado.

Paso 11 de 14 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.

Paso 12 de 14 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);

Como podemos ver, la parte de la programación que se refiere a mostrar u ocultar cada botón es similar a la de los botones play_btn y pause_btn que hicimos en el tutorial anterior. Las únicas líneas nuevas están relacionadas con una clase llamada SoundTransform: SoundMixer.soundTransform = new SoundTransform(1); SoundMixer.soundTransform = new SoundTransform(0);

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

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.

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

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.

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.

Paso 13 de 14 Para optimizar el peso final de la película, podemos variar la calidad de compresión de los archivos de audio que utilicemos. 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. Haremos diversas pruebas con distintos valores hasta encontrar una calidad aceptable sin demasiado peso. En el panel, el desplegable Calidad se refiere a la velocidad con la que comprime el archivo. A mayor velocidad, menor calidad en la compresión. Por ello es recomendable utilizar una calidad óptima. Debajo de la casilla de calidad podremos ver el peso del archivo con las condiciones actuales de compresión. En este caso, una opción adecuada podría ser un archivo estéreo, con una velocidad de bits de 64 kbps y con calidad óptima.

Paso 14 de 14 Para complementar los conceptos desarrollados en este 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.