Animacion en Flash: Movimiento de nubes..

Por fin llega el momento de ver un poco de animación en flash, hoy veremos la forma de darle movimiento a las nubes en una de nuestras animaciones, por así decirlo.

Este ejemplo se realizara mediante un Clip de película que a su vez lo convertiremos en un Componente para así poder utilizar las acciones para crear el efecto de movimiento..

1. Como primer paso crearemos un documento con las siguiente propiedades.. Por supuesto esto es solo para el ejemplo tu puedes agregar las propiedades que creas convenientes.

Yo agregare las siguientes propiedades al documento..

a) 400 px de ancho y 250 px de altura..
b) Además utilizare el color de fondo azul, para así simular el cielo..
c) Y por ultimo cambiare la Velocidad de Fotogramas a 20 fps, esto es para darle mas realismo a la animación..


Clic aqui para ampliar


2. Como siguiente paso crearemos un Símbolo, para esto presionamos las teclas Ctrl + F8, a este símbolo le agregamos el nombre de nube y elegimos la opción Clip de Película..


Clic aqui para ampliar


3. Ha llegado el momento de dibujar la nube, dentro del símbolo que acabamos de crear, dibujamos una nube pequeña..

Ahí mismo después de dibujar la nube, crearemos otro símbolo, presionando Crtl + F8, a este le agregaremos los siguientes valores: el nombre del símbolo ahora será componentedenube y elegimos la misma opción, Clip de Película..


Clic aqui para ampliar


4. Para continuar abriremos la Biblioteca, para abrirla presionamos la tecla F11, nos colocaremos sobre el símbolo componentedenube, hacemos clic sobre el con el botón secundario del Mouse, y elegimos la opción Definición de Componente en el menú despegable..


Clic aqui para ampliar


5. Al seleccionar la opción anterior se abrirá el panel de Definición de componente, simplemente agregaremos 3 Parámetros como siguiente paso, para eso presionamos el signo de mas +..

a) Cambiamos el nombre de los tres primeros parámetros por vel, alfa y x max..
b) También cambiamos el valor de los parámetros a 10, 100 y -900..

Lo demás lo dejamos como esta y damos clic en Aceptar..


Clic aqui para ampliar


6. Inmediatamente al dar clic en Aceptar el icono del símbolo cambiara al de un componente..

Lo que haremos a continuación es muy sencillo, tomaremos el símbolo nube y los arrastraremos al componente o símbolo componentedenube..

Abriremos el panel de Acciones. para esto presionamos la tecla F9 y agregamos el siguiente código dentro de el..

onClipEvent (load) {
_alpha = _parent.alfa;
}
onClipEvent (enterFrame) {
(_x>_parent.x_max) ? (_x -= _parent.vel) : (_x=0);
}

7. Regresamos a Escena1 y arrastramos desde la biblioteca el componente, componentedenube, colocaremos dos veces este componente, notaras en la imagen siguiente que los he colocado fuera de la Escena, por ultimo colocamos las coordenadas para asignar el lugar de salida, yo colocare las coordenadas X= 420.0 y Y= 50.0 al ultimo componente que agregamos y el primero lo deje como estaba..


Clic aqui para ampliar


8. Como ultimo paso seleccionamos alguno de los dos componente que arrastramos a Escena, abrimos el Panel de Parámetros y modificamos los valores de los parámetros, pueden ser los valores que queramos ejemplo: 10, 50, -700..


Clic aqui para ampliar


Esto lo haremos para simular la transición de la animación, así que si lo deseas puedes agregar varias veces el componente y modificar los parámetros, eso dependerá de tu imaginación y creatividad..

Presionamos Ctrl + Enter para probar y visualizar nuestra animación, si no hay ningún error y seguimos los pasos correctamente no habrá ningún problema, podrás ver como las nubes tienen movimiento en el cielo :)..

Con algo de tiempo podremos crear una pequeña animación con algún avión o algunos pájaros xD




Entradas relacionadas

Botón flash con un enlace a otra web..
Botón Flash con Sonido..
La Fecha en Flash..
Trabajando con mascaras, Parte 1
Insertar archivos SWF en Blogger