Comunidad de diseño web y desarrollo en internet online

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. icon_xD.gif icon_xD.gif

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 icon_smile.gif
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

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