Efecto de desvanecimiento o fade entre secciones en Flash

Bueno es algo bastante demandado ultimamente, un efecto de transicion entre dos secciones de una web. Para ello haremos uso de la clase MovieClipLoader [FL7] (Tutorial de MovieClipLoader) y de un MovieClip.prototype. Aparte de todo, lo que haremos sera meterlo en un archivo externo ".AS" y asi lo podremos utilizar en las webs que queramos con mucha mas facilidad.

Lo primero es irse a Flash y crear un nuevo "Archivo ActionScript", despues vamos a necesitar un par de cosillas como dos MC's y un MovieClipLoader, asi que los declararemos :

//MC donde cargaremos las diferentes secciones. 
_root.createEmptyMovieClip("conte", 9999);
//MC "controlador" [ya veras porque] 
_root.createEmptyMovieClip("controler", 9998);
//MCL 
var lm = new MovieClipLoader();
//variable necesaria 
_root.estado = 0;

Ahora lo que hace falta es tener una funcion que haga DESaparecer y aparecer a nuestro clip "conte", para ello usaremos un prototype, en este momento te puedes preguntar porque usar un prototype y no una funcion normal y corriente, bien YO USO EL FADER, porque asi lo tengo para cualquier otro MC y ya veras como su funcionamiento es muy sencillo.

MovieClip.prototype.fader = function(ini, fin) {
	//dos parametros, alpha de inicio y de final
	fax = ini;
	this._alpha = ini;
	this._visible = 1;
	//aqui decidimos si sumamos alfa o la restamos
	if ((fin-ini)<=0) {
		goes = 1;
		xaf = -8;
	} else {
		goes = 2;
		xaf = +8;
	}
	//creamos un enterframe para tener que ejecutar la funcion UNA SOLA vez
	this.onEnterFrame = function() {
		this._alpha = fax;
		fax += xaf;
		//estos dos condicionales comprueba que se a llegado a los limites =)
		if (this._alpha<=fin && goes == 1) {
			delete this.onEnterFrame;
			_root.estado++;
		}
		if (this._alpha>=fin && goes == 2) {
			delete this.onEnterFrame;
			_root.estado++;
		}
	};
};

Ahora para simplificar todo meteremos "LA FUNCION" para que sea mucho mas comodo todo esto

function cargamc(mc) {
	//lo dejamos todo limpio
	delete _root.controler.onEnterFrame;
	delete _root.conte.onEnterFrame;
	_root.estado = 0;
	_root.conte.fader(100, 0);
	//este enterframe solo controla que a terminado una parte de la transicion para 
	//mandar a cargar la otra
	_root.controler.onEnterFrame = function() {
		//si se ha ido el que estaba mandar a llamar al otro
		if (_root.estado == 1) {
			_root.estado++;
			lm.loadClip(mc, "_root.conte");
		}
		//si el que  viene ya tiene alpha 100 que elimine este controlador
		if (_root.estado == 3) {
			_root.estado++;
			delete this.onEnterFrame;
		}
	};
}

Por ultimo, cuando la carga de un mc empiece que le suba el alfa de 0 a 100; llamando al prototype

lm.onLoadInit = function(tm) {
	_root.conte.fader(0, 100);
};

AQUI TODO EL CODIGO

//MC donde cargaremos las diferentes secciones. 
_root.createEmptyMovieClip("conte", 9999);
//MC "controlador" [ya veras porque] 
_root.createEmptyMovieClip("controler", 9998);
//MCL 
var lm = new MovieClipLoader();
//variable necesaria 
_root.estado = 0;
//************************************************ 
// ATENCION A ESTA LINEA , explicación abajo! 
//************************************************ 
lm.loadClip("bienvenida.swf", "_root.conte");
function cargamc(mc) {
	//lo dejamos todo limpio 
	delete _root.controler.onEnterFrame;
	delete _root.conte.onEnterFrame;
	_root.estado = 0;
	_root.conte.fader(100, 0);
	//este enterframe solo controla que a terminado una parte de la transicion para
	//mandar a cargar la otra 
	_root.controler.onEnterFrame = function() {
		//si se ha ido el que estaba mandar a llamar al otro 
		if (_root.estado == 1) {
			_root.estado++;
			lm.loadClip(mc, "_root.conte");
		}
		//si el que viene ya tiene alpha 100 que elimine este controlador 
		if (_root.estado == 3) {
			_root.estado++;
			delete this.onEnterFrame;
		}
	};
	//enterframe 
}
MovieClip.prototype.fader = function(ini, fin) {
	//dos parametros, alpha de inicio y de final 
	fax = ini;
	this._alpha = ini;
	this._visible = 1;
	//aqui decidimos si sumamos alfa o la restamos 
	if ((fin-ini)<=0) {
		goes = 1;
		xaf = -8;
	} else {
		goes = 2;
		xaf = +8;
	}
	//creamos un enterframe para tener que ejecutar la funcion UNA SOLA vez 
	this.onEnterFrame = function() {
		this._alpha = fax;
		fax += xaf;
		//estos dos condicionales comprueba que se a llegado a los limites =) 
		if (this._alpha<=fin && goes == 1) {
			delete this.onEnterFrame;
			_root.estado++;
		}
		if (this._alpha>=fin && goes == 2) {
			delete this.onEnterFrame;
			_root.estado++;
		}
	};
};
lm.onLoadInit = function(tm) {
	_root.conte.fader(0, 100);
};

EXPLICACIÓN, a ver, toda la funcion va en base a que YA HAY una seccion cargada, por lo que la primera carga hay que hacerla manual, podeis cargar desde un simple mensaje de bienvenida hasta una pelicula de 1x1pixel SIN CONTENIDO, pero lo primero lo teneis que hacer asi, sorry...

COMO USARLO, despues eso lo meteis y lo guardais en un "loader.as" y en vuestra movie principal solo tendreis que poner

#include "loader.as"
//y cuando querais ... 
cargamc("estoEsUnaPrueba.swf");

¿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

Efecto de desvanecimiento o fade entre secciones en Flash

Publica tu comentario

o puedes...