Home » AS2 »Avanzado »Class »Tutoriales » Currently Reading:

Clase para transiciones de fotos

octubre 8, 2006 AS2, Avanzado, Class, Tutoriales 20 Comments
Clase para transiciones de fotos

Con esta sencilla clase podemos crear fácilmente un pase de fotografías con fundido entre foto y foto:

  1. class LoopIMG
  2. {
  3.     private var ruta:MovieClip;
  4.     private var listaFotos:Array;
  5.     private var tiempo:Number;
  6.     private var isPaused:Boolean;
  7.     private var contenedor:MovieClip;
  8.     private var paseDeFotos:Number;
  9.     private var foto:Number;
  10.     private var i:Number = 0;
  11.     public var onLoadComplete:Function;
  12.     //————————-
  13.     public function LoopIMG(queRuta)
  14.     {
  15.         ruta = (ruta == undefined) ? _root : queRuta;
  16.         contenedor = ruta.createEmptyMovieClip("contenedor1", ruta.getNextHighestDepth());
  17.         contenedor.createEmptyMovieClip("contenedor1", contenedor.getNextHighestDepth());
  18.         contenedor.createEmptyMovieClip("contenedor2", contenedor.getNextHighestDepth());
  19.         listaFotos = new Array();
  20.         setTiempo(2000);
  21.         foto = 0;
  22.         //
  23.         contenedor.precarga = new MovieClipLoader();
  24.         contenedor.precarga.onLoadComplete = function(cont:MovieClip)
  25.         {
  26.             cont.onEnterFrame = function()
  27.             {
  28.                 if (this._alpha < 100) {
  29.                     this._alpha += 10;
  30.                 } else {
  31.                     delete this.onEnterFrame;
  32.                 }
  33.             };
  34.         };
  35.     }
  36.     public function setTiempo(queTiempo)
  37.     {
  38.         tiempo = queTiempo;
  39.     }
  40.     public function setPosicion(queX, queY)
  41.     {
  42.         contenedor._x = queX;
  43.         contenedor._y = queY;
  44.     }
  45.     public function start()
  46.     {
  47.         contenedor.contenedor2._alpha = 0;
  48.         contenedor.precarga.loadClip(listaFotos&#91;foto], contenedor.contenedor2);
  49.         paseDeFotos = setInterval(this, "SiguienteImagen", tiempo);
  50.     }
  51.     public function stop()
  52.     {
  53.         clearInterval(paseDeFotos);
  54.     }
  55.     public function pause()
  56.     {
  57.         isPaused = !isPaused;
  58.         isPaused == true ? this.stop() : this.start();
  59.     }
  60.     public function push(queDato)
  61.     {
  62.         switch (typeof (queDato)) {
  63.         case "string" :
  64.             var extension:String = queDato.substr(queDato.length - 3, 3);
  65.             switch (extension) {
  66.             case "xml" :
  67.                 var ruta = this;
  68.                 var xmlFotos:XML = new XML();
  69.                 xmlFotos.ignoreWhite = true;
  70.                 xmlFotos.load(queDato);
  71.                 xmlFotos.onLoad = function(success:Boolean)
  72.                 {
  73.                     if (success) {
  74.                         var xmlNodo:XML = this.firstChild;
  75.                         var total:Number = xmlNodo.childNodes.length;
  76.                         for (var i:Number = 0; i < total; i++) {
  77.                             ruta.listaFotos.push(xmlNodo.childNodes&#91;i].firstChild.nodeValue);
  78.                         }
  79.                     }
  80.                 };
  81.                 break;
  82.             default :
  83.                 listaFotos.push(queDato);
  84.                 break;
  85.             }
  86.             break;
  87.         case "object" :
  88.             listaFotos = queDato;
  89.             break;
  90.         }
  91.     }
  92.     public function pop(queURL)
  93.     {
  94.         listaFotos.pop(queURL);
  95.     }
  96.     public function shift(queURL)
  97.     {
  98.         listaFotos.shift(queURL);
  99.     }
  100.     public function unshift(queURL)
  101.     {
  102.         listaFotos.unshift(queURL);
  103.     }
  104.     public function trace()
  105.     {
  106.         trace(listaFotos);
  107.     }
  108.     public function remove(queDato)
  109.     {
  110.         switch (typeof (queDato)) {
  111.         case "number" :
  112.             var temp1:Array = listaFotos.slice(0, queDato - 1);
  113.             var temp2:Array = listaFotos.slice(queDato, listaFotos.length);
  114.             listaFotos = temp1.concat(temp2);
  115.             break;
  116.         case "string" :
  117.             for (var num in listaFotos) {
  118.                 if (listaFotos&#91;num] == queDato) {
  119.                     remove(Number(num) + 1);
  120.                 }
  121.             }
  122.             break;
  123.         }
  124.     }
  125.     public function clear()
  126.     {
  127.         listaFotos = &#91;];
  128.     }
  129.     public function loadSec(queRaiz:String, queExtension:String, queNum:Number, queFin:Number)
  130.     {
  131.         var num = queNum;
  132.         var raiz = queRaiz;
  133.         var ext = queExtension;
  134.         if (queFin == undefined) {
  135.             var scope = this;
  136.             var url:String = raiz + num + ext;
  137.             contenedor.precarga.loadClip(url, contenedor.contenedor2);
  138.             contenedor.precarga.onLoadStart = function(mc:MovieClip)
  139.             {
  140.                 contenedor.precarga.unloadClip(mc);
  141.                 num++;
  142.                 scope.loadSec(raiz, ext, num);
  143.                 scope.listaFotos.push(url);
  144.             };
  145.             contenedor.precarga.onLoadError = function(mc:MovieClip, error:String)
  146.             {
  147.                 if (error == "URLNotFound") {
  148.                     scope.contenedor.precarga.onLoadStart = null;
  149.                     scope.onLoadComplete();
  150.                 }
  151.             };
  152.         } else {
  153.             for (var i:Number = queNum; i <= queFin; i++) {
  154.                 var url:String = raiz + i + ext;
  155.                 listaFotos.push(url);
  156.             }
  157.             this.onLoadComplete();
  158.         }
  159.     }
  160.     //——————–
  161.     private function SiguienteImagen()
  162.     {
  163.         (foto < (listaFotos.length - 1)) ? foto++ : foto = 0;
  164.         var cont:MovieClip = contenedor.getInstanceAtDepth(contenedor.getNextHighestDepth() - 2);
  165.         cont.swapDepths(contenedor.getInstanceAtDepth(contenedor.getNextHighestDepth() - 1));
  166.         cont._alpha = 0;
  167.         contenedor.precarga.loadClip(listaFotos&#91;foto], cont);
  168.     }
  169. }
  170. &#91;/as]
  171.  
  172. La clase contiene unos cuantos metodos para controlar el array de fotos:
  173. &#91;as]fondoLoop.pop("foto.jpg")
  174. fondoLoop.shift("foto.jpg")
  175. fondoLoop.unshift("foto.jpg")
  176. fondoLoop.trace() // realiza un trace del contenido del array
  177. fondoLoop.clear() // borra el contenido del array
  178. fondoLoop.remove(2) // Elimina una foto del array segun la posición
  179. fondoLoop.remove("foto1.jpg") // Elimina una foto del array a partir del nombre[/as]
  180.  
  181. La funcion push() admite diferentes tipos de datos. Las posibilidades son:
  182. -un Array
  183. -un Xml
  184. -o archivo (jpg, tif…)
  185.  
  186. Ejemplo de uso:
  187.  
  188. Manual:
  189. &#91;as]fondoLoop.push("foto1.jpg");
  190. fondoLoop.push("foto2.jpg");
  191. fondoLoop.push("foto3.jpg");
  192. fondoLoop.push("foto4.jpg");
  193. fondoLoop.push("foto5.jpg");&#91;/as]
  194.  
  195. XML:
  196. &#91;as]fondoLoop.pushXML("fotos.xml");[/as]
  197.  
  198. &#91;as]<?xml version="1.0" encoding="utf-8" standalone="yes"?>
  199. <album>
  200. <imagen>foto1.jpg</imagen>
  201. <imagen>foto2.jpg</imagen>
  202. <imagen>foto3.jpg</imagen>
  203. <imagen>foto4.jpg</imagen>
  204. <imagen>foto5.jpg</imagen>
  205. </album>

Secuencia:

  1. fondoLoop.loadSec("foto", ".jpg", 1, 5);
  2. fondoLoop.start();

(de esta manera añadirá los archivos “foto1.jpg”, “foto2.jpg”, “foto3.jpg”, “foto4.jpg”, “foto5.jpg”.

Si no le añadimos el numero final de la secuencia, buscará en el servidor hasta encontrar encontar un error (no encuentra la imagen)… entonces con el evento onComplete podemos realizar el inicio del loop.
fondoLoop.onLoadComplete = fondoLoop.start;

  1. fondoLoop.loadSec("foto", ".jpg", 1);

Compártelo:

Clase para transiciones de fotos

Post relacinonados:

  1. Sistema de transiciones entre fotos
  2. Clase Contenedor
  3. Clase para cargar contenido externo en Actionscript 3
  4. Clase de Actionscript 3 para arrays multidimensionales
  5. Clase de ActionScript 3 para retardar la ejecución de funciones

YARPP
Visto 16.213 veces

Currently there are "20 comments" on this Article:

  1. nicolas Nishiky dice:
    30 noviembre, -0001 a las 12:00 am

    Hola .. un favor puedes colocar o poner el archivo para descargarlo por que soy nuevo esto de flash …gracias o mandarmelo por mi nishiiky1@yahoo.com

    Gracias

  2. admin dice:
    30 noviembre, -0001 a las 12:00 am

    Claro, aqui estan todos los archivos:
    http://www.cristalab.zguillez.com/LoopIMG/

  3. vmmonge dice:
    30 noviembre, -0001 a las 12:00 am

    Muy muy BUEno,

    pero para que hiciera una precarga de cada imagen, imaginemos que son fotos muy grandes.?

  4. admin dice:
    30 noviembre, -0001 a las 12:00 am

    No hay ningún problema, ya que estas cargando las imágenes con MovieCliploader:
    contenedor.precarga = new MovieClipLoader();
    Únicamente has de añadir las funciones onLoadStart y onLoadProgress para generar un preload.

  5. nicolas Nishiky dice:
    30 noviembre, -0001 a las 12:00 am

    gracias …en que Versión esta el archivo en flash 8 creo!!!

  6. Jovan dice:
    30 noviembre, -0001 a las 12:00 am

    Quisiera aprender como convertir una foto en codigos para postiarla en mi myspace, si es posible

  7. edgar dice:
    30 noviembre, -0001 a las 12:00 am

    quisiera que me expliquen mas aserca de esto ya que recien estoy empesando a usar esto y no entiendo este codigo deve estar en acciones en flash o en q lugar

  8. alberto dice:
    30 noviembre, -0001 a las 12:00 am

    me gustaría saber si es posible hacer que se detenga cuando llegue a la última foto y no haga un bule, he visto que hay una función de stop, pero no consigo que me funcione, se me para toda la película. gracias.,

  9. zguillez dice:
    30 noviembre, -0001 a las 12:00 am

    @alberto: En la función SiguienteImagen() controlas que al llegar a la última foto empieza de nuevo:

    foto (listaFotos.length - 1)) ? foto++ : foto = 0

    Lo que puedes hacer es modificar esa línea para que cuando llegue a la última ejecute la acción de parar

    foto (listaFotos.length - 1)) ? foto++ : stop()

  10. dmarvp dice:
    30 noviembre, -0001 a las 12:00 am

    dejé este comentario en CristalLab, pero talvez lo revises aquí antes :)

    Hola !

    Felicitaciones, tu clase en realidad me ayuda bastante cuando la combino con XMLs ! pero hay algo que no he podido realizar y me he roto la cabeza tratando de hacerlo. Necesito un método que destruya los movieclips de la transición !

    Lo que trato de hacer es meter una instancia de tu clase dentro de un movieclip, y al presionar un botón en el _root, ese movieclip debería cargarme otra animación que tengo hecha por separado, sin embargo la transición de fotos queda superpuesta por sobre todas las animaciones y no encuentro la forma de destruirla.

    Ojalá me puedas ayudar !

    Gracias !

  11. Marchomen dice:
    30 noviembre, -0001 a las 12:00 am

    Hola, he probado la clase y me funciona correctamente excepto cuando el push es un XML. El problema es que no me carga la primera imagen en el inicio. Cuando finaliza el loop si que me carga, pero en el inicio no.
    Alguien puede decirme que estoy haciendo mal?

  12. Marchomen dice:
    30 noviembre, -0001 a las 12:00 am

    Ya encontrado la solución.
    El caso es que la función fondoLoop.start(); se inicia antes de que se carge el xml. Por lo que al iniciar la movie, la primera foto es undefined.

    Se puede solucionar poniendo:
    ruta.start(); después del for (var i:Number = 0; i dentro de la función push

  13. jdm dice:
    30 noviembre, -0001 a las 12:00 am

    Hay algun codigo en actionscript que cuente cuantas fotos tengo en una carpeta? Quiero hacer un albun.. Tengo en una carpeta 20 fotos cuyos nombres serian 1.jpg, 2.jpg, 3.jpg…. La cuestion es que para añadir fotos en xml habria que editar el archivo y serian muchas fotos se podrian detectar mediante flash el numero de archivos?

  14. kIM dice:
    30 noviembre, -0001 a las 12:00 am

    Hola, buenisimo el post, una pregunta mas, hay alguna forma que cargue las imagenes aleatoriamente?

    saludos y gracias

  15. julio dice:
    13 enero, 2009 a las 7:50 am

    Hola, está genial el tuto pero no acaba de funcionarme y no me entero porque.
    Creo que no estoy llamando bien a la clase desde el fla.
    He ido a descargar los archivos que indicas en el link:

    http://www.cristalab.zguillez.com/LoopIMG/

    Pero ya no están disponibles, podrías volver a cargarlos en algún sitio ?

    Muchas gracias !!

  16. admin dice:
    13 enero, 2009 a las 12:57 pm

    @julio:
    Si, ese link dejó de estar disponible :S

    Aqui puedes bajarte el ejemple:

    http://www.codigoactionscript.org/files/ImgLoop/ImgLoop.zip

    Espero que te sirva 😉

  17. andres dice:
    28 octubre, 2009 a las 10:04 am

    como lo puedo hacer para uqe cada foto tenga su propio link??

  18. olpo18 dice:
    11 noviembre, 2009 a las 1:35 pm

    Muy buen aporte gracias, me ha servido de mucho, lo logre pasar a transiciones automaticas sin usar los botones jejeje, gracias eres un capo, me has ayudado un monton, nos vemos y de nuevo gracias

  19. r1kard0 dice:
    16 enero, 2011 a las 1:51 am

    quisiera saber si me pueden ayudar con este efecto que presenta en la pagina de samsung: http://www.samsung.com basicamente es saber como hacer que cuando se este reproduciendo el clip esten los botones con precargas y me regresen a la imagen ke pertenece, y ke a partir de ahi siga reproduciendo el clip, es una transicion de imagenes con botones que indican una referencia a una imagen, bueno mejor echenle un vistazo, agradezco cualquier ayuda u orientacion.

    saludos.

  20. dlp dice:
    10 marzo, 2011 a las 9:23 am

    Un trabajo excelente y muy útil.

    ¿Esto mismo no lo tendrás en AS3?
    Gracias.

Comment on this Article:








Usuario registrado

Conectar con
Conectar con

Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com