Hay dos formas diferentes con las que podemos crear un proyecto de Edge Animate. La primera opción es simplemente hacer clic en Crear nuevo, en la pantalla de bienvenida. Esto creará inmediatamente un nuevo proyecto de Edge Animate con un escenario en blanco. El segundo método de crear un nuevo proyecto Edge Animate es mediante el menú de archivos. Simplemente pulsando en Archivo y, a continuación, en Nuevo, se obtendrá exactamente el mismo efecto.

Nota:

Alternativamente, puede utilizar los métodos abreviados de teclado: Ctrl + N (para Windows) o Comando + N (para Mac).

Cualquiera que sea el método que elija, en este momento tendrá abierto un nuevo proyecto en Edge Animate. Este proyecto parecerá demasiado elemental para comenzar, ya que consiste básicamente en un único símbolo de escenario en blanco. Este escenario es representativo del único elemento HTML que podemos localizar en el archivo HTML que Edge Animate produce al guardarlo, como puede verse en la siguiente captura de pantalla:

Guardar

Esta opción salvará el documento actual en el caso de que haya sido guardado previamente en el sistema de archivos, o si no pedirá al usuario que facilite un nombre de archivo y una ubicación para salvar el documento, caso de que finalmente se convierta en un nuevo proyecto.

Nota:

El método abreviado de teclado para esta opción es Ctrl + S (para Windows) o Comando + S (para Mac).

Guardar como…

De igual manera que la opción Guardar, esta proporciona la misma funcionalidad, pero siempre pedirá al usuario un nombre de archivo y una ubicación, mediante un diálogo del sistema. Esto resulta útil cuando se quieren guardar versiones separadas del mismo proyecto o cuando simplemente se desea guardar el proyecto en una nueva ubicación.

Nota:

El método abreviado de teclado para esta opción es Ctrl + Mayús + S (para Windows) o Comando + Mayús +S (para Mac).

En el caso de un nuevo proyecto, cualquiera de estas opciones proporcionará un diálogo del sistema de archivos. En la captura de pantalla anterior puede verse que lo que estamos guardando es, en realidad, un archivo .html. Esta es una cosa importante que hay que recordar en relación con los proyectos de Edge Animate: cuando se trabaja en el entorno de creación de Edge Animate, en realidad se está trabajando en tiempo real con el contenido que se está produciendo.

Herramientas de diseño y guía

Al trabajar con cualquier elemento en el escenario, es útil disponer de algunas herramientas que ayuden en el diseño y posicionamiento de los elementos en cuestión. Edge Animate viene equipado con una serie de herramientas que ayudan en esta tarea: herramienta Preferencias de diseño, reglas y guías.

Herramienta Preferencias de diseño

La herramienta Preferencias de diseño permite tomar algunas decisiones sobre las propiedades predeterminadas de ciertos tipos de elementos al crearlos o importarlos. La propia herramienta está situada en la barra de herramientas, en el lado a mano derecha de las muestras de color predeterminadas. Aparece como una pequeña regla en la barra de herramientas, indicando el diseño:

Cuando esta herramienta está activada, aparece una pequeña capa que permite establecer varias preferencias de diseño para el proyecto actual. La mayoría de estas preferencias tienen que ver con la forma en que se miden los elementos, usando unidades en píxeles o en porcentajes.

Nota:

Estas elecciones afectan únicamente a lo nuevo que se cree en la composición o que se importe a ella en adelante. Los elementos actualmente establecidos conservan su configuración.

La tabla siguiente detalla las opciones que se tienen al determinar las preferencias de diseño para una composición de Edge Animate. Las unidades de medida horizontal, vertical, de anchura y de altura, pese a que aparentemente tienen la misma descripción, son valores distintos, lo que se pone de manifiesto claramente al ajustar los parámetros del escenario.

Preferencia Descripción
Alineación con esquina Selecciona con qué esquina se alinea predeterminadamente.
Unidades de posición horizontal Cambian entre píxeles y porcentaje para nuevos
elementos.
Unidades de posición vertical Cambian entre píxeles y porcentaje para nuevos
elementos.
Unidades de anchura Cambian entre píxeles y porcentaje para nuevos
elementos.
Unidades de altura Cambian entre píxeles y porcentaje para nuevos
elementos.
Utilizar la etiqueta 'img' para imágenes Al importar imágenes, utilice el tipo de etiqueta img.
'auto' para la anchura de la imagen Al importar imágenes, establezca la anchura en automática.
'auto' para la altura de la imagen Al importar imágenes, establezca la altura en automática.

Reglas

Cuando están habilitadas, las reglas se disponen a lo largo del eje superior y del lado a mano izquierda, de forma similar a otras aplicaciones creativas de Adobe. Ayudan a visualizar las medidas entre elementos, la relación con el punto de registro del escenario, la alineación de elementos y mucho más.

Las reglas sirven también para la generación y posicionamiento de las guías manuales, de las que tratará en la próxima sección.

Nota:

Para activar y desactivar las reglas, elija la opción Reglas del menú Ver de la aplicación, o utilice los métodos abreviados de teclado: Ctrl + R (para Windows) y Command + R (para Mac).

Guías

Las guías y las reglas se usan conjuntamente para disponer y situar los
elementos del escenario. También pueden utilizarse para delimitar áreas en las que pueden dibujarse elementos,
utilizando herramientas como la herramienta Rectángulo o la herramienta Rectángulo redondeado:

Para crear una nueva Guía, asegúrese de que las reglas estén activadas y sean visibles en el panel Escenario. Haga clic en una regla y arrastre la nueva guía a lo largo de ese eje en concreto. Una vez la guía esté situada exactamente en el lugar que se desee, suelte el ratón para soltar la guía en su lugar.

Una vez colocada la guía, puede seguir siendo una guía en píxeles o puede transformarse en una guía en porcentajes, para ayudar con las herramientas de diseño interactivas. Para convertir la guía de unidades en píxeles a porcentajes, sitúe el cursor sobre guía y haga clic con el botón derecho. En este momento se dispone de la opción Convertir guía a porcentajes. La guía aparecerá ahora en color más verde azulado que el violeta normal, para distinguirla de una guía en píxeles. La fase de cambio de tamaño también provocará que se desplace la guía, ya que ahora está situada conforme a porcentajes y no conforme a unidades de píxeles absolutos.

Para quitar la guía, simplemente haga clic en ella y arrástrela de vuelta a la regla. Las guías pueden bloquearse desde el área Ver del menú de la aplicación. El anclado puede controlarse también desde el menú Ver.

Guías inteligentes

Cuando están habilitadas las guías inteligentes, el arrastre de elementos por el escenario provocará que aparezcan guías temporales que pueden ayudar en la colocación de elementos. Estas guías aparecerán al alinear otros elementos o para alinear con determinados aspectos del propio escenario. Por ejemplo, en la siguiente captura de pantalla, aparecen guías inteligentes cuando se arrastra un elemento al centro del escenario, lo que indica que será posible centrar el objeto si se le suelta en ese lugar.

Nota:

Las guías inteligentes pueden desactivarse en el menú de la aplicación, en Ver | Guías inteligentes. Método abreviado de teclado: Ctrl + U (para Windows) o Comando + U (para Mac).

Importación de activos externos

Además de la creación de elementos básicos de vectores y texto en una composición de Edge Animate,
existe también la posibilidad de importar activos externos para usarlos en un proyecto.
Estos activos pueden haberse preparado en otra aplicación, como Adobe
Photoshop, Illustrator, o Fireworks. En general, sería preferible utilizar estos
activos importados, en lugar de las formas simples generadas por Edge Animate, pero esto
dependerá del proyecto.
Entre los tipos de archivos que se pueden importar a Edge Animate se encuentran los siguientes:

  • SVG: gráficos de vectores escalables
  • PNG: gráficos de red portátiles)
  • JPEG: grupo conjunto de expertos fotográficos
  • GIF: formato de intercambio de gráficos

Importación de gráficos de mapa de bits

Una vez que se importa un fichero de imagen a un proyecto de Edge Animate, puede manipularse, animarse y aplicársele código, igual que a cualquier otro elemento. Para importar una imagen de mapa de bits a Edge Animate, deben realizarse las siguientes acciones:

  1. Navegar hasta el menú de la aplicación de Edge Animate.
  2. Seleccionar Archivo | Importar….
  3. Aparecerá un diálogo del sistema del explorador de archivos. Navegar hasta el archivo .png, .gif, o .jpg
    que se desea importar.
  4. Seleccionar el archivo y hacer clic en Abrir.
  5. El archivo se colocará ahora sobre el escenario, e igualmente se añadirá a la biblioteca del proyecto, en Activos. A partir de aquí, pueden añadirse varias instancias de este activo al escenario.

Nota:

Debe tenerse en cuenta que, al igual que con los archivos SVG, la instancia de archivo de mapa de bits situada sobre el escenario utilizará las dimensiones exactas del propio archivo importado, por lo que puede rebasar los límites del escenario. Eso puede solucionarse mediante la manipulación del elemento, utilizando el panel Propiedades.

Ahora que se ha importado el activo de imagen de mapa de bits y una instancia de este activo está en el escenario, pueden utilizarse las herramientas de selección y transformación para realizar manipulaciones, como cambiar el tamaño, la escala y la inclinación, de la misma manera que puede hacerse con los elementos de texto o rectángulos. Sin embargo, a diferencia de los elementos basados en vectores, los objetos de mapa de bits pueden estar sometidos a deformaciones, formación de bloques y otras distorsiones.

Nota:

También es posible, sencillamente, arrastrar y soltar sobre el escenario un archivo .jpg, .png, o .gif del explorador de archivos del sistema operativo. Esta acción tendrá el mismo efecto descrito anteriormente al trabajar con el comando de la aplicación Importar…, pero al utilizar arrastrar y soltar será posible colocar con precisión la imagen importada sobre el escenario.

Animación en Edge Animate

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

Al igual que otros 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 maestro animador dibuja ciertos fotogramas clave de una secuencia de animación, y los fotogramas que van entre dichos fotogramas clave los crean aprendices o miembros de menor cualificación del equipo de animación. El objetivo siempre es crear una transición suave entre todos los fotogramas clave creados por el maestro animador, lo que dará por resultado una
secuencia de animación completa.

Este proceso se realiza de forma programática en Edge Animate. Conforme los fotogramas clave se vayan colocando sobre 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 del tiempo). Como autores, se tiene la capacidad adicional de dar conjuntos de instrucciones al motor de interpolación, basados en una diversidad de ecuaciones de suavizado. Esto permite un flujo más natural entre fotogramas clave y también puede utilizarse para conseguir ciertos efectos como movimiento elástico o con rebotes.

Línea de tiempo de Edge Animate

La línea de tiempo es el lugar donde se organiza todo el movimiento de la composición de Edge Animate. La propia línea de tiempo comparte conceptos y construcciones de otras aplicaciones de Adobe, principalmente Flash Professional y After Effects.

Nota:

A diferencia de la línea de tiempo basada en fotogramas de Flash Professional, la línea de tiempo de Edge Animate se basa exclusivamente en el tiempo.

Controles de reproducción

Todos los controles de reproducción de Edge Animate están agrupados en la parte superior izquierda del panel de la línea de tiempo. Estos controles permiten un rápido acceso a muchas de las opciones de reproducción disponibles a lo largo de la línea de tiempo.

Hora

El tiempo, en Edge Animate, se mide en formato de código temporal decimal estándar (mm:ss.ddd) y es así como se visualiza en el control Tiempo. Conforme el cabezal de reproducción se mueve por la línea de tiempo, la información de este visualizador se actualiza adecuadamente. Un usuario puede desplazar el control a la derecha o izquierda para ajustar el tiempo actual o, simplemente, hacer clic en el mismo, lo que lo editará.

Tenga en cuenta que los controles de tiempo de Edge Animate están en realidad agrupados en torno al escenario y son accesibles justo desde debajo del panel. Los controles están también divididos, para permitir una modificación separada del tiempo del cabezal de reproducción (amarillo) y del tiempo de pin (azul), cuando estén habilitados.

Opciones de la línea de tiempo

Estas opciones pueden activarse o desactivarse conforme a las necesidades del momento, ya que realizan distintas funciones relacionadas con la línea de tiempo.

Entre estas opciones figuran las siguientes:

  • Modo de fotogramas clave automáticos (K): seleccionar esta opción habilitará a Edge Animate para generar automáticamente fotogramas clave para diversas propiedades, conforme se vayan ajustando a lo largo de la línea de tiempo. De no seleccionarse, todos los fotogramas clave deberán insertarse manualmente.
  • Modo de transición automática (X): al habilitarse, esto indica a Edge Animate que debe utilizar transiciones inmediatas entre los ajustes de propiedades de elementos conforme estos son animados a lo largo del tiempo.
  • Activación y desactivación de pin (P): activa y desactiva el anclaje. En breve se tratará con más detalle el tema del pin.

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

  • Mostrar solo elementos animados: cuando está seleccionada esta opción, en la línea de tiempo solo se visualizan los elementos cuyas propiedades estén animadas. Los elementos estáticos (como por ejemplo una imagen de fondo) permanecerán ocultos.
  • Ajuste a la línea de tiempo: activa y desactiva el ajuste a la línea de tiempo.
  • Mostrar rejilla: activa y desactiva la rejilla de la línea de tiempo y permite establecer las unidades de espaciamiento de la rejilla.

Más sobre el control Mostrar rejilla

También es posible establecer el espaciamiento de la rejilla, haciendo clic en la pequeña flecha que queda justo a la derecha de este icono, para poder acceder a una pequeña lista de opciones. Es posible escoger elegir visualizar las líneas de rejilla entre una selección de medidas a lo largo de la línea de tiempo.

Controles de la línea de tiempo

Solo hay, básicamente, cuatro controles en la línea de tiempo con los que habrá que familiarizarse: el cabezal de reproducción, el pin, el zoom y un conjunto de controles de la rejilla. Aquí varía ampliamente la funcionalidad entre controles, ya que algunos se usan para reproducción, otros para animación, y otros simplemente están ahí para potenciar el flujo de trabajo general. Sin embargo, todos ellos son muy útiles.

Cabezal de reproducción

El cabezal de reproducción es el más grande de los dos elementos de la línea de tiempo y está representado por una línea roja continua, que indica el tiempo actual. Es posible hacer clic sobre el cabezal de reproducción y desplazarlo atrás y adelante para cambiar el tiempo actual. Cuando una animación se está reproduciendo en Edge Animate, el cabezal de reproducción se mueve con el tiempo actual.

Nota:

Normalmente, el cabezal de reproducción y el pin van sincronizados. En caso contrario, pueden resincronizarse mediante el menú de la aplicación: Línea de tiempo | Activar y desactivar pin.

El pin

El pin es un control específico de Edge Animate. Es una manera de anclar el estado actual de las propiedades de un elemento a un determinado tiempo, mientras que el cabezal de reproducción se utiliza para determinar en qué momento debe completarse la animación. El pin puede situarse bien antes o después del tiempo indicado por el cabezal de reproducción, pero siempre indica un punto de comienzo de la animación, viniendo indicado el final por el cabezal de reproducción. El cambio de cualquiera de las propiedades del elemento, mientras que el pin esté sin sincronización, provocará la animación de esas propiedades en el pin, terminando en la posición del cabezal de reproducción. De esta manera, es posible crear animación controlada de forma precisa sobre la línea de tiempo, de manera rápida y libre.

Nota:

Para sincronizar o dejar de sincronizar el pin desde el cabezal de reproducción, puede hacerse doble clic en el mismo, para ir cambiando entre estados. También puede usarse el método abreviado de teclado (P) para cumplir esta misma tarea, e incluso puede usarse el control de la línea de tiempo, que puede realizar esta acción.

Una vez activo el pin, la dirección de animación se indica mediante una tira coloreada de flechas en la línea de tiempo. El color será amarillo o azul, dependiendo de la dirección de movimiento; el azul indica movimiento hacia la izquierda del pin, mientras que el amarillo indica movimiento hacia la derecha del pin.

Controles de zoom

hay dos controles de zoom en Edge Animate, que permiten expandir y contraer la línea de tiempo. Uno de ellos es el botón Hacer zoom en la línea de tiempo para encajarla, que aparece en forma de flechas dobles en la esquina inferior derecha de la línea de tiempo. Esto hará que se expanda o contraiga todo lo que abarca la línea de tiempo visible, hasta encajar con la anchura actual del panel Línea de tiempo. Con esto se puede lograr una buena visión general de toda la animación.

El segundo control es un regulador que aparece directamente a la derecha y permite al usuario controlar manualmente el nivel de zoom de la línea de tiempo, para ajustarlo a lo que se esté intentando conseguir específicamente en algún momento en particular.

Fotogramas clave

De manera similar a su representación en After Effects, los fotogramas clave de Edge Animate aparecen a lo largo de la línea de tiempo en forma de pequeños diamantes. A diferencia de los fotogramas clave de Flash Professional, los fotogramas clave de Edge Animate están unidos directamente a la propiedad que se esté cambiando, y no al propio elemento. Esto permite ajustes muy precisos de propiedades a lo largo de la línea de tiempo para cualquier elemento en particular. Es una forma muy flexible y potente de animar ciertas propiedades de elementos.

Hay una serie de métodos abreviados de teclado en Edge Animate que ayudan con la navegación por la línea de tiempo, específicamente al saltar entre fotogramas clave.

Comando Método de teclado abreviado
Ir al fotograma clave anterior Ctrl + flecha izquierda (Windows), Command + flecha izquierda (Mac)
Ir al fotograma clave siguiente Ctrl + flecha derecha (Windows), Command + flecha derecha
(Mac)

Creación de movimiento

La animación de propiedades de elementos con Edge Animate es francamente sencilla. En esta sección se pasará a ver una serie de formas básicas de animar elementos a lo largo de la línea de tiempo de Edge Animate. Una vez utilizando solo el cabezal de reproducción, y otra vez usando el cabezal de reproducción junto con el pin. Ejecutando la misma animación por los dos caminos, se podrá tener una idea de los diferentes flujos de trabajo de que dispone Edge Animate para animar propiedades de elementos a lo largo de la línea de tiempo.

Nota:

Debe tenerse en cuenta que la mayor parte de los elementos no aparecen en la línea de tiempo hasta que sus propiedades no se modifiquen a lo largo del tiempo. La razón de esto es que si no hay nada que esté realmente animado, no hay razón para llenar de cosas
la línea de tiempo.

Inserción de fotogramas clave

Hay una serie de mecanismos mediante los que pueden insertarse fotogramas clave en nuestra composición; utilizando el panel Propiedades, el menú de la aplicación o los botones de los fotogramas clave de la línea de tiempo, o si no mediante el menú contextual, haciendo clic en el botón derecho. Antes de continuar, conviene dar un rápido vistazo a cada uno de estos métodos.

Adición de fotogramas clave mediante el panel Propiedades

Estando seleccionado cualquier elemento, se puede situar el cabezal de reproducción en la línea de tiempo y ver el panel Propiedades para insertar los fotogramas clave. ¿Se ha dado cuenta de que la mayor parte de los valores de propiedades tienen a su lado un pequeño diamante? Haciendo clic sobre este control de fotogramas clave, puede insertarse manualmente un fotograma clave en la posición actual del cabezal de reproducción, para el elemento seleccionado.

Adición de fotogramas clave mediante el menú de la aplicación

Estando seleccionado cualquier elemento, se puede situar el cabezal de reproducción en la línea de tiempo y ver el menú de la aplicación para insertar los fotogramas clave. Simplemente, navegue hasta el menú y elija Línea de tiempo | Añadir fotograma clave y, a continuación, seleccione el fotograma clave a añadir, conforme a la propiedad para la que se desea establecer un fotograma clave.

Nota:

No todas las propiedades tienen métodos de teclado abreviados asignados a ellas de forma predeterminada, pero es posible asignárselos fácilmente a las propiedades comúnmente utilizadas, si así se desea. Esto puede conseguirse mediante el menú de la aplicación: Editar | Métodos abreviados de teclado….

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

estando seleccionado cualquier elemento, se puede situar el cabezal de reproducción en la línea de tiempo y ver la zona izquierda del panel Línea de tiempo para insertar los fotogramas clave. Cualquier propiedad que tenga en ese momento asociado un fotograma clave aparecerá agrupada debajo de un elemento de la línea de tiempo. Estas propiedades existentes incluirán un pequeño icono situado a la derecha del nombre de la propiedad, mediante el cual se pueden añadir nuevos fotogramas clave para esa propiedad específica.

Para añadir nuevos fotogramas claves a propiedades que no aparezcan debajo de un elemento, basta con hacer clic con el botón derecho en el nombre del elemento y elegir Añadir fotograma clave para insertarlos.

Uso del botón derecho del ratón para la inserción de fotogramas clave.

Estando seleccionado cualquier elemento, se puede situar el cabezal de reproducción en la línea de tiempo y ver el propio escenario para insertar los fotogramas clave. Simplemente, haga clic con el botón derecho del ratón sobre cualquier elemento que exista en el escenario en ese lugar de la línea de tiempo, y elija Añadir fotograma clave para insertar alguna de las propiedades disponibles para dicho elemento.

Animación con el cabezal de reproducción

Ahora se realizará una animación simple de un elemento, moviéndolo de un lado del escenario a otro, mientras gira y cambia el 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 utilizando el panel Propiedades, como se indica a continuación:

    • Escenario W (anchura): 600 px
    • Escenario H (altura): 350 px
    • Color de fondo: #000000
    • Desbordamiento: oculto
  3. Usando la herramienta rectángulo, dibuje un elemento en el escenario. En el próximo paso se modificarán sus propiedades, por lo que no debe preocuparse ni por las dimensiones ni por la forma.

  4. Para cada propiedad enumerada, haga los siguientes ajustes en el panel Propiedades:

    • Ubicación X: 20 px
    • Ubicación Y: 230 px
    • Tamaño W (anchura): 100px
    • Tamaño H (altura): 100 px
    • Color de fondo: #c0c0c0
  5. Siguiendo en el panel Propiedades, haga clic en el diamante del fotograma clave próximo a las propiedades, para las opciones Ubicación, Color de fondo y Rotación. Esto asignará un fotograma clave a cada propiedad de la línea de tiempo.

  6. Asegúrese que la propiedad de Fotograma clave automático esté en estado seleccionado en la línea de tiempos. Como ya se ha marcado cada una de esas propiedades con los fotogramas clave iniciales, cualquier ajuste que se haga a lo largo del tiempo recibirá asignación automática de fotogramas clave.

  7. El proyecto debe aparecer ahora como se muestra en la siguiente captura de pantalla. Ya está listo para proceder con el resto del ejercicio.

  8. Arrastre el cabezal de reproducción sobre el marcador de regla, en la marca 0:04, y suéltelo.

  9. Ahora, seleccione el elemento con la herramienta Selección y, en el panel Propiedades, modifique las propiedades siguientes:

    • Ubicación X: 480 px
    • Color de fondo: #900000
    • Rotación: 480 grados
  10. Observe que ahora aparecen barras de transición en la línea de tiempo, con otro conjunto de fotogramas clave al final de la secuencia de animación.

  11. Ahora es posible desplazarse a lo largo de la línea de tiempo, arrastrando el cabezal de reproducción hacia atrás y adelante, o pulsar el botón Reproducir para ver la secuencia completa. Al reproducirse, el elemento debiera aparecer rodando a lo largo del escenario, de izquierda a derecha, cambiando de gris a rojo conforme lo va haciendo. El estado final resultante se visualiza en la captura de pantalla siguiente:

    Nota:

    Tenga en cuenta que cualquiera de las propiedades de un elemento puede ponerse como fotograma clave y, de esa manera, puede modificarse en el tiempo de la forma en que se ha hecho aquí.

Animación con el pin

Ahora se vuelve a realizar el ejercicio precedente, pero esta vez utilizando el pin, para demostrar una manera 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 utilizando el panel Propiedades, como se indica a continuación:

    • Escenario W (anchura): 600 px
    • Escenario H (altura): 350 px
    • Color de fondo: #000000
    • Desbordamiento: oculto
  3. Usando la herramienta rectángulo, dibuje un elemento en el escenario. En el próximo paso se modificarán sus propiedades, por lo que no debe preocuparse ni por las dimensiones ni por la forma.

  4. Para cada propiedad enumerada, haga los siguientes ajustes en el panel Propiedades:

    • Ubicación X: 20 px
    • Ubicación Y: 230 px
    • Tamaño W (anchura): 100 px
    • Tamaño H (altura): 100 px
    • Color de fondo: #c0c0c0
  5. Arrastre el cabezal de reproducción hasta 0:04 en la línea de tiempo.

  6. Ahora, vaya al menú de la aplicación y seleccione Línea de tiempo | Activar y desactivar pin. Esto dejará el pin sin sincronización con el cabezal de reproducción. De nuevo, el pin es el pequeño control por debajo del cabezal de reproducción en estado de no sincronización.

  7. Capture el pin y arrástrelo hasta 0:00 en la línea de tiempo. Esto anclará las propiedades actuales de los elementos 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 propiedades siguientes:

    • Ubicación X: 480 px
    • Color de fondo: #900000
    • Rotación: 480 grados

    Observe que ahora aparecen barras de transición en la línea de tiempo, sin ninguna necesidad de asignar fotogramas clave.

  9. Vaya al menú de la aplicación y seleccione Línea de tiempo | Activar y desactivar ancla para sincronizar el pin. También se puede activar o desactivar el pin mediante un método abreviado de teclado, como se indicó anteriormente en este capítulo.

  10. Ahora es posible desplazarse a lo largo de la línea de tiempo, arrastrando el cabezal de reproducción hacia atrás y adelante, o pulsar el botón Reproducir para ver la secuencia completa. Al reproducirse, el elemento debiera aparecer rodando a lo largo del escenario, de izquierda a derecha, cambiando de gris a rojo conforme lo va haciendo.

    Nota:

    Tenga en cuenta que, en este caso, el pin estaba situado en un momento anterior en relación con el cabezal de reproducción de la línea de tiempo, lo cual no tiene que ser así necesariamente. También se puede situar el pin en un momento posterior al cabezal de reproducción, en cuyo caso el comportamiento será el mismo: las propiedades actuales se anclan en la posición del pin, mientras que las propiedades ajustadas se alinean con la posición del cabezal de reproducción.

Edición de transiciones

Una vez establecida una transición, puede ajustarse en la línea de tiempo, mediante interacción con el ratón. Para ajustar el retardo, la duración y el final de la transición, simplemente se hace clic en los indicadores de transición visual y se arrastran dentro de la propia línea de tiempo.

Nota:

Tenga en cuenta que las transiciones pueden ajustarse en base a cada objeto o a cada propiedad, lo que permite un amplio grado de libertad al definir el comportamiento del movimiento.

Demora de transición

Determina cuando ha de empezar la transición, midiendo desde el comienzo de la línea de tiempo general. La modificación de este valor se logra moviendo la transición completa o arrastrando el borde de más a la derecha.

Duración de la transición

Representa el tiempo que lleva efectuar la transición completa. Las transiciones pueden alargarse o acortarse fácilmente, arrastrando el borde de más a la derecha.

Final de la transición

Es el tiempo en que la transición se completa en la línea de tiempo.

Modificación de propiedades de elementos conforme a la transición

Para seleccionar una transición para editar las propiedades de los elementos en el panel Propiedades, utilice el ratón para seleccionar un bloque de transición en la línea de tiempo. El cursor debe pasar a tomar la forma de una mano que agarra y, el hacer clic en la transición hará que el cursor se destaque, junto con todos sus fotogramas clave.

Ahora se sabe que el elemento está seleccionado y se puede ver como los ajustes del panel Propiedades reflejan las propiedades de dicho elemento en la posición del cabezal de reproducción. Para ajustar cualquier propiedad a lo largo del tiempo, basta con mover el cabezal de reproducción, para ver como el panel Propiedades se ajusta a esos cambios.

Nota:

Tenga en cuenta que, al cambiar el comportamiento de suavizado de una transición, puede seleccionarse el bloque entero de transición del elemento o se pueden elegir transiciones de propiedad individuales para aplicar una diversidad de tipos de transición al mismo elemento. Es tremendamente flexible.

Controles de suavizado de transición

Probablemente habrá notado que el movimiento alcanzado en los ejemplos presentados hasta aquí ha sido monótono, transiciones lineales de un valor a otro. Para proporcionar un mayor sentido de realismo y una naturaleza más completa y dinámica a las transiciones individuales, también se dispone de la posibilidad de asignar una variedad de ecuaciones de suavizado a las transiciones.

Existen muchas posibilidades de elección de suavizado en Adobe Edge Animate. El valor predeterminado es Lineal, que indica simplemente una transición de A a B de una forma enteramente linear. A menudo, se requiere un algoritmo de suavizado de naturaleza más dinámica, para expresar un poco más de realismo en el movimiento o para conseguir un efecto específico. Edge Animate viene con un mínimo de 32 posibilidades de suavizado, para proporcionar al usuario una diversidad de opciones al determinar cuál ha de ser el suavizado de la transición.

Nota:

Los algoritmos de suavizado de transición disponibles en Edge Animate son similares a otros que hay en muchas bibliotecas de ActionScript para animar el contenido de Flash Professional. A diferencia de Flash Professional, Edge Animate se basa exclusivamente en el tiempo.

Tipos de suavizado de transición

Si bien Edge Animate suministra un gran número de tipos de suavizado, lo que estos hacen puede no resultar obvio a primera vista para muchos usuarios. Es muy sencillo diseñar un proyecto de Edge Animate que permita ajustar y visualizar cada uno de estos tipos de suavizado al aplicarlos a una transición sencilla.

Nota:

Casi todos los tipos de suavizado tienen tres variantes propias, más suavizado, menos suavizado y ambas cosas a la vez.

Desplazamiento de transiciones

Edge Animate hace muy sencillo desplazar transiciones haca atrás y adelante a lo largo de la línea de tiempo. Utilice simplemente el cursor del ratón para coger una transición (hacer clic y mantener pulsado) y mueva entonces el ratón hacia atrás y adelante de la línea de tiempo hasta que la transición aparezca en la posición deseada. Suelte el botón del ratón para completar el desplazamiento.

Cambio de la duración de la transición

Para ajustar la duración de cualquier transición, basta con poner el cursor del ratón encima del comienzo o del final de cualquier bloque de transición, hasta que el cursor cambie, indicando que pueden efectuarse los ajustes. Para ajustar la longitud de una transición en particular, haga clic y arrastre por la línea de tiempo. También se pueden seleccionar varias transiciones de esta misma manera utilizando la tecla Mayús al efectuar selecciones adicionales a lo largo de la línea de tiempo.

Nota:

El cursor se ajustará a la forma de dos líneas con flechas que apuntan a la izquierda o a la derecha y, al ponerlo encima de una transición, es posible expandir de esta manera.

Selección de fotogramas clave de transición

Para seleccionar fotogramas clave individuales, simplemente haga clic en el fotograma clave deseado y realice las modificaciones que desee. Entre las posibles opciones están pulsar sobre la tecla Supr del teclado para eliminar los fotogramas clave seleccionados o modificar la transición mediante el menú contextual.

Nota:

El cursor se ajustará a la forma de un pequeño puntero en el caso de que se pueda seleccionar algún fotograma clave. Por supuesto, es imposible interactuar de ninguna manera con los fotogramas clave de cualquier elemento bloqueado.

Selección de varias transiciones

Para seleccionar varios fotogramas clave, hay que mantener pulsada la tecla Mayús mientras se seleccionan los fotogramas clave. Alternativamente, puede dibujarse un rectángulo de selección sobre varios fotogramas clave, pero este método es impreciso, ya que es más que probable que también queden seleccionadas las transiciones completas.

Copia y pegado de imágenes clave

Estando seleccionados los fotogramas clave, es fácil copiar y pegar estos fotogramas clave de un punto a otro de la línea de tiempo, moviendo el cabezal de reproducción a otra posición antes de pegar. Este es un buen mecanismo para copiar las propiedades exactas que se deseen y reproducirlas a lo largo de la línea de tiempo.

Generación de transiciones mediante fotogramas clave

Estando seleccionados varios fotogramas clave, puede optarse por hacer clic en ellos con el botón derecho del ratón para eliminar o crear transiciones entre ellos. Esto resulta de utilidad cuando se ha utilizado el modo de transición automática pero en ese momento se decide retener fotogramas clave, eliminando la transición suave entre ellos, o hacer lo contrario.

Animación de la cabecera de un sitio web

Uno de los casos de utilización básica de Adobe Edge Animate es la creación de una cabecera de sitio web con animación sencilla. Se estaría preparando una composición como esta para un proyecto de grabación de estudio, siendo su nombre Una carta de primera hora de la mañana, que habría de tener imágenes de cada una de sus versiones animadas en la propia cabecera. Por suerte, nos han proporcionado todos los activos necesarios para la construcción de esta cabecera animada.

Nota:

Estos activos están incluidos como parte de los archivos de este capítulo y están en la carpeta denominada banner_assets.

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

El primer paso de esta composición consistirá en preparar el proyecto de Edge Animate, importar todos los activos y disponerlos sobre el escenario. Se comenzará por disponer los activos en su forma final, conforme deban aparecer al final de la animación, una vez se haya completado la reproducción. El pin hace muy fácil el animar “hacia atrás”.

  1. Cree un nuevo proyecto de Edge Animate y guárdelo en el disco local.

  2. Ajuste el escenario utilizando el panel Propiedades, como se indica a continuación:

    • Escenario W (anchura): 940 px
    • Escenario H (altura): 198 px
    • Color de fondo: #000000
    • Desbordamiento: oculto
  3. Vaya al menú de la aplicación y seleccione Archivo | Importar... para abrir un explorador de archivos.

  4. Seleccione todos los archivos .png situados en la carpeta de los activos facilitados y haga clic en Abrir. Los archivos seleccionados se colocarán ahora sobre el escenario, e igualmente se añadirán a la biblioteca del proyecto.

  5. La imagen de fondo tiene el tamaño exacto del propio escenario y debe llenar la totalidad de su superficie.

  6. Los temas artísticos del álbum pueden disponerse equiespaciadamente por la parte inferior del escenario, conforme puede verse en la siguiente captura de pantalla. Puede utilizarse el ratón o el panel Propiedades para disponer estas imágenes. Dispóngalas equiespaciadamente entre sí.

  7. Finalmente, es necesario añadir un título a esta animación de cabecera. Utilice la herramienta Texto para formar el nombre del proyecto a lo largo de la parte superior de la cabecera. Elija ahora la herramienta Texto (T).

  8. Añada un nuevo elemento de texto al escenario y teclee en el campo Una carta de primera hora de la mañana.

  9. Con este elemento de texto seleccionado, entre en el panel Propiedades y haga los
    siguientes ajustes:

    • ID: Título
    • Ubicación X: 16 px
    • Ubicación Y: 11 px
    • Nombre de fuente: Arial Black, Gadget, sans-serif
    • Tamaño de fuente: 40 px
    • Color de fuente: #bbbbbb
  10. Ahora se debería tener una composición con el aspecto que aparece en la siguiente captura de pantalla:

Realización de la animación de elementos

Ahora se realizará la animación de todos los elementos del escenario, utilizando el cabezal de reproducción, la marca y el panel Propiedades.

Animación del fondo

Se creará una transición que dure 00:07.000, que diluirá el elemento de fondo, a la vez que ajusta ligeramente su escala.

  1. Con 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 , haga los ajustes siguientes:

    • Escala (enlazada): 115 %
    • Opacidad: 25 %
  4. En la línea de tiempo, haga clic en la transición que se acaba de crear para seleccionarla.

  5. En la línea de tiempo, cambie la selección de suavizado Suavizar | Seno para determinar como debe ocurrir la transición durante la reproducción. Deje las transiciones de escala en Lineal.

Animación de los temas artísticos de la portada (haga esto para todas las imágenes de temas artísticos de la portada)

Para cada imagen, se creará una transición que dure 00:02.000, que hará que la imagen se deslice desde fuera hacia el interior de la pantalla, dando por resultado un vistoso efecto antes de quedar todo quieto. Se escalonarán las transiciones de cada imagen subsiguiente, de manera que empiecen en el punto central de la transición previa, creando una corriente de movimiento en la composición.

  1. Con 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, haga el ajuste siguiente:

    • Ubicación X: 986 px
  4. En la línea de tiempo, haga clic en la transición de opacidad que se acaba de crear para seleccionarla.

  5. En la línea de tiempo, cambie la selección de suavizado Suavizar | Rebote para determinar como debe ocurrir la transición durante la reproducción.

  6. Repita los pasos anteriores para todas las demás imágenes de temas artísticos del álbum.

    Nota:

    Edge Animate incluye también la opción de pegar varios elementos de una transición desde un objeto a otro. Para transiciones repetibles como esta, puede que convenga echar un vistazo a los
    comandos de Pegado especial, en el menú Edición de aplicaciones.

Animación del texto del título

Se creará una transición que dure 00:05.500, que diluirá el elemento del título del texto.

  1. Con 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, haga el ajuste siguiente:

    • Opacidad: 0 %
  4. En la línea de tiempo, haga clic en la transición que se acaba de crear para seleccionarla.

  5. En la línea de tiempo, cambie la selección de suavizado Suavizar | Cúbica para determinar como debe ocurrir la transición durante la reproducción.

¡Ya termina!

Una vez que todos los elementos se hayan añadido al escenario, situado correctamente y animado adecuadamente mediante las transiciones, la línea de tiempo de Edge Animate tendrá una apariencia similar a la de la captura de pantalla siguiente:

Nota:

Edge Animate permite ver fácilmente qué sucede en una composición mediante indicadores de transición precisos y regulares, que se corresponden con las propiedades individuales de los elementos.

El resultado del rótulo animado aparece en los navegadores web, como se muestra en la captura de pantalla siguiente. Para publicar en el navegador una composición de Edge Animate, puede elegirse Archivo | Previsualizar en navegador en el menú de la aplicación.

Resumen

En este capítulo, hemos examinado cómo crear movimiento en Adobe Edge Animate, utilizando la línea de tiempo, el cabezal de reproducción, el pin y el panel Propiedades. Los que estén familiarizados con Flash Professional o After Effects se darán cuenta de lo familiares que les resultarán muchos de estos conceptos y probablemente también de cómo se han refinado y han evolucionado estos conceptos en su implementación en la interfaz de la aplicación de Edge Animate. Es muy fácil crear y editar animaciones en una composición de Edge Animate.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea