Tutorial de Animación Básica de Flash

Por fin me decidí a crear mi primer tutorial de Flash, es un tutorial para hacer una animación simple de una pelota en movimiento y un botón de repetición de la animación. Más adelante pondré tutoriales más avanzados e interesantes. Esta es la animación a Crear, es un poco rustica pero bueno. Ahí va. (Espero poner el archivo .fla en descargas, en cuanto instale un gestor de descargas, mientras tanto podéis pedirlo en el foro)

Lo primero creamos un nuevo documento Archivo–>Nuevo–>Documento en Flash del tamaño que queráis, yo he elegido 320×256. Ahora dibujamos un Círculo con la Herramienta Óvalo del color que queramos y dentro con color y borde blanco creamos otro pequeño, cogemos la Herramienta Selección y amoldamos el círculo blanco para que cuadre con el otro.

Quedara algo así. Seleccionamos la Pelota y vamos a Modificar–Convertir en Símbolo, elegimos un nombre, la casilla Grafico y aceptamos.

Ya tenemos la pelota que situaremos como en la imagen. Vamos a crear la animación.

Arriba tenéis la línea de tiempo, que es donde crearemos los frames para la animación. Pinchamos con el ratón en el Frame 10 y pulsamos F5 que creara nuevos frames hasta el numero 10. En el 10 pulsamos ahora F6 que creara un fotograma clave . Ahora aun en el Frame 10, seleccionamos la pelota y la movemos hasta abajo.

Ahora seleccionamos todos los frames del 1 al 10 y vamos al menú propiedades que esta abajo y en Animar: elegimos Movimiento. Si os colocáis en el frame uno y pulsáis Enter se reproducirá la animación. (Si el menú de propiedades no esta, pulsad en una flechita negra que hay abajo y se abrirá.

Bueno ahora vamos a hacer la animación mas detallada, creamos un Fotograma Clave con F6 en el Frame 8 y en el mismo movemos la pelota abajo otra vez, pero además con al Herramienta Transformación Libre aplastaremos un poco la pelota, tal que así, probad la animación para ver el resultado.

Vamos a seguir con la animación, en el Frame 10 movemos la pelota un poco hacia arriba, para crear el efecto de rebote, añadimos frames hasta el 20 con F5 y en el 20 creamos un Fotograma Clave con el F6 y moveremos la pelota arriba del todo otra vez. Como en la parte de abajo, vamos al Frame 18 y creamos otro Fotograma Clave con F6 y aplastamos un poco la pelota, luego en el Frame 20 movemos ligeramente la pelota hacia abajo para hacer el efecto rebote. Vamos propiedades, Animar: Movimiento y podéis probar el resultado.

Haremos la animación un poco mas larga seleccionando los Frames del 1 a 20 y con el botón derecho seleccionamos Copiar Fotogramas, vamos al Frame 20 y en el siguiente pulsamos con el botón derecho Pegar fotogramas.

Ahora quedara un poco raro porque la pelota empieza a caer y vuelve arriba, vamos a arreglarlo. Para ello vamos al Frame 21 y colocamos la pelota en la posición del Frame 20, para saber la posición exacta, seleccionamos la Pelota en el Frame 20 y en propiedades nos dice la Posición X e Y, la escribimos en el Frame 21 y ya esta.

Podéis exportar la animación con Archivo–Exportar-Exportar a Película, ponéis el nombre y guardáis, os sale un panel donde nada mas cambiad la versión a Flash 6, si no esta ya puesta y aceptar. Ya tenéis vuestra animación, podéis reproducirla pulsando en ella donde la tengáis guardada.

Ahora a por el botón, vamos al final de la animación al ultimo Frame y añadimos uno nuevo pulsando en el con el F5 y sobre el creado con el F6 para hacerlo fotograma clave y que no cambie nada de la animación. Pinchamos en el y borramos (SUPR) todo el contenido, luego cogemos la Herramienta Óvalo y con el color que mas os guste creáis un Óvalo mas o menos en el centro, podéis ponerle también el de dentro en blanco. Con la Herramienta Texto, escribimos sobre el botón “Repetir” y ya esta creado, ahora vamos a hacerlo botón, para ello vamos a seleccionar todo lo que hay en el Frame, Óvalos y textos y en el menú Modificar–Convertir en Símbolo y elegimos un nombre y seleccionamos botón.

Nos toca meter el Action Script que es el lenguaje de programación del Flash, yo aquí solo pondré dos comandos, mas adelante explicare más.

En la Línea de Tiempo seleccionamos el Frame ultimo donde esta el botón y vamos a la flechita que hay encima justo del menú propiedades, si pulsáis abrir el menú Acciones, os aparecerá una pantalla para escribir, en ella ponéis el siguiente texto stop(); ponedlo en minúsculas, esto detendrá la animación cuando llegue al botón.

Ahora a crear el comando del botón, seleccionamos el botón y en el menú Acciones en la pantalla blanca, escribimos lo siguiente:

on (release) {

gotoAndPlay(1);

}

Esto hace que cuando el botón sea pulsado, la animación vuelva al frame 1 y se inicie.

Solo nos queda darle un efecto al botón para que no quede igual si lo pulsamos o estamos sobre el, para ello pulsamos doble click sobre el botón y en la línea de tiempo cambia, con cuatro estados, Reposo, Sobre, Presionado, Zona activa. Pulsamos F5 hasta llenar los 4 y luego F6 en cada uno para separarlos.

Vamos al Estado Sobre y cambiad lo que queráis, yo he pinchado sobre el Óvalo y en propiedades he cambiado el color de relleno a uno mas vivo. Luego al Estado Presionado y con al Herramienta Transformación Libre, Encoged el botón un poco.

Con esto finaliza mi primer tutorial sobre Flash, espero que os sirva de utilidad. (comentad algo en el foro)