9. Trabajando con sonido y video

Resumen de la lección

• Importar archivos de sonido.
• Editar y dividir archivos de sonido.
• Usar Adobe Media Encoder para preparar video.
• Comprender las opciones de codificación de video y audio.
• Usar componentes para reproducir video para documentos de Adobe AIR, ActionScript 3.0 o HTML5 Canvas.
• Incrustar video como guía para la animación.
• Personalizar opciones en los componentes de reproducción de video.
• Trabajar con video que contiene canales alfa.
• Incrustar video en la línea de tiempo.

Esta lección te llevará aproximadamente 3 horas completarla. Descarga los archivos del proyecto para esta lección desde la pestaña Productos registrados en la página de tu cuenta en www.peachpit.com (haz clic en el enlace Acceder al contenido adicional) y guárdalos en tu ordenador en una ubicación conveniente, como se describe en la sección Introducción de este libro. En la página de tu cuenta también encontrarás cualquier actualización de las lecciones o de los archivos de las lecciones.

El sonido y el video agregan nuevas dimensiones a tus proyectos. Importa archivos de sonido y edítalos directamente en Adobe Animate CC, y usa Adobe Media Encoder CC para comprimir y convertir archivos de video para usar en tus proyectos. Usa Animate CC para exportar tus animaciones como video HD.

Introducción

Comienza la lección viendo el quiosco animado del zoológico terminado. Crearás el quiosco agregando archivos de sonido y video a un proyecto en Adobe Animate CC en un documento AIR for Desktop.

1. Haz doble clic en el archivo Shearwood-Wildlife-Preserve.air, un programa multiplataforma, en la carpeta Lesson09/09End para reproducir la animación.

   El instalador te advertirá que la aplicación proviene de un autor desconocido, ¡pero puedes confiar en nosotros! Haz clic en Instalar. Cuando finaliza la instalación, la aplicación inicia una nueva ventana en la esquina superior izquierda de tu escritorio. Visualiza la película del oso polar con una breve banda sonora de un ritmo africano. Un director de zoológico aparece y se presenta.

   Nota: Si aún no has descargado los archivos del proyecto para esta lección a tu ordenador desde la página de tu cuenta, asegúrate de hacerlo ahora. En esa página también encontrarás un Suplemento descargable para esta lección que contiene información sobre temas adicionales. Consulta la Introducción al principio del libro.

   Nota: Si tu ordenador te pide que elijas una aplicación para abrir el archivo, deberás instalar el tiempo de ejecución de Adobe AIR. Ve a get.adobe.com/air y sigue las instrucciones de instalación.

2. Haz clic en el botón Reproducir en la parte inferior izquierda de la aplicación para iniciar la película.

3. Haz clic en los botones de los animales en la parte inferior derecha para ver una película sobre el animal. Usa los controles de la interfaz debajo de la película para pausar, continuar o bajar el volumen.

4. Presiona Ctrl+Q/Comando+Q para cerrar la aplicación (o selecciona Salir en el Dock de Mac OS o en la barra de tareas de Windows).

En esta lección, importarás archivos de audio y los colocarás en la Línea de tiempo para proporcionar la breve floritura de audio introductoria y luego incrustarás algunos de esos sonidos en cada botón. Pasando al video, usarás Adobe Media Encoder CC para comprimir y convertir los archivos de video al formato apropiado para Animate. Otras técnicas útiles que aprenderás incluyen cómo trabajar con fondos transparentes en video para crear el video del director del zoológico en silueta y cómo exportar contenido de Animate a video de alta calidad.

1. Haz doble clic en el archivo 09Start.fla en la carpeta Lesson09/09Start para abrir el archivo de proyecto inicial en Animate CC.

2. Selecciona Archivo > Guardar como. Nombra el archivo 09_workingcopy.fla y guárdalo en la carpeta 09Start. Guardar una copia de trabajo asegura que el archivo de inicio original estará disponible si quieres empezar de nuevo.

Entendiendo el archivo del proyecto

El archivo del proyecto es un documento de AIR for Desktop. El proyecto publicado final es una aplicación autónoma que se ejecuta en el escritorio de Windows o Mac OS sin necesidad de un navegador.

La configuración inicial del proyecto se ha completado, excepto las partes de audio y video y parte del código ActionScript. El Escenario tiene 1000 × 700 píxeles. Una foto de un león durmiendo forma el fondo de la aplicación. En capas sobre el fondo hay una fila de botones a lo largo de la parte inferior del Escenario, con tres botones simples a la izquierda y un conjunto de botones que representan animales coloridos a la derecha. Un banner de título abarca la parte superior del Escenario.

La Línea de tiempo contiene varias capas que separan los diferentes contenidos.

Las tres capas inferiores, llamadas foto de fondo, título y barra de navegación inferior, contienen elementos de diseño, texto e imágenes. Las dos capas directamente encima, llamadas botones y botones de sonido, contienen instancias de símbolos de botón. La capa de videos contiene varios fotogramas clave etiquetados, y la capa de acciones contiene ActionScript que proporciona los controladores de eventos para la fila inferior de botones.

Si has completado la Lección 8, deberías estar familiarizado con la estructura de esta Línea de tiempo. Los botones individuales en la fila inferior ya están codificados para que, cuando el usuario hace clic en un botón, el cabezal de reproducción se mueva a un fotograma clave etiquetado correspondiente en la capa de videos. Insertarás contenido en cada uno de esos fotogramas clave. Pero primero aprenderás a trabajar con sonido.

Usando sonidos

Puedes importar varios tipos de archivos de sonido a Animate, entre ellos archivos MP3, AIFF y WAV, que son tres formatos de sonido comunes. Cuando importas archivos de sonido a Animate, se almacenan en tu panel Biblioteca. Luego puedes arrastrar los archivos de sonido desde el panel Biblioteca al Escenario en diferentes puntos a lo largo de la Línea de tiempo para sincronizar esos sonidos con lo que sea que esté sucediendo en el Escenario.

Importando archivos de sonido

Importarás varios archivos de sonido al panel Biblioteca, que usarás a lo largo de esta lección.

1. Selecciona Archivo > Importar > Importar a la biblioteca.

2. Selecciona el archivo Monkey.wav en la carpeta Lesson09/09Start/Sounds y haz clic en Abrir.

   El archivo Monkey.wav aparece en tu panel Biblioteca. El archivo de sonido se indica con un icono único, y cuando se selecciona, la ventana de vista previa muestra una forma de onda, una serie de picos y valles que representan el sonido.

3. Haz clic en el botón Reproducir en la esquina superior derecha de la ventana de vista previa de la Biblioteca.

   Se reproduce el sonido.

4. Haz doble clic en el icono de sonido a la izquierda de tu archivo Monkey.wav.

   Aparece el cuadro de diálogo Propiedades de sonido, que proporciona información sobre tu archivo de sonido, incluida su ubicación original, tamaño y otras propiedades técnicas. Haz clic en Aceptar para cerrar el cuadro de diálogo.

5. Selecciona Archivo > Importar > Importar a la biblioteca y selecciona los otros archivos de sonido para importar a tu proyecto de Animate. Importa Elephant.wav, Lion.wav, Africanbeat.mp3 y Afrolatinbeat.mp3. Haz clic en Abrir para importar los archivos.

   Consejo: Mantén presionada la tecla Mayús para seleccionar varios archivos para importarlos todos a la vez.

   Tu panel Biblioteca debe contener todos los archivos de sonido.

6. Crea una carpeta en tu panel Biblioteca y coloca todos los archivos de sonido en ella para organizar tu panel Biblioteca. Nombra la carpeta sonidos.

Nota: Además de los archivos MP3, AIFF y WAV, Animate admite ASND (Adobe Sound), SD2 (Sound Designer II), AU (Sun AU), FLAC y OGG u OFF (Ogg Vorbis).

Colocando sonidos en la línea de tiempo

Puedes colocar un sonido en cualquier fotograma clave a lo largo de la Línea de tiempo, y Animate reproducirá ese sonido cuando el cabezal de reproducción llegue al fotograma clave. Colocarás un sonido en el primer fotograma clave que se reproduce al comienzo de la película para proporcionar una agradable introducción de audio y establecer el ambiente.

1. Selecciona la capa de videos en la Línea de tiempo.

2. Inserta una nueva capa y cámbiale el nombre a sonidos.

3. Selecciona el primer fotograma clave de la capa de sonidos.

4. Arrastra el archivo Afrolatinbeat.mp3 desde la carpeta sonidos en tu panel Biblioteca al Escenario.

   La forma de onda de tu sonido aparece en la Línea de tiempo.

5. Selecciona el primer fotograma clave de la capa de sonidos, si aún no está seleccionado.

   En el panel Propiedades, en la sección Sonido, ten en cuenta que tu archivo de sonido ahora aparece en el menú Nombre.

6. Selecciona Transmitir en el menú Sincronizar.

   Las opciones de Sincronizar determinan cómo se reproduce el sonido en la Línea de tiempo. Usa la sincronización Transmitir para pasajes largos de música o narración cuando desees sincronizar el sonido con la Línea de tiempo.

7. Mueve el cabezal de reproducción hacia adelante y hacia atrás en la Línea de tiempo.

   El sonido se reproduce mientras mueves la Línea de tiempo.

8. Selecciona Control > Probar.

   El sonido se reproduce solo por un corto tiempo antes de cortarse. Debido a que el sonido está configurado en Transmitir, solo se reproduce cuando el cabezal de reproducción se mueve a lo largo de la Línea de tiempo y si hay suficientes fotogramas para reproducir. Hay una acción de detener en el fotograma 9 que detiene el cabezal de reproducción y, por lo tanto, detiene el sonido.

Entendiendo las opciones de sincronización de sonido

La sincronización de sonido se refiere a la forma en que se activa y reproduce un sonido. Hay varias opciones: Evento, Iniciar, Detener y Transmitir. Transmitir vincula el sonido a la Línea de tiempo para que puedas sincronizar fácilmente los elementos animados con el sonido. Evento e Iniciar se utilizan para activar un sonido (generalmente un sonido corto) a un evento específico, como un clic de botón. Evento e Iniciar son similares, excepto que la sincronización Iniciar no activa el sonido si ya se está reproduciendo (por lo que no es posible que haya sonidos superpuestos con la sincronización Iniciar). La opción Detener se usa para detener un sonido, aunque la usarás raramente, si es que alguna vez lo haces. Si quieres detener un sonido con una sincronización Transmitir, simplemente inserta un fotograma clave en blanco.

Añadiendo fotogramas a la línea de tiempo

El siguiente paso es extender la Línea de tiempo para que se reproduzca todo el sonido (o al menos las partes que desees) antes de que la acción de detener detenga el cabezal de reproducción.

1. Haz clic en el Escenario para deseleccionar la Línea de tiempo y luego coloca el cabezal de reproducción entre los fotogramas 1 y 9 haciendo clic en los números de fotograma superiores.

2. Selecciona Insertar > Línea de tiempo > Fotograma, o presiona F5, para insertar un fotograma en cada capa entre los fotogramas 1 y 9.

3. Continúa insertando fotogramas hasta que el sonido pueda reproducirse durante aproximadamente 50 fotogramas antes de que llegue a la acción de detener en el segundo fotograma clave de la capa de acciones. El fotograma clave que contiene la acción de detener debe estar en el fotograma 51.

4. Selecciona Control > Probar.

   El sonido dura más porque tiene más fotogramas para reproducir antes de que se detenga el cabezal de reproducción.

Recortando el final de un sonido

El clip de sonido que importaste es un poco más largo de lo que necesitas. Acortarás el archivo de sonido utilizando el cuadro de diálogo Editar envolvente. Luego, aplicarás un fundido para que el sonido disminuya gradualmente a medida que termina.

1. Selecciona el primer fotograma clave de la capa de sonidos.

2. En el panel Propiedades, en la sección Sonido, haz clic en el botón Editar envolvente de sonido, que está a la derecha del menú Efecto y tiene un icono de lápiz.

   Aparece el cuadro de diálogo Editar envolvente, que muestra la forma de onda del sonido.

   Las formas de onda superior e inferior representan los canales izquierdo y derecho del sonido estéreo, respectivamente. La delgada línea negra que corre horizontalmente por encima de cada forma de onda muestra el nivel de sonido para cada canal, y juntas forman la envolvente del sonido. Una línea de tiempo se extiende entre las formas de onda, el menú Efecto en la esquina superior izquierda ofrece efectos preestablecidos y los botones que habilitan las opciones de visualización ocupan la esquina inferior derecha.

3. En el cuadro de diálogo Editar envolvente, haz clic en el botón Segundos, si aún no está seleccionado.

   La Línea de tiempo cambia las unidades para mostrar segundos en lugar de fotogramas. Haz clic en el botón Fotogramas para volver a cambiar. Puedes cambiar de un lado a otro, dependiendo de cómo quieras ver tu sonido.

4. Haz clic en Alejar hasta que puedas ver toda la forma de onda.

   La forma de onda parece terminar alrededor de los 240 fotogramas, o aproximadamente 10 segundos.

5. Arrastra el extremo derecho del control deslizante de tiempo hacia la izquierda hasta aproximadamente el fotograma 45.

   El sonido se acorta recortándolo desde el final. El sonido ahora se reproduce durante aproximadamente 45 fotogramas.

6. Haz clic en Aceptar para aceptar los cambios que has realizado.

   La forma de onda en la Línea de tiempo principal indica el sonido acortado.

Nota: Las ediciones realizadas en el cuadro de diálogo Editar envolvente no son destructivas. Eso significa que acortar un clip de audio no descarta ninguno de los datos, solo cambia cuánto del clip se reproduce en una película. Si cambias de opinión más tarde, siempre puedes volver a alargar el clip.

Cambiando el volumen de un sonido

El sonido será más elegante si se desvanece lentamente en lugar de cortarse abruptamente. Puedes cambiar los niveles de volumen a través del tiempo en el cuadro de diálogo Editar envolvente. Úsalo para aumentar el volumen, disminuirlo o modular el volumen de los canales izquierdo y derecho por separado.

1. Selecciona el primer fotograma clave de la capa de sonidos.

2. En el panel Propiedades, haz clic en el botón Editar envolvente de sonido.

   Aparece el cuadro de diálogo Editar envolvente.

División de audio

Si quieres pausar un audio de transmisión en la Línea de tiempo y luego, en un momento posterior, reanudar la reproducción de audio desde el punto en que se detuvo, puedes usar la división de audio. No necesitas dividir tu audio en esta lección, pero así es como se hace.

Para dividir el sonido en la Línea de tiempo, el sonido debe estar en transmisión de sincronización. Selecciona el fotograma en el punto donde quieres pausar el audio; luego haz clic con el botón derecho y selecciona Dividir audio.

Tu sonido se dividirá en dos transmisiones, indicadas por un nuevo fotograma clave en el punto en el que divides el audio.

Inserta un nuevo fotograma clave en el fotograma justo detrás del fotograma clave donde divides tu audio.

Ahora, mueve el fotograma clave que contiene la segunda mitad de tu audio y se creará un espacio entre la división.

Tu audio se reproducirá hasta que llegue al fotograma clave vacío, donde se pausará. Cuando tu cabezal de reproducción llegue al siguiente fotograma clave con el audio dividido, el sonido se reanudará.

3. Selecciona la opción de visualización Fotogramas y amplía la forma de onda para ver su final cerca del fotograma 45.

4. Haz clic en el nivel del canal izquierdo por encima del fotograma 20.

   Aparece un cuadro en la línea, lo que indica que se ha agregado un fotograma clave para el volumen del sonido.

5. Haz clic en el nivel del canal izquierdo por encima del fotograma 45 y arrástralo hacia abajo hasta la parte inferior del canal. La línea diagonal descendente indica la caída en el nivel de volumen del 100% al 0%.

6. Haz clic en el fotograma clave correspondiente en el nivel del canal derecho y arrástralo hacia abajo hasta la parte inferior del canal. Haz clic en Aceptar para cerrar el cuadro de diálogo.

Eliminando o cambiando el archivo de sonido

Si no quieres el sonido en tu Línea de tiempo, o si quieres cambiar a un sonido diferente, puedes hacer esos cambios en el panel Propiedades.

1. Selecciona el primer fotograma clave de la capa de sonidos.

2. En el panel Propiedades, selecciona Ninguno en el menú Nombre.

   El sonido se elimina de la Línea de tiempo.

Nota: Para obtener información sobre cómo controlar la calidad del sonido en tu archivo publicado, consulta "Configuración de la calidad de los sonidos" en el Suplemento de esta lección.

3. Ahora agreguemos un sonido diferente. Selecciona Africanbeat.mp3 en el menú.

   El sonido Africanbeat.mp3 se agrega a la Línea de tiempo. La configuración en el cuadro de diálogo Editar envolvente que recorta el sonido y lo desvanece se restablece (ya que seleccionaste Ninguno para eliminar el sonido Afrolatinbeat.mp3). Regresa al cuadro de diálogo Editar envolvente para personalizar el sonido Africanbeat.mp3 de la misma manera que el sonido anterior.

Añadiendo sonidos a los botones

En el quiosco, los botones que controlan el sonido aparecen en tu Escenario a la izquierda. Añadirás sonidos a los botones para que se reproduzcan cada vez que el usuario haga clic en ellos.

1. En el panel Biblioteca, haz doble clic en el icono del símbolo de botón llamado sound_button1.

   Entras en el modo de edición de símbolos para ese símbolo de botón.

   Las tres capas en el símbolo de botón ayudan a organizar el contenido para los estados Arriba, Sobre, Abajo y Pulsado.

2. Inserta una nueva capa y cámbiale el nombre a sonidos.

3. Selecciona el fotograma Abajo en tu capa de sonidos e inserta un fotograma clave.

   Aparece un nuevo fotograma clave en el estado Abajo de tu botón.

4. Arrastra el archivo Monkey.wav desde la carpeta sonidos en tu panel Biblioteca al Escenario.

   Aparece una forma de onda para el archivo Monkey.wav en el fotograma clave Abajo de la capa de sonidos.

5. Selecciona el fotograma clave Abajo en la capa de sonidos.

6. En el panel Propiedades, en la sección Sonido, selecciona Iniciar en el menú Sincronizar.

   Cuando Sincronizar se establece en Iniciar para un fotograma clave, el sonido se activa cada vez que el cabezal de reproducción entra en ese fotograma clave en particular.

7. Selecciona Control > Probar. Prueba el primer botón para escuchar al mono y luego cierra la ventana de vista previa.

8. Edita sound_button2 y sound_button3 para agregar los sonidos Lion.wav y Elephant.wav a sus estados Abajo. Haz clic en Escena 1 en la barra Editar para salir del modo de edición de símbolos.

Nota: También puedes agregar sonido con una sincronización de evento o inicio al estado Sobre de un símbolo de botón, y el sonido se reproducirá cada vez que el cursor del ratón se desplace sobre el botón.

Entendiendo el video

Animate hace que sea muy fácil entregar video. La combinación de video, interactividad y animación puede crear una experiencia multimedia muy rica e inmersiva para tus espectadores.

Nota: La reproducción de video no es compatible con los documentos WebGL.

La implementación de video varía según si estás trabajando en un documento ActionScript 3.0, AIR for Desktop, AIR for Android, AIR for iOS o HTML5 Canvas.

Video con documentos ActionScript 3.0 o AIR

Si estás trabajando en un documento ActionScript 3.0 o AIR, como lo estás haciendo en esta lección, tienes dos opciones para mostrar video. La primera opción es usar el componente FLVPlayback para reproducir el video. Un componente en Animate es un módulo empaquetado reutilizable que agrega una capacidad particular a un documento de Animate. Este componente es un widget especial que se utiliza en el Escenario para reproducir tu video externo.

El uso del componente FLVPlayback te permite mantener el video separado de tu archivo de Animate. Si tienes un videoclip muy corto, puedes usar la segunda opción, que es incrustar el video directamente dentro de tu archivo de Animate.

Video con documentos HTML5 Canvas

Si quieres mostrar video en un documento HTML5 Canvas, usa el componente Video de Animate. El componente Video, como el de los documentos ActionScript 3.0, proporciona una interfaz sencilla para apuntar al archivo de video externo correcto y cambiar los parámetros de reproducción.

Codificación de video

Cualquiera que sea el enfoque que adoptes para mostrar video, Animate requiere que el video se codifique correctamente primero. Para usar un componente de reproducción de Animate para reproducir tu video, el video debe estar codificado en el estándar H.264, un códec de video que ofrece alta calidad con una compresión muy eficiente. Un códec (compresión-descompresión) es un método que utilizan las computadoras para comprimir un archivo de video para ahorrar espacio y luego descomprimirlo para reproducirlo. El códec H.264 se utiliza en archivos de video MP4 (que son muy comunes), por lo que los videos MP4 se pueden utilizar en documentos ActionScript 3.0, AIR y HTML5 Canvas.

Nota: Para convertir un video a formato FLV, debes usar una versión de Adobe Media Encoder CC (AME) anterior a la versión 2014. Las versiones independientes de AME CC y anteriores no están disponibles para descargar, pero puedes usar tu suscripción a Adobe Creative Cloud para descargar Adobe Premiere Pro CC o CS6 y eso incluirá una copia de AME.

Para incrustar un video en tu documento ActionScript 3.0 o AIR, tu video debe ser un archivo FLV, un formato más antiguo que usa un códec diferente. Incrustar video es una forma menos común de manejar video, por lo que la mayor parte de tu trabajo con video se realizará con archivos MP4 usando codificación H.264.

Usando Adobe Media Encoder CC

Puedes convertir tus archivos de video al formato de video adecuado usando Adobe Media Encoder CC, una aplicación independiente que se instala con Animate CC. Adobe Media Encoder puede convertir archivos individuales o múltiples archivos (conocido como procesamiento por lotes) para facilitar tu flujo de trabajo.

Añadiendo un archivo de video a Adobe Media Encoder

El primer paso para convertir tu archivo de video a un formato compatible con Animate es agregar el video a Adobe Media Encoder para codificarlo.

Nota: Si Adobe Media Encoder CC no está disponible en tu máquina por alguna razón, usa la aplicación de escritorio de Adobe Creative Cloud para descargarla e instalarla.

1. Inicia Adobe Media Encoder CC.

   La pantalla de apertura muestra el panel Cola en la parte superior derecha, que muestra los archivos de video actuales que se han agregado para su procesamiento. El panel Cola debe estar vacío. Los otros paneles son el panel Codificación, que muestra cualquier video que se esté procesando actualmente; Explorador de medios, que te permite navegar para encontrar archivos de video en la computadora; y el Navegador preestablecido, que proporciona configuraciones predefinidas de uso común.

2. Selecciona Archivo > Agregar fuente o haz clic en el botón Agregar fuente (con el icono de signo más) en el panel Cola. Se abre un cuadro de diálogo de navegación de archivos para permitirte seleccionar un archivo de video.

3. Navega a la carpeta Lesson09/09Start, selecciona el archivo Penguins.mov y haz clic en Abrir.

   El archivo Penguins.mov se agrega a la cola de archivos para su procesamiento y está listo para la conversión al formato de video que elijas.

Consejo: También puedes arrastrar el archivo directamente al panel Cola desde tu escritorio.

Nota: De forma predeterminada, Adobe Media Encoder no comienza a procesar la cola automáticamente cuando el programa está inactivo. Puedes cambiar esta configuración seleccionando Adobe Media Encoder > Preferencias > General y seleccionando la opción Iniciar cola automáticamente.

Convirtiendo archivos de video para Animate

Convertir tus archivos de video es fácil, y el tiempo que tarda depende de qué tan grande sea tu archivo de video original y la velocidad de procesamiento de tu computadora.

1. En la primera columna debajo de Formato, quédate con el valor predeterminado seleccionado, H.264. H.264 es un códec ampliamente aceptado para videos web y funciona con los componentes de video de Animate.

2. Haz clic en la punta de flecha en la columna Preestablecido para abrir el menú Preestablecido.

   Los ajustes preestablecidos de video determinan las dimensiones del video y la calidad del video en función de plataformas y dispositivos de reproducción específicos. Mantén la selección actual en Coincidir con la fuente: tasa de bits alta.

3. Haz clic en el nombre del ajuste preestablecido que acabas de elegir.

   Aparece el cuadro de diálogo Configuración de exportación, con configuraciones avanzadas para recortar, cambiar el tamaño, recortar y muchas otras opciones de video y audio. Cambiarás el tamaño del video del pingüino para que quepa cómodamente en el Escenario de tu proyecto de quiosco del zoológico.

4. Haz clic en la pestaña Video. Anula la selección de Coincidir esta propiedad con el video de origen para permitir que se cambie el tamaño del video e introduce 432 para el Ancho. Haz clic fuera del campo para aceptar el cambio.

   Debido a que la opción Restringir proporciones está seleccionada (icono de enlace de cadena), Animate modifica la Altura a 320 para mantener la proporción de tu video consistente.

5. Haz clic en Aceptar.

   Animate cierra el cuadro de diálogo Configuración de exportación y guarda tu configuración avanzada de video y audio.

6. Haz clic en el enlace debajo de la columna Archivo de salida.

   Aparece el cuadro de diálogo Guardar como. Puedes elegir guardar el archivo convertido en una ubicación diferente en tu computadora o elegir un nombre de archivo diferente. Tu video original no se eliminará ni se alterará de ninguna manera. Para este ejercicio, haz clic en Cancelar.

7. Haz clic en el botón Iniciar cola (con el icono triangular verde) en la esquina superior derecha.

Nota: Para obtener información sobre cómo automatizar el procesamiento de varios videos, consulta "Uso del panel Carpetas de vigilancia y la configuración del Navegador preestablecido" en el Suplemento de esta lección.

Adobe Media Encoder comienza el proceso de codificación. El panel Codificación muestra el progreso de la operación (junto con una vista previa del video) y la configuración de codificación. Cuando finaliza el proceso de codificación, aparece "Listo" en la columna Estado del panel Cola.

Ahora tienes el archivo Penguins.mp4 en tu carpeta Lesson09/09Start junto con el archivo Penguins.mov original.

Nota: Puedes cambiar el estado de un archivo individual en el panel Cola seleccionando el archivo en la lista de visualización y seleccionando Editar > Restablecer estado o Editar > Omitir selección. Restablecer estado elimina la etiqueta Listo de un archivo completado para que pueda codificarse de nuevo, mientras que Omitir selección hace que Animate omita ese archivo en particular cuando tienes varios archivos en la cola.

Entendiendo las opciones de codificación

Puedes personalizar muchas configuraciones al convertir tu video original. Ya has visto cómo puedes cambiar el tamaño del video original cuando convertiste la película del pingüino. También puedes recortar tu video a dimensiones específicas, convertir solo un fragmento del video, ajustar el tipo de compresión y los niveles de compresión, e incluso aplicar filtros al video.

Para mostrar las opciones de codificación disponibles, selecciona el archivo Penguins.mov en el panel Cola y luego selecciona Editar > Restablecer estado. Haz clic en la entrada en la columna Formato o Preestablecido. Aparece el cuadro de diálogo Configuración de exportación, que se muestra aquí.

Ajustando la longitud del video

Tu video puede tener segmentos no deseados al principio o al final. Puedes eliminar metraje colocando puntos de entrada y salida donde desees que comience y termine tu video.

1. Arrastra el cabezal de reproducción (marcador azul superior) para desplazarte por tu video para obtener una vista previa del metraje. Coloca el cabezal de reproducción en el punto donde desees que comience a reproducirse tu video.

   Nota: Para obtener información sobre cómo recortar las dimensiones de tus videos, consulta "Recortando tu video" en el Suplemento de esta lección.

   El indicador de tiempo actual en el extremo izquierdo de la Línea de tiempo muestra la posición del cabezal de reproducción en horas, minutos, segundos y fotogramas.

2. Haz clic en el botón Establecer punto de entrada.

   El punto de entrada se mueve a la posición actual del cabezal de reproducción.

3. Arrastra el cabezal de reproducción hasta el punto donde desees que se detenga tu video.

4. Haz clic en el botón Establecer punto de salida.

   El punto de salida se mueve a la posición actual del cabezal de reproducción.

5. También puedes simplemente arrastrar los marcadores de punto de entrada y salida para delimitar el segmento de video deseado.

   La parte resaltada de tu video entre los marcadores de punto de entrada y salida será el único segmento de tu video original que se codificará.

6. Arrastra los puntos de entrada y salida de nuevo a sus posiciones originales, o selecciona Clip completo en el menú Rango de origen, porque no necesitas ajustar la longitud del video para esta lección.

Consejo: Puedes usar la tecla Flecha izquierda o Flecha derecha en tu teclado para retroceder o avanzar fotograma a fotograma para un control más preciso.

Configurando opciones avanzadas de video y audio

El lado derecho del cuadro de diálogo Configuración de exportación contiene información sobre el video original y resume la configuración de exportación.

Puedes elegir una de las opciones del menú Preestablecido superior. En la parte inferior, puedes navegar a las opciones avanzadas de codificación de video y audio usando las pestañas. En la parte inferior, Animate muestra el tamaño de salida estimado.

Guardando opciones avanzadas de video y audio

Si quieres aplicar la misma configuración a muchos videos, tiene sentido guardar tus opciones avanzadas de video y audio. Puedes hacerlo en Adobe Media Encoder. Una vez que hayas guardado tu configuración, puedes aplicarla fácilmente a otros videos en la cola.

1. En el cuadro de diálogo Configuración de exportación, haz clic en el botón Guardar ajuste preestablecido.

2. En el cuadro de diálogo que se abre, proporciona un nombre descriptivo para las opciones de video y audio. Haz clic en Aceptar.

3. En el cuadro de diálogo Configuración de exportación, haz clic en Aceptar para volver a la cola de videos. Puedes aplicar tu configuración personalizada a videos adicionales simplemente eligiendo un elemento del menú Preestablecido o del panel Navegador preestablecido.

4. Presiona Ctrl+Q/Comando+Q para salir de Adobe Media Encoder.

Reproducción de video externo en tu proyecto

Ahora que has convertido correctamente tu video al formato compatible correcto, puedes usarlo en tu proyecto de quiosco del zoológico. Harás que tu proyecto reproduzca cada uno de los videos de animales en los diferentes fotogramas clave etiquetados en la Línea de tiempo. Tus videos son independientes de tu proyecto de Animate. Mantener los videos externos asegura que puedas editarlos por separado y que los videos puedan mantener diferentes velocidades de fotogramas de tu proyecto de Animate.

1. Abre tu proyecto 09_workingcopy.fla en Animate CC.

2. Selecciona el fotograma clave etiquetado como pingüinos en la capa de videos.

3. Selecciona Archivo > Importar > Importar video.

   Aparece el asistente para importar video. Este asistente te guía paso a paso a través del proceso de agregar video a Animate.

4. En el asistente para importar video, selecciona En tu computadora y haz clic en Examinar.

5. En el cuadro de diálogo Abrir, selecciona Penguins.mp4 de la carpeta Lesson09/09Start y haz clic en Abrir.

   La ruta al archivo de video se muestra debajo del botón Examinar.

6. Selecciona Cargar video externo con componente de reproducción. Haz clic en Siguiente o Continuar.

   Consejo: También puedes seleccionar Incrustar video H.264 en la línea de tiempo para incrustar un video codificado en H.264 para usarlo como guía para la animación dibujada a mano. Los animadores a menudo usan video de acción en vivo para guiar sus dibujos fotograma a fotograma en una técnica conocida como rotoscopia. El video aparece en tu Línea de tiempo pero no se exporta.

7. En la siguiente pantalla, eliges la máscara o el estilo de los controles de la interfaz para el video. En el menú Máscara, elige la tercera opción desde arriba, MinimaFlatCustomColorPlayBackSeekCounterVolMute.swf, si aún no está seleccionada.

   Nota: La máscara es un pequeño archivo SWF que determina la funcionalidad y la apariencia de los controles del video. Puedes usar una de las máscaras proporcionadas con Animate, o puedes seleccionar Ninguna en la parte superior del menú.

   Las máscaras se dividen en tres categorías amplias. Las máscaras cuyos nombres comienzan con "Minima" son los diseños más recientes e incluyen opciones con un contador numérico. Las máscaras que comienzan con "SkinUnder" usan controles que aparecen debajo del video. Las máscaras que comienzan con "SkinOver" incluyen controles que se superponen al borde inferior del video. Una vista previa de la máscara y sus controles aparece en la ventana de vista previa.

8. Haz clic en el cuadro Color y selecciona #333333 con 75% de alfa. Haz clic en Siguiente o Continuar.

9. En la siguiente pantalla del asistente para importar video, revisa la información del archivo de video y luego haz clic en Finalizar para colocar el video.

10. Tu video con la máscara seleccionada aparece en el Escenario. Coloca el video en el lado izquierdo del Escenario.

También aparece un componente FLVPlayback en tu panel Biblioteca.

**Nota:** Aunque el componente que reproduce video en un documento ActionScript 3.0 se llama FLVPlayback, reproduce video codificado en H.264 (MP4) y no video FLV.

11. Selecciona Control > Probar. Después de la introducción musical, haz clic en el botón Pingüinos de Magallanes.

El componente FLVPlayback reproduce el video externo del pingüino con la máscara que elegiste en el asistente para importar video. Si tu video no se reproduce, asegúrate de que tu archivo de video MP4 esté en la misma carpeta que tu archivo FLA. En el panel Propiedades, sección Parámetros del componente, el elemento Origen indica la ruta al archivo de video.

Cierra la ventana de vista previa.

Los otros videos de animales ya se han codificado y proporcionado en la carpeta 09Start. Importa los videos Mandrill.mp4, Tiger.mp4 y Lion.mp4 en cada uno de sus fotogramas clave correspondientes y colócalos en el Escenario en la misma ubicación que la película Penguins.mp4. Elige la misma máscara que el video Penguin.mp4.

Nota: Los archivos de video, el archivo 09_workingcopy.swf y el archivo de máscara son todos necesarios para que tu proyecto de quiosco del zoológico funcione. El archivo de máscara se publica en la misma carpeta que tu archivo SWF.

Consejo: No puedes obtener una vista previa de tu video en el Escenario en Animate CC. Debes probar tu película (Control > Probar) para ver tu video reproducirse dentro del componente de video.

Controlando la reproducción del video

El componente FLVPlayback te permite controlar qué video se reproduce, si el video se reproduce automáticamente y otros aspectos de la reproducción. Se puede acceder a las opciones de reproducción en el panel Propiedades. Selecciona el componente FLVPlayback en el Escenario y expande la sección Parámetros del componente en el panel Propiedades.

Las propiedades individuales se enumeran en la columna izquierda y sus valores correspondientes se enumeran en la columna derecha. Selecciona uno de los videos en el Escenario y luego elige entre las siguientes opciones:

• reproducción automática: cuando está seleccionada, el video se reproduce automáticamente. Cuando está deseleccionada, el video se pausa en el primer fotograma.
• skinAutoHide: selecciona esta opción para ocultar el controlador y mostrarlo solo cuando los usuarios pasen el cursor del ratón sobre el video.

Usando el componente de video HTML5 Canvas

Para mostrar video en un documento HTML5 Canvas, usa el componente Video, que es muy similar al componente FLVPlayback que aprendiste en las tareas anteriores para mostrar video en un documento AIR o ActionScript 3.0.

Debes agregar el componente Video al Escenario desde el panel Componentes tú mismo. A diferencia de los documentos ActionScript 3.0 o AIR, no hay un Asistente de importación que te guíe a través de los pasos para agregar video. Pero el proceso es sencillo.

Para agregar video en un documento HTML5 Canvas, abre el panel Componentes (Ventana > Componentes) y expande la categoría Video. Arrastra el componente Video desde el panel Componentes al Escenario. El panel Propiedades, en la sección Parámetros del componente, muestra las propiedades para la reproducción de video con el componente Video.

Haz clic en el botón Editar (icono de lápiz) junto a la fuente en la sección Parámetros del componente del panel Propiedades.

Se abre el cuadro de diálogo Ruta de contenido. Introduce la ruta al archivo de video codificado en H.264 (.mp4) o selecciona el icono de carpeta para navegar al archivo de video en tu computadora.

Animate recuperará las dimensiones correctas de tu video. Usa las opciones de reproducción y la interfaz de usuario en el panel Propiedades para cambiar cómo se reproduce el video desde un navegador.

• máscara: muestra el nombre de tu archivo de máscara actual. Haz clic en el nombre para abrir el cuadro de diálogo Seleccionar máscara y elegir otra opción en el menú Máscara.
• skinBackgroundAlpha: para cambiar la transparencia de la máscara, introduce un valor decimal de 0 (totalmente transparente) a 1 (totalmente opaco).
• skinBackgroundColor: para cambiar el color de la máscara, haz clic en la muestra de color y selecciona un nuevo color.
• source: muestra el nombre y la ubicación del archivo de video que Animate intenta reproducir. Para cambiar cualquiera de ellos, haz clic en la información del archivo.

En el cuadro de diálogo Ruta de contenido que aparece, introduce un nuevo nombre de archivo o haz clic en el icono Carpeta para elegir un nuevo archivo para reproducir. La ruta es relativa a la ubicación de tu archivo de Animate.

Trabajando con video y transparencia

Para los diversos videos de animales, quieres mostrar el fotograma completo con los animales en primer plano y el exuberante entorno en el fondo. Pero a veces quieres usar un archivo de video que no incluye un fondo. Para este proyecto, el director del zoológico fue filmado frente a una pantalla verde, que luego se eliminó con Adobe After Effects. Cuando usas el video, el director del zoológico parece estar frente al fondo del Escenario. Se usa un efecto similar para los presentadores del tiempo de las noticias, donde el fondo del video es totalmente transparente y puede mostrar gráficos del tiempo detrás de la persona.

Las transparencias en video (llamadas canales alfa) solo son compatibles con el formato FLV usando el códec On2 VP6. Aunque el formato FLV ya no es compatible con Adobe Media Encoder CC, las versiones anteriores de Media Encoder aún pueden exportar a FLV. Al codificar un video con un canal alfa de versiones anteriores de Adobe Media Encoder, asegúrate de seleccionar Editar > Configuración de exportación, haz clic en la pestaña Video y luego selecciona la opción Codificar canal alfa.

Importarás el archivo de video, que ya está codificado con un canal alfa en formato FLV, a Animate para mostrarlo con el componente de reproducción.

Importando el videoclip

Ahora usarás el asistente para importar video para importar el archivo Popup.flv, que ya se ha codificado con un canal alfa.

1. Inserta una nueva capa llamada video emergente encima de la capa de videos.

2. Inserta un fotograma clave en el fotograma 51 e inserta otro fotograma clave en el fotograma 86.

   Colocarás el video del director del zoológico al final de la introducción musical al mismo tiempo que aparece la acción de detener (fotograma 51). El fotograma clave en el fotograma 86 asegura que el video del director del zoológico desaparezca del Escenario cuando aparezcan los videos de animales.

   3. Selecciona el fotograma clave en el fotograma 51.

   4. Selecciona Archivo > Importar > Importar video.

   5. En el asistente para importar video, selecciona En tu computadora y haz clic en Examinar. Selecciona el archivo Popup.flv en la carpeta Lesson09/09Start y haz clic en Abrir.

   6. Selecciona Cargar video externo con componente de reproducción. Haz clic en Siguiente o Continuar.

   7. Elige Ninguna para la máscara. Haz clic en Siguiente o Continuar.

   8. Haz clic en Finalizar para colocar el video.

      El video del director del zoológico con un fondo transparente aparece en el Escenario. Mueve el video para que su borde inferior se alinee con el borde superior de la barra de navegación. Haz que x=260 en el panel Propiedades.

   9. Selecciona Control > Probar.

      Después de la introducción musical, aparece el director del zoológico y da una breve charla. Si haces clic en uno de los botones de video de animales, el video emergente se elimina de la Línea de tiempo. Si tu video no se reproduce, asegúrate de que tu archivo de video esté en la misma carpeta que tu archivo de proyecto FLA.

   Nota: Si no detienes un video antes de navegar a otro fotograma clave que contiene un segundo video, el audio puede superponerse. Una forma de evitar la superposición de sonidos es usar el comando SoundMixer.stopAll() para detener todos los sonidos antes de iniciar un nuevo video. El ActionScript en el primer fotograma clave de la capa de acciones en tu archivo 09_workingcopy.fla contiene el código correcto para detener todos los sonidos antes de navegar a un nuevo video de animales.

   Incrustando video

   En la sección anterior, utilizaste el componente FLVPlayback para reproducir un video externo que está en formato MP4, codificado en H.264. Otra forma de integrar video en Animate es usar video incrustado. El video incrustado requiere el formato FLV más antiguo y es mejor solo para clips muy cortos. El archivo FLV se guarda en tu biblioteca y puedes arrastrarlo desde el panel Biblioteca cuando quieras colocarlo en la Línea de tiempo. El video se reproduce siempre que haya suficientes fotogramas en tu Línea de tiempo.

   Ten en cuenta las siguientes limitaciones del video incrustado: Animate no puede mantener la sincronización de audio en video incrustado que se ejecuta durante más de 120 segundos. La longitud máxima de las películas incrustadas es la longitud máxima de cualquier línea de tiempo, que es de 16 000 fotogramas. Otro inconveniente de incrustar tu video es el aumento en el tamaño de tu proyecto de Animate, lo que hace que probar la película (Control > Probar) sea un proceso más largo y las sesiones de creación sean más tediosas.

   Debido a que el FLV incrustado se reproduce dentro de tu proyecto de Animate, es de vital importancia que tu FLV tenga la misma velocidad de fotogramas que tu archivo de Animate. De lo contrario, tu video incrustado no se reproducirá a la velocidad prevista. Para asegurarte de que tu FLV tenga la misma velocidad de fotogramas que tu FLA, asegúrate de establecer la velocidad de fotogramas correcta en la pestaña Video de Adobe Media Encoder. Dado que el formato FLV no es compatible con Adobe Media Encoder CC 2014 o posterior, debes usar una versión anterior de Adobe Media Encoder para convertir tus archivos de video a FLV. En esta sección, el archivo de video con formato FLV ya se ha preparado para ti.

   Incrustando un FLV en la línea de tiempo

   Importarás un archivo FLV a Animate y lo incrustarás en la Línea de tiempo.

   1. Trabajando en el archivo 09_workingcopy.fla, selecciona el primer fotograma de la capa de video emergente.

   2. Selecciona Archivo > Importar > Importar video. En el asistente para importar video, selecciona En tu computadora y haz clic en Examinar. Selecciona el archivo polarbear.flv en la carpeta Lesson09/09Start y haz clic en Abrir.

   3. En el asistente para importar video, selecciona Incrustar FLV en SWF y reproducir en la línea de tiempo. Haz clic en Siguiente o Continuar.

   4. Anula la selección de Expandir línea de tiempo si es necesario y anula la selección de Incluir audio. Haz clic en Siguiente o Continuar.

   5. Haz clic en Finalizar para importar el video.

      El video del oso polar aparece en el Escenario. Usa la herramienta Selección para moverlo al lado izquierdo del Escenario.

      El FLV también aparece en tu panel Biblioteca.

   6. Selecciona Control > Probar para ver el archivo de video incrustado reproducirse desde el fotograma 1 hasta el fotograma 49.

   Nota: Este video del oso polar no tiene audio. Si tienes un video que contiene audio, no podrás escuchar el audio en el entorno de creación para videos incrustados. Para escuchar el audio, debes seleccionar Control > Probar.

   Usando video incrustado

   Es útil pensar en el video incrustado como un símbolo de varios fotogramas, muy parecido a un símbolo con una animación anidada. Puedes convertir un video incrustado a un símbolo de clip de película y luego aplicarle una interpolación de movimiento para crear efectos interesantes.

   A continuación, aplicarás una interpolación de movimiento al video incrustado para que se desvanezca elegantemente justo antes de que aparezca el director del zoológico y hable.

   1. Selecciona el video incrustado del oso polar en el Escenario; luego haz clic con el botón derecho y selecciona Crear interpolación de movimiento.

   2. Una alerta te pregunta si quieres convertir el video incrustado a un símbolo para que pueda aplicar una interpolación de movimiento. Haz clic en Aceptar.

   3. Animate te pregunta si debe agregar suficientes fotogramas dentro del símbolo de clip de película para que se pueda reproducir todo el video. Haz clic en Sí.

      Se crea una interpolación de movimiento en la capa.

   4. Haz clic con el botón derecho en el fotograma 30 de la capa de video emergente y selecciona Insertar fotograma clave > Todos (F6).

   5. Mientras tu cabezal de reproducción todavía está en el fotograma 30, selecciona el clip de película que contiene el video incrustado en el Escenario y, en el panel Propiedades, en la sección Efecto de color, selecciona Alfa en el menú Estilo y establece el valor Alfa en 100%.

   6. Mueve el cabezal de reproducción en la Línea de tiempo al fotograma 50.

   7. Selecciona el clip de película que contiene el video incrustado en el Escenario y, en el panel Propiedades, en la sección Efecto de color, cambia el valor Alfa a 0%.

   Nota: Para obtener información sobre cómo exportar video a diferentes formatos para una variedad de plataformas, consulta "Exportar video desde Animate" en el Suplemento de esta lección.

   Animate inserta un nuevo fotograma clave en el fotograma 50 con el valor Alfa para tu clip de película seleccionado en 0%. La instancia se desvanece del fotograma 30 al fotograma 50.

   8. Selecciona Control > Probar para ver el video incrustado reproducirse y desvanecerse.

   ¡Tu quiosco interactivo del zoológico está completo!

   Preguntas de repaso

   1. ¿Cómo puedes editar la longitud de un clip de sonido?

   2. ¿Qué es una máscara para un video?

   3. ¿Cuál es el formato correcto para usar video en un documento HTML5 Canvas?

   4. ¿Cuál es el formato de video correcto si quieres incrustar un video en un documento ActionScript 3.0 o AIR?

   5. ¿Cómo exportas una animación de Animate a un video que sea compatible con un dispositivo específico?

   Respuestas de repaso

   1. Para editar la longitud de un clip de sonido, selecciona el fotograma clave que lo contiene y haz clic en el botón Editar envolvente de sonido en el panel Propiedades. Luego, mueve el control deslizante de tiempo en el cuadro de diálogo Editar envolvente para recortar el sonido desde el principio o desde el final.

   2. La máscara es la combinación de funcionalidad y apariencia de los controles de video, como los botones Reproducir, Avanzar rápidamente y Pausar. Puedes elegir entre una amplia gama de combinaciones con los botones en diferentes posiciones, y puedes personalizar la máscara con un color diferente o un nivel de transparencia. Si no quieres que los espectadores puedan controlar el video, selecciona Ninguna en el menú Máscara.

   3. Para reproducir video con el componente de reproducción de video de Animate, los archivos de video deben estar codificados en formato H.264. Adobe Media Encoder CC, una aplicación separada, te permite importar muchos tipos de tipos de medios y recortar, recortar y exportar a un archivo de video MP4 codificado en H.264.

   4. Para incrustar video en un documento ActionScript 3.0, los archivos de video deben estar codificados en formato FLV, un códec más antiguo.

   5. En Animate CC, puedes exportar una animación como video seleccionando Archivo > Exportar > Exportar video. El video se puede exportar con o sin Adobe Media Encoder. En Media Encoder, puedes configurar las opciones de codificación o elegir opciones preestablecidas que se dirijan a varias plataformas, como Amazon Kindle, Barnes and Noble Nook, Apple iPhone, Google Android y otros dispositivos.