Alejandra 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 (8)

  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!

  5. Emmanuel Miranda dice:

    disculpa me atrase bastante y estoy empezando el curso, mi pregunta es cuando hice mi circulo e inserte los fotogramas, al modficar mi circulo en los diferentes fotogramas, se modificaban en todos, y al reproducirlo, se veia igual en todo ya que la modificaci√≥n surgia efecto en todos los fotogrmas…. como le hago para hacer mi circulo mas peque√Īo o grande o que cambie de color y se vea reflejado en la animaci√≥n ??

  6. Andrés Almendra dice:

    Me esta siendo √ļtil, estoy estudiando dise√Īo web en un instituto con profesores virtuales y hasta donde voy aprendi un par de cosas q en el curso. gracias

  7. angelo dice:

    uffff de verdad esta buenisimo el taller
    lo esoy biendoo

    saludossss !!!!

    y no kiten el taller

  8. ysbelia dice:

    necesito que por fa me ayuden a guiarme como bajar el programa, pues me lo habían instalado pero ya caducó el tiempo y ahora que pretendo hacer las tareas que proponen y empezar a conocerlo no puedo e intenté bajarlo nuevamente y al parecer lo hago pero no se dónde ejecutarlo!!!!! Please!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder