Jueves, 05 Mayo 2016 17:34

Animate: Anidando clips de películas (i)

Valora este artículo
(1 Voto)

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:

1. Creo un nuevo documento en Adobe Animate:

Creo un nuevo documento

Los valores para nuestro ejemplo son: 800px de anchura; 300px de altura; 24 fotogramas por segundo (cambiaremos luego este valor) y color de fondo blanco.

2. Dibujo cada uno de los elementos necesarios para representar nuestro vehículo:

Elementos dibujados (formas)

Como decíamos al inicio, es posible partir de la foto lateral de un vehículo, siempre y cuando pueda eliminarse su fondo y muestre algunas sus ruedas completas para poder copiarlas y pegarlas en Photoshop e importar el PSD en Animate, quien respetará las capas, quedando dos elementos: La foto del vehículo, completo y sin fondo, y la rueda copiada en una capa nueva (seleccionando y pulsando la combinación de teclas Ctrl+J ó Cmd+J según estemos en PC ó Mac). En este caso, en lugar de formas, tendremos mapas de bits para animar; debemos tener la precaución de asignarles el tamaño correcto desde Photoshop con el fin de evitar trabajar en Animate con imágenes demasiado grandes o pequeñas.

3. Seleccionando una a una, cada una de las formas, las convierto en Símbolos Gráficos:

Convierto en símbolos gráficos

Captura de pantalla mostrando el estado de la biblioteca (Ctrl+L ó Cmd+L, según estemos en PC ó Mac), mostrando los símbolos gráficos creados, cada uno con sus nombres asignados.
(el hecho de agregar el prefijo "graf_" a cada uno de éstos es costumbre personal para mantenerlos ordenados en la lista de acuerdo al tipo de cada uno).

4. Creo un clip de película a partir de graf_rueda:

Creando un clip de película en Animate

Para ello, selecciono en la escena al gráfico "graf_rueda", y cliqueando con botón derecho sobre él, elijo la opción "Convertir en Símbolo", tipo "Clip de película", con el nombre "clip_rueda".

En la captura anterior vemos el símbolo clip_rueda seleccinado y en símbolo gráfico del cual surgió "graf_rueda" más abajo. En la escena vemos ambos símbolos, idénticos de aspecto en este caso, pero diferentes ya que, entre otras diferencias:

  • Un símbolo gráfico no admite nombres de instancia, un símbolo de clip de película sí.
  • Un símbolo gráfico no admite línea de tiempo propia, un clip de película, sí.
  • Un símbolo de clip de película puede recibir acciones, un símbolo gráfico, en cambio, no.

5. Creo una segunda instancia del clip_rueda, y colocando cada una de las instancias de símbolos creados, creo un nuevo movie clip llamado "clip_vehiculo_completo":

Creo el clip_vehiculo_completo

En la captura anterior vemos el nuevo clip de película creada (clip_vehiculo_completo) creado a partir de todos los símbolos antes creados, y dos instancias del "clip_rueda".

6. Si accedemos a las capas y línea de tiempos de "clip_vehiculo_completo" vemos la siguiente distribución de capas (renombradas con la descripción del símbolo que cada una contiene):

Línea de tiempo y capas del movieclip creado

7. Como necesitamos animar el clip de película "clip_rueda", accedemos a su línea de tiempo, y en este caso usaremos una interpolación clásica:

Animando la línea de tiempo de clip_rueda

Debido a que tanto la rueda delantera como la rueda tracera son instancias de un mismo símbolo (clip_rueda), basta con animar éste símbolo para que la animación se vea reflejada en todas las instancias, por la propia definición de instancias de símbolos en Adobe Animate. Para agregar un fotograma clave según la velocidad con la que queramos animar la rueda, a más fotogramas, menor velocidad resultante). El "alfa" que vemos en el fotograma final indica un código ActionScript asociado en ese fotograma, sobre el que hablaremos en clases, y veremos un avance en la segunda parte de este tutorial.

8. Luego de marcar el fotograma de inicio y de fin de la interpolación recurriremos al panel de propiedades para que nuestra rueda gire:

Rotando un símbolo en el panel de propiedades de Animate

Indicamos una rotación de un único giro por ciclo, en sentido horario.

9. El estado de la escena hasta el momento coincide con la siguiente captura de pantalla:

Estado del escenario con los avances realizados.

10. Una vez generado el archivo swf debemos ver la siguiente animación:

(en los pasos futuros ajustaremos los FPS de la aplicación, así como la velocidad de giro de las ruedas)

Es posible descargar los archivos con los avances hasta este momento en los siguientes enlaces:

Para acceder a la segunda parte de este tutorial, hacer clic aquí.

Saludos para todos!
Plácido Luna.

 

Visto 602 veces Modificado por última vez en Jueves, 05 Mayo 2016 19:14