Animaciones Compuestas en Animate (tutorai básico, parte 2)

Animate: 3 modos de animación anidando clips de película (ii)

Segunda parte del tutorial básico (ver primera parte haciendo click aquí) donde se muestran los modos de animar anidando clips de película usando animaciones fotograma a fotograma, una interpolación clásica y una animación de movimiento:

Animaciones Compuestas en Animate (tutorai básico, parte 1)

Animate: 3 modos de animación anidando clips de película (i)

Este tutorial tiene por finalidad orientar al estudiante que se inicia en el uso de Adobe Animate para crear animaciones compuestas básicas usando las líneas de tiempo de clips de película anidadas, donde se crearán, a modo de ejemplo, dos animaciones fotograma a fotograma, una interpolación clásica y una animación de movimiento para mostrar dos ejemplos de uso de cada una de éstas formas de animar; debido al caracter introductorio de este tutorial, no nos centraremos en aspectos estéticos, más allá de los mínimos necesarios, ni se utilizarán acciones (sentencias) de AcionScript, para no distraernos de los objetivos finales planteados.

Comencemos entonces:

Miércoles, 18 Mayo 2016 19:32

The Walking Bear (iii)

Controlando la línea de tiempo con ActionScript 3

Controlando la línea de tiempo con botones usando AS 3

Usando ActionScript 3 veremos como como controlar líneas de tiempo asociadas a componentes de botón, para lo que partiremos de la entrada anterior, "The Walking Bear" (ii); veremos en este caso como detener el movimiento del oso, cómo reactivar su movimiento, y también como reiniciar las líneas de tiempo de los clips implicados en el movimiento. Adicionalmente agregaremos un botón adicional que abra una dirección web en una nueva ventana del navegador web que el usuario esté usando al momento de visitar la página donde hemos publicado nuestra animación; en caso de que esté editando el archivo .fla el sistema abrirá el navegador que el usuario use por defecto.

Veamos el desarrollo del proceso:

Martes, 10 Mayo 2016 19:04

The Walking Bear (ii)

Animando un oso en Animate CC (ii)

"The Walking Bear" (ii)

Segunda y última parte del tutorial "The Walking Bear" cuya primera parte podemos consultar haciendo clic en este enlace, en la que logramos animar la cabeza, cola, pierna y pata derechas, y brazo y mano derechas del oso, en un movimiento aún bastante rudimentario, sin que el oso avanzara aún sobre el escenario.

Es posible descargar la animación lograda en la primera parte del tutorial haciendo clic en el siguiente enlace: OsoAnimado_01.fla y continuar trabajando sobre este archivo.

Vayamos ahora con el paso a paso de esta última parte del tutorial:

Martes, 10 Mayo 2016 17:53

The Walking Bear (i)

Anidando clips de películas: Oso Animado

"The Walking Bear" (i)

Continuación de las entradas Animate: Anidando clips de películas (i) y Animate: Anidando clips de películas (ii), donde vimos como anidar tres clips de película para generar el movimiento de un automóvil que se desplaza sobre el escenario, mientras sus ruedas giran acompañando el movimiento, en este tutorial veremos una forma básica de animar un personaje más orgánico; puntualmente, la sìntesis de un oso, haciendo que, a medida que el personaje avanza, haremos mover los siguentes elementos:

  • Cabeza,
  • Las dos manos y los dos brazos delanteros,
  • Las dos patas y las dos "piernas" traceras, 
  • y la cola del oso.

Para esto, utilizaremos una ilustraciòn realizada en Adobe Illustrator, la que importaremos en Adobe Animate para trabajar de la siguiente manera:

Cabezal anidando clips de película (ii)

Anidando MovieClips en Animate + Animaciones básicas (ii)

Como vimos en la primera parte de este tutorial, llegamos a anidar dos instancias de un símbolo de clip de película junto a otros símbolos gráficos dentro de un nuevo movieclip que creamos con el fin de desplazarlo sobre el escenario, sin usar la línea de tiempo principal.

El hecho de animar dentro de múltiples clips de películas en lugar de utilizar la línea de tiempo facilita los procesos de edición, y posibles modificaciones posteriores, de gran manera; el uso de múltiples elementos en una sola línea de tiempo imposibilita, además, poder establecer animaciones asincrónicas de elementos diferentes, generando animaciones repetitivas y monótonas.

Vamos con el desarrollo de esta segunda parte:

Cabezal anidando clips de película

Anidando MovieClips en Animate + Animaciones básicas

Este tutorial, está dirigido a quienes están iniciando con la animación en Adobe Animate, suponiendo que el estudiante ya tiene manejos adecuados en el uso de las herramientas de ilustración (pluma, óvalo y similares) con el programa, así como la creación de símbolos gráficos y clips de películas básicas, entendiendo entre símbolos e instancias de símbolos. También se supone que quien siga el tutorial conoce las diferencias entre archivos de extensión .fla, .swf y conceptos básicos con ActionScript.

Partiendo de los supuestos arriba mencionado alcanzaremos los siguientes objetivos:

  • Dibujar los distintos elementos que conformarán nuestro vehículo (en lugar de formas también podríamos usar la foto con vista lateral de cualquier automóvil, mostrando sus ruedas completas; más abajo hablaremos de ésto).
  • Convertir las formas logradas en símbolos gráficos y de clips de película.
  • Usar la línea de tiempo para animar objetos dentro de cada clip de película.
  • Crear interpolaciones clásicas e interpolaciones de movimiento básicas.

Comencemos entonces:

Cabezal Tutorial Flash - Duplicar capas y símbolos

Interpolación Clasica en Adobe Flash (iii) - Duplicando capas y símbolos

Previamente habíamos logrado hacer que "la tierra" diera media órbita alrededor del sol (Ver primera y segunda etapa del tutorial). En esta tercera fase buscaremos completar la órbita, haciendo que nuestra "tierra" pase, alternativamente, por delante y por detrás del sol. Para esto duplicaremos la capa "Tierra y Luna", y luego también el clip cuya instancia se generará en este duplicado de capa. Veamos el proceso completo:

1. Generamos un duplicado de la capa Tierra y Luna, la que renombraremos como "Tierra y Luna 2" y posicionaremos detrás del sol.

Cabezal tutorial órbitas en Flash

Interpolación Clasica en Adobe Flash (ii) - Líneas Guía

Este tutorial es la segunda parte de "Interpolaciones Básicas En Flash (I) - Símbolos Y Filtros", por lo que es necesario su previa lectura.

1. Partiendo de ejercicioOrbitas02.fla editaremos la línea de tiempo principal, en la que generamos una nueva capa, llamada Tierra y Luna, sobre la cual construiremos los símbolos y animaciones necesarias para representar de forma muy sintetizada, como decíamos antes, al "Planeta Tierra":

Cabezal Órbitas (i)

Interpolación Clasica en Adobe Flash (i) - Creación de símbolos, efectos de color y filtros.

Esta es la primera parte de una serie de mini-tutoriales de dificulta baja, o media, orientados a explicar una posible forma de crear y anidar símbolos y líneas de tiempos para generar una animación final que permita, de forma muy esquematizada, simular la traslación de la tierra alrededor del sol, mientras la luna orbita alrededor de ella.

En ningún momento se pretende con este ejercicio representar la realidad en forma científica, ni mucho menos, dado que las proporciones y medidas reales agregarían análisis y condiciones adicionales para las cuales este tutorial está pensado. Teniendo en cuenta entonces que, ni las escalas, ni los tiempos usados, ni la forma de las órbitas, ni ningún otro componente pretende tal fin, pongámonos a trabajar en Flash, para lo cual es requerido tener conocimiento previo de velocidad de fotogramas (FPS), tamaño y color del escenario, conceptos de línea de tiempo, fotogramas claves, entre otros conceptos básicos previos.

1. Creamos un nuevo documento en Flash, de 960x400px, con una velocidad de 20 fps (fotogramas por segundo), fondo #000011 (la versión de ActionScript en nuestro caso no importa demasiado ya que no usaremos códigos en este tutorial):