Comunidad de diseño web y desarrollo en internet online

Creación de nubes dinamicas con Flash y Adobe Photoshop

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.

  • Creamos un archivo nuevo de 50 X 32 pixels con fondo de color azul.
  • Elegimos un pincel de forma irregular ( yo por ejemplo he usado Rosas Grandes en color y Margaritas Dispersas ) de la seccion Pinceles de efectos especiales de Photoshop. Fijamos la opacidad del picel al 50%, el flujo al 30 % y activamos la casilla del aerografo.
  • c) Creamos una capa nueva y a clicks de raton vamos pintando nuestra nube en esta capa ( de click en click o a pequeños trazos ) hasta que tenga un aspecto natural. Mas o menos asi:
  • Ahora eliminamos la capa fondo ( que es azul ) para que se nos quede un documento con una sola capa ( donde esta nuestra nube ) y fondo transparente y lo guardamos como archivo PNG ( extension .png).

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

  • Creamos una nueva pelicula en la que tendremos en cuenta sobre todo el ancho de esta, mas adelante sabremos porque. Importante: fijamos la velocidad de la pelicula a 50 fps. Los 12 fps por defecto de Flash estan muy bien para cosas estaticas, pero cuando quiero animaciones fluidas uso 25 fps. Este caso especial en el que es importante "disfrazar" un movimiento y un objeto demanda mayor rapidez si cabe.
  • Insertamos un nuevo clip de pelicula llamado nube e importamos dentro de ese clip nuestro archivo nube.png.
  • A continuacion soltamos en el escenario el clip de pelicula nube, lo situamos fuera de la escena, y lo nombramos en las propiedades con el nombre nube.
  • A continuacion comento el codigo actionScript usado:
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

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate