Hoy iniciamos una nueva serie. Esta vez llegamos con uno de los tutoriales más pedidos del ultimo tiempo, Flash.

Aprender a dominar este programa no es algo de un solo tutorial, es por eso que vamos a crear esta serie y en esta primera parte enseñaremos a hacer una animación simple. Para ver como lo hago, vamos después del salto.

Cómo dominar Flash Parte 1

Materiales:

– Flash (En Como lo hago usamos la versión CS4, pero lo que enseñaremos en esta ocasión funciona con versiones anteriores, claro que pueden haber pequeñas variaciones con los menús, para descargar una versión de prueba, pueden conseguirla aquí)

Procedimiento:

1.- Al abrir flash, nos preguntará que tipo de documento queremos crear, aparecerá una ventana como esta:

Para este caso seleccionamos Archivo de Flash AS 3.0

2.- Ok, ahora que ya estamos dentro de Flash, empezaremos a crear nuestra animación, lo más simple es dibujar directamente, pero para empezar a acostumbrarnos, usaremos la biblioteca, pero ¿Que es la biblioteca?:

La biblioteca es una utilidad de Flash, en la cual puedes ir guardando objetos para utilizarlos más tarde, para este caso resulta innecesario, pero a futuro se vuelve muy útil, así que para acostumbrarnos desde ya, vamos a ir a Ventana->Biblioteca, en la parte de abajo de la ventana de Biblioteca aparecen varios botones, entre ellos el botón de Agregar Símbolo:

3.- Al presionar este botón, lo que ahora dibujen quedará guardado en la biblioteca. Lo que haremos es crear una esfera con la herramienta óvalo, al mantener presionada la tecla de Mayuscula (Shift) podrán hacer un círculo perfecto.

4.- Ahora hay que transformar ese círculo en una esfera y esto lo haremos con un efecto de coloración, para esto van a Ventana->Color, y aparecerá una ventana como esta:

Si se fijan, está seleccionado el bote de pintura y en “Tipo” se cambio la opción a “Radial”, con esto configurado, cerramos la ventana de color y seleccionamos la herramienta “Bote de Pintura” (La seleccionamos en la barra de herramienta, no en la ventana de color) y pintamos sobre el círculo que habíamos dibujado, debe quedar algo así:

De el lugar donde hacen click con el bote de pintura es de lo que dependerá donde aparecerá el efecto de luz.

5.- Ahora que ya tenemos creado nuestro objeto en la biblioteca, hacemos click en Escena 1, arriba a la izquierda, con esto volvemos a la animación en sí, arrastramos  el objeto que recién creamos desde la biblioteca, como verán la misma esfera que habiamos dibujado recién ahora la tenemos en nuestra animación.

6.- Moveremos la esfera para que quede al centro y completamente a la izquierda.

7.- Vamos a la Línea de tiempo, como verán son varios rectangulos verticales, cada uno de estos es un fotograma, vamos al fotograma 30, click derecho e Insertar Fotograma Clave.

Click para agrandar

8.- Con ese fotograma seleccionado, movemos nuestra esfera completamente hacia la derecha y con la herramienta de transformación libre la encojemos de tamaño.

9.- Ahora en el fotograma 60, click derecho Insertar Fotograma Clave, vamos al fotograma 1, click derecho copiar, y lo pegamos en el fotograma 60, tomamos la esfera y la movemos ligeramente arriba y a la derecha.

10.- Ahora en la ventana donde esta la linea de tiempo, donde dice Capa 1, click derecho y seleccionamos Añadir guía de movimiento, se creara una nueva línea de tiempo.

11.- Nos colocamos en el primer fotograma de esta nueva línea y creamos un óvalo, pero esta vez sin relleno, así:

12.- Seleccionamos el fotograma 30, click derecho y seleccionamos Insertar Fotograma clave en blanco.

13.- Seleccionamos el fotograma 29, con la herramienta lazo, cortamos ese óvalo por la mitad, así:

14.- Ahora vamos nuevamente al fotograma 30 y pegamos la parte del óvalo que habiamos cortado.

15.- Tenemos que hacer calzar las 2 partes para que vuelvan a formar el óvalo, esto lo hacemos para que la animación sepa en que dirección ir, si no lo hacemos, siempre tendrá 2 opciones. Para hacerlo calzar, lo podemos hacer al ojo, o usar la herramienta “Editar varios fotogramas”, que es un botón en la parte inferior de la ventana de línea de tiempo, si usamos esta opción, luego de hacer calzar el óvalo, debemos deseleccionarla.

16.- Ahora seleccionamos todos los fotogramas de la línea de tiempo, pero solo los de la capa uno, no los de la línea de tiempo. Verán que aparecerán flechas entre los fotogramas claves, con esto se crea la animación, pero solo lo hará en linea recta.

17.- Para que tome la dirección que nosotros queremos, vamos al primer fotograma de la guia de movimiento y movemos la esfera para que se conecte con la línea, lo sabrán porque es como que se unieran con un imán, ahora hacemos lo mismo en el fotograma 30 y 60.

18.- Vamos a Control->Probar Pelicula para ver nuestra animación, si todo esta en orden vamos a Archivo->Exportar->Exportar Pelicula, le damos un nombre y seleccionamos la carpeta donde la queremos guardar y ya tenemos nuestra animación flash!!

Como siempre este tutorial ha sido probado, desarrollado y documentado por el equipo de Como Lo Hago, por lo que cuenta con nuestro Sello de garantía.

Cualquier duda o consulta, pueden realizarlas a continuación.

Por ahora,

Me despido