martes, 13 de julio de 2010

La famosa Pelota que rebota [Sin Codigos]

Este tutorial consiste en realizar la trayectoria de una pelota para dar la impresión de que esta rebotando y que nunca se detendrá.

Índice:
1) Que necesitamos
2) Preparamos nuestra área de trabajo
3) Creamos las capas
4) Creamos los elementos para la animación
5) La guía de movimiento
6) Agregamos las animaciones
7) Retoques
8) Guardar y publicar


---------------------------------------------------------------------------------------------------------------------------------

1) que necesitamos :

Es muy sencillo utilizaremos Adobe Flash:



---------------------------------------------------------------------------------------------------------------------------------

2) Preparamos nuestra área de trabajo:

Lo abrimos desde el icono en el escritorio o en todos los programas en el menú de inicio y seleccionamos Archivo de Flash Action Script 2 y tendremos ya nuestro espacio de trabajo:



Dejamos el tamaño del área de trabajo por defecto (500 X 400 Pixeles):


---------------------------------------------------------------------------------------------------------------------------------

3) Creamos las capas:

Creamos una nueva capa que llamaremos escenario:



Y a capa 1 la llamaremos Pelota, para cambiar los nombres de las capas debemos dar doble clic sobre el nombre y así podremos cambiar sus nombres; ponemos estos dos nombres para diferenciar las capas y saber en cual debemos aplicar las formas que crearemos a continuación

---------------------------------------------------------------------------------------------------------------------------------

4) Creamos los elementos para la animación:

Seleccionamos la capa pelota y Utilizamos la herramienta Ovalo que se encuentra en el menú derecho de la pantalla:



Con esta herramienta crearemos la pelota, nos ponemos en le área de trabajo y con el clic seleccionado arrastremos hasta formar una pelota pequeña o a tu gusto:



Y nos quedara algo como esto:



Recuerda que para cambiar el color debes seleccionar el objeto y en la barra de propiedades que vemos abajo puedes escoger el relleno y el borde de tu preferencia, si no te aparece esta barra vea a el menú: Ventana -> Propiedades ->propiedades o también puedes usar el comando rápido Ctrl+F3

Convertiremos la pelota a un clip de película, damos doble clic sobre la pelota y
nos vamos al menú Modificar-> convertir en símbolo y seleccionamos clip de película y le damos aceptar:



Seguimos con la capa escenario, pondremos el piso donde la pelota rebotara para esto
usaremos la herramienta de rectángulo:



Y de la misma forma que hicimos la pelota, arrastremos con clic hundido sobre el escenario formando un cuadro que cubra todo el ancho de nuestro lienzo y que ocupe un 20% de altura, así:



También podemos modificar su color y borde en la barra de propiedades, ya que con el piso y la pelota terminadas pasaremos a la animación, usaremos la técnica de guía de movimiento.

---------------------------------------------------------------------------------------------------------------------------------

5) La guía de movimiento:

Damos clic en añadir guía de movimiento, es un icono que esta al lado de añadir nueva capa, aquí:



Teniendo ese “capa” de guía de movimiento utilizamos la herramienta línea:



Construiremos la ruta que queramos que la pelota haga, siempre y cuando las líneas queden unidas, para darle un efecto de que esta rebotando las líneas que are tocaran el piso, tu puedes hacer tus propias rutas de movimiento:




Puedes observa la guía de movimiento, son los trazos en
rojo que se deben hacer con la capa de la Guía seleccionada.

---------------------------------------------------------------------------------------------------------------------------------

6) Agregamos las animaciones:

ya teniendo esto pasamos a la línea del tiempo y en las capas insertamos un fotograma clave así:


Clic derecho sobre el fotograma deseado y seleccionamos Insertar fotograma clave, ahora en cada capa tendrá fotogramas claves en distintos fotogramas
En la capa pelota insertamos el fotograma clave en el fotograma 50:



En la capa escenario insertamos el fotograma clave en el fotograma 100:



En la capa de Guía de movimiento insertamos el fotograma clave en el fotograma 100:



Ahora animaremos la pelota para que recorra la guía de movimiento y se devuelva para dar un mejor efecto; nos podremos al inicio de los fotogramas de la capa pelota, daremos clic derecho y seleccionaremos crear interpolación de movimiento:




Automáticamente nos ubicara la pelota al inicio de la guía de movimiento, lo que tenemos que hacer es ir hasta el fotograma 50 y seleccionarlo y tomar la pelota y colocarla al final de la guía de movimiento:



Si lo hicimos correctamente la animación correrá en una forma muy básica en un solo sentido y muy lentamente, vamos a hacerla algo más compuesta para que ella se devuelva y tenga mas velocidad

---------------------------------------------------------------------------------------------------------------------------------

7) Retoques :

Para que se devuelva solo tenemos que insertar un fotograma clave en el fotograma 100 de la capa pelota:




Ahora pasaremos al fotograma 50 de la capa pelota o en el punto que significa fotograma clave y creamos otra interpolación de movimiento:



Y nos ponemos en el fotograma 100 de la capa pelota, tomamos nuestra pelota y la devolvemos al principio de la guía de movimiento:



Para la velocidad, da clic afuera del área de trabajo (en la zona gris) y abajo en la barra de propiedades debe aparecerte algo como esto:



En velocidad de fotograma pones 30 o mas si quieres que corra demasiado rápido y ya tienes tu pelota que rebota!

---------------------------------------------------------------------------------------------------------------------------------

8) Guardar y publicar:

Guardas el archivo como documento de flash (.fla):



Y si lo quieres para tu web, exportas la película (.swf):



---------------------------------------------------------------------------------------------------------------------------------

2 comentarios: