Crear un videojuego Flash - Tema 4 - Animando el MovieClip
(19 votos, media: 2.42 de 5)
Loading ...4. Animando el MovieClip
Vamos a empezar a utilizar la línea de tiempo para crear animaciones sencillas, como en nuestro caso es una nave espacial, en principio, la única animación que va a llevar es la del fuego de los propulsores. Para ello vamos a dibujar unas líneas para cuando la nave se mueva hacia la izquierda o derecha y un fuego en la cola para que parezca que tiene un motor.
Para llevar a cabo esto nos iremos a la línea de tiempo
Y seleccionaremos el fotograma 10, pulsamos el botón derecho del ratón y elegimos Insertar fotograma clave o pulsamos F6, de esta forma crearemos un fotograma clave, es decir un fotograma base desde el cual se empezarán las animaciones o será mostrado íntegramente, en el caso de interpolaciones de movimiento, etc, que veremos más adelante.
Ahora nos dirigimos al área de diseño y dibujamos una línea blanca desde el ala izquierda hacia abajo. Con esta línea aparentaremos que está saliendo un chorro propulsor que obliga a girar la nave hacia la derecha.
Hacemos lo mismo, creando un fotograma clave en el fotograma 20, y creando una línea en el ala derecha. Veréis que ahora al crear el fotograma clave os ha dejado la línea blanca en el ala izquierda, pues con tan sólo desplazarla hacia la derecha sobraría.
Ahora vamos a añadir el efecto de fuego, para ello hay que crear otra capa, vamos a la línea de tiempo y pulsamos en el icono marcado en amarillo para Insertar una capa.
Ahora nos aparecerán dos capas, con las capas podemos dibujar/animar, por encima/debajo de otros dibujos dentro de nuestro movieclip.
En la capa nueva que hemos creado vamos a dibujar un triangulo en el trasero de la nave, para simular un chorro de fuego.
Una vez creado el fuego, vamos a seleccionarlo por completo, y vamos a crear un nuevo MovieClip a partir de ese triangulo, para que veáis las distintas formas de crear MovieClips. Para que sea más fácil seleccionar áreas dentro del dibujo, podemos bloquear capas, al lado del nombre de cada capa, en la línea de tiempo, veremos tres columnas, una con un Ojo, esto indica si se muestra la capa o no, un candado, para bloquearla y un cuadrado, esto hace que esa capa sólo muestre las líneas del dibujo, sin mostrar el dibujo en si.
Una vez seleccionado el fuego pulsamos el botón derecho del ratón y elegimos “Convertir en símbolo”, nos aparecerá el mismo cuadro que cuando le dimos a “Crear nuevo símbolo”, le pondremos de nombre: mcFuego y el tipo Clip de película, pulsamos en aceptar y ahora el fuego nos saldrá con un recuadro azul al seleccionarlo. Si pulsamos doble click en el fuego podremos editarlo. Hacemos doble click, y una vez estemos dentro creamos un fotograma clave en el fotograma 10. Pulsamos botón derecho en el fotograma 1 y luego en “Crear interpolación de forma”, con esto lo que vamos a hacer es que flash se encargue de hacer las animaciones intermedias entre los dos fotogramas clave: el 1 y el 10, para ello tendremos que ir al fotograma 10 y modificar el dibujo. Cuando estemos en el fotograma 10, seleccionamos todo el fuego y pulsamos el botón derecho del ratón o la tecla F, con esto vamos a modificar de forma libre el dibujo. Nos aparecerá un recuadro alrededor del fuego, pulsando en cada cuadradito podremos estirar el dibujo… vamos a estirarlo hacia abajo. Para ver cómo queda la animación, tan sólo tenemos que pulsar el Intro, y la animación comenzara a ejecutarse.
Para salir de la edición de este MovieClip, hacemos doble click en el fondo negro o bien pulsamos en mcNave que está en la barra de tiempo, y apareceremos en al MovieClip de la nave.
Si probamos a ver la animación de este movieclip veréis como el fuego no se anima, esto es debido a que es un movieclip dentro de otro movieclip. Ahora si queremos podemos ver como quedaría la película, para ello basta con publicar, hay varias formas, la más rápida pulsando CTRL+INTRO, esto hace una publicación previa del .SWF o bien en Archivo / Publicar o Mayúsculas+F12, esto hace una publicación completa, con archivo .HTML incluido.
En la publicación podremos ver como si se muestra el fuego moviéndose, e incluso las dos líneas blancas que habíamos creado para cuando moviésemos la nave de izquierda/derecha, cómo es lógico estas dos líneas no deben de aparecer sino movemos la nave, por lo que vamos a escribir las primeras líneas de código.
¿Fué interesante? Por qué no dejas un comentario abajo y continúas la conversación.
Mmm.. parece que esto del cursillo acabose aqui no?
Me interesaba especialmente llegar a la parte de “inteligencia artifial” de los enemigos. ¿Alguna info al respecto? Gracias y ánimo aver si retomas el cursito!