F.Crear movimiento a través de la línea de tiempo

El objetivo de Adobe Edge Animate es permitir a los usuarios crear fácilmente movimiento e interacción basados en estándares sin tener que lidiar con mucho código a mano. Este capítulo explora el lado del movimiento de la ecuación a través del contenido animado y la Línea de tiempo.

Este capítulo cubre los siguientes temas:

• La Línea de tiempo
• El Cabezal de reproducción
• El Pin
• Transiciones
• Fotogramas clave
• Facilitación

Primero examinaremos la propia Línea de tiempo, junto con una variedad de controles que están incorporados en este panel integral. Luego pasaremos por algunas demostraciones en las que nos familiarizaremos tanto con el Cabezal de reproducción como con el Pin, junto con un poco sobre las Transiciones de elementos.

Animación dentro de Edge Animate

Hay muchas aplicaciones que permiten al usuario componer secuencias animadas. Los usuarios de Adobe Edge Animate pueden tener experiencia en otros programas como Director, Flash Professional, After Effects o incluso Photoshop. Todas estas aplicaciones manejan la animación de formas ligeramente diferentes, pero todas comparten algunos aspectos de las técnicas de animación y las herramientas también.  

Al igual que muchos programas de animación digital, Edge Animate emplea el concepto de "interpolación" entre fotogramas clave. En la animación tradicional basada en celdas, un animador maestro dibujaba ciertos fotogramas clave para una secuencia de animación, y los fotogramas intermedios entre estos fotogramas clave eran creados por aprendices o miembros de menor rango del equipo de animación. El objetivo siempre era crear una transición suave entre cada fotograma clave creado por el animador maestro, lo que daría como resultado una secuencia de animación completa.  

Este proceso se realiza programáticamente dentro de Edge Animate. A medida que los fotogramas clave se colocan a lo largo de la Línea de tiempo, Edge Animate registrará los cambios en los valores de las propiedades como transiciones en la posición del Cabezal de reproducción (momento en el tiempo). Como autores, tenemos la capacidad adicional de proporcionar al motor de interpolación conjuntos de instrucciones basados en una variedad de ecuaciones de aceleración. Esto permite un flujo más natural entre los fotogramas clave, y también se puede utilizar para lograr ciertos efectos como un movimiento elástico o de rebote.  

La línea de tiempo de Edge Animate

La Línea de tiempo es donde se orquesta todo el movimiento en una composición de Edge Animate. La propia Línea de tiempo comparte conceptos y construcciones de otras aplicaciones de Adobe, sobre todo Flash Professional y After Effects.

A diferencia de la línea de tiempo basada en fotogramas de Flash Professional, la Línea de tiempo de Edge Animate está basada puramente en el tiempo.  

Controles de reproducción

Los controles de reproducción en Edge Animate están todos agrupados en la esquina superior izquierda o en el panel de la Línea de tiempo. Estos controles permiten un acceso rápido a muchas de las opciones de reproducción disponibles a través de la Línea de tiempo.

Tiempo

El tiempo en Edge Animate se mide en formato de código de tiempo decimal estándar (mm:ss.ddd), y así es como se muestra en el control de Tiempo. A medida que el Cabezal de reproducción se mueve a lo largo de la Línea de tiempo, la información de esta pantalla se actualiza en consecuencia.

El usuario puede desplazar el control hacia la izquierda o hacia la derecha para ajustar el tiempo actual, o simplemente hacer clic en él, lo que lo hace editable.

Tenga en cuenta que los controles de tiempo en Edge Animate están en realidad agrupados junto con el Escenario y son accesibles desde justo debajo de ese panel. Los controles también se dividen para permitir la modificación por separado del tiempo del Cabezal de reproducción (amarillo) y del tiempo del Pin (azul), cuando está activado.

Opciones de la línea de tiempo

Estas opciones se pueden activar o desactivar en función de las necesidades actuales, ya que realizan una variedad de funciones relacionadas con la Línea de tiempo.

Estas opciones incluyen las siguientes:

• Modo de fotograma clave automático (K): Al seleccionar esta opción, Edge Animate generará fotogramas clave para varias propiedades automáticamente a medida que se ajustan a lo largo de la Línea de tiempo. Cuando no está seleccionado, cualquier fotograma clave debe insertarse manualmente.
• Modo de transición automática (X): Cuando está activado, informa a Edge Animate para que utilice transiciones inmediatas entre los ajustes de las propiedades del elemento a medida que se animan a través del tiempo.
• Alternar Pin (P): Activa y desactiva el Pin. Hablaremos del Pin con más detalle en breve.

También hay una serie de opciones presentes en la parte inferior de la Línea de tiempo:

• Mostrar sólo los elementos animados: Cuando esta opción está seleccionada, sólo los elementos cuyas propiedades están animadas se mostrarán dentro de la Línea de tiempo. Los elementos estáticos (como una imagen de fondo, por ejemplo) se ocultarán.
• Ajuste de la línea de tiempo: Activa o desactiva el ajuste de la línea de tiempo.
• Mostrar cuadrícula: Activa o desactiva la cuadrícula de la línea de tiempo y nos permite establecer las unidades de espaciado de la cuadrícula.

Más sobre el control Mostrar cuadrícula

También podemos establecer el espaciado de la cuadrícula haciendo clic en la pequeña flecha situada a la derecha de este icono para acceder a una pequeña lista de opciones. Podemos elegir mostrar las líneas de la cuadrícula sobre una selección de medidas a través de la Línea de tiempo.

Controles de la línea de tiempo

Básicamente, sólo hay cuatro controles dentro de la Línea de tiempo de los que tenemos que preocuparnos: el Cabezal de reproducción, el Pin, el Zoom y un conjunto de controles de Cuadrícula. La funcionalidad entre los controles varía mucho aquí, ya que algunos se utilizan para la reproducción, otros para la animación y otros simplemente están ahí para mejorar nuestro flujo de trabajo general. Sin embargo, todos son muy útiles.

El cabezal de reproducción

El Cabezal de reproducción es el mayor de los dos elementos de la Línea de tiempo y está representado por una línea roja sólida que indica el tiempo actual. Podemos hacer clic en el Cabezal de reproducción y desplazarlo hacia delante y hacia atrás para cambiar el tiempo actual. Cuando se reproduce una animación a través de Edge Animate, el Cabezal de reproducción se moverá junto con el tiempo actual.

Normalmente, el Cabezal de reproducción y el Pin están sincronizados. Si no es así, se pueden volver a sincronizar a través del menú de la aplicación: Línea de tiempo | Alternar Pin.

El Pin

El Pin es un control exclusivo de Edge Animate. Es una forma de fijar el estado actual de las propiedades de un elemento a un tiempo determinado, mientras se utiliza el Cabezal de reproducción para determinar en qué momento debe completarse la animación. El Pin puede colocarse antes o después del tiempo indicado por el Cabezal de reproducción, pero siempre indica un punto de inicio para la animación, con el Cabezal de reproducción indicando el final. Al cambiar cualquier propiedad del elemento mientras el Pin no está sincronizado, se creará una animación de esas propiedades que comenzará en el Pin y terminará en la posición del Cabezal de reproducción. De esta manera, podemos crear de forma rápida y libre una animación que esté estrechamente controlada a través de la Línea de tiempo. en el Cabezal de reproducción para alternar entre cada estado. También podemos utilizar el atajo de teclado (P) para realizar esta misma tarea, o incluso utilizar el control de la Línea de tiempo que realiza esta acción.

Cuando el Pin se ha activado, la dirección de la animación se indica mediante una franja de color de chevrones en la Línea de tiempo. El color será amarillo o azul, dependiendo de la dirección del movimiento; el azul indica el movimiento a la izquierda del Pin, mientras que el amarillo indica el movimiento a la derecha del Pin.  

Controles de zoom

Hay dos controles de zoom en Edge Animate, que nos permiten expandir y contraer la Línea de tiempo. Uno es el botón Ajustar la línea de tiempo al zoom que aparece como flechas dobles en la esquina inferior derecha de la Línea de tiempo. Esto expandirá o contraerá todo el tramo de la Línea de tiempo visible al ancho actual del panel de la Línea de tiempo. Puede proporcionar una buena visión general de toda la animación. El segundo control es un deslizador que aparece directamente a la derecha y permite al usuario controlar manualmente el nivel de zoom de la Línea de tiempo para acomodar lo que estamos tratando de lograr específicamente en cualquier momento particular.  

Fotogramas clave

De forma similar a su representación en After Effects, los fotogramas clave en Edge Animate aparecen a lo largo de la Línea de tiempo como pequeños diamantes. A diferencia de los fotogramas clave en Flash Professional, los fotogramas clave de Edge Animate están vinculados directamente a la propiedad que se está cambiando y no al propio elemento. Esto permite realizar ajustes de propiedad de grano fino a través de la Línea de tiempo para cualquier elemento en particular. Es muy flexible y una forma poderosa de animar las propiedades de los elementos seleccionados.

Navegación por fotogramas clave

Hay una serie de atajos de teclado en Edge Animate que ayudan a la navegación por la línea de tiempo, especialmente cuando se salta entre fotogramas clave.

Comando	Atajo
Ir al fotograma clave anterior	Ctrl + Flecha izquierda (Windows), Comando + Flecha izquierda (Mac)
Ir al siguiente fotograma clave	Ctrl + Flecha derecha (Windows), Comando + Flecha derecha (Mac)

Crear movimiento

Animar las propiedades de los elementos dentro de Edge Animate es bastante sencillo. En esta sección, vamos a repasar una serie de formas básicas de animar elementos a lo largo de la Línea de tiempo de Edge Animate. Una vez utilizando sólo el Cabezal de reproducción, y otra utilizando el Cabezal de reproducción junto con el Pin. Al realizar la misma animación de cada manera, tendremos una idea de los diferentes estilos de flujo de trabajo que Edge Animate pone a nuestra disposición cuando animamos las propiedades de los elementos a través del tiempo.

Tenga en cuenta que la mayoría de los elementos no aparecerán en la Línea de tiempo hasta que sus propiedades se modifiquen realmente a través del tiempo. La razón de esto es que si no se anima nada, no hay razón para desordenar la Línea de tiempo.

Insertar fotogramas clave

Hay una serie de mecanismos a través de los cuales podemos insertar fotogramas clave en nuestra composición: utilizando el panel Propiedades, el menú de la aplicación, los botones de fotogramas clave de la Línea de tiempo o a través del menú contextual del botón derecho del ratón. Antes de seguir adelante, echemos un vistazo rápido a cada uno de estos métodos.

Añadir fotogramas clave a través del panel Propiedades

Con cualquier elemento seleccionado, podemos colocar el Cabezal de reproducción en la Línea de tiempo y mirar el panel Propiedades para insertar nuestros fotogramas clave. Observe cómo la mayoría de los valores de las propiedades tienen un pequeño diamante junto a ellos. Al hacer clic en este control de fotogramas clave, insertaremos manualmente un fotograma clave para esa propiedad en la posición actual del Cabezal de reproducción para el elemento seleccionado.

Añadir fotogramas clave a través del menú de la aplicación

Con cualquier elemento seleccionado, podemos colocar el Cabezal de reproducción en la Línea de tiempo y mirar el menú de la aplicación para insertar nuestros fotogramas clave. Simplemente navegue hasta el menú y elija Línea de tiempo | Añadir fotograma clave y luego seleccione el tipo de fotograma clave que desea añadir, en función de la propiedad para la que deseamos establecer un fotograma clave:

No todas las propiedades tienen atajos de teclado asignados por defecto, aunque podemos asignarlos fácilmente para las propiedades más utilizadas, si lo deseamos. Esto se logra a través del menú de la aplicación: Edición | Atajos de teclado....

Utilizar los botones de fotogramas clave de la línea de tiempo

Con cualquier elemento seleccionado, podemos colocar el Cabezal de reproducción en la Línea de tiempo y mirar el área izquierda del panel de la Línea de tiempo para insertar nuestros fotogramas clave. Cualquier propiedad que tenga actualmente un fotograma clave asignado aparecerá agrupada debajo de un elemento en la Línea de tiempo. Estas propiedades existentes incluirán un pequeño icono situado a la derecha del nombre de la propiedad a través del cual podemos añadir nuevos fotogramas clave para esa propiedad específica. Para añadir nuevos fotogramas clave a las propiedades que no aparecen debajo de un elemento, podemos simplemente hacer clic con el botón derecho del ratón en el nombre del elemento y elegir Añadir fotograma clave para insertarlos:  

Utilizar el clic derecho para la inserción de fotogramas clave

Con cualquier elemento seleccionado, podemos colocar el Cabezal de reproducción en la Línea de tiempo y mirar el propio Escenario para insertar nuestros fotogramas clave. Simplemente haga clic con el botón derecho del ratón en cualquier elemento que exista en el Escenario en ese lugar de la Línea de tiempo y elija Añadir fotograma clave para insertar cualquiera de las propiedades disponibles para ese elemento.  

Animar con el cabezal de reproducción

Ahora vamos a hacer una simple animación de un elemento que se mueve de un lado a otro del Escenario, mientras gira y cambia de color utilizando el Cabezal de reproducción junto con el panel Propiedades.

1. Cree un nuevo proyecto de Edge Animate y guárdelo en su disco local.
2. Ajuste el Escenario de la siguiente manera utilizando el panel Propiedades: °° Escenario W: 600 px °° Escenario H: 350 px °° Color de fondo: #000000 °° Desbordamiento: oculto
3. Utilizando la herramienta Rectángulo, dibuje un elemento en el Escenario. Modificaremos sus propiedades en el siguiente paso, así que no se preocupe por las dimensiones o la forma.
4. Para cada propiedad listada, haga los siguientes ajustes dentro del panel Propiedades: °° Ubicación X: 20 px °° Ubicación Y: 230 px °° Tamaño W: 100 px °° Tamaño H: 100 px °° Color de fondo: #c0c0c0
5. Siguiendo con el panel Propiedades, haga clic en el diamante del fotograma clave junto a las propiedades de Ubicación, Color de fondo y Rotación. Esto establecerá un fotograma clave para cada propiedad dentro de la Línea de tiempo.
6. Asegúrese de que las propiedades de Fotograma clave automático están en su estado seleccionado en la Línea de tiempo. Dado que ya hemos marcado cada una de estas propiedades con fotogramas clave iniciales, cualquier ajuste que hagamos a través del tiempo será auto-fotograma clave.
7. Nuestro proyecto debería aparecer ahora como se muestra en la siguiente captura de pantalla. Estamos listos para proceder con el resto de este ejercicio.
8. Arrastre el Cabezal de reproducción hasta el marcador de la regla etiquetado como 0:04 y suéltelo.
9. Ahora, seleccione el elemento con la herramienta Selección y en el panel Propiedades, modifique las siguientes propiedades: °° Ubicación X: 480 px °° Color de fondo: #900000 °° Rotación: 480 grados
10. Observe que ahora tenemos barras de transición que aparecen en la Línea de tiempo con otro conjunto de fotogramas clave al final de nuestra secuencia de animación.
11. Ahora podemos desplazarnos por la Línea de tiempo arrastrando el Cabezal de reproducción hacia delante y hacia atrás, o pulsar el botón Reproducir para ver la secuencia completa.

Cuando se reproduce, el elemento debería aparecer rodando por el Escenario de izquierda a derecha, cambiando de gris a rojo mientras lo hace. El estado final resultante se muestra en la siguiente captura de pantalla:

Tenga en cuenta que cualquiera de las propiedades de un elemento puede ser keyframed, por lo tanto modificado con el tiempo en la forma en que lo hemos hecho aquí.

Animar con el Pin

Ahora vamos a realizar el ejercicio anterior, pero esta vez emplearemos el Pin para demostrar una forma alternativa de crear movimiento en Edge Animate.

1. Cree un nuevo proyecto de Edge Animate y guárdelo en su disco local.
2. Ajuste el Escenario de la siguiente manera utilizando el panel Propiedades: °° Escenario W: 600 px °° Escenario H: 350 px °° Color de fondo: #000000 °° Desbordamiento: oculto
3. Utilizando la herramienta Rectángulo, dibuje un elemento en el Escenario. Modificaremos sus propiedades en el siguiente paso, así que no se preocupe por las dimensiones o la forma.
4. Para cada propiedad listada, haga los siguientes ajustes dentro del panel Propiedades: °° Ubicación X: 20 px °° Ubicación Y: 230 px °° Tamaño W: 100 px °° Tamaño H: 100 px °° Color de fondo: #c0c0c0
5. Arrastre el Cabezal de reproducción a 0:04 en la Línea de tiempo.
6. Ahora, vaya al menú de la aplicación y seleccione Línea de tiempo | Alternar Pin. Esto desincronizará el Pin del Cabezal de reproducción. De nuevo, el Pin es el pequeño control que está directamente debajo del Cabezal de reproducción cuando no está sincronizado.
7. Agarre el Pin y arrástrelo a 0:00 en la Línea de tiempo. Esto fijará las propiedades actuales del elemento al punto 0:00 sin necesidad de insertar manualmente fotogramas clave. Mantenga el propio Cabezal de reproducción en 0:04.
8. Ahora, seleccione el elemento con la herramienta Selección y en el panel Propiedades, modifique las siguientes propiedades: °° Ubicación X: 480 px °° Color de fondo: #900000 °° Rotación: 480 grados
9. Observe que ahora tenemos barras de transición que aparecen en la Línea de tiempo sin necesidad de establecer ningún fotograma clave.
10. Vaya al menú de la aplicación y seleccione Línea de tiempo | Alternar Pin para sincronizar el Pin. También podemos alternar el Pin a través de un atajo de teclado como se expresó anteriormente en este capítulo.
11. Ahora podemos desplazarnos por la Línea de tiempo arrastrando el Cabezal de reproducción hacia delante y hacia atrás, o pulsar el botón Reproducir para ver la secuencia completa.

Cuando se reproduce, el elemento debería aparecer rodando por el Escenario de izquierda a derecha, cambiando de gris a rojo mientras lo hace.

Tenga en cuenta que, aunque en este caso el Pin se colocó en un momento anterior en relación con el Cabezal de reproducción dentro de nuestra Línea de tiempo, no tiene por qué ser así. También podemos colocar el Pin en un momento posterior al del Cabezal de reproducción y se mostrará el mismo comportamiento: las propiedades actuales se fijan a la posición del Pin mientras que las propiedades ajustadas se alinean con la posición del Cabezal de reproducción.

Editar transiciones

Una vez que se ha establecido una transición, se puede ajustar mediante la interacción del ratón a través de la Línea de tiempo. Para ajustar el retardo, la duración y el final de la transición, simplemente hacemos clic y arrastramos los indicadores visuales de la transición dentro de la propia Línea de tiempo. Tenga en cuenta que las transiciones se pueden ajustar por objeto o por propiedad, lo que permite una gran libertad a la hora de definir el comportamiento del movimiento.

Retraso de la transición

Determina cuándo debe comenzar la transición, medido desde el inicio de la Línea de tiempo general. La modificación de este valor se realiza moviendo toda la transición o arrastrando el borde más a la derecha.

Duración de la transición

Representa el tiempo que ocupa toda la transición. Las transiciones pueden ampliarse o acortarse fácilmente arrastrando el borde más a la derecha.

Fin de la transición

Es el momento en que la transición se completa dentro de la Línea de tiempo.

Modificar las propiedades de los elementos en función de la transición

Para seleccionar una transición para editar las propiedades de los elementos dentro del panel Propiedades, utilice el ratón para seleccionar un bloque de Transición dentro de la Línea de tiempo. El cursor debería cambiar a una pequeña mano que agarra y al hacer clic en la transición hará que ésta, junto con cualquiera de sus fotogramas clave, se resalte. Ahora sabemos que el elemento está seleccionado y podemos ver que el panel Propiedades se ajusta para reflejar las propiedades de ese elemento en la posición del Cabezal de reproducción.

Para ajustar cualquier propiedad a través del tiempo, simplemente mueva el Cabezal de reproducción para ver cómo el panel Propiedades se ajusta a estos cambios.

Tenga en cuenta que al cambiar el comportamiento de aceleración de una transición, podemos seleccionar todo el bloque de transición del elemento o podemos elegir transiciones de propiedades individuales para aplicar una variedad de tipos de transición al mismo elemento. Es bastante flexible.

Controles de aceleración de la transición

Habrá notado que los movimientos logrados a través de los ejemplos presentados hasta ahora han sido transiciones lineales simples de un valor a otro. Para proporcionar una mayor sensación de realismo y una naturaleza más completa y dinámica a las transiciones individuales, también tenemos la capacidad de asignar una variedad de ecuaciones de aceleración a nuestras transiciones.  

Hay muchas opciones de aceleración dentro de Adobe Edge Animate. La predeterminada es Lineal, que simplemente expresará una transición de A a B de forma totalmente lineal. A menudo, se requiere un algoritmo de aceleración de naturaleza más dinámica para expresar un poco más de realismo en el movimiento, o para lograr un efecto específico. Edge Animate viene con no menos de 32 opciones de aceleración, para proporcionar al usuario una variedad de opciones a la hora de determinar la aceleración de la transición. Los algoritmos de aceleración de transición disponibles en Edge Animate son similares a otros que se encuentran en muchas bibliotecas de ActionScript para animar el contenido de Flash Professional. A diferencia de Flash Professional, Edge Animate todavía no tiene la capacidad de personalizar estos preajustes.  

Tipos de aceleración de transición

Aunque Edge Animate nos proporciona un gran número de tipos de aceleración, puede que no sea obvio para muchos usuarios lo que hacen exactamente a primera vista. Es muy sencillo configurar un proyecto de Edge Animate que nos permita ajustar y visualizar cada uno de estos tipos de aceleración cuando se aplican a una transición simple. Hemos incluido un proyecto de este tipo en el directorio llamado EasingVisualization, para una referencia rápida.

Casi todos los tipos de aceleración tienen tres variantes de sí mismos: ease in, ease out y ambos ease in y ease out juntos.

Transiciones cambiantes

Edge Animate hace que sea muy fácil cambiar las transiciones de un lado a otro a través de la Línea de tiempo. Simplemente utilice el cursor del ratón para agarrar una transición (haga clic y mantenga pulsado) y luego mueva el ratón hacia delante y hacia atrás a lo largo de la Línea de tiempo hasta que la transición aparezca en la ubicación deseada. Suelte el ratón para completar el cambio.

Cambiar la duración de la transición

Para ajustar la duración de cualquier transición, simplemente pase el cursor del ratón por encima del principio o el final de cualquier bloque de transición hasta que el cursor cambie para indicar que es posible realizar ajustes. A continuación, haga clic y arrastre a lo largo de la Línea de tiempo para ajustar la longitud de una transición en particular. También podemos seleccionar varias Transiciones de esta misma manera mediante el uso de la tecla Mayúsculas mientras hacemos selecciones adicionales a lo largo de la Línea de tiempo.

El cursor se ajustará para que parezca dos líneas con flechas que apuntan a la izquierda o a la derecha cuando se pasa por encima de una transición que podemos expandir de esta manera.

Seleccionar fotogramas clave de transición

Para seleccionar fotogramas clave individuales, simplemente haga clic en el fotograma clave deseado y realice la modificación que desee. Algunas opciones posibles incluyen pulsar la tecla Suprimir del teclado para eliminar los fotogramas clave seleccionados, o modificar la transición a través del menú contextual del botón derecho del ratón.  

El cursor se ajustará para que parezca una pequeña mano que apunta si podemos seleccionar un fotograma clave. Por supuesto, no se puede interactuar de ninguna manera con los fotogramas clave de los elementos bloqueados.

Seleccionar varias transiciones

Mantener pulsada la tecla Mayúsculas mientras se seleccionan los fotogramas clave permitirá la selección de varios fotogramas clave. Alternativamente, se puede dibujar un rectángulo de selección a través de varios fotogramas clave, pero esto es impreciso, ya que lo más probable es que también se seleccionen transiciones completas.

Copiar y pegar fotogramas clave

Mientras los fotogramas clave están seleccionados, podemos copiar y pegar fácilmente estos fotogramas clave de un punto de la Línea de tiempo a otro moviendo el Cabezal de reproducción a otra posición antes de pegarlos. Este es un buen mecanismo para copiar las propiedades exactas que queremos y replicarlas a través de la Línea de tiempo.

Generar transiciones a través de fotogramas clave

Con varios fotogramas clave seleccionados, podemos elegir hacer clic con el botón derecho del ratón sobre ellos para eliminar o crear transiciones entre ellos. Esto es útil cuando hemos utilizado el modo de auto-transición pero luego decidimos conservar los fotogramas clave pero eliminar la transición suave entre ellos, o realizar la intención inversa.

Expandir y contraer la duración de la composición

Seleccionando todas las transiciones dentro de una composición, podemos estirar o encoger fácilmente la duración total de acuerdo con la longitud ajustada de la composición arrastrando la cabeza o la cola de la transición en la dirección apropiada.

Cuando ajustamos la longitud de una composición de esta manera, todos los fotogramas clave se desplazarán en consecuencia. Tenga en cuenta que los tiempos de toda la composición se desplazarán debido a esto.

Animar la cabecera de un sitio web

Uno de los casos de uso básicos de Adobe Edge Animate es la creación de una cabecera de sitio web simplemente animada. Vamos a crear una composición de este tipo para un proyecto de grabación de estudio con el nombre de An Early Morning Letter, Displaced, que desea que las imágenes de cada uno de sus lanzamientos se animen en la propia cabecera. Afortunadamente, nos han proporcionado todos los activos necesarios para la construcción de esta cabecera animada.

Estos activos se incluyen como parte de los archivos de este capítulo y se encuentran en la carpeta llamada banner_assets.

Configuración del proyecto, importación de activos y diseño general

El primer paso en esta composición será configurar nuestro proyecto de Edge Animate, importar todos los activos y organizarlos en el Escenario. Comenzaremos por organizar los activos en su forma final, tal y como deberían aparecer al final de la animación una vez que haya completado la reproducción. El Pin hace que sea bastante fácil animar "hacia atrás".

1. Cree un nuevo proyecto de Edge Animate y guárdelo en el disco local.
2. Ajuste el Escenario de la siguiente manera utilizando el panel Propiedades: °° Escenario W: 940 px °° Escenario H: 198 px °° Color de fondo: #000000 °° Desbordamiento: oculto
3. Vaya al menú de la aplicación y seleccione Archivo | Importar... para que aparezca un explorador de archivos.
4. Seleccione todos los archivos .png que se encuentran dentro de la carpeta de activos proporcionada y haga clic en Abrir. Los archivos seleccionados se colocarán en el Escenario y también se añadirán a la Biblioteca del proyecto.
5. La imagen de fondo tiene el tamaño exacto del propio Escenario y debería llenar toda esta área.
6. El arte del álbum puede organizarse uniformemente en la parte inferior del Escenario, como se ve en la siguiente captura de pantalla. Podemos utilizar el ratón o el panel Propiedades para organizar estas imágenes. Espácielos uniformemente entre sí.
7. Por último, tenemos que añadir un título a esta animación de cabecera. Utilizaremos la herramienta Texto para formar el nombre del proyecto en la parte superior de la cabecera. Elija la Herramienta Texto (T) ahora.
8. Añada un nuevo elemento de texto al Escenario y escriba el término An Early Morning Letter, Displaced en el campo.
9. Con este elemento de texto seleccionado, entre en el panel Propiedades y realice los siguientes ajustes: °° ID: Título °° Ubicación X: 16 px °° Ubicación Y: 11 px °° Nombre de la fuente: Arial Black, Gadget, sans-serif °° Tamaño de la fuente: 40 px °° Color de la fuente: #bbbbbb
10. Ahora deberíamos tener una composición que aparece como se muestra en la siguiente captura de pantalla:

Realización de la animación de los elementos

Ahora realizaremos la animación de todos los elementos en el Escenario mediante el uso del Cabezal de reproducción, la Marca y el panel Propiedades.

Animar el fondo

Crearemos una transición de 00:07.000 de duración, que desvanecerá el elemento de fondo mientras ajusta ligeramente su escala.

1. Utilizando la herramienta Selección, haga clic en el elemento bg para que aparezcan sus propiedades.
2. En la Línea de tiempo, mueva el Pin a 00:07.000 y el Cabezal de reproducción a 00:00.000.
3. Utilizando el panel Propiedades, realice los siguientes ajustes: °° Escala (vinculada): 115 % °° Opacidad: 25 %
4. En la Línea de tiempo, haga clic en la transición que acabamos de crear para seleccionarla.
5. En la Línea de tiempo, cambie la selección de Facilitación a Facilitación de salida | Seno para determinar cómo debe producirse la transición en la reproducción. Deje las transiciones de escala como Lineales.

Animar la carátula (haga esto para cada imagen de la carátula)

Para cada imagen, crearemos una transición de 00:02.000 de duración, que deslizará la imagen desde fuera de la pantalla, dando como resultado un rebote juguetón antes de llegar al reposo. Escalonaremos las transiciones de cada imagen subsiguiente para que comiencen en el punto medio de la transición anterior, creando una ráfaga de movimiento dentro de la composición.

1. Utilizando la herramienta Selección, haga clic en el elemento fvm001 para que aparezcan sus propiedades.
2. En la Línea de tiempo, mueva el Pin a 00:02.090 y el Cabezal de reproducción a 00:00.000.
3. Utilizando el panel Propiedades, realice el siguiente ajuste: °° Ubicación X: 986 px
4. En la Línea de tiempo, haga clic en la transición de opacidad que acabamos de crear para seleccionarla.
5. En la Línea de tiempo, cambie la selección de Facilitación a Facilitación de salida | Rebote para determinar cómo debe producirse la transición en la reproducción.
6. Repita los pasos anteriores para cada una de las demás imágenes de la carátula del álbum.

Edge Animate también incluye la opción de pegar varios elementos de una transición de un objeto a otro. Para las transiciones repetibles como ésta, podemos echar un vistazo a los comandos Pegado especial en el menú Edición de la aplicación.

Animar el texto del título

Crearemos una transición de 00:05.500 de duración, que desvanecerá el elemento de texto del título.

1. Utilizando la herramienta Selección, haga clic en el elemento Título para que aparezcan sus propiedades.
2. En la Línea de tiempo, mueva el Pin a 00:06.000 y el Cabezal de reproducción a 00:05.000.
3. Utilizando el panel Propiedades, realice el siguiente ajuste: °° Opacidad: 0 %
4. En la Línea de tiempo, haga clic en la transición que acabamos de crear para seleccionarla.
5. En la Línea de tiempo, cambie la selección de Facilitación a Facilitación de entrada | Cúbica para determinar cómo debe producirse la transición en la reproducción.

¡Terminando!

Una vez que todos los elementos se añaden al Escenario, se posicionan correctamente y se animan adecuadamente a través de las transiciones, la Línea de tiempo de Edge Animate tendrá un aspecto similar al que vemos en la siguiente captura de pantalla:

Edge Animate facilita la visualización exacta de lo que ocurre en una composición a través de indicadores de transición de grano fino, que se corresponden con las propiedades de los elementos individuales.

El resultado de nuestro banner animado aparece en un navegador web, como se muestra en la siguiente captura de pantalla. Para publicar una composición de Edge Animate en el navegador, podemos elegir Archivo | Vista previa en el navegador en el menú de la aplicación. Observe que no hay interactividad en ninguno de los elementos de este banner. En el siguiente capítulo, conectaremos una serie de formas de interactuar con los elementos individuales dentro de esta composición.

Técnicas de animación automatizadas

Aunque siempre es posible realizar la animación de elementos individuales, por razones de precisión o conveniencia, a menudo podemos desear aprovechar las automatizaciones especiales que Edge Animate pone a nuestra disposición para su uso. En consecuencia, los hábitos de flujo de trabajo pueden ser agilizados mediante el uso de los comandos de automatización que se discuten a continuación.

Pegar movimiento

Para las transiciones que necesitan ser replicadas o incluso simplemente copiadas y ajustadas ligeramente, Edge Animate incluye una serie de comandos para gestionar los atributos de movimiento copiados de un elemento a otro.

Pegar transiciones a la ubicación

Este comando replicará el movimiento exacto del elemento copiado en el elemento seleccionado. La transición terminará en la posición actual del elemento.

Pegar transiciones desde la ubicación

Este comando replicará el movimiento exacto del elemento copiado en el elemento seleccionado. La transición comenzará en la posición actual del elemento.

Pegar invertido

Este comando, muy útil, nos permite pegar una transición a la inversa, lo que resulta muy eficaz para crear un movimiento de vaivén.

Pegar acciones

Este comando pegará sólo las Acciones presentes en un elemento en otro elemento. Consulte el siguiente capítulo para obtener más información sobre las Acciones.

Pegar todo

Este comando, como su nombre indica, pegará todo lo que pueda entre los elementos.

Ejemplo de automatización

Para demostrar el efecto que los comandos Pegar transiciones a la ubicación, Pegar transiciones desde la ubicación y Pegar invertido tendrían sobre una serie de elementos rectangulares, hemos preparado la siguiente demostración. Los archivos de proyecto para este ejemplo se pueden encontrar en el directorio PastingMotion.

Estado inicial

En este primer estado, simplemente hemos dispuesto cuatro elementos rectangulares de diferentes colores a lo largo del centro de nuestro Escenario. Hemos nombrado cada elemento de acuerdo con el comportamiento de pegado que se le aplicará, junto con el bloque superior que representa la transición original desde la que se pegarán los demás.

Para esta transición original, simplemente tenemos el elemento que se mueve a la derecha de nuestro Escenario desde su ubicación en el centro. Los otros tres elementos no tienen ninguna transición en este punto.

Estado de inicio de la transición

Este estado representa el comienzo de nuestra composición. Hemos copiado y pegado la información de la transición en cada elemento según su nombre. Podemos ver que la mayoría de los elementos aparecen en el centro, como el original, excepto el elemento al que se le aplicó el comando Pegar transiciones a la ubicación:

Estado final de la transición

Este estado representa el final de la composición y, al compararlo con la captura de pantalla anterior, podemos comprender con precisión cómo se vieron afectadas las transiciones de cada elemento por el tipo de comando Pegar aplicado.

Elementos del menú de Adobe Edge Animate

Ahora veremos algunos de los elementos del menú de Edge Animate, que se pueden utilizar junto con las transiciones y la Línea de tiempo cuando se trata de movimiento.

Editar

El menú Editar permite la manipulación directa de objetos mediante comandos de cortar, copiar y pegar, junto con opciones de selección y acceso a un historial de deshacer/rehacer.

Comando	Descripción
Deshacer	Revierte la última acción.
Rehacer	Vuelve a realizar una acción de Deshacer.
Cortar	Elimina la selección y la coloca en el portapapeles.
Copiar	Copia una selección y la coloca en el portapapeles.
Pegar	Pega una selección del portapapeles.
Pegado especial	En realidad, se trata de una serie de comandos que permiten pegar atributos específicos. Al igual que cualquier comando Pegar, estos atributos o un elemento que los acompañe deben haber sido cortados o copiados previamente a esto.
Pegado especial	Pegar transiciones a la ubicación
Pegado especial	Pegar transiciones desde la ubicación
Pegado especial	Pegar invertido
Pegado especial	Pegar acciones
Pegado especial	Pegar todo
Duplicar	Hace una copia del elemento seleccionado.
Seleccionar todo	Selecciona todo lo visible en el Escenario.
Transformar	Activa la herramienta Transformar.
Eliminar	Elimina el elemento seleccionado.
Atajos de teclado...	Abre el cuadro de diálogo Atajos de teclado.

Línea de tiempo

Como Edge Animate es una herramienta centrada en el movimiento y la animación, los comandos de la Línea de tiempo que se enumeran en la siguiente tabla son fundamentales para lograr el máximo rendimiento a través de la interfaz de la aplicación:

Comando	Descripción
Reproducir/Detener	Activa o desactiva la reproducción de la Línea de tiempo.
Volver	Devuelve el Cabezal de reproducción a la posición anterior.
Ir al inicio	Envía el Cabezal de reproducción de la Línea de tiempo a 0 milisegundos.
Ir al final	Envía el Cabezal de reproducción de la Línea de tiempo al final de la Línea de tiempo establecida.
Ir al fotograma clave anterior	Salta el Cabezal de reproducción al fotograma clave anterior.
Ir al siguiente fotograma clave	Salta el Cabezal de reproducción al siguiente fotograma clave.
Modo de fotograma clave automático	Al activar esta opción, Edge Animate generará fotogramas clave para varias propiedades automáticamente a medida que se ajustan a lo largo de la Línea de tiempo.
Modo de transición automática	Informa a Edge Animate para que utilice transiciones inmediatas entre los ajustes de las propiedades del elemento.
Añadir fotograma clave	Añade un fotograma clave de un determinado tipo seleccionado. Este comando mostrará un menú que nos permitirá seleccionar la propiedad a la que asignar el fotograma clave.
Insertar etiqueta	Añade un marcador de etiqueta en la posición actual del Cabezal de reproducción. El nombre de la etiqueta se puede editar.
Insertar disparador	Añade un nuevo Disparador a la capa de Acciones a lo largo de la Línea de tiempo en la posición actual del Cabezal de reproducción.
Invertir transiciones	Básicamente invertirá una transición por completo.
Insertar tiempo	Invoca un cuadro de diálogo que permite insertar tiempo que se extiende desde la posición actual del Cabezal de reproducción a lo largo de la Línea de tiempo. Esto extenderá también la longitud total de la Línea de tiempo.
Alternar Pin	Activará o desactivará el Pin, dependiendo de las preferencias particulares al animar los elementos.
Voltear el cabezal de reproducción y el Pin	Cambia la posición del cabezal de reproducción con la del Pin. Sólo está disponible cuando el Pin está activo.
Ajustar	Activa o desactiva el ajuste.
Ajustar a	Especifica los ajustes de ajuste cuando el ajuste se ha activado.
Ajustar a	Cuadrícula
Ajustar a	Cabezal de reproducción
Ajustar a	Fotogramas clave, etiquetas, disparadores
Mostrar cuadrícula	Activa o desactiva la visualización de la Cuadrícula de la Línea de tiempo.
Cuadrícula	Permite elegir la colocación incremental de las líneas de la cuadrícula a lo largo de la Línea de tiempo.
Acercar	Escala el Escenario desde su escala actual.
Alejar	Escala el Escenario desde su escala actual.
Ajustar al zoom	Escala el Escenario para que quepa dentro de las restricciones impuestas por el tamaño de la ventana de la aplicación.
Expandir/Contraer seleccionado	Expande los elementos seleccionados dentro de la Línea de tiempo para exponer sus fotogramas clave individuales.
Expandir/Contraer todo	Expande todos los elementos dentro de la Línea de tiempo para exponer sus fotogramas clave individuales.

Resumen

En este capítulo, hemos examinado cómo crear movimiento en Adobe Edge Animate haciendo uso de la Línea de tiempo, el Cabezal de reproducción, el Pin y el panel Propiedades. Aquellos que estén familiarizados con Flash Professional o After Effects deberían reconocer lo familiares que son muchos de estos conceptos, y posiblemente lo refinados y evolucionados que se han vuelto estos conceptos al implementarse en la interfaz de la aplicación Edge Animate. Es bastante fácil crear y editar animaciones dentro de una composición de Edge Animate.

En el siguiente capítulo, veremos cómo añadir interactividad a un proyecto de Edge Animate mediante el uso de Acciones y Disparadores.