Globered
Consigue tu propia página web


Esta es un pagina con toda clase de contenido entre educacion, arte, miscelanea, etc


P. Everardo Lanza B.
0 0 0

Tutorial de flash: La linea de tiempo; fotogramas y capas

Por: everardo371 | Publicado: 27/01/2011 02:55 | |




LA LÍNEA DE TIEMPO: FOTOGRAMAS Y CAPAS

1.- Línea de tiempo y fotograma.

En este tutorial vamos a aprender cómo construir animaciones. Como hemos dicho en anteriores tutoriales las animaciones se basan en fotogramas. Para que el ojo del ser humano perciba movimiento con un mínimo de calidad se necesitan que en cada segundo se visualicen 12 fotogramas. De esta forma por decirlo de alguna manera se consigue engañar al ojo ya que en realidad no existe movimiento sino imágenes estáticas que se sucenden rápidamente.

Empezamos creando un documento (película) nuevo: Archivo->Nuevo. Ajustamos siempre el escenario para aprovechar el mayor espacio.

Para crear animaciones una de las herramientas que utilizaremos será la línea de tiempo (imagen 1).

Imagen1
Si nos fijamos cada fotograma viene representado por un símbolo que nos indica el tipo. Es decir si está vació, si es un fotograma normal o si es un fotograma clave. En la figura de la imagen 1 se pueden visualizar que existe un fotograma vació. Por defecto cuando creamos una película nueva con Flash, el programa ya nos crea el primer fotograma clave vacío. Pero también podemos observar que exsite muchos más espacios para poder crear muchos fotogramas y además están indicados con un número en su parte superior. En la imagen 1 podemos observar 56 espacios para crear fotogramas. En la barra de estado de la línea de tiempo observamos entre otras indicaciones la velocidad de los fotogramas 12.0 fps.
 

2.- Relación entre el escenario y los fotogramas.

La relación entre el escenario y los fotogramas dependerá del tipo de fotograma.  Veamos unos ejemplos. Vamos a crear en el escenario del primer fotograma clave una esfera. Para conseguir que se base en un círculo perfecto se debe mantener la tecla flecha de las mayúsculas mientras se crea el objeto.

Imagen 2

Ahora vamos a insertar 11 fotogramas más pero estos no serán del tipo fotograma clave. Para ello la forma más rápida es situarnos con el cursor en el espacio reservado al fotograma 12 y pulsar la tecla  F5. Recordemos que también se puede hacer con el menú contestual y la opción insertar fotograma. La línea de tiempo debe aparecer como en la imagen 3.

Imagen 3

Si nos fijamos bien ahora ye tenemos 12 fotogramas pero sólo uno, el primero, es un fotograma clave. Gráficamente se indica como una bolita negra. También observamos que la esfera se presenta como con puntitos. Esto no tiene mayor importancia y  significa que se ha seleccionado automáticamente. Vamos a hora a probar la película: menu Control->probar película. ¿Y que pasa? Sorpresa… no pasa nada que no veamos. La esfera no hace nada ni se mueve. La conclusión es que con un fotograma clave no hacemos nada. Lo que sucede es que la  cabeza lectora de la línea de tiempo (la rallita roja) se mueve desde el primer fotograma y va pasando por los demás pero no hay ningún fotograma clave más por tanto nuestros ojos no notan nada. Este tipo de técnica la utilizaremos cuando queramos que un objeto siga visible durante un tiempo determinado.

Si lo que queremos es que al final desaparezca, entonces insertaremos al final un fotograma clave vacío. La esfera en este caso se visualizará durante un segundo y desaparecerá. Vamos a probarlo:

Imagen 4
Nos situamos en el fotograma 12 y pulsamos  F7 (fotograma clave vacío). Ahora probamos la película y magia borrás… desaparece la esfera durante un doceavo de segundo. Tenemos entonces un fotograma clave, otro fotograma clave vacío y el resto son fotogramas no clave, es decir que no aportan información nueva, no contienen objetos. Para comprobarlo vamos a dibujar en cualquier fotograma que no sea el primero ni el último. Por ejemplo nos posicionamos con el cursor en el fotograma 5 y dibujamos una línea. ¿Realmente en que fotograma se ha dibujado? Pues se ha dibujado en el fotograma clave en el primero.

Vamos a borrar la línea que hemos dibujado anteriormente. La  seleccionamos con la herramienta selección  y la suprimimos con la tecla Supr. Como hemos comentado anteriormente la esfera al final de la línea de tiempo desaparece durante muy poco tiempo y vuelve a aparecer ya que cuando probamos la película se reproduce y vuelve a reproducir  indefinidamente. Ahora vamos a seguir con nuestro trabajo.

Vamos a aumentar el tiempo para que la esfera permanezca oculta. Para ello nos posicionamos en el espacio de fotograma número 50 y con  F5 insertamos unos cuantos fotogramas más.

Imagen 5

Pregunta. ¿Cómo es que salen todos los fotogramas de color blanco? La respuesta es lógica. Como el último fotograma era de tipo clave vacío el programa ha entendido que queríamos aumentar el tiempo de este fotograma. Lo mismo pasaba cuando creábamos un fotograma clave (bolita negra) y después insertábamos fotogramas. La diferencia es que gráficamente el color era gris. Podemos verlo claramente en la imagen 5.

Vamos a probar la película (Control->probar película) y debemos observar que la esfera permanece ya más teimpo oculta. Ya podemos guardar nuestro primer ejercicio.
 

3.- Visionar objetos en tiempos diferentes.

Aplicando lo que estamos aprendiendo vamos a crear una aplicación que visualice objetos en diferentes intervalos de tiempo. Comezamos por crear un documento nuevo. La aplicación consistirá en los cinco primeros números cada 5 segundos y el número 6,7,8 y 9 deberían aparecer cada segundo.

Como la mímina unidad de tiempo en este ejercicio es el segundo y para trabajar más cómodimante configuraremos la línea de tiempo a un fotograma por segundo 1 fps (menú Modificar->documento)

Vamos a crear la maqueta dejando situados los fotogramas en su lugar corresponidente (ver imagen 6). Para ello insertaremos los fotogramas claves vacíos en los espacios correspondientes. Utilizando la tecla  F7 lo haremos más rápido.

Imagen 6

Ya trenemos preparada la línea de tiempo. Esta línea nos podría servir para colocar o pegar cualquier dibujo, imagen, texto en cada uno de los fotogramas vacíos. Por esta razón la he denominado maqueta porque nos puede servir como base.

A continuación nos posicionamos en cada fotograma vacío y escribimos o pegamos los números. Y ya podemos probar la película. Debemos comprobar que los primeros números tardarán en visualizarse cinco segundos y los cuatro últimos uno.

Imagen7

Pero si queremos que los objetos se visualicen en menos de un segundo entonces debemos configurar la línea de de tiempo a una velocidad mayor. Vamos a volver a configurar la velocidad de los fotogramas a 12 fps y probamos la película. Podemos comprar que la velocidad es mucho mayor.

Como hemos dicho anteriormente la maqueta nos puede servir para colocar otros objetos. Per si no hemos guardado la maquesta vacía y queremos eliminar objetos o sustituirlos lo que haremos es selecccionar cada objeto y borrarlo.

Imagen 8
En la imagen 8 podemos observar como hemos borrado objetos de los fotogramas uno y cinco y también hemos colocado nuevos objetos.
 

4.- Las capas

La línea de tiempo puede tener una o más capas. Cada capa es como una lámina transparente. Las capas que están en la parte superior se ven encima de las que están por debajo.
Imagen 9
Comenzaremos creando una película nueva. En este momento tenemos ya por defecto una capa en la que hay un fotograma clave vacío. Vamos a insertar una nueva capa. Hacemos clic en el icono insertar capa (ver figura 9).

Imagen 10

Ya tenemos las dos capas. La capa que acabamos de crear es la  capa 2 y esta en la parte superior. Esto quiere decir que cuando coloquemos objetos se verán por encima de  la capa 1. Recodemos que las capas son transparentes y además cada una de ellas tiene su línea de tiempo. Esto nos da muchas posibilidades ya que podemos tener varias animaciones independientes ejecutándose al mismo tiempo.

Para colocar objetos solamente hemos de posicionarnos en el fotograma de la capa deseada y dibujar o colocar los objetos.

Para cambiar el orden de las capas hemos de seleccionar la capa, donde aparece su nombre y arrastrarla al nivel deseado.

Para borrar una capa la seleccionamos y hacemos clic al icono papelera.

Si trabajamos con muchas capas puede que nos interese al trabajar  esconder algunas capas  y dejar sólo una visible o varias. Para ello basta con hacer clic al icono ojo.

Cuando trabjamos con muchas capas también nos puede interesar proteger bloquear algunas capas que conseguiremos haciendo clic al  icono candado.

Y por último podemos hacer clic en el nombre de las capas para cambiar su nombre y así organizar por conceptos los elementos de la línea de tiempo.

5.- Ejercicio propuesto

El ejercicio consiste en crear una película con varias capas. Una capa que será el fondo contendrá una imagen de un paisaje y se llamará  paisaje. Las otra capas que contendrá los objetos y que se llamarná  objetos1, objetos2.... Estos objetos pueden ser árboles, animales, nubes…

La idea es que en la peícula final se vea siempre un paisaje de fondo en la que van apareciendo o desapareciendo los objetos.

Comenzaremos por crear una maqueta de la aplicación como en la imagen 11.

Imagen 11

Vamos a comentar la maqueta. Primero de todo hemos configurado la velocidad a 1 fps.

Observemos como l imagen de fondo, el paisaje, esta en la parte más inferior y tiene una duración superior ya que permanecerá durante todo el tiempo. El  objeto 1

aparecerá en el segundo 5 y es el que estará más al fondo, más lejos en profundidad que el resto de objetos.

En la imagen siguiente veremos un resultado con imágenes.
 

En esta imagen se pueden observar ya que se han dado nombre a las capas. En fondo, el paisaje dura 40 segundos. Hemos colocado varios objetos en los fotogramas clave vaciós y hemos alargado los fotogramas de cada objeto. El objeto semáforo aparece en el segundo 5 y desaparece en el 15 y está por detrás de los demás. El barrendero empieza a verse en el 10 hasta el 15 y la culebra empieza en el 15.

La captura que vemos (imagen 12) corresponde al fotograma 10 (ver la línea roja) por este motivo no vemos aún la culebra.

Gracias a las capas podemos sincronizar imágenes en el tiempo, ya que cada capa tiene su propia línea de tiempo.

Ahora os toca a vosotros. Como ejercicio debéis crear algo similar a esta aplicación intentando que sea lo más educativa posible.

Comenta