Cristalab

Creación de nubes dinamicas con Flash y Adobe Photoshop

Por: dogday + Otros tutoriales de dogday + 25 de Enero del 2005

Autor
avatar
dogday
clabLevel: 110
1 Tutoriales
0 Ejemplos

Teniendo en cuenta que en realidad lo que conseguimos son unas nubes "pseudo-dinamicas", para la creacion del efecto voy a dividir el tuto en 2 partes:

  1. Creacion de la nube
  2. Animacion de la nube

1.- CREACION DE LA NUBE

Para crear la nube con la cual trabajaremos, yo he usado PhotoShop, pero con cualquier editor de imagenes podemos obtener los mismos resultados.

Ya tenemos nuestra nube creada. Ahora es el momento de empezar con Flash.

2.- ANIMACION DE LA NUBE

Voy a asumir que conoces los conceptos basicos de flash

for (i=1; i<30; i++) {
duplicateMovieClip("nube", "nube"+i, i);
}

Creara 30 copias en el escenario de nuestra nube

Ahora el codigo que debemos asignarle al movie clip "nube", seleccionandolo y desplegando el panel de acciones:

onClipEvent (load) {
velocidad = (random(20)+20)*0.02;
_yscale = random(90)+80;
_xscale = _yscale;
_alpha = random(10)+5;
_y = random(30)+10;
_x = random(400);
_rotation = random(360)+50;
}
onClipEvent (enterFrame) {
if (_x<=-20) {
_velocidad = (random(20)+20)*0.02;
_yscale = random(90)+80;
_xscale = _yscale;
_alpha = random(10)+5;
_y = random(30)+10;
_x = 420;
_rotation = random(360)+50;
} else {
_x = _x-velocidad;
giro = random(200);
if (giro>=190) {
_rotation++;
}
}
}

Al cargarse el movieclip le damos estos valores:
velocidad aleatoria entre 20 y 40, (20)+20 multiplicada por 0.02 para que las nubes no corran demasiado y sean fluidas.
tamaño "y" entre 80 y 170, (90) + 80 para que nuestras nubes tengan distintos tamaños.
tamaño "x" igual a tamaño "y" para que las nubes sean proporcionadas.
transparencia aleatoria entre 5 y 15, (10) + 5 con lo que conseguiremos que al solaparse 2 nubes parezca que se combinan
posicion "y" aleatoria entre 10 y 40 (30) + 10 para posicionar las nubes a distintas alturas
posicion "x" igual a 420, es decir, fuera de la escena por la derecha. TEN EN CUENTA EL ANCHO DE TU PELICULA ya que deberas cambiar este valor si es distinto a 420.
rotacion del movieclip aleatoria entre 50 y 410 (360) + 50 para que cada nube aparezca en distintos angulos de rotacion.

Cuando el movieclip esta en la escena
comprobamos si se ha salido del escenario por la izquierda
si eso ha ocurrido volvemos a renovarle los valores de velocidad, escala "y", escala "x", transparencia, posicion "y" y posicion "x", es decir, le mandamos volver a empezar.
si no se ha salido del escenario
la movemos hacia la izquierda con la rapidez contenida en la variable velocidad
generamos un numero aleatorio entre 0 y 200
si ese numero es mayor de 190
giramos 1 grado la nube ( girar la nube implica variar aun mas su posicion. pero no podemos girarla siempre ya que pareceria una rueda, muy poco natural. Para eso generamos un numero aleatorio que controla cuando giramos la nube ).

Aplicandole todos estos cambios a nuestra nube estatica engañamos a nuestra vista consiguiendo que parezcan nubes cambiantes.

Ya solo queda importar la fotografia de un cielo que nos sirva de fondo en una capa por debajo de la de la nube.

CURIOSIDADES

Ojo con el numero de nubes que generas en el primer fotograma de la pelicula ( 30 en mi caso ). Si te pasas ahogaras a tu ordenador, ya que el calculo de pixels con diferente opacidad de un bitmap en flash absorbe bastantes recursos.

Espero que este tuto os haya sido de ayuda y os sirva para expandir vuestras conocimientos a traves de la experimentacion.

Un saludo: DogDay

Información adicional

Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Tutoriales relacionados