Animación sencilla con Flash 8

Nota: este programa se puede obtener aquí, en esta web, visita el Catálogo

Esta vez nos toca hacer una animación sencilla con la que aprenderéis bastante de este programa (Macromedia Flash 8), que como se puede descargar aquí en inglés, ciertas palabras las diré en inglés para que nos entendamos.

En esta animación vamos a querer que una bota chute un balón (no hace falta que esté bien hecho, en  esta sección hablamos particularmente de la animación). ATENCIÓN: se recomienda guardar cada cierto tiempo, porque en algunos ordenadores el programa se cierra solo y puedes perder los datos.

Empecemos:

Abrimos el programa, una vez abierto le damos a File>New (Archivo>Nuevo), y a continuación se nos preguntará que qué tipo de archivo quieres crear. Le damos a archivo Flash. A continuación es cuando toca editar. Pero antes un reconocimiento rápido para entender el menú:

+La pestaña de arriba, la que pone Untitled-1*, es solamente el trabajo que estás creando. Si haces más trabajos al mismo tiempo tendrás varias pestañas.

+Te habrá llamado la atención esos rectángulos pequeños de color blanco y gris  que se extienden por todo el menú. Eso son los Frames (Fotogramas), es decir, las imágenes en las que se divide la animación. Trabajar en ellas será básicamente todo lo que haremos en esta práctica.

+En algunos frames habrás visto unos puntos negros en su centro. Estos son los Keyframes, son fotogramas importantes que expresan cómo va a actuar o actuó un objeto durante el movimiento. El movimiento deberá empezar y acabar por un keyframe.

+Te habrás fijado que entre dos de los Keyframes que hay arriba mismo  hay una especie de flecha que los une (una especie de >---> )

Esto es una Interpolación de movimiento. Es algo que usarás muy a menudo y que será indispensable para nuestra práctica. Lo que hace es crear un movimiento que relacione dos keyframes. Ejemplo: Si en el primer keyframe tengo un círculo a la izquierda, y unos frames más adelante, el círculo está a la derecha, lo que hace la interpolación de movimiento (o llamado en inglés Motion Tween) es hacer que el círculo, en los frames de en medio, se vaya moviendo de izquierda a derecha.

+Donde pone Layer 1 y Layer 2, son las capas. Son útiles para animar objetos distintos de forma independiente (por ejemplo, en una capa animaremos la bota, y en la otra el balón)

Hay más elementos, pero el objetivo de esta práctica no es hacer que le explote la cabeza al lector por demasiadas explicaciones.

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

1.Hacemos doble click sobre Layer 1 y le cambiamos el nombre a "Bota"

2.Dibujamos la bota. Vale que sea la forma de Italia o una L, pero que se suponga que pueda chutar un balón.Para ello podemos usar los pinceles y botes de pintura que podemos encontrar en una ventana pequeña a la izquierda.

3.Ahora selecciona toda la bota (arrastar el cursor) y una vez seleccionada haces click derecho a la bota.A continuación le das a Convert to Symbol. Puedes convertir la bota en Movieclip (objeto que se anima), Button (objeto que cambia si le haces click, etc.) o Graphic (decorado y nada más). Le damos a Movieclip y le ponemos de nombre "bota"

Bien, ahora, como la bota es un símbolo, podremos darle movimiento. Para empezar, situemos la bota a la izquierda (¡que no se salga del fondo blanco, si no, en tu animación acabada apenas se verá tu bota!)

4.Teniendo la bota seleccionada, haz click en la herramienta de la imagen:

con esta herramienta verás que puedes girar y cambiar de tamaño la bota. Aprovecha y gira la bota como si estuviese preparado para efectuar una patada (es decir, girada hacia atrás, como si doblase la rodilla). Verás que además de cambiar el tamaño  de la bota, puedes cambiar de sitio su eje de rotación. Esto será importante. Arrastra el punto blanco que aparece en el centro de la bota al usar esta herramienta  hacia la rodilla (o bien a donde "se supone que está la rodilla". Esto es importante ya que el movimiento de la patada tiene en cuenta que el eje es la rodilla.

5.Ahora atención, hasta ahora hemos creado el primer keyframe, nos queda otro para hacer el movimiento de la patada. ¿cómo? Pues seleccionamos un frame que esté más adelante (por ejemplo, el frame número 9; pero recuerda el frame tiene que pertenecer al Layer de la bota). En este frame hacemos click con el botón derecho y selleccionamos "Convert to Keyframes". Esto hará que la imagen que haremos a continuación sea la que muestre cómo estará la bota después de la patada.

6.Con la herramienta que hemos visto (la de cambiar de tamaño y escoger el eje de rotación) giraremos la bota. Esta girará en torno al eje donde suponemos que está la rodilla.Pues bien, arrastramos la bota como aparece en la imagen:

7.Una vez girada la bota (tienes que haberlo hecho en el keyframe 9, aunque eso se da por echo ^^ ) toca hacer la interpolación de movimiento. Para ello hacemos click derecho en cualquiera de los frames que haya entre el keyframe principal y el que acabamos de hacer (por ejemplo, en el frame 4). Escoge la opción "Create Motion Tween".

Aparece una flechita que une los dos Keyframes. Pulsa Intro para ver la animación:

 ¡Voilà! La bota se mueve. Aunque a vosotros se os desplazará más lentamente. Al lado del número de frame verás un número,en el que pone 12.0 fps (eso significa Frames Por Segundo). Haz click ahí y cámbialo por 24 fps. Esto hará que necesites más frames, pero en cambio la animación fluirá mucho mejor.

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

Bien, ya hemos hecho la bota. Si has sabido hacerlo bien, entonces el balón no te supondrá gran problema.

Para crear otro Layer haz click en un icono con forma de hoja con un símbolo (+) que verás un poco más abajo de donde aparece el título del layer. Lo encontrarás enseguida. 

1.Vete a Layer 2. Cambia el nombre por "Balón"(no es necesario pero es útil para no confundirse en animaciones complicadas).

2.Vete al primer frame. Dibuja un círculo (Puedes usar la herramienta de Círculo, hacer una especie de patata o un pompis; lo que te venga en gana que se pueda chutar).

3.Conviértelo en un símbolo (supongamos que es un balón), en particular un Movieclip. LLámalo balón (supongamos que lo es :D).

4.Sitúa el balón más o menos en el centro del fondo de la animación, de forma que parezca realista la patada que le propina la bota.

5.Vete al frame donde justo la bota entre en contacto con el balón, y conviértelo en keyframe.

6.Ahora vete al frame 9 (la animación de la bota y la del balón deben tener, en este caso, el mismo número de frames). Y conviértelo también en keyframe. Ya falta poco....

7.En el keyframe 9 desplaza el balón fuera de la pantalla, digamos en dirección noreste. Es importante que se salga de la pantalla si queremos que el balón vaya rápido tras ser chutado, aunque si te va de este modo demasiado rápido, pon eñ balón a las distancia que quieras.

8.Ahora crea una interpolación de movimiento(create Motion Tween) como has aprendido. Pulsa intro para ver tu obra:

 ¡Ya está! ¿os ha salido bien? Tampoco es digno de Walt Disney, pero es vuestra primera animación con flash(se supone). Felicidades.

Si, en cambio, no lo habéis comprendido o teneis dudas, podréis explicármelas más abajo.

Podrás hacer animaciones flash (juegos es mucho más complicado, pero también), como los que se pueden ver en esta web, en la sección Electroflash.Pero solamente si le echas ganas, claro. ¡Mucha suerte!

Martín