4. Animar símbolos

 Descripción general de la lección

• Animar la posición, la escala y la rotación de los objetos
• Ajustar el ritmo y la temporización de la animación
• Animar la transparencia y los efectos especiales
• Cambiar la trayectoria del movimiento de un objeto
• Crear animación anidada
• Dividir un interpolación de movimiento
• Cambiar la aceleración del movimiento de un objeto
• Animar en el espacio 3D
• Animar los movimientos de la cámara con la herramienta Cámara

Esta lección tardará aproximadamente 2 horas en completarse. 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 computadora 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. Utiliza Adobe Animate CC para cambiar casi cualquier aspecto de un objeto (posición, color, transparencia, tamaño, rotación y más) a lo largo del tiempo. La interpolación de movimiento es la técnica básica para crear animaciones con instancias de símbolos.

Introducción

Comienza viendo el archivo de película terminado para ver la página de título animada que crearás en esta lección.

1. Haz doble clic en el archivo 04End.html en la carpeta Lesson04/04End para reproducir la animación en un navegador.

Nota: Si aún no has descargado los archivos del proyecto para esta lección a tu computadora desde la página de tu cuenta, asegúrate de hacerlo ahora. Consulta Introducción al principio del libro.

El proyecto es una página de presentación animada para una película imaginaria que se estrenará próximamente. En esta lección, utilizarás interpolaciones de movimiento para animar varios componentes de la página: el paisaje urbano, los actores principales, varios coches antiguos y el título principal.

2. Cierra el archivo 04End.html.

3. Haz doble clic en el archivo 04Start.fla en la carpeta Lesson04/04Start para abrir el archivo de proyecto inicial en Animate. Este archivo es un documento de ActionScript 3.0 que está parcialmente completado y que ya contiene muchos de los elementos gráficos importados en la biblioteca para que los utilices.

4. En las opciones de vista situadas encima del escenario, selecciona Ajustar a ventana, o Ver > Ampliación > Ajustar a ventana, para que puedas ver todo el escenario en la pantalla de tu computadora.

5. Selecciona Archivo > Guardar como. Nombra el archivo 04_workingcopy.fla y guárdalo en la carpeta 04Start.

Guardar una copia de trabajo garantiza que el archivo de inicio original estará disponible si quieres volver a empezar.

Acerca de la animación

La animación es el movimiento, o cambio, de los objetos a través del tiempo. La animación puede ser tan simple como mover una caja por el escenario de un fotograma a otro. También puede ser mucho más compleja. Como verás en esta lección, puedes animar muchos aspectos diferentes de un solo objeto. Puedes cambiar la posición de un objeto en el escenario, cambiar su color o transparencia, cambiar su tamaño o rotación, o animar los filtros especiales que viste en la lección anterior. También tienes control sobre la trayectoria del movimiento de un objeto, e incluso sobre su aceleración, que es la forma en que un objeto acelera o desacelera.

En Animate, el flujo de trabajo básico para la animación es el siguiente: Selecciona un objeto en el escenario, haz clic con el botón derecho y selecciona Crear interpolación de movimiento en el menú contextual. Mueve el cabezal de reproducción rojo a un punto diferente en el tiempo y mueve el objeto a una nueva posición o cambia una de sus propiedades. Animate se encarga del resto.

Las interpolaciones de movimiento crean animación para los cambios de posición en el escenario y para los cambios de tamaño, color u otros atributos. Las interpolaciones de movimiento requieren que utilices una instancia de símbolo. Si el objeto que has seleccionado no es una instancia de símbolo, Animate te pedirá automáticamente que conviertas la selección en un símbolo.

Animate también separa automáticamente las interpolaciones de movimiento en sus propias capas, que se denominan capas de interpolación. Solo puede haber una interpolación de movimiento por capa sin ningún otro elemento en la capa. Las capas de interpolación te permiten cambiar varios atributos de tu instancia en diferentes puntos clave a lo largo del tiempo. Por ejemplo, una nave espacial podría estar en el lado izquierdo del escenario en el fotograma clave inicial y en el lado derecho del escenario en un fotograma clave final, y la interpolación resultante haría que la nave espacial volara a través del escenario.

El término "interpolación" proviene del mundo de la animación clásica. Los animadores senior eran responsables de dibujar las poses iniciales y finales de sus personajes. Las poses iniciales y finales eran los fotogramas clave de la animación. Los animadores junior entraban entonces y dibujaban los fotogramas "intermedios", o hacían la "interpolación". Por lo tanto, "interpolación" se refiere a las transiciones suaves entre fotogramas clave.

Comprender el archivo de proyecto

El archivo 04Start.fla contiene algunos de los elementos animados ya completados o parcialmente completados. Cada una de las seis capas (hombre, mujer, Middle_car, Right_car, footer y ground) contiene una animación. Las capas hombre y mujer están en una carpeta llamada actores, y las capas Middle_car y Right_car están en una carpeta llamada coches. Añadirás más capas para crear un paisaje urbano animado, refinar la animación de uno de los actores, así como añadir un tercer coche y un título en 3D. Todos los elementos gráficos necesarios se han importado a la biblioteca. El escenario está configurado en 1280 píxeles por 787 píxeles, y el color del escenario es negro. Es posible que tengas que elegir una opción de vista diferente para ver todo el escenario. Selecciona Ver > Ampliación > Ajustar a ventana, o selecciona Ajustar a ventana en las opciones de vista de la esquina superior derecha del escenario, para ver el escenario con un porcentaje de ampliación que se ajuste a tu pantalla.

Animar la posición

Empezarás este proyecto animando el paisaje urbano. Comenzará ligeramente por debajo del borde superior del escenario, y luego subirá lentamente hasta que su parte superior esté alineada con la parte superior del escenario.

1. Bloquea todas las capas existentes para no modificarlas accidentalmente. Crea una nueva capa encima de la capa "footer" y renómbrala como "city".

2. Arrastra la imagen de mapa de bits llamada cityBG.jpg desde la carpeta bitmaps del panel Biblioteca hasta el escenario.

3. En el panel Propiedades, establece el valor de X en 0 y el valor de Y en 90.

Esto coloca la imagen del paisaje urbano justo debajo del borde superior del escenario.

4. Haz clic con el botón derecho en la imagen del paisaje urbano y selecciona Crear interpolación de movimiento o selecciona Insertar > Interpolación de movimiento.

5. Aparece un cuadro de diálogo que te advierte de que el objeto seleccionado no es un símbolo. Las interpolaciones de movimiento requieren símbolos. Animate te pregunta si quieres convertir la selección en un símbolo para poder proceder con la interpolación de movimiento. Haz clic en Aceptar.

Animate convierte automáticamente tu selección en un símbolo con el nombre por defecto Símbolo 1, y lo almacena en tu panel Biblioteca. Animate también convierte la capa actual en una capa de interpolación para que puedas empezar a animar la instancia. Las capas de interpolación se distinguen por un icono especial delante del nombre de la capa, y los fotogramas están teñidos de azul. El rango de fotogramas cubiertos por la interpolación es el intervalo de interpolación. El intervalo de interpolación está representado por todos los fotogramas coloreados desde el primer fotograma clave hasta el último fotograma clave. Las capas de interpolación están reservadas para las interpolaciones de movimiento y, por lo tanto, no se permite dibujar en una capa de interpolación.

6. Mueve el cabezal de reproducción rojo hasta el final del intervalo de interpolación en el fotograma 191.

7. Selecciona la instancia del paisaje urbano en el escenario y, mientras mantienes pulsada la tecla Mayús, mueve la instancia hacia arriba del escenario.

Mantener pulsada la tecla Mayús restringe el movimiento a ángulos rectos.

8. Para mayor precisión, establece el valor de Y en 0 en el panel Propiedades.

Aparece un pequeño diamante negro en el fotograma 191 al final del intervalo de interpolación. Esto indica un fotograma clave al final de la interpolación.

Animate interpola suavemente el cambio de posición del fotograma 1 al 191 y representa ese movimiento con una trayectoria de movimiento.

9. Arrastra el cabezal de reproducción rojo hacia delante y hacia atrás en la parte superior de la línea de tiempo para ver el movimiento suave. También puedes seleccionar Control > Reproducir (o pulsar Intro/Retorno) para que Animate reproduzca la animación.

Consejo: Oculta todas las demás capas para aislar el paisaje urbano y ver mejor los resultados de la interpolación de movimiento.

Animar los cambios de posición es sencillo, ya que Animate crea automáticamente fotogramas clave en los puntos en los que mueves tu instancia a nuevas posiciones. Si quieres que un objeto se mueva a muchos puntos diferentes, simplemente mueve el cabezal de reproducción rojo al fotograma deseado y luego mueve el objeto a su nueva posición. Animate se encarga del resto.

Consejo: Elimina una interpolación de movimiento haciendo clic con el botón derecho del ratón en la interpolación de movimiento en la línea de tiempo o en el escenario y seleccionando Eliminar interpolación.

Vista previa de la animación

En la parte inferior de la línea de tiempo hay un conjunto de controles de reproducción. Estos controles te permiten reproducir, rebobinar o avanzar paso a paso hacia atrás o hacia delante en la línea de tiempo para revisar tu animación de forma controlada. También puedes utilizar los comandos de reproducción del menú Control.

1. Haz clic en cualquiera de los botones de reproducción del controlador que hay debajo de la línea de tiempo para ir al primer fotograma, ir al último fotograma, reproducir, detener o avanzar o retroceder un fotograma.

2. Selecciona Opción de bucle (a la derecha del controlador) y luego haz clic en el botón Reproducir.

El cabezal de reproducción se repite en bucle, lo que te permite ver la animación una y otra vez para un análisis cuidadoso.

3. Mueve los marcadores de inicio o fin en el encabezado de la línea de tiempo para definir el rango de fotogramas que quieres ver en bucle.

El cabezal de reproducción se repite en bucle dentro de los fotogramas marcados. Haz clic de nuevo en Opción de bucle para desactivarla.

Cambiar el ritmo y la temporización

Puedes cambiar la duración de todo el intervalo de interpolación o cambiar la temporización de la animación arrastrando los fotogramas clave en la línea de tiempo.

Cambiar la duración de la animación

Si quieres que la animación se desarrolle a un ritmo más lento (y por lo tanto ocupe un periodo de tiempo mucho más largo), necesitas alargar todo el intervalo de interpolación entre los fotogramas clave de inicio y fin. Si quieres acortar la animación, necesitas disminuir el intervalo de interpolación. Alarga o acorta una interpolación de movimiento arrastrando sus extremos en la línea de tiempo.

1. Mueve el puntero del ratón cerca del final del intervalo de interpolación en la capa "city".

El cursor del puntero cambia a una flecha de doble punta, lo que indica que puedes alargar o acortar el intervalo de interpolación.

2. Arrastra el final del intervalo de interpolación hasta el fotograma 60.

Tu interpolación de movimiento se acorta a 60 fotogramas, reduciendo el tiempo que tarda el paisaje urbano en subir.

3. Mueve el puntero del ratón cerca del comienzo del intervalo de interpolación (en el fotograma 1).

4. Arrastra el comienzo del intervalo de fotogramas hacia delante hasta el fotograma 10.

Tu interpolación de movimiento comienza en un momento anterior, por lo que ahora se reproduce solo desde el fotograma 10 hasta el fotograma 60.

Nota: Si tienes varios fotogramas clave en una interpolación, al cambiar la longitud del intervalo de interpolación arrastrando un extremo u otro, todos los fotogramas clave se distribuirán uniformemente. La temporización de toda la animación sigue siendo la misma; solo cambia la longitud.

Añadir fotogramas

Querrás que el último fotograma clave de tu interpolación de movimiento se mantenga durante el resto de la animación. Añade fotogramas arrastrando el final de un intervalo de interpolación con la tecla Mayús pulsada.

1. Mueve el cursor del ratón cerca del final del intervalo de interpolación.

2. Mantén pulsada la tecla Mayús y arrastra el final del intervalo de interpolación hacia delante hasta el fotograma 191.

El último fotograma clave de la interpolación de movimiento permanece en el fotograma 60, pero Animate añade fotogramas hasta el fotograma 191.

Consejo: También puedes añadir fotogramas individuales seleccionando Insertar > Línea de tiempo > Fotograma (F5), o eliminar fotogramas individuales seleccionando Editar > Línea de tiempo > Eliminar fotogramas (Mayús+F5).

Mover fotogramas clave

Si quieres cambiar el ritmo de una animación, puedes seleccionar fotogramas clave individuales y luego arrastrarlos a nuevas posiciones.

1. Haz clic en el fotograma clave del fotograma 60.

Se selecciona el fotograma clave del fotograma 60. Aparece un pequeño cuadro junto al puntero del ratón, lo que indica que puedes mover el fotograma clave.

2. Arrastra el fotograma clave al fotograma 40.

El último fotograma clave de la interpolación de movimiento se mueve al fotograma 40, por lo que el movimiento del paisaje urbano se realiza más rápidamente.

Selecciones basadas en intervalos frente a selecciones basadas en fotogramas

De forma predeterminada, Animate no utiliza la selección basada en intervalos, lo que significa que puedes seleccionar fotogramas clave individuales dentro de una interpolación de movimiento. Sin embargo, si prefieres hacer clic en una interpolación de movimiento y que se seleccione todo el intervalo (los fotogramas clave inicial y final, y todos los fotogramas intermedios), puedes activar la Selección basada en intervalos en el menú Opciones de la esquina superior derecha de la línea de tiempo (o puedes hacer clic con la tecla Mayús pulsada para seleccionar todo el intervalo).

Con la Selección basada en intervalos activada, puedes hacer clic en cualquier lugar dentro de la interpolación de movimiento para seleccionarla y mover toda la animación hacia atrás o hacia delante a lo largo de la línea de tiempo como una sola unidad.

Si quieres seleccionar fotogramas clave individuales mientras la Selección basada en intervalos está activada, mantén pulsada la tecla Ctrl/Comando y haz clic en un fotograma clave.

Animar la transparencia

En la lección anterior, aprendiste a cambiar el efecto de color de cualquier instancia de símbolo para cambiar la transparencia, el tinte o el brillo. Puedes cambiar el efecto de color de una instancia en un fotograma clave y cambiar el valor del efecto de color en otro fotograma clave, y Animate mostrará automáticamente un cambio suave, al igual que lo hace con los cambios de posición.

Cambiarás el paisaje urbano en el fotograma clave inicial para que sea totalmente transparente, pero mantendrás el paisaje urbano en el fotograma clave final opaco. Animate creará un efecto de fundido de entrada suave.

1. Mueve el cabezal de reproducción rojo al primer fotograma clave de la interpolación de movimiento (fotograma 10).

2. Selecciona la instancia del paisaje urbano en el escenario.

3. En el panel Propiedades, sección Efecto de color, selecciona Alfa en el menú Estilo.

4. Establece el valor de Alfa en 0%.

La instancia del paisaje urbano en el escenario se vuelve totalmente transparente.

5. Mueve el cabezal de reproducción rojo al último fotograma clave de la interpolación de movimiento (fotograma 40).

6. Asegúrate de que la instancia del paisaje urbano en el escenario sigue seleccionada.

7. En el panel Propiedades, en la sección Efecto de color, establece el valor de Alfa en 100%.

La instancia del paisaje urbano en el escenario se vuelve totalmente opaca.

8. Previsualiza el efecto seleccionando Control > Reproducir (Intro/Retorno).

Animate interpola los cambios de posición y transparencia entre los dos fotogramas clave.

Animar filtros

Los filtros, que dan a las instancias efectos especiales como desenfoques y sombras paralelas, también se pueden animar. A continuación, refinarás la interpolación de movimiento de los actores aplicando un filtro de desenfoque a uno de ellos para que parezca que la cámara cambia de enfoque. Animar filtros no es diferente de animar cambios de posición o cambios en el efecto de color. Simplemente se establecen los valores de un filtro en un fotograma clave y se establecen valores diferentes para el filtro en otro fotograma clave, y Animate crea una transición suave.

1. Asegúrate de que la carpeta de la capa "actores" en la línea de tiempo está visible.

2. Desbloquea la capa "mujer".

3. Mueve el cabezal de reproducción rojo al fotograma clave inicial de la interpolación de movimiento en la capa "mujer", en el fotograma 23.

4. Selecciona la instancia de la mujer en el escenario. No podrás verla porque tiene un valor alfa del 0% (totalmente transparente). Haz clic en la parte superior derecha del escenario para seleccionar la instancia transparente. O bien, haz clic en la capa "mujer" en la línea de tiempo para resaltarla; a continuación, haz clic dentro del contorno que aparece en el escenario.

5. En el panel Propiedades, expande la sección Filtros.

6. Haz clic en el botón Añadir filtro en la sección Filtros y selecciona Desenfoque en el menú para añadir un desenfoque a la instancia.

7. En la sección Filtros del panel Propiedades, asegúrate de que los iconos de enlace están seleccionados para restringir los valores de desenfoque a las direcciones x e y por igual. Establece los valores de Desenfoque X y Desenfoque Y en 20 píxeles.

8. Mueve el cabezal de reproducción rojo por toda la línea de tiempo para previsualizar la animación.

La instancia de la mujer está borrosa en toda la interpolación de movimiento.

9. Haz clic con el botón derecho del ratón en la capa "mujer" en el fotograma 140 y selecciona Insertar fotograma clave > Filtro.

Animate establece un fotograma clave para los filtros en el fotograma 140.

10. Mueve el cabezal de reproducción rojo al fotograma 160 y haz clic con el botón derecho del ratón en la capa "mujer" y selecciona Insertar fotograma clave > Filtro para añadir otro fotograma clave de filtro.

11. Selecciona la instancia de la mujer en el escenario en el fotograma 160.

12. En el panel Propiedades, cambia el valor del filtro Desenfoque a X=0 e Y=0.

El filtro Desenfoque cambia desde el fotograma clave del fotograma 140 al fotograma clave del 160. Animate crea una transición suave de una instancia borrosa a una instancia enfocada.

Comprender los fotogramas clave de las propiedades

Los cambios en las propiedades son independientes entre sí y no necesitan estar vinculados a los mismos fotogramas clave. Es decir, puedes tener un fotograma clave para la posición, un fotograma clave diferente para el efecto de color y otro fotograma clave para un filtro. Gestionar muchos tipos diferentes de fotogramas clave puede resultar abrumador, especialmente si quieres que las diferentes propiedades cambien en momentos distintos durante la interpolación de movimiento. Afortunadamente, Animate CC proporciona algunas herramientas útiles para la gestión de fotogramas clave.

Al visualizar el intervalo de interpolación, puedes elegir visualizar los fotogramas clave de solo determinadas propiedades. Por ejemplo, puedes elegir visualizar solo los fotogramas clave de Posición para ver cuándo se mueve tu objeto. O bien, puedes elegir visualizar solo los fotogramas clave de Filtro para ver cuándo cambia un filtro. Haz clic con el botón derecho del ratón en una interpolación de movimiento en la línea de tiempo, selecciona Ver fotogramas clave y, a continuación, selecciona la propiedad deseada en la lista. También puedes seleccionar Todos o Ninguno para ver todas las propiedades o ninguna de ellas.

Al insertar un fotograma clave, también puedes insertar un fotograma clave específico de la propiedad que quieres cambiar. Haz clic con el botón derecho del ratón en una interpolación de movimiento en la línea de tiempo, selecciona Insertar fotogramas clave y, a continuación, selecciona la propiedad deseada.

También puedes ver un panel avanzado, llamado Editor de movimiento, para ver y editar cómo cambian las diferentes propiedades de tu objeto en el transcurso de la interpolación de movimiento. Aprenderás más sobre el Editor de movimiento en la próxima lección.

Animar transformaciones

Ahora aprenderás a animar los cambios de escala o rotación. Este tipo de cambios se realizan con la herramienta Transformación libre o con el panel Transformar. Añadirás un tercer coche al proyecto. El coche empezará siendo pequeño y luego se hará más grande a medida que parezca avanzar hacia el espectador.

1. Bloquea todas las capas de la línea de tiempo.

2. Inserta una nueva capa dentro de la carpeta "cars" y renómbrala como "Left_car".

3. Selecciona el fotograma 75 e inserta un nuevo fotograma clave (F6).

4. Arrastra el símbolo de clip de película llamado "carLeft" desde el panel Biblioteca hasta el escenario en el fotograma 75.

5. Selecciona la herramienta Transformación libre.

Los controles de transformación aparecen alrededor de la instancia en el escenario.

6. Mientras mantienes pulsada la tecla Mayús, haz clic y arrastra un control de esquina hacia dentro para hacer el coche más pequeño.

7. En el panel Propiedades, asegúrate de que el ancho del gráfico es de unos 400 píxeles.

8. Alternativamente, puedes utilizar el panel Transformar (Ventana > Transformar) y cambiar la escala del coche a aproximadamente el 29,4%.

9. Mueve el coche a su posición inicial en aproximadamente X=710 e Y=488.

10. En el panel Propiedades, sección Efecto de color, selecciona Alfa en el menú Estilo.

11. Establece el valor de Alfa en 0%. El coche se vuelve totalmente transparente.

12. Haz clic con el botón derecho del ratón en el coche en el escenario y selecciona Crear interpolación de movimiento.

La capa actual se convierte en una capa de interpolación.

13. Mueve el cabezal de reproducción rojo en la línea de tiempo al fotograma 100.

14. Selecciona la instancia transparente del coche en el escenario y, en el panel Propiedades, cambia el valor de Alfa a 100%.

Se inserta automáticamente un nuevo fotograma clave en el fotograma 100 para indicar el cambio de transparencia.

15. Mientras mantienes pulsada la tecla Mayús, arrastra un control de esquina hacia fuera para hacer el coche más grande. Para mayor precisión, utiliza el panel Propiedades y establece las dimensiones del coche en ancho=1380 píxeles y alto=445,05 píxeles.

Consejo: Mantener pulsada la tecla Alt/Opción mientras se arrastra un control de esquina del cuadro delimitador hace que el cuadro cambie de tamaño en relación con la esquina opuesta en lugar de en relación con el punto de transformación del objeto (normalmente el centro).

16. Coloca el coche en X=607 e Y=545.

Has utilizado Animate para interpolar el cambio de posición y el cambio de escala, así como el cambio de transparencia del fotograma 75 al 100.

17. Mueve la capa "Left_car" entre las capas "Middle_car" y "Right_car" para que el coche del centro se superponga a los coches de los lados. Guarda tu progreso hasta ahora en este documento 04_workingcopy.fla. En la siguiente sección, trabajarás con un archivo diferente.

Ajustes preestablecidos de movimiento

Si tu proyecto implica la creación de interpolaciones de movimiento idénticas repetidamente, Animate te permite guardar y reutilizar las interpolaciones de movimiento como ajustes preestablecidos. El panel Ajustes preestablecidos de movimiento (Ventana > Ajustes preestablecidos de movimiento) puede almacenar cualquier interpolación de movimiento para que puedas aplicarla a diferentes instancias en el escenario.

Por ejemplo, si quieres crear una presentación de diapositivas en la que cada imagen se desvanezca de la misma manera, puedes guardar esa transición como un ajuste preestablecido de movimiento.

1. Crea tu transición utilizando la primera diapositiva de tu presentación.

2. Selecciona la interpolación de movimiento de esa diapositiva en la línea de tiempo o la instancia de la diapositiva en el escenario.

3. En el panel Ajustes preestablecidos de movimiento, haz clic en el botón Guardar selección como ajuste preestablecido en la parte inferior del panel. Alternativamente, haz clic con el botón derecho del ratón en la interpolación de movimiento y selecciona Guardar como ajuste preestablecido de movimiento.

4. Nombra tu ajuste preestablecido de movimiento y se guardará en el panel Ajustes preestablecidos de movimiento.

5. Selecciona una nueva instancia en el escenario y elige el ajuste preestablecido de movimiento.

6. Haz clic en Aplicar y Animate aplicará tu ajuste preestablecido de movimiento guardado a la nueva instancia.

Animate proporciona una serie de ajustes preestablecidos de movimiento que puedes utilizar para crear rápidamente animaciones sofisticadas sin mucho esfuerzo.

Cambiar la trayectoria del movimiento

La interpolación de movimiento del coche izquierdo que acabas de animar muestra una línea de color con puntos que indican la trayectoria del movimiento. Puedes editar la trayectoria del movimiento fácilmente para que el coche se desplace en una curva, o puedes mover, escalar o rotar la trayectoria como cualquier otro objeto del escenario.

Para demostrar mejor cómo puedes editar la trayectoria del movimiento, abre el archivo de ejemplo 04MotionPath.fla en la carpeta Lesson04/04Start. El archivo contiene una sola capa de interpolación con una nave espacial que se mueve desde la parte superior izquierda del escenario hacia la parte inferior derecha.

Mover la trayectoria del movimiento

Moverás la trayectoria del movimiento para que el movimiento relativo de la nave espacial siga siendo el mismo, pero cambien sus posiciones inicial y final.

1. Selecciona la herramienta Selección.

2. Haz clic en la trayectoria del movimiento para seleccionarla.

La trayectoria del movimiento se resalta.

3. Arrastra la trayectoria del movimiento para moverla a un lugar diferente del escenario.

El movimiento relativo y la temporización de la animación siguen siendo los mismos, pero las posiciones inicial y final se reubican.

Cambiar la escala o la rotación de la trayectoria

También puedes manipular la trayectoria del movimiento del objeto utilizando la herramienta Transformación libre.

1. Selecciona la trayectoria del movimiento.

2. Selecciona la herramienta Transformación libre.

Aparecen controles de transformación alrededor de la trayectoria del movimiento.

3. Escala o rota la trayectoria del movimiento como desees. Puedes hacer la trayectoria más pequeña o más grande, o rotar la trayectoria para que la nave espacial comience desde la parte inferior izquierda del escenario y termine en la parte superior derecha.

Editar la trayectoria del movimiento

Hacer que tus objetos se desplacen por una trayectoria curva es muy sencillo. Puedes editar la trayectoria con precisión Bezier utilizando los controles de los puntos de anclaje, o puedes editar la trayectoria de una forma más intuitiva con la herramienta Selección.

1. Selecciona la herramienta Convertir punto de anclaje, que está oculta bajo la herramienta Pluma.

2. Haz clic en el punto inicial o en el punto final de la trayectoria del movimiento en el escenario y arrastra el control hacia fuera desde el punto de anclaje.

El control del punto de anclaje controla la curvatura de la trayectoria.

3. Selecciona la herramienta Subselección.

4. Arrastra el control de cada extremo de la trayectoria para editar su curva. Haz que la nave espacial se desplace en una curva amplia.

Consejo: También puedes manipular directamente la trayectoria del movimiento con la herramienta Selección. Selecciona la herramienta Selección y asegúrate de que la trayectoria está deseleccionada. Mueve el puntero cerca de la trayectoria del movimiento. Aparece un icono curvo junto al puntero, lo que indica que puedes editar la trayectoria. Arrastra la trayectoria del movimiento para cambiar su curvatura. ¡Elige con cuidado los puntos en los que arrastras! Cada arrastre divide la trayectoria en segmentos más pequeños, lo que dificulta la consecución de una curva suave. El dominio se consigue con la práctica.

Orientar los objetos a la trayectoria

A veces es importante la orientación del objeto que se desplaza a lo largo de la trayectoria. En el proyecto de la página de presentación de la película, la orientación del coche es constante a medida que avanza. Sin embargo, en el ejemplo de la nave espacial, la nave espacial debe seguir la trayectoria con la punta apuntando en la dirección en la que se dirige. Orientar a la trayectoria en el panel Propiedades te da esta opción.

1. Selecciona la interpolación de movimiento en la línea de tiempo (haz clic con la tecla Mayús pulsada para seleccionar toda la interpolación).

2. En el panel Propiedades, en Rotación, selecciona la opción Orientar a la trayectoria.

Animate inserta fotogramas clave para la rotación a lo largo de la interpolación de movimiento para orientar la punta de la nave espacial a la trayectoria del movimiento.

Consejo: Para dirigir la punta de la nave espacial, o cualquier otro objeto, a lo largo de la trayectoria de su movimiento, debes orientar su posición para que esté mirando en la dirección en la que quieres que se desplace. Utiliza la herramienta Transformación libre para girar su posición inicial de modo que esté orientada correctamente.

Intercambiar objetivos de interpolación

El modelo de interpolación de movimiento en Animate CC está basado en objetos. Esto significa que un objeto y su movimiento son independientes entre sí, y puedes intercambiar fácilmente el objetivo de una interpolación de movimiento. Si, por ejemplo, prefieres ver un extraterrestre moviéndose por el escenario en lugar de una nave espacial, puedes sustituir el objetivo de la interpolación de movimiento por un símbolo de extraterrestre de tu panel Biblioteca y seguir conservando la animación.

1. Arrastra el símbolo de clip de película del extraterrestre desde el panel Biblioteca hasta la nave espacial.

2. Animate te pregunta si quieres reemplazar el objeto de destino de la interpolación existente por un nuevo objeto.

   2. Haz clic en Aceptar.

   Animate reemplaza la nave espacial por el extraterrestre. El movimiento sigue siendo el mismo, pero el objetivo de la interpolación de movimiento ha cambiado.

   Nota: También puedes utilizar el panel Propiedades para intercambiar instancias. Selecciona el objeto que quieres intercambiar en el escenario. En el panel Propiedades, haz clic en el botón Intercambiar. En el cuadro de diálogo que aparece, elige un nuevo símbolo y haz clic en Aceptar. Animate intercambiará el objetivo de la interpolación de movimiento.

   Nota: Si la instancia de tu símbolo desaparece de la vista después del intercambio de símbolos, selecciona Ver > Ampliación > Mostrar todo (Ctrl+3/Cmd+3) para cambiar el nivel de zoom y mostrar todos los objetos del escenario.

   Crear animaciones anidadas

   A menudo, un objeto que está animado en el escenario tendrá su propia animación. Por ejemplo, las alas de una mariposa que se mueve por el escenario pueden aletear mientras se mueve. O el extraterrestre que has intercambiado con la nave espacial podría estar agitando los brazos. Este tipo de animaciones se denominan animaciones anidadas, porque están contenidas dentro de los símbolos de clip de película. Los símbolos de clip de película tienen su propia línea de tiempo que es independiente de la línea de tiempo principal.

   En este ejemplo, le darás al extraterrestre su propio movimiento independiente, para que pueda saludar mientras vuela por el escenario.

   Crear animaciones dentro de los símbolos de clip de película

   Animaremos algunos de los símbolos que componen el cuerpo del extraterrestre para que pueda saludar.

   1. En el panel Biblioteca, haz doble clic en el icono del símbolo de clip de película del extraterrestre.

   Ahora estás en el modo de edición de símbolos para el símbolo de clip de película del extraterrestre. El extraterrestre aparece en el centro del escenario. En la línea de tiempo, las partes del extraterrestre están separadas en capas.

   2. Selecciona la herramienta Selección.

   3. Haz clic con el botón derecho del ratón en el brazo izquierdo del extraterrestre y selecciona Crear interpolación de movimiento.

   Animate convierte la capa actual en una capa de interpolación e inserta 1 segundo de fotogramas para que puedas empezar a animar la instancia.

   4. Selecciona la herramienta Transformación libre.

   5. Mueve el puntero del ratón cerca del control de transformación de la esquina hasta que el cursor cambie al icono de rotación. Arrastra el control de la esquina cerca de la mano para girar el brazo hacia arriba hasta la altura del hombro del extraterrestre. Se inserta un fotograma clave al final de la interpolación de movimiento. El brazo izquierdo gira suavemente desde la posición de reposo hasta la posición extendida.

   6. Mueve el cabezal de reproducción rojo de nuevo al fotograma 1.

   7. Ahora crea una interpolación de movimiento para el otro brazo del extraterrestre. Haz clic con el botón derecho del ratón en su brazo derecho y selecciona Crear interpolación de movimiento.

   La capa actual se convierte en una capa de interpolación y se inserta 1 segundo de fotogramas.

   8. Selecciona la herramienta Transformación libre si no está ya seleccionada.

   9. Como hiciste con el brazo izquierdo, arrastra el control de transformación de la esquina cerca de la mano derecha para girar el brazo hacia arriba hasta la altura del hombro del extraterrestre.

   Animate inserta un fotograma clave al final de la interpolación de movimiento. El brazo gira suavemente desde la posición de reposo hasta la posición extendida.

   10. Selecciona el último fotograma de todas las demás capas e inserta fotogramas (F5) para que la cabeza, el cuerpo y los pies permanezcan en el escenario durante el mismo tiempo que los brazos en movimiento.

   11. Haz clic en el botón Escena 1 de la barra de edición de la parte superior del escenario para salir del modo de edición de símbolos.

   Tu animación del extraterrestre levantando los brazos está completa. Dondequiera que utilices el símbolo de clip de película, la animación anidada del extraterrestre seguirá reproduciéndose.

   12. Previsualiza la animación seleccionando Control > Probar.

   Animate abre una ventana que muestra la animación exportada. El extraterrestre se mueve a lo largo de la trayectoria del movimiento mientras se reproduce y se repite la animación anidada de sus brazos en movimiento.

   Nota: Las animaciones dentro de los símbolos de clip de película no se reproducirán en la línea de tiempo principal. Selecciona Control > Probar para previsualizar las animaciones anidadas.

   Nota: Las animaciones dentro de los símbolos de clip de película se reproducirán en bucle automáticamente. Para evitar el bucle, necesitas añadir código para decirle a la línea de tiempo del clip de película que se detenga en su último fotograma. Aprenderás a controlar la línea de tiempo con ActionScript o JavaScript en lecciones posteriores.

   Símbolos gráficos

   Has estado utilizando símbolos de clip de película para tu animación, y has visto cómo permiten animaciones anidadas e independientes. Pero también puedes tener animaciones anidadas y gráficos dentro de los símbolos gráficos, aunque funcionan de forma un poco diferente.

   Una animación dentro de un símbolo gráfico no se reproduce de forma independiente como lo hace en un símbolo de clip de película. Solo se reproducirá si hay suficientes fotogramas en la línea de tiempo principal donde se coloca la instancia. Y mientras que puedes controlar el cabezal de reproducción interno de la línea de tiempo de un clip de película con ActionScript, puedes controlar el cabezal de reproducción de un símbolo gráfico directamente en el panel Propiedades. Debido a la facilidad con la que puedes elegir qué fotograma dentro de un símbolo gráfico se muestra, los símbolos gráficos son ideales para la sincronización de labios u otras variaciones de personajes.

   Utilizar el Selector de fotogramas para los fonemas

   Si los personajes animados hablan, su boca se sincronizará con sus palabras. Cada sonido, o fonema, se produce con una forma de boca diferente. Por ejemplo, un sonido explosivo "p" o "b" se hará cerrando los labios, o un sonido "o" se hará con una boca abierta redondeada. Los animadores dibujan una colección de estas posiciones de la boca para utilizarlas para sincronizar con la banda sonora.

   Puedes almacenar cada posición de la boca como un fotograma clave en un símbolo gráfico. El panel Selector de fotogramas de Animate te permite elegir el fotograma de la línea de tiempo del símbolo gráfico que coincide con cada sonido.

   En esta tarea, animarás la boca del extraterrestre utilizando el Selector de fotogramas.

   1. Abre el archivo de ejemplo 04FramePicker_start.fla en la carpeta Lesson04/04Start. El archivo contiene tu familiar personaje extraterrestre en el escenario.

   El extraterrestre no está animado en una trayectoria, pero su cabeza es un símbolo gráfico con múltiples fotogramas clave dentro de su línea de tiempo.

2. Haz doble clic en el símbolo gráfico "alien_head" en la biblioteca.

Animate te lleva al modo de edición de símbolos para el símbolo gráfico "alien_head". Observa que la línea de tiempo contiene cinco fotogramas clave en la capa "mouth" (boca).

3. Examina cada fotograma clave de la capa "mouth" avanzando el cabezal de reproducción del fotograma 1 al 5.

4. Vuelve a la Escena 1 y selecciona Control > Probar.

Animate crea un SWF para reproducir la animación. No ocurre nada porque solo hay un único fotograma en la línea de tiempo principal, y un símbolo gráfico necesita fotogramas en la línea de tiempo principal para reproducir su propia línea de tiempo.

5. Cierra el panel de la película de prueba y vuelve a tu documento de Animate.

6. Selecciona los fotogramas 45 en la capa "head" (cabeza) y "body" (cuerpo) y selecciona Insertar > Línea de tiempo > Fotograma (F5).

Se añaden fotogramas a ambas capas hasta el fotograma 45.

7. Selecciona Control > Reproducir (Intro/Retorno).

Animate reproduce la animación. ¡Tu extraterrestre ahora no puede dejar de hablar! El símbolo gráfico reproduce sus cinco fotogramas clave repetidamente durante los 45 fotogramas de la línea de tiempo principal.

El símbolo gráfico está, por defecto, configurado para que se reproduzca en bucle, pero en su lugar seleccionarás un único fotograma para que se reproduzca.

8. Selecciona la cabeza del extraterrestre en el escenario y, en el panel Propiedades, sección Bucle, selecciona Fotograma único en el menú Opciones. Deja el valor del campo Primero en 1.

Ahora el escenario muestra solo un fotograma del símbolo gráfico "alien_head", que es el fotograma 1.

9. Selecciona el fotograma 10 de la capa "head" e inserta un nuevo fotograma clave (F6).

10. Con el cabezal de reproducción en tu nuevo fotograma clave del fotograma 10, selecciona la cabeza del extraterrestre en el escenario. En el panel Propiedades, sección Bucle, haz clic en Usar Selector de fotogramas.

Se abre el panel Selector de fotogramas. El Selector de fotogramas muestra imágenes en miniatura de todos los fotogramas dentro del símbolo gráfico.

11. Harás que el extraterrestre diga la palabra "hola". Para la primera parte de la palabra, selecciona el fotograma 3 en el Selector de fotogramas.

Ahora, cuando la animación llegue al fotograma 10, el símbolo de la cabeza del extraterrestre cambiará de mostrar el fotograma 1 (la boca cerrada) al fotograma 3 para el comienzo de la palabra "h".

12. Inserta un nuevo fotograma clave en el fotograma 12 de la línea de tiempo principal.

13. En el Selector de fotogramas, selecciona el fotograma 4.

Cuando la animación reproduzca el fotograma 12, el símbolo gráfico de la cabeza del extraterrestre cambiará al fotograma 4. Su boca se abre un poco más para la parte "eh" de "hola".

14. Inserta un nuevo fotograma clave en el fotograma 14 de la línea de tiempo principal.

15. En el Selector de fotogramas, selecciona el fotograma 2.

Cuando la animación llegue al fotograma 14, el símbolo de la cabeza cambiará a mostrar el fotograma 2. Su boca está redondeada para el sonido "oh".

16. En un nuevo fotograma clave del fotograma 17, utiliza el Selector de fotogramas para volver a cambiar la boca al fotograma 1.

17. Por último, en un nuevo fotograma clave del fotograma 30, utiliza el Selector de fotogramas para cambiar la boca al fotograma 5 para que el extraterrestre nos dedique una amplia sonrisa.

18. Selecciona Control > Reproducir (Intro/Retorno).

Animate reproduce la animación. Tu extraterrestre sincroniza los labios con "hola", hace una pausa y luego sonríe.

Has terminado con este documento, así que puedes guardarlo y cerrarlo.

Nota: Si añades etiquetas de fotograma a la línea de tiempo de tu símbolo gráfico, esas etiquetas también aparecerán en el Selector de fotogramas para que sea más fácil seleccionar los fotogramas que deseas.

Aceleración

La aceleración se refiere a la forma en que se desarrolla una interpolación de movimiento. Puedes pensar en la aceleración como una aceleración o desaceleración. Un objeto que se mueve de un lado a otro del escenario puede empezar lentamente, luego aumentar la velocidad y luego detenerse repentinamente. O bien, el objeto puede empezar rápidamente y luego reducir la velocidad gradualmente hasta detenerse. Los fotogramas clave indican los puntos inicial y final del movimiento, pero la aceleración determina cómo llega el objeto de un fotograma clave a otro.

Una forma sencilla de aplicar la aceleración a una interpolación de movimiento es utilizar el panel Propiedades. Los valores de aceleración van de -100 a 100. Un valor negativo crea un cambio más gradual desde la posición inicial (conocido como aceleración de entrada). Un valor positivo crea una ralentización gradual (conocida como aceleración de salida).

Una forma más avanzada de aplicar la aceleración es utilizar el nuevo Editor de movimiento, del que aprenderás en la próxima lección.

Dividir una interpolación de movimiento

La aceleración afecta a todo el intervalo de una interpolación de movimiento. Si quieres que la aceleración afecte solo a los fotogramas entre los fotogramas clave de una interpolación de movimiento más larga, debes dividir la interpolación de movimiento. Por ejemplo, vuelve al archivo 04_workingcopy.fla de la animación cinematográfica. La interpolación de movimiento del coche en la capa "Left_car" comienza en el fotograma 75 y termina en el fotograma 191, al final de la línea de tiempo. Sin embargo, el movimiento real del coche comienza en el fotograma 75 y termina en el fotograma 100. Dividirás la interpolación de movimiento para poder aplicar una aceleración a la interpolación solo del fotograma 75 al 100.

1. En la capa "Left_car", selecciona el fotograma 101, que es el fotograma justo después del segundo fotograma clave donde el coche termina su movimiento.

2. Haz clic con el botón derecho del ratón en el fotograma 101 y selecciona Dividir movimiento.

La interpolación de movimiento se corta en dos intervalos de interpolación separados. El final de la primera interpolación es idéntico al comienzo de la segunda.

Cada fotograma clave muestra la boca en una posición diferente. El fotograma 1 tiene una pequeña boca cerrada, el fotograma 2 una boca redondeada, el fotograma 3 una boca bien abierta, y así sucesivamente.

3. En la capa "Middle_car", selecciona el fotograma 94, haz clic con el botón derecho y selecciona Dividir movimiento para cortar la interpolación de movimiento en dos intervalos de interpolación separados.

4. En la capa "Right_car", selecciona el fotograma 107, haz clic con el botón derecho y selecciona Dividir movimiento para cortar la interpolación de movimiento en dos intervalos.

Las interpolaciones de movimiento de los tres coches se han dividido.

Aplicar aceleraciones a las interpolaciones de movimiento

Aplicarás una aceleración de entrada a las interpolaciones de movimiento de los coches que se aproximan para darles una sensación de peso y hacer que desaceleren como lo harían los coches reales.

1. En la capa "Middle_car", selecciona cualquier fotograma entre el primer y el segundo fotograma clave de la primera interpolación de movimiento (fotograma 70 a 93).

2. En el panel Propiedades, sección Aceleración, introduce 100 para el valor de Aceleración.

Esto aplica una aceleración de salida a la interpolación de movimiento.

3. En la capa "Left_car", selecciona cualquier fotograma entre el primer y el segundo fotograma clave de la primera interpolación de movimiento (fotograma 75 a 100).

4. En el panel Propiedades, introduce 100 para el valor de Aceleración para aplicar una aceleración de salida a la interpolación de movimiento.

5. En la capa "Right_car", selecciona cualquier fotograma entre el primer y el segundo fotograma clave de la primera interpolación de movimiento (fotograma 78 a 106).

6. En el panel Propiedades, introduce 100 para el valor de Aceleración para aplicar una aceleración de salida a la interpolación de movimiento.

7. Selecciona Bucle en la parte inferior de la línea de tiempo y mueve los marcadores de inicio y fin en el encabezado de la línea de tiempo a los fotogramas 60 y 115, respectivamente.

8. Haz clic en Reproducir (Intro/Retorno).

Animate reproduce la línea de tiempo en un bucle entre los fotogramas 60 y 115 para que puedas examinar el movimiento de aceleración de salida de los tres coches.

Animación fotograma a fotograma

La animación fotograma a fotograma es una técnica que crea la ilusión de movimiento realizando cambios incrementales entre cada fotograma clave. La animación fotograma a fotograma en Animate es similar a la animación tradicional de celdas dibujadas a mano, en la que cada dibujo está en una hoja de papel separada, y es igual de tediosa.

Las animaciones fotograma a fotograma aumentan el tamaño del archivo rápidamente porque Animate tiene que almacenar el contenido de cada fotograma clave. Utiliza la animación fotograma a fotograma con moderación.

En la siguiente sección, insertarás una animación fotograma a fotograma dentro del símbolo de clip de película "carLeft" para que se mueva hacia arriba y hacia abajo de forma temblorosa. Cuando el clip de película se reproduzca en bucle, el coche vibrará ligeramente para simular el ralentí del motor.

Insertar un nuevo fotograma clave

Las animaciones fotograma a fotograma dentro de los símbolos de clip de película "carMiddle" y "carRight" ya se han realizado. Terminarás la animación para el símbolo "carLeft".

1. En el panel Biblioteca, haz doble clic en el símbolo de clip de película "carRight" para examinar su animación fotograma a fotograma completada.

Dentro del clip de película "carRight", tres fotogramas clave establecen tres posiciones diferentes para el coche y sus faros. Los fotogramas clave están espaciados de forma desigual para proporcionar el movimiento impredecible hacia arriba y hacia abajo.

2. En el panel Biblioteca, haz doble clic en el símbolo de clip de película "carLeft".

Entras en el modo de edición de símbolos para el símbolo "carLeft".

Consejo: Si la imagen del coche no está visible, selecciona Ajustar a ventana en el menú Zoom de la esquina superior derecha del escenario.

3. Selecciona el fotograma 2 tanto en la capa "lights" (luces) como en la capa "smallRumble" (pequeña vibración).

4. Haz clic con el botón derecho y selecciona Insertar fotograma clave (F6).

Animate inserta un fotograma clave en el fotograma 2 de la capa "lights" y la capa "smallRumble". El contenido de los fotogramas clave anteriores se copia en los nuevos fotogramas clave.

Cambiar los gráficos

En el nuevo fotograma clave, cambia la apariencia del contenido para crear la animación.

1. En el fotograma 2, selecciona los tres gráficos (el coche y sus dos faros) en el escenario (Editar > Seleccionar todo, o Ctrl+A/Comando+A) y muévelos hacia abajo del escenario 1 píxel. Puedes utilizar el panel Propiedades para disminuir el valor de la posición Y en 1 píxel o pulsar la tecla de flecha abajo para desplazar los gráficos 1 píxel.

El coche y sus faros se mueven ligeramente hacia abajo.

2. A continuación, repite el proceso de insertar fotogramas clave y cambiar los gráficos. Para un movimiento aleatorio como el de un coche en ralentí, lo ideal son al menos tres fotogramas clave.

3. Selecciona el fotograma 4 tanto en la capa "lights" como en la capa "smallRumble".

4. Haz clic con el botón derecho y selecciona Insertar fotograma clave (F6).

Se insertan fotogramas clave en el fotograma 4 de las capas "lights" y "smallRumble". El contenido de los fotogramas clave anteriores se copia en los nuevos fotogramas clave.

5. Selecciona los tres gráficos en el escenario (Editar > Seleccionar todo, o Ctrl+A/Comando+A) y muévelos hacia arriba del escenario 2 píxeles. Puedes utilizar el panel Propiedades o pulsar la tecla de flecha arriba dos veces para desplazar los gráficos 2 píxeles.

El coche y sus faros se mueven ligeramente hacia arriba.

6. Prueba el movimiento de ralentí activando la opción Reproducción en bucle en la parte inferior de la línea de tiempo y haz clic en Reproducir (Intro/Retorno).

Nota: En esta sección, has creado el movimiento de ralentí del coche moviendo manualmente la posición del coche fotograma a fotograma. En la próxima lección, aprenderás a utilizar el panel Refinar interpolación, que puede modificar automáticamente tu interpolación de movimiento para simular movimientos naturales como rebotes o vibraciones aleatorias como el ralentí de un coche.

Animar el movimiento 3D

Por último, añadirás un título y lo animarás en el espacio 3D. La animación en 3D presenta la complicación añadida de un tercer eje (z). Cuando eliges la herramienta Rotación 3D o Traslación 3D, debes tener en cuenta la opción Transformación global en la parte inferior del panel Herramientas. (Las herramientas y la opción Transformación global se introdujeron en la lección anterior, en "Posicionamiento en el espacio 3D"). La Transformación global alterna entre una opción global (botón pulsado) y una opción local (botón sin pulsar). Mover un objeto con la opción global seleccionada hace que la transformación sea relativa al sistema de coordenadas global, mientras que mover un objeto con la opción local activada hace que la transformación sea relativa a sí mismo.

1. Haz clic en Escena 1 en la barra de edición para volver a la línea de tiempo principal. Inserta una nueva capa en la parte superior de la pila de capas y renómbrala como "title" (título).

2. Bloquea todas las demás capas.

3. Inserta un nuevo fotograma clave en el fotograma 120.

4. Arrastra el símbolo de clip de película llamado "movietitle" desde el panel Biblioteca hasta el escenario.

La instancia "movietitle" aparece en tu nueva capa en el fotograma clave del fotograma 120.

5. Coloca el título en el cielo vacío en x=180 e y=90.

6. Haz clic con el botón derecho del ratón en el título de la película y selecciona Crear interpolación de movimiento.

Animate convierte la capa actual en una capa de interpolación para que puedas empezar a animar la instancia.

7. Mueve el cabezal de reproducción rojo al fotograma 140.

8. Selecciona la herramienta Rotación 3D.

Aparece el control de rotación 3D en el clip de película seleccionado.

9. Desactiva la opción Transformación global en la parte inferior del panel Herramientas para poner la herramienta Rotación 3D en modo local.

10. Arrastra hacia abajo el control verde Y para girar el título alrededor del eje y para inclinarlo de modo que parezca que se aleja en la distancia. Su ángulo es de unos -50 grados. Puedes comprobar los valores de rotación en el panel Transformar (Ventana > Transformar).

11. Mueve el cabezal de reproducción rojo al primer fotograma clave en el fotograma 120.

12. Arrastra hacia arriba el control Y para girar el título alrededor del eje y en la dirección opuesta para que la instancia parezca solo una astilla.

El cambio en la rotación 3D se convierte en una interpolación de movimiento, por lo que el título parece oscilar en tres dimensiones.

Nota: La animación de la rotación o traslación 3D de un símbolo no es compatible actualmente con los documentos HTML5 Canvas ni con los documentos WebGL.

Animar movimientos de cámara

Hasta ahora, has aprendido a animar diferentes propiedades de las instancias de símbolos en el escenario: su posición, escala, rotación, transparencia, filtros y posición 3D.

Sin embargo, como animador, no solo diriges el movimiento de tus personajes y objetos en el escenario como una obra de teatro. También tienes el control de la cámara, lo que te convierte en algo más parecido al director de una película. Esto significa controlar hacia dónde apuntar la cámara para encuadrar la acción, hacer zoom hacia dentro o hacia fuera, hacer paneos o incluso girar la cámara para obtener un efecto especial. Todos estos movimientos de cámara están disponibles en Animate con la herramienta Cámara.

Activar la cámara

Activa la cámara con la herramienta Cámara del panel Herramientas o con el botón Añadir/Eliminar cámara que hay debajo de la línea de tiempo. Animarás la cámara para simular un efecto de alejamiento y paneo para enfocar diferentes partes de una versión estática más grande de la apertura de la película en la que has trabajado en esta lección.

1. Selecciona Archivo/Abrir y navega hasta la carpeta Lesson04/04Start para abrir 04CameraStart.fla.

Este archivo es un documento de ActionScript 3.0 que está parcialmente completado y contiene los elementos gráficos ya colocados en el escenario. La línea de tiempo contiene fotogramas añadidos y una interpolación de movimiento en la capa "title" (título).

2. Selecciona la herramienta Cámara en el panel Herramientas, o haz clic en Añadir cámara en la parte inferior de la línea de tiempo. Se añade una capa Cámara en la parte superior de la línea de tiempo y se activa. En el escenario, aparecen los controles de la cámara.

Características de la cámara

La capa Cámara funciona de forma un poco diferente a una capa normal en la que estás acostumbrado a añadir gráficos.

• El tamaño de tu escenario se convierte en el marco de la vista de tu cámara.
• Solo puedes tener una capa Cámara, y siempre está en la parte superior de todas tus otras capas.
• No puedes cambiar el nombre de la capa Cámara.
• No puedes añadir objetos ni dibujar en la capa Cámara, pero puedes añadir interpolaciones clásicas o de movimiento a la capa, lo que te permite animar el movimiento de la cámara y los filtros de la cámara.
• Cuando tu capa Cámara está activa, no puedes mover ni editar objetos en otras capas.

Desactiva la capa Cámara seleccionando la herramienta Selección, o haciendo clic en el botón Eliminar cámara en la parte inferior de la línea de tiempo.

Nota: Al hacer clic en el botón Eliminar cámara en la parte inferior de la línea de tiempo no se elimina realmente la capa Cámara; solo la oculta de la vista. Puedes volver a hacer clic en el botón para restaurar la capa Cámara. Para eliminar la capa Cámara por completo, selecciónala y haz clic en el botón Eliminar (icono de papelera).

Hacer zoom con la cámara

Primero, utilizarás la cámara para hacer zoom en una pequeña parte del escenario para enfocar a la mujer de la izquierda. Tu cámara inicialmente ocultará una parte de su cara para crear un poco de misterio.

1. Asegúrate de que tu capa Cámara está activa y de que los controles en el escenario están presentes. Hay dos modos en los controles, uno para Girar y otro para Zoom. El modo Zoom debe estar resaltado.

2. Arrastra el control deslizante hacia la derecha. La vista de la cámara se acerca al escenario.

3. Cuando el control deslizante llegue al borde del deslizador, suelta el ratón.

El control deslizante vuelve al centro, lo que te permite seguir arrastrando hacia la derecha para seguir haciendo zoom.

También puedes introducir un valor numérico para el zoom en el panel Propiedades, en la sección Propiedades de la cámara.

4. Continúa haciendo zoom con la cámara hasta que hayas alcanzado aproximadamente el 270%.

Tu escenario muestra una vista de primer plano del paisaje urbano entre los dos personajes principales.

Nota: Cuando utilices el modo de zoom de la cámara, ten en cuenta la resolución de la imagen. Como con cualquier mapa de bits, hacer un zoom demasiado drástico revelará las limitaciones de la imagen original incrustada.

Mover la cámara

No quieres que la cámara enfoque el espacio vacío entre los dos personajes, así que moverás la cámara para enfocar a la mujer.

1. Con el puntero en el escenario, arrastra la cámara hacia la izquierda.

El contenido del escenario se mueve hacia la derecha. Puede parecer un poco contradictorio, pero recuerda que estás moviendo la cámara y no el contenido del escenario. Así que si apuntas tu cámara hacia la izquierda, los objetos a la vista se moverán hacia la derecha.

2. Continúa arrastrando la cámara para encuadrar a la mujer de modo que esté en el centro con los ojos cortados en el borde superior de la cámara.

Animar un paneo

Un paneo es el movimiento de la cámara de izquierda a derecha o de arriba a abajo. En este siguiente paso, harás un paneo de la cámara lentamente hacia arriba para revelar la cara de la mujer. Utilizarás una interpolación de movimiento para animar el movimiento de la cámara.

1. En la línea de tiempo, selecciona cualquier fotograma de la capa Cámara y haz clic con el botón derecho del ratón. En el menú contextual que aparece, selecciona Crear interpolación de movimiento.

Se añade una interpolación de movimiento a la capa Cámara, indicada por los fotogramas de color azul. Actualmente solo tienes un fotograma clave, por lo que añadirás fotogramas clave adicionales más adelante en la línea de tiempo para completar el movimiento.

2. Mueve el cabezal de reproducción al fotograma 25.

3. Con el puntero sobre el escenario, arrastra la cámara hacia arriba para revelar la cara de la mujer.

Se establece un nuevo fotograma clave en el fotograma 25, y Animate crea un movimiento suave de la cámara entre los dos fotogramas clave.

4. Selecciona Bucle en la parte inferior de la línea de tiempo y mueve el marcador de inicio al primero de los fotogramas clave de la capa Cámara y mueve el marcador de fin unos fotogramas más allá del segundo fotograma clave.

5. Pulsa Intro/Retorno para previsualizar la interpolación de movimiento, que anima el paneo de la cámara hacia arriba para revelar la cara de la mujer.

Paneo por el escenario

Tus espectadores ven ahora a esta mujer misteriosa, que mira hacia su izquierda. Pero, ¿a quién o a qué está mirando? A continuación, animarás la cámara para que haga un paneo por el escenario y revele el objetivo de su mirada.

1. En la línea de tiempo, todavía en la capa Cámara, crea un fotograma clave (F6) en el fotograma 40.

La cámara mantendrá su posición desde el fotograma 25 hasta el fotograma 40.

2. Mueve el cabezal de reproducción al fotograma 70.

3. Mantén pulsada la tecla Mayús y arrastra la cámara hacia la derecha para revelar la cara del hombre.

Se crea automáticamente un nuevo fotograma clave en el fotograma 70 con la cámara en su nueva posición. La cámara hace un paneo por el escenario de izquierda a derecha entre los fotogramas 40 y 70.

Sin embargo, la cara del hombre no está completamente a la vista. A continuación, alejarás un poco el zoom de la cámara y Animate interpolará el paneo y el zoom juntos.

4. Arrastra el control deslizante del control de la cámara en el escenario hacia la izquierda para alejar un poco el zoom.

El zoom coloca la cara del hombre fuera del centro, por lo que tendrás que ajustar el encuadre ligeramente.

5. Arrastra la cámara para volver a centrar la cara del hombre.

6. Desactiva la opción Bucle y previsualiza tu animación pulsando Intro/Retorno.

La cámara hace un paneo lento hacia arriba sobre la cara de la mujer. Se detiene un momento y luego hace un paneo hacia la derecha mientras aleja ligeramente el zoom para mostrar la cara del hombre.

Alejar el zoom

Para completar la animación, alejarás el zoom de la cámara por completo para revelar a ambos personajes y todo el escenario.

1. En la línea de tiempo, crea un fotograma clave (F6) en el fotograma 90.

La cámara mantendrá su posición desde el fotograma 70 hasta el fotograma 90.

2. Mueve el cabezal de reproducción al fotograma 140.

3. En el panel Propiedades, en la sección Propiedades de la cámara, introduce 100% para el Zoom.

4. Arrastra la cámara en el escenario para volver a centrar la vista.

5. Previsualiza toda la animación pulsando Intro/Retorno.

Después de que se revele el hombre misterioso, la cámara aleja el zoom para mostrar a ambos personajes, el paisaje urbano y la animación del título que se desvanece a la vista.

Nota: Aunque solo has animado el zoom y los paneos de la cámara en esta tarea, puedes cambiar y animar la rotación de la cámara de la misma manera con el control de la cámara en el escenario Girar o la opción Girar en la sección Propiedades de la cámara del panel Propiedades.

Animar los efectos de color de la cámara

También puedes aplicar y animar los efectos de color de la cámara para crear un tinte de color o para cambiar el contraste, la saturación, el brillo o el tono de toda la vista en el escenario. En el siguiente paso, animarás la cámara para desaturar la vista, enfatizando el género de cine negro de esta promoción de película ficticia.

1. En la línea de tiempo, crea un fotograma clave (F6) en el fotograma 160.

2. En el panel Propiedades, en la sección Efectos de color de la cámara, selecciona Ajustar color.

Aparecen los valores de Brillo, Contraste, Saturación y Tono, todos ellos con un valor de 0.

3. Mueve el cabezal de reproducción al fotograma 190 y crea un nuevo fotograma clave (F6).

4. Cambia la Saturación a -100 arrastrando el valor o haciendo doble clic en el valor e introduciendo el número.

La vista a través de la cámara se desatura y todos los gráficos del escenario aparecen en blanco y negro. Animate crea una interpolación de movimiento de la cámara que se desatura cada vez más del fotograma 160 al 190.

Probar tu película

Puedes previsualizar rápidamente tu animación "frotando" el cabezal de reproducción rojo hacia delante y hacia atrás en la línea de tiempo o seleccionando Control > Reproducir. También puedes utilizar el controlador integrado en la parte inferior de la línea de tiempo.

Sin embargo, para previsualizar tu animación tal y como la verá tu público y para previsualizar cualquier animación anidada dentro de los símbolos de clip de película, debes probar tu película. Selecciona Control > Probar.

Animate exporta los archivos publicados (en este caso, un archivo SWF) y los guarda en la misma ubicación que tu archivo FLA. El archivo SWF es el medio de Animate comprimido y final que incrustarías en una página HTML para reproducirlo en un navegador con Flash Player. Animate muestra el archivo SWF en una nueva ventana con las dimensiones exactas del escenario y reproduce tu animación.

Prueba tu película tanto para tu documento 04CameraStart.fla como para tu documento 04_workingcopy.fla.

Nota: Si has seleccionado una plataforma de publicación diferente con un tipo de documento diferente (como Adobe AIR), esas opciones de reproducción estarán disponibles para ti en el menú Control > Probar película.

Consejo: El SWF exportado en el modo Probar película se reproducirá en bucle automáticamente. Para evitar el bucle en el modo Probar película, selecciona Control > Reproducción en bucle mientras la película se está reproduciendo para deseleccionar la opción Bucle.

Para salir del modo Probar película, haz clic en el botón Cerrar ventana.

También puedes previsualizar tu animación seleccionando Control > Probar película > En el navegador, y Animate exportará un archivo SWF y lo abrirá automáticamente en tu navegador predeterminado.

Generar secuencias PNG y hojas de sprites

Aunque puedes crear animaciones sofisticadas para reproducirlas como un archivo SWF con Flash Player, también puedes utilizar las potentes herramientas de Animate para crear tu animación y exportarla como una serie de imágenes para utilizarlas en otros entornos. Por ejemplo, las animaciones con HTML5 o en dispositivos móviles a menudo se basan en archivos PNG secuenciales o en un único archivo que empaqueta todas las imágenes organizadas en filas y columnas, conocido como hoja de sprites. La hoja de sprites va acompañada de un archivo de datos que describe la posición de cada imagen, o sprite, en el archivo.

Generar secuencias PNG o una hoja de sprites de tu animación es fácil. En primer lugar, tu animación debe estar dentro de un símbolo de clip de película. En el panel Biblioteca, haz clic con el botón derecho del ratón en el símbolo y selecciona Exportar secuencia PNG.

En los siguientes pasos, selecciona el destino en tu disco duro para tus imágenes y las dimensiones de tus imágenes.

Para una hoja de sprites, haz clic con el botón derecho del ratón en el símbolo y selecciona Generar hoja de sprites. El cuadro de diálogo Generar hoja de sprites que aparece proporciona diferentes opciones, como el tamaño, el color de fondo y el formato de datos particular. Haz clic en Exportar para generar la hoja de sprites y el archivo de datos. El archivo de datos determina en qué tipo de entorno de desarrollo utilizarás tu hoja de sprites. JSON, Starling, Cocos2D y Adobe Edge Animate son algunos de los formatos de datos disponibles.

Preguntas de repaso

1. ¿Cuáles son los dos requisitos de una interpolación de movimiento?
2. ¿Qué tipo de propiedades puede cambiar una interpolación de movimiento en un documento de ActionScript 3.0?
3. ¿Qué son los fotogramas clave de las propiedades y por qué son importantes?
4. ¿Cómo se puede editar la trayectoria del movimiento de un objeto?
5. ¿Qué hace la aceleración a una interpolación de movimiento?
6. ¿Qué tipo de animación es posible con la herramienta Cámara?

Respuestas de repaso

1. Una interpolación de movimiento requiere una instancia de símbolo en el escenario y su propia capa, que se denomina capa de interpolación. Ningún otro objeto de interpolación o dibujo puede existir en la capa de interpolación.

2. Una interpolación de movimiento crea transiciones suaves entre diferentes fotogramas clave de la ubicación, la escala, la rotación, la transparencia, el brillo, el tinte, los valores de filtro o la rotación o traslación 3D de un objeto.

3. Un fotograma clave marca un cambio en una o más propiedades de un objeto. Los fotogramas clave son específicos de cada propiedad, de modo que una interpolación de movimiento puede tener fotogramas clave para la posición que son diferentes de los fotogramas clave para la transparencia.

4. Para editar la trayectoria del movimiento de un objeto, selecciona la herramienta Selección y haz clic y arrastra directamente sobre la trayectoria para doblarla. También puedes seleccionar la herramienta Convertir punto de anclaje y la herramienta Subselección para sacar controles en los puntos de anclaje. Los controles controlan la curvatura de la trayectoria.

5. La aceleración cambia la tasa de cambio en una interpolación de movimiento. Sin aceleración, una interpolación de movimiento procede linealmente, donde la misma cantidad de cambio ocurre en el tiempo. Una aceleración de entrada hace que un objeto comience su animación lentamente, y una aceleración de salida hace que un objeto termine su animación lentamente.

6. La herramienta Cámara puede cambiar la vista del escenario. Utiliza la herramienta Cámara para hacer zoom en una parte diferente del escenario, alejar el zoom para mostrar más, girar o hacer un paneo. También puedes utilizar la herramienta Cámara para ajustar el tinte o el efecto de color de la vista.