¿Quieres registrarte?

Loop de imágenes en AS3

Por: nazcaline
5 de Enero del 2009
4,606 visitas

Hace poco tuve la necesidad de tener un fondo que cambiara constantemente, cargando imágenes de una carpeta y haciendo que aparezcan lentamente sobre la anterior en loop constante. Como recién empiezo con esto del AS, preferí hacerlo a mi manera y por mi cuenta, de paso que aprendía el uso de clases. De hecho, ésta es la primera custom class que escribo en mi vida, así que probablemente pueda mejorarse mucho más.

Esta clase toma las imágenes a cargar de un array, donde escribiremos los nombres de los archivos.

Aquí el código:

Código :

package
{   
   import flash.display.MovieClip;
   import flash.display.DisplayObject;
   import flash.display.Sprite;
   import flash.display.Loader;
   import flash.display.LoaderInfo;
   import flash.events.Event;
   import flash.events.TimerEvent;
   import flash.net.*;
   import fl.transitions.Tween;
   import fl.transitions.TweenEvent;
   import fl.transitions.easing.*;
   import flash.utils.Timer;
   
      
   public class DynamicGallery extends MovieClip
   {
               //creamos las variables a usar
      private var imagesArray:Array;
      private var index:uint=0;
      private var container:MovieClip;
      private var loader:Loader;
      private var ruta:String="Files/img/"; //para q no escriban la ruta entera
      
      public function DynamicGallery(_imgArr:Array):void
      {
         imagesArray=_imgArr;
         //el container va a recibir las imagenes que se carguen
         container=new MovieClip();
         addChildAt(container,0);
         //lo colocan donde deseen
                        container.x=0;
         container.y=70;
         
         //se crea el loader y un listener que llamara la funcion placeImg cada vez 
                       //que el contenido se haya terminado de cargar
         loader=new Loader();
         loader.contentLoaderInfo.addEventListener(Event.COMPLETE,placeImg);
         
         //se carga la primera imagen, para que no aparezca en blanco
         loader.load(new URLRequest(ruta+imagesArray[0]));
         
                        //se llama una funcion que cargara las imagenes cada cierto tiempo
                        callTimer();
                  
      }
      
      //esta funcion crea un timer que llamara cada tres segundos 
               //otra funcion que se encargara de cargar las imagenes
      private function callTimer():void
      {
         var timer:Timer=new Timer(3000);
         timer.addEventListener(TimerEvent.TIMER,loadItems);
         timer.start();
      }
      
      //esta funcion carga las imagenes, notaran que las llama de acuerdo al indice del array
                //(que se incrementa en cada pasada)
      private function loadItems(evt:TimerEvent):void
      {               
         loader.load(new URLRequest(ruta+imagesArray[index]));
      }
      
      //esta funcion es la mas compleja, se llama automáticamente cada vez que ha terminado de cargar
      //una imagen en el loader.
      private function placeImg(evt:Event):void
      {
                       //se pasa el contenido del loader(la imagen) a un display object provisional
         var tmp:DisplayObject=loader.content;
                       //se "limpia" el loader
         loader.unload();
                       //se crea un clip vacío
         var clip:MovieClip=new MovieClip();
                       //se pasa el display obj al clip
         clip.addChild(tmp);
                        //se añade el clip al container
         container.addChild(clip);
         //este condicional sirve para no aplicarlo al primer item cargado
         if(container.numChildren>1)
         {
            //se vuelve invisible al clip
                               clip.alpha=0;
                               //se usa un tween para hacerlo visible
            var tween1:Tween=new Tween(clip,"alpha",Regular.easeIn,0,1,1,true);
            //listener que llama la funcion kill cuando se acaba el tween
                                tween1.addEventListener(TweenEvent.MOTION_FINISH,kill);
         }
                        //se incrementa el index         
         index++;
         //esto resetea el index si se pasa del length del array
         if(index==imagesArray.length)
         {
            index=0;
         }
         
      }
      
      //esta función borra el clip que quedó oculto(osea, siempre vamos a tener dos clips
               //dentro de container)
      private function kill(evt:TweenEvent):void
      {
         container.removeChildAt(0);
      }
      
      
   }
}



Saludos

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas actionscript_3

Comentarios | Enviar un comentario
Buen inicio, cuando le pierdes el miedo a las clases estarás como pez en el agua.

Sólo un detalle de tu timer de 3 segundos que no lo veo necesario, el load lo podías mover al final de tu función placeImg, así cuando termine de cargar la imagen cargará la siguiente.

Y espero que este usando como IDE para el código el FlashDevelop U_U .

Esperamos más tips tuyos. ;)
Por: Otaku RzO
Muchas gracias por tu opinion.
No entendi lo del timer...yo lo uso porque quiero que cargue la imagen cada 3 segundos, y el tween del alpha es solo de 1 segundo.
Ah, he mejorado la clase porque le he añadido un efecto de desaturación, es decir primero aparece lentamente la imagen pero en balnco y negro, luego hace otro tween hacia el color original.(aumente el timer a 5 segundos) ¿Tendría que hacer otro tip, o modificar éste? y ¿cómo modifico este tip? (no veo una boton de editar).

:

"Y espero que este usando como IDE para el código el FlashDevelop"


eso ultimo si no entendi nada... :? Que cosa es IDE? y que es FlashDevelop? :?

sí, soy n00b pes...
Por: nazcaline
no entiendo, en donde debo guardar las imagenes y con que nombres?

luego con poner
"import clases.imagenes; "
en las acciones del frame0, ya se coloca la clase?
Por: roberto-blog
Las imagenes se guardan en una carpeta llamada Files/img , lo que no tengo claro es con que nombre.
Por: byweb-blog
mmm a mi me tira este error:


1037: Los paquetes no se pueden anidar.
Por: Said-blog
a mi tamb me sale este error en todoslos codigos de esta pagina

1037: Los paquetes no se pueden anidar.
Por: ruben-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.