galeria fade in - fade out

Saludos a todos los compañeros del foro!!!

Estoy intentando hacer una galeria fade in - fade out, me encontre un codigo en la red y funciona muy bien, mi principal problema es que no puedo hacer que las fotos cambien cuando presiono un boton de avanzar o retroceder; las fotos cambian cada determinado tiempo. Les pongo el codigo.

Código :

var fotos:Array = new Array();
var estado:Boolean = false;
var fotoActual:Number = 0;
for (var i:Number = 0; i<4; i++) {
    fotos[i] = "img"+(i+1)+".jpg";
}
this.createEmptyMovieClip("marco", 2);
marco.loadMovie(fotos[fotoActual]);
marco._x = marco._y=0;
marco._alpha = 0;

MovieClip.prototype.alpha_mas = function(num:Number):Void  {
    if (num == null || num == undefined || num == "NaN") {
        num = 1;
    }
    this.onEnterFrame = function():Void  {
        this._alpha += num;
        if (this._alpha >= 100) {
            this._alpha = 100;
            delete this.onEnterFrame;
        }
    };
};

MovieClip.prototype.alpha_menos = function(num:Number):Void  {
    if (num == null || num == undefined || num == "NaN") {
        num = 1;
    }
    this.onEnterFrame = function():Void  {
        this._alpha -= num;
        if (this._alpha <= 0) {
            this._alpha = 0;
            this.loadMovie(fotos[siguienteFoto()]);
            delete this.onEnterFrame;
        }
    };
};

siguienteFoto = function ():Number {
    fotoActual++;
    if (fotoActual > fotos.length-1) {
        fotoActual = 0;
    }
    return fotoActual;
};

cambio = function ():Void {
    if (estado) {
        marco.alpha_menos(2);
        estado = false;
    } else {
        marco.alpha_mas(2);
        estado = true;
    }
};

var inter:Number = setInterval(cambio, 2000);

Mis prubas fueron en el evento on(press) del boton avanzar, cuando le daba clic al boton, mandaba a llamar la funcion cambio, pero hizo cosas bien raras, no respeto el avance. Hasta aqui estoy atorado. Alguno de ustedes sabra como puedo controlar el cambio de las imagenes por medio de botones?????

Muchas gracias por su tiempo y ayuda.

primero borra lo de:

Código ActionScript :

var inter:Number = setInterval(cambio, 2000);

Luego crea otra funcion:

Código ActionScript :

anteriorFoto = function ():Number {
    fotoActual--;
    if (fotoActual< 0) {
        fotoActual = fotos.length-1;
    }
    return fotoActual;
};

Luego modifica esta funcion:

Código ActionScript :

MovieClip.prototype.alpha_menos = function(num:Number, dir:Number):Void  {
    if (num == null || num == undefined || num == "NaN") {
        num = 1;
    }
    this.onEnterFrame = function():Void  {
        this._alpha -= num;
        if (this._alpha <= 0) {
            this._alpha = 0;
            this.loadMovie(fotos[ dir > 0 ? siguienteFoto() : anteriorFoto() ]);
            delete this.onEnterFrame;
        }
    };
};

Luego modifica esta otra:

Código ActionScript :

cambio = function ( dir:Number ):Void {
    if (estado) {
        marco.alpha_menos(2, dir);
        estado = false;
    } else {
        marco.alpha_mas(2);
        estado = true;
    }
};

Luego le das estas acciones a tus botones:

Código ActionScript :

btn_anterior.onRelease = function( Void )
{
   cambio( -1 );
};
btn_siguiente.onRelease = function( Void )
{
   cambio( 1 );
};

Eso seria todo. Suerte.

Muchas Gracias por tu ayuda compañero LongeVie

Que hay!!! ñ_ñ

Pues ya estube checando el codigo y si funciona pero hacer algo raro y todavia no se como solucionarlo, primero la imagen no se muestra hasta darle clic al boton de avanzar, despues al darle clic otra ves al boton de avanzar, no se muestra la imagen que sigue, queda todo en blanco, necesito darle una vez mas clic al boton de avanzar para que se muestre la siguiente imagen; de casualidad sabes porque pasara esto???

mmmmmmm tambien tengo otra duda para indicarle al programa una carpeta de donde tome las imagenes, segun yo es con el siguiente codigo que debo de poner al inicio:

Código :

this.dirParaPics = "imagenes/";

Y luego cuando se usa el comando loadMovie, se agrega esa ruta de esta forma:

Código :

marco.loadMovie(this.pathToPics +fotos[fotoActual]);

Estaba haciendo pruebas y la primera foto si la toma del directorio indicado, pero las siguientes las busca en el mismo directorio donde esta el archivo swf, alguien sabe porque pasara esto???

Saludos y muchas gracias por su ayuda.

Bueno mira, ya vi el codigo y la verdad en un inicio estaba diseñado a modo de slideshow, mejor que te parece si iniciamos uno nuevo basandonos en este, esta mejor y tiene mas transiciones es mas personalizable.

Aca te dejo el codigo final, solo necesitas tener los botones de btn_adelante btn_siguiente en el escenario y listo.

Código ActionScript :

stop();
import mx.transitions.Tween; 
import mx.transitions.easing.*; 
 
//-- Variables iniciales --// 
var frames:Number = 24;//Numero de frames que se vera cada diapositiva 
var sld_x:Number = 10;//Posicion en X del Slide 
var sld_y:Number = 10;//Posicion en Y del Slide 
var sld_w:Number = Stage.width - 20;//Ancho del Slide 
var sld_h:Number = Stage.height - 20;// Alto del Slide 
var sld_mask:Boolean = true;// Alto del Slide 
var aleatorio:Boolean = false;//Indica si es aleatorio 
var ciclico:Boolean = true;//Indica si se tiene repite al llegar al final 
var transicion:String = "fade";//Tipos de transicion 
/** transicion 
*  
* arriba .- movimiento hacia arriba 
* abajo .- movimiento hacia abajo 
* izquierda .- movimiento haca la izquierda 
* derecha .- movimiento hacia la derecha 
* zoomv .- amplificado verticalmente 
* zoomh .- amplificado horizontalmente 
* zoom .- amplificado 
* fade .- desvanecido 
* none .- nunguna animacion 
*  
**/ 
var movimiento:String = "remarcado";//Tipos de movimiento 
/** movimiento 
*  
* retroceso 
* rebote  
* elastico 
* remarcado 
* normal 
*  
**/ 
 
//-- Varialbles internas --// 
//  cargoDiapositivas .- array de los MCs que contendran las diapositivas 
var cargoDiapositivas:Array; 
//  index .- indica la diapositiva actual 
var index:Number = -1; 
//  loading .- indica el numero de recusos cargados 
var loading:Number = 0; 
//  cargador .- se usara para cargar las diapositivas 
var cargador:MovieClipLoader = new MovieClipLoader(); 
cargador.addListener(this); 
//  slideshow .- MC que contendra todo el slideshow 
var slideshow:MovieClip; 
 
 
//-- Diapositivas a cargar --// 
var misDiapositivas:Array = new Array(); 
for (var i:Number = 1; i<=4; i++) {
    misDiapositivas.push("img"+i+".jpg");
}
cargarDiapositivas(); 
 
 
//-- Clips de trabajo y Carga --// 
function cargarDiapositivas( Void ):Void 
{ 
   this.slideshow = this.createEmptyMovieClip( "slideshow" , this.getNextHighestDepth() ); 
   //Creamos el clip que contendra los limites del slideshow 
   this.slideshow.createEmptyMovieClip("bound_mc", 0); 
   this.setArea( this.slideshow.bound_mc, this.sld_w, this.sld_h ); 
   //Enmascaramos el slideshow 
   this.slideshow.setMask( this.sld_mask ? this.slideshow.bound_mc : null ); 
   //Posicionamos 
   this.slideshow._x = this.sld_x; 
   this.slideshow._y = this.sld_y; 
   //Variables inciales 
   this.slideshow.owner = this; 
   this.slideshow.count = this.frames; 
   this.cargoDiapositivas = new Array(); 
   for (var i:Number = 0, l:Number = this.misDiapositivas.length; i < l; i++) 
   { 
      //creamos un MC dentro de slideshow y lo colocamos en el array 
      this.cargoDiapositivas[i] = this.slideshow.createEmptyMovieClip( "slide_" + i , i + 1); 
      //creamos un MC dentro del MC previamente creado, en el cargamos la diapositiva 
      this.cargador.loadClip(this.misDiapositivas[i], this.cargoDiapositivas[i].createEmptyMovieClip("clip", 0)); 
   } 
   //Creamos un TextField para mostrar mensajes 
   this.slideshow.createTextField("texto_txt", this.slideshow.getNextHighestDepth(), this.sld_w / 2 - 100, this.sld_h - 22, 200, 22); 
   //Le damos formato al texto 
   var format:TextFormat = new TextFormat(); 
   format.align = "center" 
   format.bold = true; 
   format.font = "Arial"; 
   format.color = 0x888888; 
   format.size = 11; 
   this.slideshow.texto_txt.setNewTextFormat( format ); 
   this.slideshow.texto_txt.selectable = false; 
   //Colocamos el mensaje de carga 
   this.slideshow.texto_txt.text = "Cargando...";    
} 
//Funcion que se ejecutara cuando esten cargados todos las diapositivas 
function startSlideShow( Void ):Void 
{
   btn_anterior.owner = this;
   btn_anterior.onRelease = function()
   {
         this.owner.cambiar( -1 );
   };
   btn_siguiente.owner = this;
   btn_siguiente.onRelease = function()
   {
         this.owner.cambiar( +1 ); 
    } 
    cambiar( +1 );
} 
 
//-- Eventos del MovieClipLoader --// 
function onLoadInit( target:MovieClip ):Void 
{ 
   //Hacemos invisible 
   target._parent._visible = false; 
   //Centramos 
   target._parent._x = target._parent._parent.bound_mc._width /  2; 
   target._parent._y = target._parent._parent.bound_mc._height /  2; 
   target._x = target._width / -2; 
   target._y = target._height / -2; 
   //Si ya se cargo todo, podemos inciar 
   if( (++loading) >= cargoDiapositivas.length )    
   { 
      startSlideShow(); 
   } 
} 
 
//-- cambiar --// 
function cambiar( aux:Number ):Void  
{
   var actual = index;    
   index += aux;
   if( index >= cargoDiapositivas.length )//Si llegamos al final 
   { 
      if( ciclico )//Si es ciclico 
      {
         index = 0;//regrsamos el index al incio 
      }
   }
   else if( index < 0 )
   {
      if( ciclico )//Si es ciclico 
      {
         index = cargoDiapositivas.length - 1;//regrsamos el index al incio 
      } 
   }
   //Aplicamos la transicion 
   interpolar( cargoDiapositivas[ actual ], cargoDiapositivas[ index ] );
   
   btn_siguiente.enabled = false;
   btn_anterior.enabled = false;
   btn_anterior.func = btn_siguiente.func = function( Void ){ clearInterval(this.inter); this.enabled = true; }
   btn_siguiente.inter = setInterval(btn_siguiente, "func", 1500);
   btn_anterior.inter = setInterval(btn_anterior, "func", 1500);
   
   //Trace 
   this.slideshow.texto_txt.text = (index + 1) +" de "+ cargoDiapositivas.length; 
} 
 
//-- Efectos --// 
function interpolar( ini:MovieClip, fin:MovieClip):Void  
{ 
   //Colocamos a "fin" en el nivel mas alto 
   fin.swapDepths(cargoDiapositivas.length); 
   //  ease .- variable que contiene la funcion de movimiento 
   var ease:Function = StringToEasing( movimiento ); 
   //Elegimos la transicion 
   switch(transicion) 
   { 
      case "arriba":  
         CambioArr( ini, fin, ease ); 
      break; 
      case "abajo":  
         CambioAbj( ini, fin, ease ); 
      break; 
      case "izquierda":  
         CambioIzq( ini, fin, ease ); 
      break; 
      case "derecha":  
         CambioDer( ini, fin, ease ); 
      break; 
      case "zoomv":  
         CambioZoomH( ini, fin, ease ); 
      break; 
      case "zoomh":  
         CambioZoomV( ini, fin, ease ); 
      break; 
      case "zoom":  
         CambioZoom( ini, fin, ease ); 
      break; 
      case "fade":  
         CambioFade( ini, fin, ease ); 
      break; 
      //Si no hay ninguna transicion 
      case "none": default: 
         fin._visible = true; 
         ini._visible = false; 
      break; 
   } 
} 
//desvanecimiento 
function CambioFade( ini:MovieClip, fin:MovieClip, ease:Function ):Void  
{ 
   //Hacemos visibles los clips 
   fin._visible = ini._visible = true; 
   //Generamos las Tween 
   new Tween(fin, "_alpha", ease, 0, 100, 1.5, true); 
   var aux:Tween = new Tween(ini, "_alpha", ease, 100, 0, 1.5, true); 
   //Al finalizar la Tween 
   aux.onMotionFinished = function( o ) 
   { 
      //Colocamos invisible el movieclip ini 
      o.obj._visible = false; 
   } 
} 
//ampliacion 
function CambioZoom( ini:MovieClip, fin:MovieClip, ease:Function ):Void  
{ 
   //Hacemos visibles los clips 
   fin._visible = ini._visible = true; 
   //Generamos las Tween 
   new Tween(fin, "_xscale", ease, 0, 100, 1.5, true); 
   new Tween(fin, "_yscale", ease, 0, 100, 1.5, true); 
   new Tween(ini, "_xscale", ease, 100, 0, 1.5, true); 
   var aux:Tween = new Tween(ini, "_yscale", ease, 100, 0, 1.5, true); 
   //Al finalizar la Tween 
   aux.onMotionFinished = function( o ) 
   { 
      //Colocamos invisible el movieclip ini 
      o.obj._visible = false; 
   } 
} 
//ampliacion horizontal 
function CambioZoomH( ini:MovieClip, fin:MovieClip, ease:Function ):Void  
{ 
   //Hacemos visibles los clips 
   fin._visible = ini._visible = true; 
   //Generamos las Tween 
   new Tween(fin, "_yscale", ease, 0, 100, 1.5, true); 
   var aux:Tween = new Tween(ini, "_yscale", ease, 100, 0, 1.5, true); 
   //Al finalizar la Tween 
   aux.onMotionFinished = function( o ) 
   { 
      //Colocamos invisible el movieclip ini 
      o.obj._visible = false; 
   } 
} 
function CambioZoomV( ini:MovieClip, fin:MovieClip, ease:Function ):Void  
{ 
   //Hacemos visibles los clips 
   fin._visible = ini._visible = true; 
   //Generamos las Tween 
   new Tween(fin, "_xscale", ease, 0, 100, 1.5, true); 
   var aux:Tween = new Tween(ini, "_xscale", ease, 100, 0, 1.5, true); 
   //Al finalizar la Tween 
 
   aux.onMotionFinished = function( o ) 
   { 
      //Colocamos invisible el movieclip ini 
      o.obj._visible = false; 
   } 
} 
function CambioDer( ini:MovieClip, fin:MovieClip, ease:Function ):Void  
{ 
   //Hacemos visibles los clips 
   fin._visible = ini._visible = true; 
   //Generamos las Tween 
   new Tween(fin, "_x", ease, fin._width / -2, fin._parent.bound_mc._width / 2, 1.5, true); 
   var aux:Tween = new Tween(ini, "_x", ease, ini._parent.bound_mc._width / 2, ini._parent.bound_mc._width + (ini._width / 2), 1.5, true); 
   //Al finalizar la Tween 
   aux.onMotionFinished = function( o ) 
   { 
      //Colocamos invisible el movieclip ini 
      o.obj._visible = false; 
   } 
} 
function CambioIzq( ini:MovieClip, fin:MovieClip, ease:Function ):Void  
{ 
   //Hacemos visibles los clips 
   fin._visible = ini._visible = true; 
   //Generamos las Tween 
   new Tween(fin, "_x", ease, fin._parent.bound_mc._width + (fin._width / 2), fin._parent.bound_mc._width / 2, 1.5, true); 
   var aux:Tween = new Tween(ini, "_x", ease, ini._parent.bound_mc._width / 2, ini._width / -2, 1.5, true); 
   //Al finalizar la Tween 
   aux.onMotionFinished = function( o ) 
   { 
      //Colocamos invisible el movieclip ini 
      o.obj._visible = false; 
   } 
} 
function CambioArr( ini:MovieClip, fin:MovieClip, ease:Function ):Void  
{ 
   //Hacemos visibles los clips 
   fin._visible = ini._visible = true; 
   //Generamos las Tween 
   new Tween(fin, "_y", ease, fin._parent.bound_mc._height + (fin._height / 2), fin._parent.bound_mc._height / 2, 1.5, true); 
   var aux:Tween = new Tween(ini, "_y", ease, ini._parent.bound_mc._height / 2, ini._height / -2, 1.5, true); 
   //Al finalizar la Tween 
   aux.onMotionFinished = function( o ) 
   { 
      //Colocamos invisible el movieclip ini 
      o.obj._visible = false; 
   } 
} 
function CambioAbj( ini:MovieClip, fin:MovieClip, ease:Function ):Void  
{ 
   //Hacemos visibles los clips 
   fin._visible = ini._visible = true; 
   //Generamos las Tween 
   new Tween(fin, "_y", ease, fin._height / -2, fin._parent.bound_mc._height / 2, 1.5, true); 
   var aux:Tween = new Tween(ini, "_y", ease, ini._parent.bound_mc._height / 2, ini._parent.bound_mc._height + (ini._height / 2), 1.5, true); 
   //Al finalizar la Tween 
   aux.onMotionFinished = function( o ) 
   { 
      //Colocamos invisible el movieclip ini 
      o.obj._visible = false; 
   } 
} 
 
//-- Utilerias --// 
//Genera numeros aleatorios de 0 a sup, excluye a norep 
function rand( sup:Number, norep:Number ):Number 
{ 
   norep = ( norep == undefined ) ? -1 : norep; 
   var aux:Number; 
   do 
   { 
      aux = Math.floor(Math.random() * sup); 
   } 
   while( aux == norep && sup > 1); 
   return aux; 
} 
//Dibuja un cuadrado en clip, de ancho w y alto h 
function setArea( clip:MovieClip, w:Number, h:Number, color:Number, alpha:Number ):Void 
{ 
   //Dibujamos un cuadrado 
   clip.clear(); 
   clip.beginFill( color?color:0, alpha?alpha:0 ); 
   clip.moveTo( 0, 0 ); 
   clip.lineTo( w, 0 ); 
   clip.lineTo( w, h ); 
   clip.lineTo( 0, h ); 
   clip.endFill();    
} 
//toma una cadena "aceleracion" y regresa una funcion de easing 
function StringToEasing( aceleracion:String ):Function 
{ 
   switch( aceleracion ) 
   { 
      case "retroceso": 
         return Back.easeOut; 
      break; 
      case "rebote": 
         return Bounce.easeOut; 
      break; 
      case "elastico": 
         return Elastic.easeOut; 
      break; 
      case "remarcado": 
         return Strong.easeOut; 
      break; 
      case "normal": default: 
         return Regular.easeOut; 
      break; 
   } 
}

Orale, muchas gracias por tu ayuda, lo estoy checando.

El nombre de los botones es:

btn_anterior
btn_siguiente

Suerte.

Que onda!!!

Estaba probando el codigo, esta muy chido, es bastante personalizable, solo tengo una duda con respecto a la posicion X,Y donde se muestra la animacion.

Tengo un escenario de tamaño ancho = 700, alto = 600 y la galeria de fotos se va a mostrar con un tamaño ancho = 300, alto = 230, use el photoshop para ajustar las fotos a ese tamaño y no perder su definicion. Luego las quiero colocar en la posicion x = 20, y = 180. Segun lo que entendi del codigo, en las siguientes instrucciones se define lo que necesito, no???

Código :

var sld_x:Number = 20;//Posicion en X del Slide  
var sld_y:Number = 180;//Posicion en Y del Slide  
var sld_w:Number = Stage.width - 300;//Ancho del Slide  
var sld_h:Number = Stage.height - 230;// Alto del Slide 

Estube haciendo pruebas para conseguir ajustarlo a esa posicion pero no me salio T_T.

Saludos y muchas gracias por tu ayuda

Con esto debe funcionar:

Código ActionScript :

var sld_x:Number = 20;//Posicion en X del Slide  
var sld_y:Number = 180;//Posicion en Y del Slide  
var sld_w:Number = 300;//Ancho del Slide  
var sld_h:Number = 230;// Alto del Slide 

Que tal LongeVie!!!!

Escribo una vez mas porque me surgio otro problema con la galeria, resulta que la coloque en la posicion X,Y en la que habia escrito anteriormente y cuando probe la pelicula todo se veia bien pero al cambiarme de pantalla, la galeria seguia ahi encima del texto. La pagina que estoy haciendo tiene una pantalla de bienvenida y un menu con el cual se puede cambiar a otras secciones de la pagina; la primera vez que entre a la pagina y me cambia a la seccion donde habia puesto la galeria, todo se veia normal pero al regresarme a la pagina de bienvenida, la galeria seguia ahi y al cambiarme a cualquier otra seccion de la pagina la galeria se mostraba en todo momento.

Mmmmmm tal vez lo que se necesita es poner una instruccion tipo "unloadClip" o algo parecido en los botones de la barra del menu para que se destruya el clip cuando se cambia de seccion en la pagina, como ves???? Ocupo una galeria por cada seccion en la pagina, pero cada vez que cambio de seccion la galeria se debe destruir y crear una nueva, es posible hacer eso o mejor lo hago con un archivo swf aparte y lo cargo con el "loadMovie", que podria ser mas conveniente???

Tengo otra duda pero es con respecto a un componente tipo el google maps, resulta que me baje el componente Umap para la version del AS3 y ayer lo estaba probando felizmente y al revisar la pagina que estoy corrigiendo me doy cuenta que usa AS2, entonces no puedo usar ese componente, bueno eso creo. Sabes si se pueden usar componentes de AS3 en AS2 o tengo que bajar la version de ese componente para el AS2???

LoadMovie no es mas conveniente.

Como todo se crea en el clip "slideshow", bastara con que ejecutes esto:

Código ActionScript :

slideshow.removeMovieClip();

Es conveniente manejar todo en una sola version de AS, pero es posible cargar swf de la version 3 en la version 2, y comunicarlos mediante localConnection. nada recomendable.

Orale muchas gracias por tu ayuda compañero, me encontre el componente Gmap para AS2, a ver si lo puedo lograr utilizar.

Suerte.

Ps. Reduce el tamaño de tu avatar