Alejandra Jueves, 21 de Febrero de 2008 a las 12.53
   Imprimir artículo
elWebmaster.com

Taller de Flash: Animación I

Adobe FlashComo Flash es un programa de animación dinámica, es importante comprender el manejo del tiempo en esta aplicación pero también entender qué tipo de películas vamos a crear para poder tener un manejo más amplio del factor temporal.

Si creamos animaciones del tipo cartoons, el tiempo es completamente líneal, con un punto inicial y otro final. En otro tipo de usos, las animaciones poseen tiempos estáticos en los que no sucede ninguna acción: las animaciones se dan en respuesta a una acción del usuario.

Escenas

El tiempo en Flash se divide en Escenas. Pero estas escenas se pueden utilizar de dos modos diferentes:

  • Cartoons: En este tipo de trabajos, las Escenas equivalen a la escena de un film. Además de tener un inicio y un final fijos, son las que organizan la película. Cuando termina otra Escena, comienza otra hasta que se llega a la última.
  • Web y otros usos: Aquí las escenas son muy útiles para organizar el trabajo. Si tienes un sitio web, puedes crear una Escena por cada sección de tu sitio: Inicio, Portfolio, Biografía, Contacto. Cada una de estas secciones será una Escena diferente. Cuando los usuarios hagan clic sobre uno de los botones, será redirigido a la Escena correspondiente.

Adobe Flash - Escenas - Scenes

Como vemos en el gráfico, cuando creamos animaciones del tipo cartoon, las escenas siguen un orden y siempre comienza con la Escena 1 y termina con la Escena X.

En otro tipo de trabajos, el orden de las escenas lo elige el usuario cuando interactúa con los elementos. De todas formas, siempre comenzaremos con la Escena 1, a partir de la cual el usuario podrá “navegar” entre el resto de la escenas.

Menú EscenaDecíamos que el tiempo se divide en Escenas. Existe un menú donde veremos el listado de las escenas que poseemos. Se pueden eliminar, duplicar o crear una nueva escena. También se pueden intercambiar o cambiar de orden. El menú se visualiza con Mayúscula+F2.

Concepto de línea de tiempo

El manejo del tiempo se basa en una Línea de Tiempo. Así como una hora está dividida en minutos y segundos, nuestra Línea de Tiempo se dividide en Fotogramas. La línea es siempre inifinita, pero la animación va a finalizar en el último fotograma “lleno”, el último que contenga información.

Línea de Tiempo

La unidad de medida es Fotogramas por Segundo (fps) y es un valor que se puede modificar, aunque lo más común es utilizar 12 fps.

Como se ve en la imagen, la Línea de Tiempo presenta fotogramas blancos y grises. Los grises se disponen cada 5 fotogramas como una ayuda para contabilizar mejor estos fotogramas a la hora de crear la animación.

Capas

Como complemento de nuestra Línea de Tiempo están las Capas. Su principal función es organizativa. Supongamos que creo un círculo en el primer fotograma de la Capa 1. Luego creo una animación de ese círculo, aumentando su tamaño hasta duplicarlo definitivamente en el fotograma 10.

Del fotograma 1 al fotograma 10 tengo la animación de mi círculo. Supongamos que al mismo tiempo quiero crear un círculo al lado y también animarlo. En ese caso, no pueden superponerse más de una animación en la misma capa, por eso tengo que crear el segundo círculo en una capa nueva.

Capas en Flash

Cada objeto debe estar en su propia capa. Y ojo que cuando de objetos puede ser una combinación de elementos: si mi círculo es un sol en un paisaje y es lo único que va a tener animación, podemos crear todo en la misma capa. Pero más allá de situaciones como esta, no es conveniente ahorrar en capas, todo lo contrario. Cuando más capas tengamos, más organizado estará nuestro trabajo.

En el listado de capas, al lado de cada una podemos ver el Estado de la capa:

  • Opciones de capaOjo: Tildando esta opción podemos ocultar o mostrar la capa.
  • Candado: Esta opción nos permite bloquear una capa. Esto significa que no podremos realizar ninguna modaficación a los objetos de la capa.
  • Marco: Cuando la opción de marco está activa, se muestran únicamente el contorno de los objetos de esa capa.

A su vez, debajo del listado de capas hay 4 opciones:

  • Agregar capa: Agrega una capa al listado de capas.
  • Agregar guía de capa: El elemento “guía de capa” lo veremos más adelante.
  • Agregar carpeta: Se puede agregar una carpeta para organizar capas allí adentro. De esta manera podremos organizar mejor las capas que poseemos, evitando un largo listado de capas imposible de entender.
  • Eliminar: Elimina capas, guías y carpetas y todo su contenido.

El orden de las capas está relacionado con su posición virtual en el espacio. La capa inferior del listado se encontrará “detrás” de las otras capas. Podemos ver en las imágenes de los círculos, que el círculo mayor, en la capa 1, está detrás del círculo menor de la capa 2.

Para poder comprender más estos conceptos, es bueno que practiques generando figuras en distintas capas, probando la superposición, junto con lo que vimos en clases anteriores. Crea capas, duplica, elimina, organiza en carpetas… Luego crea nuevas escenas para poder comenzar la clase que viene con una introducción a la animación Flash. ¡Mucha suerte!

<< CLASE ANTERIOR
 

CLASE SIGUIENTE >>

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. freeman dice:

    Saludos!!! alejandra

    que tal muy interesante, poco a poco aprendiendo mas….
    me ha servido de utilidad para saber cositas que nise o no sabia pero en fin…

    esta chido su taller..espero llegar muy lejos y hacer unas buenas animaciones.. nos vemos en la siguiente clase… por lo menos hasta horita no ha surgido ninguna duda..

    pero d todos modos gracias , por hacer posible el curso…

    see you….

  2. CHECHO dice:

    ESTE TALLER ESTA GENIAL, EN POCO TIEMPO APRENDI MUCHO, SIGAN ASI CON EL TALLER.

  3. Evaristo Gaona dice:

    Me parece un curso muy interesante, pero para practivar lo aprendido necesito el programa, por favor dígame dónde lo consigo.

  4. Juan Manuel dice:

    ¡Hola, Evaristo! Puedes conseguir la versión de prueba desde el sitio de Adobe (haz clic aquí). Con ella podrás practicar lo aprendido. ¡Saludos!

Deja tu opinión