Tutorial: Efecto de humo en Flash

A continuación explicaré de forma fácil y rápida, cómo crear un práctico y bonito efecto de humo, con propiedades que lo dotan de realismo, listo para utilizar en sus proyectos en Flash.

Abra un nuevo documento de Flash y cambie el color blanco del fondo del escenario por uno oscuro que permita distinguir el efecto de humo que se pretende realizar.

Cree un MovieClip, seleccionando en el menú: Insertar > Nuevo símbolo, e identifíquelo como Smoke.

Dentro de dicho MovieClip dibuje una nube de humo, con la ayuda de la herramienta óvalo, procurando utilizar un color de relleno blanco con alfa al 50% y omitir los bordes.

Nota: Si se propone ejecutar este efecto de humo sobre un fondo blanco o de colores claros, es recomendable emplear tonos grises, en lugar de blanco, a la hora de realizar la nube de humo.

Cree otro MovieClip, indentifíquelo como BigSmoke y realice una nube de humo, un poco mayor que la anterior y con forma diferente, siguiendo el mismo procedimiento de la primera.

Posteriormente, lleve a cabo los siguientes pasos con los dos MovieClips creados (Smoke y BigSmoke).

1- Seleccione el MovieClip creado en la biblioteca con el botón derecho del mouse.

2- En el menú contextual elija la opción Linkage.

3- Marque la casilla de verificación de Exportar para ActionScript.

Nota: Recuerde que debe realizar el mismo procedimiento con los dos MovieClips (Smoke y BigSmoke).

Ahora, podemos empezar a programar el efecto, para ello se crea dinámicamente un MovieClip llamado Control_mc mediante el siguiente código:

i = _root.getNextHighestDepth();
_root.createEmptyMovieClip("control_mc",i);

Posteriormente, se procede a programar el evento onEnterFrame para que cada vez que entre se ejecute la función que crea las nubes de humo llamada, en este caso, createSmoke.

control_mc.onEnterFrame = function () {
	createSmoke();
}

A continuación se programa la función createSmoke.

function createSmoke(){
		/** 
	 * Crea las nubes de humo de forma aleatoria a partir de los patrones Smoke y BigSmoke 
	 * que se encuentran en la biblioteca */
	i = _root.getNextHighestDepth();
	if (randRange(1,2) == 1) {
		tmp = _root.attachMovie("Smoke","smoke_mc" +i,i);
	} else {
		tmp = _root.attachMovie("BigSmoke","Bigsmoke_mc" +i,i);
	}
		// Se establece la posición en el escenario en la que se generará el humo 
	tmp._x = 226.3;
	tmp._y = 360.3;

	/** 
	 * Se particularizan las nubes de humo estableciendo aleatoriamente su transparencia,
	 * velocidad y tamaño */
	tmp._alpha = randRange(15, 18);
	tmp.speed = randRange(1,5);
	tmp._xscale = randRange(90,110);
	tmp._yscale = tmp._xscale;
		Nota: Si desea unas nubes con apariencia caricaturesca aumente el rango de tmp._alpha
	/**
	 * Guarda el valor original de alpha para usarlo posteriormente en la 
	 * progresión lineal con la que se disminuye proporcionalmente el alpha, 
	 * de las nubes de humo,en función a "y" */
	tmp.original_alpha = tmp._alpha;
		/**
	 * Valor aleatorio utilizado en el cálculo para el movimiento sinusoidal de 
	 * las nubes de humo */
	tmp.curve = randRange(30,90);

	// moveSmoke es responsable de la dinámica de las nubes de humo 		
	tmp.onEnterFrame = moveSmoke;
	}

Ahora se programa la función moveSmoke.

function moveSmoke() {

	// La nube de humo describe un movimiento lateral sinusoidal 
	this._x += Math.cos(this._y / this.curve);
		// Asigna una velocidad aleatoria para el ascenso de la nube de humo 
	this._y -= this.speed
		// El alpha de la nube de humo disminuye proporcionalmente con "y" 
	this._alpha = this.original_alpha * this._y / 372.3;
				}
	/**
	 * Si las nubes de humo, en su desplazamiento hacia arriba, alcanzan una posición donde "y"
	 * sea menor que 50 se eliminan inmediatamente del escenario */
	if (this._y < 50) {
		this.removeMovieClip();
	}
}

Por último, randRange es una función auxiliar que devuelve un número aleatorio entre dos extremos, ambos inclusive.

function randRange(min:Number, max:Number):Number {
	var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
	return randomNum;
}

El resultado del trabajo es este

Como pueden apreciar, requiere poco código e imágenes y es un efecto rápido, sencillo y práctico que puede resultar muy útil.

¿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.