Globered
Consigue tu propia pgina 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 LNEA DE TIEMPO: FOTOGRAMAS Y CAPAS

1.- Lnea de tiempo y fotograma.

En este tutorial vamos a aprender cmo 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 mnimo de calidad se necesitan que en cada segundo se visualicen 12 fotogramas. De esta forma por decirlo de alguna manera se consigue engaar al ojo ya que en realidad no existe movimiento sino imgenes estticas que se sucenden rpidamente.

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

Para crear animaciones una de las herramientas que utilizaremos ser la lnea de tiempo (imagen 1).

Imagen1
Si nos fijamos cada fotograma viene representado por un smbolo 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 pelcula nueva con Flash, el programa ya nos crea el primer fotograma clave vaco. Pero también podemos observar que exsite muchos ms espacios para poder crear muchos fotogramas y adems estn indicados con un nmero en su parte superior. En la imagen 1 podemos observar 56 espacios para crear fotogramas. En la barra de estado de la lnea de tiempo observamos entre otras indicaciones la velocidad de los fotogramas 12.0 fps.
 

2.- Relacin entre el escenario y los fotogramas.

La relacin 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 crculo perfecto se debe mantener la tecla flecha de las maysculas mientras se crea el objeto.

Imagen 2

Ahora vamos a insertar 11 fotogramas ms pero estos no sern del tipo fotograma clave. Para ello la forma ms rpida 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 opcin insertar fotograma. La lnea de tiempo debe aparecer como en la imagen 3.

Imagen 3

Si nos fijamos bien ahora ye tenemos 12 fotogramas pero slo uno, el primero, es un fotograma clave. Grficamente 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 automticamente. Vamos a hora a probar la pelcula: menu Control->probar pelcula. Y que pasa? Sorpresa no pasa nada que no veamos. La esfera no hace nada ni se mueve. La conclusin es que con un fotograma clave no hacemos nada. Lo que sucede es que la  cabeza lectora de la lnea de tiempo (la rallita roja) se mueve desde el primer fotograma y va pasando por los dems pero no hay ningn fotograma clave ms 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 vaco. 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 vaco). Ahora probamos la pelcula y magia borrs desaparece la esfera durante un doceavo de segundo. Tenemos entonces un fotograma clave, otro fotograma clave vaco y el resto son fotogramas no clave, es decir que no aportan informacin 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 lnea. Realmente en que fotograma se ha dibujado? Pues se ha dibujado en el fotograma clave en el primero.

Vamos a borrar la lnea que hemos dibujado anteriormente. La  seleccionamos con la herramienta seleccin  y la suprimimos con la tecla Supr. Como hemos comentado anteriormente la esfera al final de la lnea de tiempo desaparece durante muy poco tiempo y vuelve a aparecer ya que cuando probamos la pelcula 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 nmero 50 y con  F5 insertamos unos cuantos fotogramas ms.

Imagen 5

Pregunta. Cmo es que salen todos los fotogramas de color blanco? La respuesta es lgica. Como el ltimo fotograma era de tipo clave vaco el programa ha entendido que queramos aumentar el tiempo de este fotograma. Lo mismo pasaba cuando crebamos un fotograma clave (bolita negra) y después insertbamos fotogramas. La diferencia es que grficamente el color era gris. Podemos verlo claramente en la imagen 5.

Vamos a probar la pelcula (Control->probar pelcula) y debemos observar que la esfera permanece ya ms teimpo oculta. Ya podemos guardar nuestro primer ejercicio.
 

3.- Visionar objetos en tiempos diferentes.

Aplicando lo que estamos aprendiendo vamos a crear una aplicacin que visualice objetos en diferentes intervalos de tiempo. Comezamos por crear un documento nuevo. La aplicacin consistir en los cinco primeros nmeros cada 5 segundos y el nmero 6,7,8 y 9 deberan aparecer cada segundo.

Como la mmina unidad de tiempo en este ejercicio es el segundo y para trabajar ms cmodimante configuraremos la lnea 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 vacos en los espacios correspondientes. Utilizando la tecla  F7 lo haremos ms rpido.

Imagen 6

Ya trenemos preparada la lnea de tiempo. Esta lnea nos podra servir para colocar o pegar cualquier dibujo, imagen, texto en cada uno de los fotogramas vacos. Por esta razn la he denominado maqueta porque nos puede servir como base.

A continuacin nos posicionamos en cada fotograma vaco y escribimos o pegamos los nmeros. Y ya podemos probar la pelcula. Debemos comprobar que los primeros nmeros tardarn 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 lnea de de tiempo a una velocidad mayor. Vamos a volver a configurar la velocidad de los fotogramas a 12 fps y probamos la pelcula. 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 vaca 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 lnea de tiempo puede tener una o ms capas. Cada capa es como una lmina transparente. Las capas que estn en la parte superior se ven encima de las que estn por debajo.
Imagen 9
Comenzaremos creando una pelcula nueva. En este momento tenemos ya por defecto una capa en la que hay un fotograma clave vaco. 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 vern por encima de  la capa 1. Recodemos que las capas son transparentes y adems cada una de ellas tiene su lnea de tiempo. Esto nos da muchas posibilidades ya que podemos tener varias animaciones independientes ejecutndose 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 slo 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 lnea de tiempo.

5.- Ejercicio propuesto

El ejercicio consiste en crear una pelcula 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 pecula final se vea siempre un paisaje de fondo en la que van apareciendo o desapareciendo los objetos.

Comenzaremos por crear una maqueta de la aplicacin 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 ms inferior y tiene una duracin superior ya que permanecer durante todo el tiempo. El  objeto 1

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

En la imagen siguiente veremos un resultado con imgenes.
 

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 vacis y hemos alargado los fotogramas de cada objeto. El objeto semforo aparece en el segundo 5 y desaparece en el 15 y est por detrs de los dems. 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 lnea roja) por este motivo no vemos an la culebra.

Gracias a las capas podemos sincronizar imgenes en el tiempo, ya que cada capa tiene su propia lnea de tiempo.

Ahora os toca a vosotros. Como ejercicio debéis crear algo similar a esta aplicacin intentando que sea lo ms educativa posible.

Comenta