6. Animar formas y usar máscaras

Resumen de la lección

En esta lección, aprenderás a hacer lo siguiente:

Animar formas con interpolaciones de forma.
Usar sugerencias de forma para refinar las interpolaciones de forma.
Interpolar degradados de relleno.
Ver contornos de piel de cebolla.
Aplicar aceleración a las interpolaciones de forma.
Crear y usar máscaras.
Entender las limitaciones de las máscaras.
Animar las capas Máscara y Enmascarada.

Esta lección te llevará aproximadamente 2 horas y media 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.

Puedes transformar fácilmente (crear cambios orgánicos en la forma) con interpolaciones de forma. Las máscaras proporcionan una forma de mostrar selectivamente solo partes de una capa. Juntas, te permiten añadir efectos más sofisticados a tus animaciones.

Introducción

Comenzarás la lección viendo el logotipo animado que crearás a medida que aprendas sobre las interpolaciones de forma y las máscaras en Adobe Animate CC.

Haz doble clic en el archivo 06End.html en la carpeta Lesson06/06End para reproducir la animación en un navegador.

El proyecto es una animación de una llama parpadeando en la parte superior del nombre de una empresa ficticia. No solo la forma de la llama cambia constantemente, sino también el degradado radial de relleno dentro de la llama. Un degradado lineal recorre las letras del nombre de la empresa de izquierda a derecha. En esta lección, animarás tanto la llama como los colores que se mueven a través de las letras.
Cierra tu navegador. Haz doble clic en el archivo 06Start.fla en la carpeta Lesson06/06Start para abrir el archivo de proyecto inicial en Animate.
Selecciona Archivo > Guardar como. Nombra el archivo 06_workingcopy.fla y guárdalo en la carpeta 06Start. Guardar una copia de trabajo asegura que el archivo de inicio original estará disponible si quieres empezar de nuevo.

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. Consulta la Introducción al principio del libro.

Animando formas

En las dos lecciones anteriores, aprendiste a crear animaciones con instancias de símbolos. Podrías animar el movimiento, la escala, la rotación, el efecto de color o los filtros aplicados a las instancias de símbolos. Sin embargo, no podías animar los contornos reales de un gráfico. Por ejemplo, crear una animación de la superficie ondulada del océano o el movimiento serpenteante del cuerpo de una serpiente es difícil, si no imposible, con interpolaciones de movimiento. Para hacer algo más orgánico, tienes que usar la interpolación de forma.

La interpolación de forma es una técnica para interpolar cambios de trazo y relleno entre diferentes fotogramas clave. Las interpolaciones de forma permiten transformar suavemente una forma en otra. Cualquier tipo de animación que requiera que el trazo o el relleno de una forma cambie, por ejemplo, la animación de nubes, agua o fuego, es un candidato perfecto para la interpolación de forma.

Debido a que la interpolación de forma se aplica solo a las formas, no puedes usar grupos, instancias de símbolos o imágenes de mapa de bits.

Entendiendo el archivo del proyecto

El archivo 06Start.fla es un documento de ActionScript 3.0 que contiene la mayoría de los gráficos ya completados y organizados en diferentes capas. Sin embargo, el archivo es estático y tú añadirás la animación.

La capa de texto está en la parte superior y contiene el nombre de la empresa, "Firestarter". La capa de llama contiene la llama, y la capa inferior, llamada brillo, contiene un degradado radial para proporcionar un brillo suave.

No hay recursos en la biblioteca.

Creando una interpolación de forma

Para crear el efecto de llama parpadeante, animarás los cambios ondulantes en la forma típica de lágrima de una llama. Te basarás en la interpolación de forma para manejar la transformación suave de una forma a la siguiente, así como los cambios graduales de color. Una interpolación de forma requiere al menos dos fotogramas clave en la misma capa. El fotograma clave inicial contiene una forma dibujada con las herramientas de dibujo en Animate o importada desde Adobe Illustrator. El fotograma clave final también contiene una forma. Una interpolación de forma interpola los cambios suaves entre el fotograma clave inicial y el fotograma clave final.

Establecer fotogramas clave que contengan diferentes formas

En los siguientes pasos, animarás la llama que se colocará encima del nombre de la empresa.

Selecciona el fotograma 40 para las tres capas.
Selecciona Insertar > Línea de tiempo > Fotograma (F5).

Se añaden fotogramas a las tres capas hasta el fotograma 40 para definir la longitud total de la animación.
Bloquea la capa de texto y la capa de brillo. Esto evita que selecciones o muevas accidentalmente los gráficos en esas capas.
Después de asegurarte de que ninguno de los fotogramas está seleccionado, haz clic con el botón derecho en el fotograma 40 en la capa de llama y selecciona Insertar fotograma clave, o selecciona Insertar > Línea de tiempo > Fotograma clave (F6). El contenido del fotograma clave anterior en el fotograma 1 se copia en el nuevo fotograma clave.

Ahora tienes dos fotogramas clave en la Línea de tiempo en la capa de llama, en el fotograma 1 y en el fotograma 40. A continuación, cambiarás la forma de la llama en el fotograma clave final.
Selecciona la herramienta Selección.
Haz clic fuera de la forma para deseleccionarla. Mueve el cursor cerca de los contornos de la forma y arrastra los contornos de la llama para hacerla más delgada.

El fotograma clave inicial y el fotograma clave final ahora contienen diferentes formas: una llama gruesa en el fotograma clave inicial y una llama delgada en el fotograma clave final en el fotograma 40.

Aplicar la interpolación de forma

A continuación, aplicarás una interpolación de forma entre los fotogramas clave para crear las transiciones suaves.

Haz clic en cualquier fotograma entre el fotograma clave inicial y el fotograma clave final en la capa de llama.
Haz clic con el botón derecho y selecciona Crear interpolación de forma. O bien, en el menú Insertar, selecciona Interpolación de forma.

Flash aplica una interpolación de forma entre los dos fotogramas clave, lo que se indica mediante una flecha negra que apunta hacia adelante y un relleno verde en el intervalo de la interpolación.
Observa tu animación seleccionando Control > Reproducir (Intro/Retorno) o haciendo clic en el botón Reproducir en la parte inferior de la Línea de tiempo.

Has creado una animación suave entre los fotogramas clave en la capa de llama, transformando la forma de la primera llama en la forma de la segunda llama.

Nota: No te preocupes si tu llama no se transforma exactamente como quieres. Los pequeños cambios entre fotogramas clave funcionan mejor. Tu llama puede girar mientras pasa de la primera forma a la segunda. Tendrás la oportunidad de refinar la interpolación de forma más adelante en esta lección con sugerencias de forma.

Tipos de fusión

En el panel Propiedades, puedes modificar tu interpolación de forma eligiendo la opción Distributiva o Angular para Fusión. Estas dos opciones determinan cómo Animate realiza las interpolaciones para cambiar las formas de un fotograma clave al siguiente.

La opción Distributiva es la predeterminada y funciona bien para la mayoría de los casos. Crea animaciones donde las formas intermedias son más suaves.

Usa la fusión Angular si tus formas tienen muchos puntos y líneas rectas. Flash intenta preservar las esquinas y líneas aparentes en las formas intermedias.

Cambiando el ritmo

Los fotogramas clave de una interpolación de forma se pueden mover fácilmente a lo largo de la Línea de tiempo para cambiar la sincronización o el ritmo de la animación.

Moviendo un fotograma clave

La llama se transforma lentamente de una forma a otra durante un período de 40 fotogramas. Si quieres que la llama realice el cambio de forma más rápidamente, debes mover los fotogramas clave más cerca.

Selecciona el último fotograma clave de la interpolación de forma en la capa de llama.
Arrastra el último fotograma clave al fotograma 6.

La interpolación de forma se acorta.
Pulsa Intro/Retorno para reproducir tu animación.

La llama parpadea rápidamente y luego permanece estática hasta el fotograma 40.

Añadiendo más interpolaciones de forma

Puedes añadir interpolaciones de forma creando más fotogramas clave. Cada interpolación de forma simplemente requiere dos fotogramas clave para definir su estado inicial y su estado final.

Insertar fotogramas clave adicionales

Quieres que la llama cambie de forma continuamente, como lo haría una llama real. Añadirás más fotogramas clave a lo largo de la animación y aplicarás interpolaciones de forma entre todos los fotogramas clave.

Haz clic con el botón derecho en el fotograma 17 en la capa de llama y selecciona Insertar fotograma clave. O bien, selecciona Insertar > Línea de tiempo > Fotograma clave (F6).

El contenido del fotograma clave anterior se copia en el segundo fotograma clave.
Haz clic con el botón derecho en el fotograma 22 en la capa de llama y selecciona Insertar fotograma clave (F6).

El contenido del fotograma clave anterior se copia en el nuevo fotograma clave.
Continúa insertando fotogramas clave en los fotogramas 27, 33 y 40.
Tu Línea de tiempo ahora tiene siete fotogramas clave en la capa de llama, con una interpolación de forma entre el primer y segundo fotograma clave.
1. Mueve el cabezal de reproducción rojo al fotograma 17.
2. Selecciona la herramienta Selección.
3. Haz clic fuera de la forma para deseleccionarla. Arrastra los contornos de la llama para crear otra variación en su forma. Puedes hacer la base más gruesa o cambiar la curvatura de la punta para que se incline hacia la izquierda o hacia la derecha.
4. Modifica las formas de la llama en cada uno de los fotogramas clave recién insertados para crear variaciones sutiles.
Extendiendo las interpolaciones de forma
El siguiente paso es extender la interpolación de forma para que la llama se transforme de una forma a la siguiente.
1. Haz clic con el botón derecho en cualquier fotograma entre el segundo y tercer fotograma clave y selecciona Crear interpolación de forma. O selecciona Insertar > Interpolación de forma.
  
  Aparece una flecha negra que apunta hacia adelante sobre un fondo verde entre los dos fotogramas clave, lo que muestra que has aplicado una interpolación de forma.
2. Continúa insertando interpolaciones de forma entre todos los fotogramas clave.
  
  Deberías tener seis interpolaciones de forma en la capa de llama.
3. Pulsa Intro/Retorno para ver la animación.
  
  Tu llama parpadea de un lado a otro durante la duración de la animación. Dependiendo de cuán extensas hayan sido tus modificaciones a la llama, tu llama puede sufrir algunas contorsiones extrañas entre fotogramas clave, por ejemplo, voltearse o girar de forma impredecible. ¡No te preocupes! Tendrás la oportunidad de refinar tu animación más adelante en la lección con sugerencias de forma.
Interpolaciones rotas
Cada interpolación de forma necesita un fotograma clave inicial y final. Si falta el último fotograma clave de una interpolación de forma, Flash muestra la interpolación rota como una línea negra punteada (en lugar de una flecha sólida).
Inserta un fotograma clave para arreglar la interpolación.
Creando una animación en bucle
Tu llama debería parpadear de un lado a otro continuamente mientras el logotipo esté en pantalla. Puedes crear un bucle sin interrupciones haciendo que el primer y último fotograma clave sean idénticos y colocando la animación dentro de un símbolo de clip de película. La línea de tiempo de un clip de película se reproduce en bucle continuamente, independientemente de la Línea de tiempo principal.
Duplicando fotogramas clave
Haz que el primer fotograma clave sea idéntico al último fotograma clave duplicando su contenido.
1. Haz clic con el botón derecho en el primer fotograma clave en la capa de llama y selecciona Copiar fotogramas. O selecciona Editar > Línea de tiempo > Copiar fotogramas. El contenido del primer fotograma clave se coloca en tu portapapeles.
2. Haz clic con el botón derecho en el último fotograma clave en la capa de llama y selecciona Pegar fotogramas. O selecciona Editar > Línea de tiempo > Pegar fotogramas.
  
  El primer y último fotograma clave ahora contienen formas de llama idénticas.
  
  Consejo: Puedes duplicar rápidamente fotogramas clave seleccionando primero un fotograma clave y luego arrastrando el fotograma clave con Alt/Opción a una nueva posición.
Previsualizando el bucle
Usa el botón Bucle en la parte inferior de la Línea de tiempo para previsualizar tu animación.
1. Haz clic en el botón Bucle en la parte inferior de la Línea de tiempo o selecciona Control > Reproducción en bucle (Alt+Mayús+L/Opción+Mayús+L) para habilitar la reproducción continua cuando reproduces la película.
  
  Aparecen marcadores en el encabezado de la Línea de tiempo que indican el rango de fotogramas que se reproducen en bucle durante la reproducción. A continuación, ajusta los marcadores para extender el bucle e incluir toda la película.
  
  Nota: La opción Reproducción en bucle solo se reproduce en bucle en el entorno de creación de Animate CC y no cuando se publica. Para crear un bucle, coloca tu animación en un símbolo de clip de película o usa un comando this.gotoAndPlay() para documentos de ActionScript 3.0 o para un documento HTML5 Canvas, como se describe en las lecciones posteriores sobre interactividad.
2. Extiende los marcadores para incluir todos los fotogramas en tu Línea de tiempo (fotogramas del 1 al 40) o haz clic en el botón Modificar marcadores y selecciona Rango de marcadores Todos.
3. Pulsa Intro/Retorno para probar la animación.
  
  La animación de la llama se reproduce y se repite en bucle continuamente. Haz clic en el botón Pausa o pulsa Intro/Retorno de nuevo para detener la animación.
Insertando la animación en un clip de película
Cuando tu animación se reproduce en un símbolo de clip de película, la animación se reproduce en bucle automáticamente.
1. Selecciona todos los fotogramas en la capa de llama, haz clic con el botón derecho y selecciona Cortar fotogramas. O bien, selecciona Editar > Línea de tiempo > Cortar fotogramas.
  
  Los fotogramas clave y las interpolaciones de forma se eliminan de la Línea de tiempo y se colocan en el portapapeles.
2. Selecciona Insertar > Nuevo símbolo (Ctrl+F8/Comando+F8).
  
  Aparece el cuadro de diálogo Crear nuevo símbolo.
3. Introduce llama como nombre del símbolo y selecciona Clip de película como Tipo. Haz clic en Aceptar.
  
  Se crea un nuevo símbolo de clip de película y se abre en modo de edición de símbolos.
4. Haz clic con el botón derecho en el primer fotograma en la línea de tiempo de tu clip de película y selecciona Pegar fotogramas. O bien, selecciona Editar > Línea de tiempo > Pegar fotogramas.
  
  La animación de la llama de la Línea de tiempo principal se pega en la línea de tiempo de tu símbolo de clip de película.
5. Haz clic en el botón Escena 1 en la barra Editar en la parte superior del Escenario o selecciona Editar > Editar documento (Ctrl+E/Comando+E).
  
  Sales del modo de edición de símbolos y regresas a la Línea de tiempo principal.
6. Selecciona la capa de llama, que actualmente está vacía. Arrastra tu símbolo de clip de película de llama recién creado desde el panel Biblioteca al Escenario.
  
  Aparece una instancia del símbolo de clip de película de llama en el Escenario.
7. Selecciona Control > Probar (Ctrl+Intro/Comando+Retorno).
  
  Flash exporta el SWF en una nueva ventana, donde puedes previsualizar la animación. La llama parpadea continuamente en un bucle sin interrupciones.
Interpolación de forma con trazos de ancho variable
Cualquier aspecto de una forma se puede interpolar, incluidos los nuevos anchos variables del trazo de una forma. En la Lección 2, aprendiste a usar la herramienta Trazo de ancho variable para crear líneas con variaciones gruesas y delgadas para obtener gráficos más expresivos. Puedes cambiar el ancho de los trazos en diferentes fotogramas clave, y cuando aplicas una interpolación de forma entre esos fotogramas clave, Flash crea interpolaciones suaves de esos anchos de trazo.
Teniendo en cuenta la capacidad de animar el grosor del trazo de una forma, los contornos del trazo en sí y el relleno interior de una forma, las posibilidades creativas son casi ilimitadas.
Usando sugerencias de forma
Animate CC crea las transiciones suaves entre fotogramas clave de tu interpolación de forma, pero a veces los resultados son impredecibles. Tus formas pueden pasar por extrañas contorsiones, giros y rotaciones para llegar de un fotograma clave a otro. Puede que te guste el efecto, pero la mayoría de las veces querrás mantener el control de las transformaciones. El uso de sugerencias de forma puede ayudar a refinar los cambios de forma.
Las sugerencias de forma obligan a Animate a asignar puntos en la forma inicial a los puntos correspondientes en la forma final. Al colocar varias sugerencias de forma, puedes controlar con mayor precisión cómo aparece una interpolación de forma.
Añadiendo sugerencias de forma
Ahora añadirás sugerencias de forma a la forma de la llama para modificar la forma en que se transforma de una forma a la siguiente.

Haz doble clic en el símbolo de clip de película de llama en la biblioteca para entrar en el modo de edición de símbolos.

Selecciona el primer fotograma clave de la interpolación de forma en la capa de llama.
Selecciona Modificar > Forma > Añadir sugerencia de forma (Ctrl+Mayús+H/Comando+Mayús+H).

Aparece una letra "a" con un círculo rojo en el Escenario. La letra con un círculo representa la primera sugerencia de forma.
Selecciona la herramienta Selección y asegúrate de que Ajustar a objetos esté seleccionado.

El icono de imán en la parte inferior del panel Herramientas debería estar presionado. Ajustar a objetos asegura que los objetos se ajusten entre sí al moverlos o modificarlos.
Arrastra la letra con un círculo a la punta de la llama.

Consejo: Las sugerencias de forma deben colocarse en los bordes de las formas.
Selecciona Modificar > Forma > Añadir sugerencia de forma de nuevo para crear una segunda sugerencia de forma.

Aparece una "b" con un círculo rojo en el Escenario.
Arrastra la sugerencia de forma "b" a la parte inferior de la forma de la llama.

Tienes dos sugerencias de forma asignadas a diferentes puntos en la forma en el primer fotograma clave.
Selecciona el siguiente fotograma clave de la capa de llama (fotograma 6).

Aparece una "b" con un círculo rojo correspondiente en el Escenario, ocultando una sugerencia de forma "a" que está directamente debajo.
Arrastra las letras con un círculo a los puntos correspondientes en la forma en el segundo fotograma clave.

La sugerencia "a" va en la parte superior de la llama y la sugerencia "b" va en la parte inferior de la llama.

Las sugerencias de forma se vuelven verdes, lo que indica que has colocado la sugerencia de forma correctamente.
Selecciona el primer fotograma clave.

Ten en cuenta que las sugerencias de forma iniciales se han vuelto amarillas, lo que indica que están colocadas correctamente. Las sugerencias de forma en el fotograma clave inicial se vuelven amarillas y las del fotograma clave final se vuelven verdes cuando se colocan correctamente.
Desplaza el cabezal de reproducción a través de la primera interpolación de forma en la Línea de tiempo para ver el efecto de las sugerencias de forma en la interpolación de forma.

Las sugerencias de forma obligan a que la punta de la llama en el primer fotograma clave se asigne a la punta de la llama en el segundo fotograma clave y que las partes inferiores se asignen entre sí. Esto restringe las transformaciones.

Para demostrar el valor de las sugerencias de forma, puedes crear deliberadamente un desastre con tus interpolaciones de forma. En el fotograma clave final, coloca la sugerencia "b" en la parte superior de la llama y la sugerencia "a" en la parte inferior.

Animate obliga a que la punta de la llama se interpole a la parte inferior de la llama y viceversa. El resultado es un extraño movimiento de volteo cuando Animate intenta realizar la transformación. Vuelve a colocar la "a" en la parte superior y la "b" en la parte inferior cuando hayas terminado de experimentar.

Consejo: Puedes añadir un máximo de 26 sugerencias de forma a cualquier interpolación de forma. Asegúrate de añadirlas de forma coherente en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj para obtener mejores resultados.

Eliminando sugerencias de forma

Si has añadido demasiadas sugerencias de forma, puedes eliminar fácilmente las innecesarias. Eliminar una sugerencia de forma en un fotograma clave eliminará su sugerencia de forma correspondiente en el otro fotograma clave.

Arrastra una sugerencia de forma individual completamente fuera del Escenario y la mesa de trabajo.
Selecciona Modificar > Forma > Eliminar todas las sugerencias para eliminar todas las sugerencias de forma.

Solo el contenido de los fotogramas clave de una interpolación de forma se muestra completamente renderizado. Todos los demás fotogramas se muestran como contornos. Para ver todos los fotogramas completamente renderizados, usa la piel de cebolla, como se describe en el siguiente ejercicio.

Previsualizando animaciones con piel de cebolla

A veces es útil ver cómo tus formas están cambiando de un fotograma clave a otro en el Escenario a la vez. Ver cómo las formas cambian gradualmente te permite hacer ajustes más inteligentes a tu animación. Puedes hacerlo usando la opción de piel de cebolla, disponible en la parte inferior de la Línea de tiempo.

La piel de cebolla muestra el contenido de los fotogramas antes y después del fotograma actualmente seleccionado. El término "piel de cebolla" proviene del mundo de la animación tradicional dibujada a mano, en la que los animadores dibujan en papel de calco fino y semitransparente conocido como piel de cebolla. Una caja de luz ilumina los dibujos por detrás para ayudar a verlos a través de varias hojas. Al crear una secuencia de acción, los animadores hojean rápidamente entre los dibujos que sostienen entre sus dedos. Esto les permite ver cómo los dibujos se conectan suavemente entre sí.

Activando la piel de cebolla

Hay dos modos para la piel de cebolla: piel de cebolla y contornos de piel de cebolla. Aunque ambos muestran fotogramas anteriores y futuros, la piel de cebolla muestra los gráficos completamente renderizados, mientras que los contornos de piel de cebolla solo muestran los contornos de tus gráficos. En esta tarea, usarás contornos de piel de cebolla.

Haz clic en el botón Contornos de piel de cebolla en la parte inferior de la Línea de tiempo.

Animate muestra varios contornos de la llama, con el fotograma actualmente seleccionado en rojo. Los dos fotogramas anteriores se muestran en azul y los dos fotogramas futuros se muestran en verde. Los contornos de la llama se desvanecen cuanto más lejos está del fotograma actual. En la Línea de tiempo, Animate muestra marcadores para delimitar el fotograma actualmente seleccionado. El corchete marcado en azul (a la izquierda del cabezal de reproducción) indica cuántos fotogramas anteriores se muestran en el Escenario, y el corchete marcado en verde (a la derecha del cabezal de reproducción) indica cuántos fotogramas futuros se muestran.
Mueve el cabezal de reproducción a un fotograma diferente.

Animate mantiene los marcadores alrededor del cabezal de reproducción sin importar a dónde lo muevas, siempre mostrando el mismo número de fotogramas detrás y delante.
Haz clic en el botón Piel de cebolla en la parte inferior de la Línea de tiempo.

La piel de cebolla cambia del modo de contorno al modo de piel de cebolla estándar, mostrando las pieles de cebolla de tu llama completamente renderizadas. Las llamas de los fotogramas anteriores se tiñen de azul y las llamas de los fotogramas futuros se tiñen de verde.

Consejo: Incluso puedes desplazar el cabezal de reproducción hacia adelante y hacia atrás a lo largo de la Línea de tiempo para ver las imágenes fantasmales de las pieles de cebolla moviéndose junto con la animación. Sin embargo, no puedes ver las pieles de cebolla durante la reproducción normal.

Ajustando los marcadores

Puedes mover cualquier marcador para mostrar más o menos fotogramas de piel de cebolla.

Arrastra el marcador azul para ajustar el número de fotogramas de piel de cebolla pasados que se muestran.
Arrastra el marcador verde para ajustar el número de fotogramas futuros que se muestran.
Mantén pulsada la tecla Ctrl/Comando mientras arrastras cualquier marcador para mover los marcadores pasado y futuro en cantidades iguales.
Mantén pulsada la tecla Mayús mientras arrastras cualquier marcador para mover el rango de piel de cebolla a un lugar diferente en la Línea de tiempo (siempre que aún abarque el cabezal de reproducción).
Haz clic en el botón de menú Modificar marcadores para seleccionar una opción de marcador preestablecida. Por ejemplo, puedes seleccionar Rango de marcadores 2 o Rango de marcadores 5 para que los marcadores muestren dos o cinco fotogramas delante y detrás del fotograma actual.

Personalizando los colores de la piel de cebolla

Si no te gusta el código de colores verde y azul de los fotogramas anteriores y futuros, puedes cambiarlos en las preferencias.

Selecciona Editar > Preferencias (Windows)/Animate CC > Preferencias (Mac).

Aparece el cuadro de diálogo Preferencias.
En la sección Color de piel de cebolla, haz clic en los cuadros de color para Pasado, Presente o Futuro para elegir nuevos colores.

Animando el color

Las interpolaciones de forma interpolan todos los aspectos de una forma, lo que significa que tanto el trazo como el relleno de una forma se pueden interpolar. Hasta ahora, has modificado el trazo, o contornos, de la llama. En la siguiente sección, modificarás el relleno para que el degradado de color pueda cambiar, tal vez brillar más y ser más intenso en algunos puntos de la animación.

Ajustando los rellenos de degradado

Usa la herramienta Transformación de degradado para cambiar la forma en que se aplica el degradado de color a una forma y usa el panel Color para cambiar los colores reales utilizados en un degradado.

Si aún no estás en el modo de edición de símbolos para tu símbolo de llama, haz doble clic en el símbolo de clip de película de llama en la biblioteca para editarlo.
Selecciona el segundo fotograma clave en la capa de llama (fotograma 6).
Selecciona la herramienta Transformación de degradado, que está agrupada con la herramienta Transformación libre en el panel Herramientas.

Los puntos de control para la herramienta Transformación de degradado aparecen en el relleno de degradado de la llama. Los distintos puntos de control te permiten estirar, rotar y mover el punto focal del degradado dentro del relleno.
Usa los puntos de control para ajustar el degradado de color en la base de la llama. Reduce el tamaño del degradado, hazlo más ancho y colócalo más abajo en la llama, y mueve el punto focal (representado por un pequeño triángulo) del degradado hacia un lado.

El núcleo naranja de tu llama aparece más abajo y más intenso porque los colores se distribuyen en un área más pequeña.
Mueve el cabezal de reproducción a lo largo de la Línea de tiempo entre el primer y segundo fotograma clave.

La interpolación de forma anima automáticamente los colores dentro de la llama, así como sus contornos.
Selecciona el tercer fotograma clave en la capa de llama (fotograma 17). En este fotograma, ajustarás el color real del degradado.
Selecciona la herramienta Selección y haz clic en el relleno de la llama en el Escenario.
Abre el panel Color (Ventana > Color).

Aparece el panel Color, que muestra los colores de degradado del relleno seleccionado.
Haz clic en el marcador de color interno, que actualmente es amarillo.
Cambia el color a un rosa intenso (#F109EE).

El color central del degradado se vuelve rosa.
Mueve el cabezal de reproducción a lo largo de la Línea de tiempo entre el segundo y tercer fotograma clave.

La interpolación de forma anima automáticamente el color central en el degradado de amarillo a rosa. Experimenta con los otros fotogramas clave modificando el relleno de degradado y observa qué tipo de efectos interesantes puedes aplicar a tu llama parpadeante.

Nota: Las interpolaciones de forma pueden animar suavemente colores sólidos o degradados de color, pero no pueden animar entre diferentes tipos de degradados. Por ejemplo, no puedes interpolar un degradado lineal en un degradado radial.

Creando y usando máscaras

El enmascaramiento es una forma de ocultar y mostrar selectivamente contenido en una capa. Te permite controlar el contenido que ve tu audiencia. Por ejemplo, puedes crear una máscara circular y permitir que tu audiencia vea solo a través del área circular para obtener un efecto de ojo de cerradura o foco. En Animate, colocas una máscara en una capa y el contenido enmascarado en una capa debajo de ella.

Para el logotipo animado que estás creando en esta lección, harás que el texto sea un poco más interesante visualmente usando el texto en sí como máscara.

Definir la capa de máscara

Crearás una máscara a partir del texto "Fire starter" que revelará una imagen de fuego debajo.

Regresa a la Línea de tiempo principal. Desbloquea la capa de texto. Haz doble clic en el icono delante del nombre de la capa de texto o selecciona la capa de texto y selecciona Modificar > Línea de tiempo > Propiedades de capa.

Aparece el cuadro de diálogo Propiedades de capa.
Selecciona Máscara y haz clic en Aceptar.

La capa de texto se convierte en una capa de máscara, indicada por el icono de máscara delante del nombre de la capa. Cualquier cosa en esta capa actuará como una máscara para una capa enmascarada debajo de ella. Para esta lección, estamos usando el texto que ya está en su lugar como máscara, pero la máscara puede ser cualquier forma rellena. El color del relleno no importa. Lo importante para Animate es el tamaño, la ubicación y los contornos de la forma. La forma será la "mirilla" a través de la cual verás el contenido en la capa de abajo. Puedes usar cualquiera de las herramientas de dibujo o texto para crear el relleno de tu máscara.

Consejo: Las máscaras no reconocen los trazos, así que usa solo rellenos en la capa de máscara. El texto creado con la herramienta Texto también funciona como máscara.

Nota: Animate no reconoce diferentes niveles Alfa en una máscara creada en una línea de tiempo, por lo que un relleno semitransparente en la capa de máscara tiene el mismo efecto que un relleno opaco, y los bordes siempre serán duros. Sin embargo, en un documento de ActionScript 3.0, puedes crear dinámicamente máscaras que permitan transparencias con código ActionScript.

Crear la capa enmascarada

La capa enmascarada siempre está debajo de la capa de máscara.

Haz clic en el botón Nueva capa o selecciona Insertar > Línea de tiempo > Capa.

Aparece una nueva capa.
Cambia el nombre de la capa a efecto de fuego.
Arrastra la capa efecto de fuego debajo de la capa de máscara (llamada "texto") y un poco hacia la derecha para que quede indentada.

La capa efecto de fuego se convierte en una capa enmascarada, emparejada con la capa de máscara encima de ella. Cualquier contenido en la capa enmascarada será enmascarado por la capa encima de ella.

Consejo: También puedes hacer doble clic en una capa normal debajo de una capa de máscara, o seleccionar Modificar > Línea de tiempo > Propiedades de capa y seleccionar Enmascarada para modificar la capa en una capa enmascarada.
Selecciona Archivo > Importar > Importar al escenario y selecciona fire.jpg de la carpeta 06Start.

La imagen de mapa de bits de fuego aparece en el Escenario y las palabras aparecen sobre la imagen.

Ver los efectos de la máscara

Para ver los efectos de la capa de máscara en su capa enmascarada, bloquea ambas capas.

Haz clic en la opción Bloquear tanto para la capa de texto como para la capa efecto de fuego.

Ambas capas, máscara y enmascarada, se bloquean. Las formas de las letras en la capa de máscara revelan partes de la imagen en la capa enmascarada.

Selecciona Control > Probar.

Mientras la llama parpadea sobre el texto, las letras revelan la textura de fuego en la capa debajo de ella.

Nota: Puedes tener varias capas enmascaradas debajo de una sola capa de máscara.

Máscaras tradicionales

Puede parecer contradictorio que las formas en la capa de máscara revelen, en lugar de ocultar, el contenido en la capa enmascarada. Sin embargo, así es exactamente como funciona una máscara tradicional en fotografía o pintura. Cuando un pintor usa una máscara, la máscara protege la pintura de las salpicaduras de pintura. Cuando un fotógrafo usa una máscara en el cuarto oscuro, la máscara protege el papel fotosensible de la luz, para evitar que esas áreas se oscurezcan. Por lo tanto, pensar en una máscara como algo que protege una capa inferior enmascarada es una buena manera de recordar qué áreas están ocultas y cuáles se revelan.

Animando las capas Máscara y Enmascarada

Las letras de tu logotipo animado tienen más dramatismo ahora que has creado una máscara con una imagen de fuego detrás. Sin embargo, el cliente de este proyecto ficticio ahora exige que tenga aún más fuerza. Aunque le gusta el aspecto de las letras de fuego, quiere un efecto animado.

Afortunadamente, puedes incluir animaciones en la capa de máscara o en la capa enmascarada. Puedes crear una animación en la capa de máscara si quieres que la máscara en sí se mueva o se expanda para mostrar diferentes partes de la capa enmascarada. O bien, puedes crear una animación en la capa enmascarada si quieres que el contenido se mueva debajo de una máscara, como un paisaje que pasa zumbando por la ventana de un tren.

Añadiendo una interpolación a la capa enmascarada

Para hacer que el logotipo sea más atractivo para tu cliente, añadirás una interpolación de forma a la capa enmascarada. La interpolación de forma moverá un brillo de izquierda a derecha durante una parte de la película debajo de las letras.

Desbloquea tanto la capa de texto como la capa efecto de fuego.

Los efectos de la máscara y la capa enmascarada ya no son visibles, pero su contenido ahora es editable.
Elimina la imagen de mapa de bits del fuego en la capa efecto de fuego.
Selecciona la herramienta Rectángulo y abre el panel Color (Ventana > Color).
En el panel Color, asegúrate de que Color de relleno esté seleccionado y selecciona Degradado lineal en el menú Tipo de color.
Crea un degradado que comience con rojo a la izquierda (#FF0000), amarillo en el medio (#FFFC00) y rojo de nuevo a la derecha (#FF0000). Asegúrate de que tu configuración Alfa esté al 100% para que los colores no sean transparentes.
Crea un rectángulo en la capa efecto de fuego que abarque las letras en la capa de texto.

Selecciona la herramienta Transformación de degradado y haz clic en el relleno de tu rectángulo para seleccionarlo.

Los controles de la herramienta Transformación de degradado aparecen en el relleno del rectángulo. Usaremos esta herramienta para colocar el degradado fuera del Escenario para que pueda hacer una entrada dramática.
Arrastra el punto central del degradado para que el color amarillo aparezca en el extremo izquierdo del Escenario. El brillo amarillo entrará por la izquierda y se moverá hacia la derecha.
Haz clic con el botón derecho en el fotograma 20 en la capa efecto de fuego y selecciona Insertar fotograma clave (F6).

El contenido del fotograma clave anterior se copia en el nuevo fotograma clave.
Haz clic con el botón derecho en el último fotograma (fotograma 40) en la capa efecto de fuego y selecciona Insertar fotograma clave (F6).

El contenido del fotograma clave en el fotograma 20 se copia en el nuevo fotograma clave. Ahora tienes tres fotogramas clave en la capa efecto de fuego.
Asegúrate de que tu cabezal de reproducción todavía esté en el último fotograma (fotograma 40).
Arrastra el punto central del degradado lo suficientemente hacia la derecha para que el color amarillo sea apenas visible en el lado derecho del Escenario.
Haz clic con el botón derecho en cualquier lugar de la Línea de tiempo entre el segundo y tercer fotograma clave en la capa efecto de fuego y selecciona Crear interpolación de forma. O bien, en el menú superior, selecciona Insertar > Interpolación de forma.

El degradado de color se interpola de forma para que el brillo amarillo se mueva dentro del relleno del rectángulo de izquierda a derecha.
Observa tu animación seleccionando Control > Probar.

Mientras la llama arde sobre las letras, un suave brillo amarillo parpadea a través de las letras.

Acelerando una interpolación de forma

Las aceleraciones ayudan a que tu animación tenga una sensación de peso al permitirte añadir un componente de aceleración o desaceleración a su movimiento.

Añades una aceleración a una interpolación de forma en el panel Propiedades. Los valores de aceleración van desde -100, que indica una aceleración de entrada, hasta 100, que indica una aceleración de salida. Una aceleración de entrada hace que el movimiento comience lentamente. Una aceleración de salida ralentiza el movimiento a medida que se acerca a su fotograma clave final.

Nota: El Editor de movimiento, que es el panel avanzado integrado en la Línea de tiempo que proporciona diferentes tipos de aceleración, no está disponible para las interpolaciones de forma.

Añadiendo una aceleración de entrada

Harás que el brillo que parpadea a través de las letras del logotipo comience lentamente y luego aumente la velocidad. La aceleración de entrada ayudará a los espectadores a notar la animación antes de que continúe.

Haz clic en cualquier lugar dentro de la interpolación de forma en la capa efecto de fuego.
En el panel Propiedades, introduce -100 para el valor de Aceleración.

Animate aplica un efecto de aceleración de entrada a la interpolación de forma.
Asegúrate de que tus capas de máscara y enmascarada estén bloqueadas y selecciona Control > Probar para probar tu película.

El suave brillo amarillo parpadea a través de las letras, comenzando lentamente y luego añadiendo un poco más de sofisticación a toda la animación.

Nota: Puedes aplicar una aceleración de entrada o una aceleración de salida a una interpolación de forma, pero no ambas.

Preguntas de repaso

¿Qué es una interpolación de forma y cómo se aplica?
¿Qué son las sugerencias de forma y cómo se usan?
¿Qué indica el código de colores de los marcadores de piel de cebolla?
¿En qué se diferencia una interpolación de forma de una interpolación de movimiento?
¿Qué es una máscara y cómo se crea una?
¿Cómo se ven los efectos de una máscara?

Respuestas de repaso

Una interpolación de forma crea transiciones suaves entre fotogramas clave que contienen diferentes formas. Para aplicar una interpolación de forma, crea diferentes formas en un fotograma clave inicial y en un fotograma clave final. Luego, selecciona cualquier fotograma entre los fotogramas clave en la Línea de tiempo, haz clic con el botón derecho y selecciona Crear interpolación de forma.
Las sugerencias de forma son marcadores etiquetados que indican cómo un punto en la forma inicial de una interpolación de forma se asignará a un punto correspondiente en la forma final. Las sugerencias de forma ayudan a refinar la forma en que las formas se transformarán. Para usar sugerencias de forma, primero selecciona el fotograma clave inicial de una interpolación de forma. Selecciona Modificar > Forma > Añadir sugerencia de forma. Mueve la primera sugerencia de forma al borde de la forma. Mueve el cabezal de reproducción al fotograma clave final y mueve la sugerencia de forma correspondiente a un borde coincidente de la forma.
De forma predeterminada, Animate muestra las pieles de cebolla en fotogramas anteriores en azul y las pieles de cebolla en fotogramas futuros en verde. La piel de cebolla en el fotograma actualmente seleccionado está en rojo. Los colores se pueden personalizar en el panel Preferencias.
Una interpolación de forma usa formas, mientras que una interpolación de movimiento usa instancias de símbolos. Una interpolación de forma interpola suavemente el cambio de trazo o relleno de una forma entre dos fotogramas clave. Una interpolación de movimiento interpola suavemente los cambios en la ubicación, escala, rotación, efecto de color o efecto de filtro de una instancia de símbolo entre dos fotogramas clave.
El enmascaramiento es una forma de ocultar y mostrar selectivamente contenido en una capa. En Animate, colocas una máscara en la capa de máscara superior y el contenido en la capa debajo de ella, que se llama capa enmascarada. Tanto la máscara como las capas enmascaradas se pueden animar.
Para ver los efectos de la capa de máscara en la capa enmascarada, debes bloquear ambas capas o probar tu película con Control > Probar.

Buscar este blog

Animación Publicitaria 2024