cargar imagenes aleatorias con efecto alfa

Hola, me gustaria que me ayudaran, tengo unas 17 fotos que quieron que aparezcan de forma aleatorias, (eso se como hacerlo), pero no se como hacer que pasen con un efecto de desvanecimiento y quiero evitar que la fotos se repitan.
este es el codigo que he utilizado.
[color=blue]imagenes_mc.loadMovie("ftc/img00" + (1+random(17)) + ".jpg")[/color]
// imagenes_mc, es el contenedor dode cargan las fotos.
ESPERO VUESTRA AYUDA LO ANTES POSIBLE, MIL GRACIAS A TODOS

[quote="Maite"]Hola, me gustaria que me ayudaran, tengo unas 17 fotos que quieron que aparezcan de forma aleatorias, (eso se como hacerlo), pero no se como hacer que pasen con un efecto de desvanecimiento y quiero evitar que la fotos se repitan.
este es el codigo que he utilizado.
imagenes_mc.loadMovie("ftc/img00" + (1+random(17)) + ".jpg")
// imagenes_mc, es el contenedor dode cargan las fotos.
ESPERO VUESTRA AYUDA LO ANTES POSIBLE, MIL GRACIAS A TODOS [/quote]

Primero que todo lo mejor es que tengas un XML con las imágenes, que después de leido el XML crees un arreglo con las imagenes desordenadas, de esta forma logras que no se repita ninguna y después estonces es que deberías preocuparte por el alpha de estas.

Haz primero los dos primeros pasos y después entonces entra en el tercero. Si tienes dudas en los primeros, entonces iremos paso a paso.

Maite, disculpa la demora pero no miro mucho los mensajes privados. Mira me has dicho que has revisado tutoriales y no entiendes mucho, lo primero es armar la estructura de tu XML, esta puede ser una variante:

Código :

<imagenes>
    <img nombre="Imagen 01" src="imagen1.jpg"/>
    <img nombre="Imagen 02" src="imagen2.jpg"/>
    <img nombre="Imagen 03" src="imagen3.jpg"/>
    <img nombre="Imagen 04" src="imagen4.jpg"/>
    <img nombre="Imagen 05" src="imagen5.jpg"/>
</imagenes>

Despues debes leer tu XML desde flash:

Código :

//---Se declara el objeto XML con nombre imagenes (o el que elijas)
var imagenes:XML = new XML();
imagenes.ignoreWhite = true; //---Ignorar los espacios en blanco del XML

//---Cuando se lea el XML, si la lectura fue satisfactoria, empezar a trabajar con él
imagenes.onLoad = function(success:Boolean):Void{

    if(success){

        trace("el XML se ha leido ya podemos trabajar con el");

    }

}

//---Mandar a leer el XML dandole la ruta respectiva al flash
imagenes.load("carpetaDondeSeEncuentra/imagenes.xml");

Haz primero estos pasos, cuando ya tengas esto listo vamos a por lo demás.

Muchas gracias, voy hacer lo que tu dices, y ya te contare

Ya he realizado los pasos que me has dicho, he creado mi estructura XML, imagenes.xml y he metido el codigo en mi flash, ahora dime como debo seguir. Gracias

Bueno ahora deberás desordenar el XML, porque dices que lo quieres de forma aleatoria, pare eso debemos crear un arreglo con los datos del XML desordenados, esto podría ser una variante:

Código :

//---Se declara el objeto XML con nombre imagenes (o el que elijas)

var imagenes:XML = new XML();

//---Se declara el arreglo donde guardaremos nuestras imagenes desordenadas
var imagenesArray:Array = new Array();

imagenes.ignoreWhite = true; //---Ignorar los espacios en blanco del XML


//---Función de desordenar

function randomXML():Void{
   
   //---Declaramos las variables locales
   var total:Number = imagenes.firstChild.childNodes.length;
   var sum:Number = 0;
   var numero:Number;
   var nombre:String;
   var arrayString:String;
   
   while(sum < total){
      
      //---Creamos un número aleatorio entre el rango de la cantidad de imagenes
      numero = Math.floor(Math.random() * total);
      
      //---Buscamos la imagen correspondiente a este número
      nombre = imagenes.firstChild.childNodes[numero].attributes.src.toString();
      
      //---Convertimos el arrey a string
      arrayString = imagenesArray.toString();
      
      //---Comprobamos si la imagen no se encuentra en el arreglo y de ser así la añadimos
      if(arrayString.indexOf(nombre) < 0){
         
         imagenesArray.push(nombre);
         sum++;
         
      }
      
   }
   
   //---Comprueba que salen las imagenes desordenadas
   trace(imagenesArray);
   
}

//---Cuando se lea el XML, si la lectura fue satisfactoria, empezar a trabajar con él

imagenes.onLoad = function(success:Boolean):Void{
   
    if(success){

      //---Vamos allamar a la función de desordenar el XML en un arreglo
        randomXML();

    }

}

//---Mandar a leer el XML dandole la ruta respectiva al flash

imagenes.load("imagenes.xml");

La función randomXML lo que hace es introducir las imágenes de forma aleatoria en un arreglo chequeando de que no se repitan, he añadido un trace al final de la función para comprobar si el arreglo contiene las imágenes desordenadas.

Es importante que no copies y pegues el código, sino que leas paso a paso todos los comentarios, de esa forma interiorizas como se hace.

una pregunta, no entiendo muy bien esto de mi XLM
<img nombre="Imagen 01" src="img001.jpg"/>
img001.jpg es el nombre de una de mis imagenes, pero que es
<img nombre="Imagen 01", no se porque tengo que poner eso en el XLM

Al probar la pelicula me salta una ventana diciendome que "Un script de esta`pelicula esta provocando que Flash Player se ejecute lentamente..... No se me da ese problema y no veo ninguna imagen.

El xml que te puse fue un ejemplo, tu lo haces a tu conveniencia, muchas veces, o la mayoría de estas, se necesita tener una imagen con un texto que la describa, bueno no vas a tener la imagen y que debajo diga imagen01.jpg, en vez de "Corte tranversal de una hoja", bueno por eso creé dos campos uno para nombre y otro para el nombre físico de la imagen en disco, a tu interés puedes eliminarlo o añadirle más atributos.

El error que te dá a mi no me sucede, parece un error en el xml y por eso el while no deja de funcionar, revisa bien el código y comprueba que esté igual al que te di y copia el xml que te di en el fichero xml.

Claro que todavía no pueden salir imágenes, solamente estamos por la parte de desordenar las imágenes, te advertí que era largo el camino.

Muchas gracias ya he enetendido lo del XML tenia un fallo, por eso saltaba la ventana en flash, todo esta correcto, muchas gracias, ahora como debo seguir.

Bueno crea en tu flash una función a la que le llamaremos genericLoad, va a ser la función que utilizaremos para cargar las imágenes:

Código :

//---Función para leer

function genericLoad(path:String, mc:MovieClip):Void {

   mc._alpha = 0;

   var loader:MovieClipLoader = new MovieClipLoader();

   var listener:Object = new Object();

   //---Cuando termine la carga

   listener.onLoadInit = function(target:MovieClip):Void  {
      
      //---Cuando se trmine la carga le damos un fade a alpha 100
      target.onEnterFrame = function():Void  {

         var difAlpha:Number = (100-this._alpha)*.25;
         this._alpha += difAlpha;

         if (this._alpha>=98) {

            delete this.onEnterFrame;
            this._alpha = 100;

         }
      };

   };

   loader.addListener(listener);

   loader.loadClip(path,mc);

}

Fijate como a la función se le puede mandar un path a la imagen y el movieclip donde tiene que cargar la imagen, cuando se inicia la función le da un alpha 0 a la imagen y cuando termina de cargar la imagen hace un onterframe que le sube el alpha hasta 100 y cuando llega a un alpha suficiente se termina el onEnterFrame.

Después crea otra función que será la que insertará las imágenes:

Código :

//---Función de insertar las imágenes en el escenario

function insertImages():Void {

   //---Declaramos el alto y el ancho del movieclip que contendrá a las imágenes
   var alto:Number = 100;
   var ancho:Number = Stage.width;

   //---Creamos el movieClip contenedor

   var cont:MovieClip = this.createEmptyMovieClip("cont", this.getNextHighestDepth());

   //---lo situamos en el escenario en las coordenadas deseadas

   cont._y = Stage.height-alto;

   //---Creamos la máscara del movieClip contenedor

   var mascara:MovieClip = this.createEmptyMovieClip("mascara", this.getNextHighestDepth());
   mascara._y = cont._y;

   with (mascara) {

      beginFill(0xFF0000,100);
      moveTo(0,0);
      lineTo(ancho,0);
      lineTo(ancho,alto);
      lineTo(0,alto);

   }
   
   //---Crear un ciclo para cargar las imágenes
   
   var thumb:MovieClip;
   var posX:Number = 0;
   
   for(var i:Number = 0; i < imagenesArray.length; i++){
      
      thumb = cont.createEmptyMovieClip("thumb" + i, i);

      //---Llamamos a la función encargada de leer las imágenes y darles alpha
      genericLoad(imagenesArray[i], thumb);
      
      //---Cambiamos las x de las imagenes
      thumb._x = posX;
      posX += 200;
      
   }
   
   //---Aplicar la mascara al movieClip contenedor de las imagenes
   cont.setMask(mascara);

}

Bueno todo te lo he comentariado, ahora necesitas enseguida que se termine de crear el arreglo desordenado llamar a la función de insertar las imágenes:

Código :

//---Dentro de la funcion randomXML (al final) llamas a la función de insertar las imagenes
insertImages();

Las imágenes si son muchas se te irán del escenario, por lo que tendremos que seguir para solucionar esto, pero por ahora tienes trabajo que hacer, estudiate esta parte y después continuamos. Recurda que no se que ancho y alto tienen tus imágenes, juega con las coordenadas que he utilizado para situar el contenedor, la máscara y los movies de las imágenes a tu conveniencia.

Mil gracias, estudiare el codigo para poder comprender lo que estoy haciendo.

hola de nuevo, lo unico que veo en mi escenario es la mascara de color rojo, por que las imagenes no las veo, tiene algo que ver que son 17 y miden 500 de acho por 192 de alto, gracias de nuevo

Pues no se te debe ver la mascara porqe esta línea:

Código :

//---Aplicar la mascara al movieClip contenedor de las imagenes
cont.setMask(mascara);

Lo que hace es aplicar la mascara y al hacerlo esta no se puede ver, queda invisible.

ahora una cosa, de que tamaño estás haciendo la pantalla, porque me parece que una pantalla común no cabrá más de una imagen de 500 de ancho.

Recuerda cuando arregles lo de la macara que el ejemplo deplaza las imágenes 200px una de otra, adapta estos números y coordenadas después que veas que las cosas empiezan a funcionar.

El escenario es de 500 acho por 222 alto, pero las imagenes tienen un tamaño de 500 ancho por 192 de alto, y mi idea era que saliera una se desvaneciera y saliera otra, es una cabecera para una web. La mascara se que no se tenia que ver, pero yo la veo, al principio no sabia lo que era hasta que revise el codigo y vi que tu le tenias puesto el color rojo a la mascara.

Pensé que querías hacer especie de una galería con las imágenes puestas en linea y después escrollearlas, pues lo que quieres es mucho más sencillo, así no tendremos que resolver tu problema con la máscara.

Bueno volvamos atrás, elimina lo último que te dije, nos quedamos en la parte de desordenar el arreglo, la función terminaba en lanzar un trace del arreglo:

Código :

//---Comprueba que salen las imagenes desordenadas
trace(imagenesArray);

bueno ahora vamos a armar la función que lee las imágenes:

Código :

//---Función para leer

function genericLoad(path:String, mc:MovieClip):Void {

   mc._alpha = 0;

   var loader:MovieClipLoader = new MovieClipLoader();

   var listener:Object = new Object();

   var barra:MovieClip;

   //---Cuando termine la carga

   listener.onLoadInit = function(target:MovieClip):Void  {

      //---Cuando se trmine la carga le damos un fade a alpha 100
      target.onEnterFrame = function():Void  {

         var difAlpha:Number = (100-this._alpha)*.25;
         this._alpha += difAlpha;

         if (this._alpha>=98) {

            delete this.onEnterFrame;
            this._alpha = 100;

         }
      };

   };

   //---Cuando comience a leer situar la barra de loading

   listener.onLoadStart = function(target:MovieClip):Void  {

      barra = _root.attachMovie("barra", "barra", _root.getNextHighestDepth());

      barra._x = (Stage.width-barra._width)/2;
      barra._y = (Stage.height-barra._height)/2;
      barra._xscale = 0;

   };
   //---Mientras cargue animar la barra de loading

   listener.onLoadProgress = function(target:MovieClip, bl:Number, bt:Number):Void  {

      barra._xscale = (bl/bt)*100;

   };
   //---Cuando termine de cargar eliminar la barra

   listener.onLoadComplete = function(target:MovieClip, httpStatus:Number):Void  {

      barra.removeMovieClip();

   };

   loader.addListener(listener);

   loader.loadClip(path,mc);

}

fíjate que esta es más larga que la anterior, ahora tenemos un evento onLoadStart para situar un mc que se encuentra en la biblioteca linkeado para AS como "barra" (Lo mejor es que sea un rectángulo). Otro evento onLoadProgress para animar la barra mientras se lee la imagen y otro evento onLoadComplete para eliminar la barra.

Bueno vamos a la función que llama a la función de leer las imágenes en un tiempo determinado:

Código :

//---Crear el movieClip que leerá lás imágenes
var contendor:MovieClip = this.createEmptyMovieClip("contenedor", this.getNextHighestDepth());
contenedor._alpha = 0;

//---número de la imagen a leer
var imageNumber:Number = 0;

//---Función de insertar las imágenes en el escenario
function loadImage():Void {

   //---Si se llegó al final del arreglo, empezar por el principio
   if (imageNumber == imagenesArray.length) {
      
      imageNumber = 0;

   }
   var path:String = imagenesArray[imageNumber];

   //---Hacer un fade a cero y después leer la imagen
   contenedor.onEnterFrame = function():Void  {

      var difAlpha:Number = -this._alpha*.25;
      this._alpha += difAlpha;

      if (this._alpha<=1) {

         delete this.onEnterFrame;
         this._alpha = 0;

         genericLoad(path,this);

         //---Incrementar la imagen a leer
         imageNumber++;

      }
   };
}

//---Creamos un setInterval para que llame a la función de leer las imagenes cada X milisegundos (actualmente 4 segundos)
var byTime:Number = setInterval(loadImage, 4000);

Bueno ahora solamente deberías cambiar el trace que te puse al inicio del arreglo desordenado por la llamada a la función loadImage, para que lea la primera:

Código :

loadImage();

Y ya está terminado

Pues al final tu ayuda me ha solucionado un gran problema y he aprendido una cosa nueva que ignoraba y creia que nunca encontraría la solución, mil gracias. Gracias a ti he aprendido un nuevo codigo, pues tienes razón antes de pegarlo, hay que conprender lo que se esta haciendo.

Me alegro que lo hayas solucionado.

Hola me parecio exelente y eh logrado hacerlo funcionar solo una pregujntas:
1) Es posible fundir los fade in y out (alfa), de las imagenes cuando cargan..actuamente cuando se va a alfa 0 la primera entra la segunda, la idea seria que mientras se va la primera a alfa 0 ya esta cargando la segunda para logra que se fundan

Eso Saludos

Consulta este tutorial, logra lo que deseas:

http://www.cristalab.com/tutoriales/crear-presentaciones-en-flash-con-custom-slideshows-c247l/