Clase para transiciones de fotos
Con esta sencilla clase podemos crear fácilmente un pase de fotografías con fundido entre foto y foto:
class LoopIMG
{
private var ruta:MovieClip;
private var listaFotos:Array;
private var tiempo:Number;
private var isPaused:Boolean;
private var contenedor:MovieClip;
private var paseDeFotos:Number;
private var foto:Number;
private var i:Number = 0;
public var onLoadComplete:Function;
//————————-
public function LoopIMG(queRuta)
{
ruta = (ruta == undefined) ? _root : queRuta;
contenedor = ruta.createEmptyMovieClip("contenedor1", ruta.getNextHighestDepth());
contenedor.createEmptyMovieClip("contenedor1", contenedor.getNextHighestDepth());
contenedor.createEmptyMovieClip("contenedor2", contenedor.getNextHighestDepth());
listaFotos = new Array();
setTiempo(2000);
foto = 0;
//
contenedor.precarga = new MovieClipLoader();
contenedor.precarga.onLoadComplete = function(cont:MovieClip)
{
cont.onEnterFrame = function()
{
if (this._alpha <100) {
this._alpha += 10;
} else {
delete this.onEnterFrame;
}
};
};
}
public function setTiempo(queTiempo)
{
tiempo = queTiempo;
}
public function setPosicion(queX, queY)
{
contenedor._x = queX;
contenedor._y = queY;
}
public function start()
{
contenedor.contenedor2._alpha = 0;
contenedor.precarga.loadClip(listaFotos[foto], contenedor.contenedor2);
paseDeFotos = setInterval(this, "SiguienteImagen", tiempo);
}
public function stop()
{
clearInterval(paseDeFotos);
}
public function pause()
{
isPaused = !isPaused;
isPaused == true ? this.stop() : this.start();
}
public function push(queDato)
{
switch (typeof (queDato)) {
case "string" :
var extension:String = queDato.substr(queDato.length - 3, 3);
switch (extension) {
case "xml" :
var ruta = this;
var xmlFotos:XML = new XML();
xmlFotos.ignoreWhite = true;
xmlFotos.load(queDato);
xmlFotos.onLoad = function(success:Boolean)
{
if (success) {
var xmlNodo:XML = this.firstChild;
var total:Number = xmlNodo.childNodes.length;
for (var i:Number = 0; i <total; i++) {
ruta.listaFotos.push(xmlNodo.childNodes[i].firstChild.nodeValue);
}
}
};
break;
default :
listaFotos.push(queDato);
break;
}
break;
case "object" :
listaFotos = queDato;
break;
}
}
public function pop(queURL)
{
listaFotos.pop(queURL);
}
public function shift(queURL)
{
listaFotos.shift(queURL);
}
public function unshift(queURL)
{
listaFotos.unshift(queURL);
}
public function trace()
{
trace(listaFotos);
}
public function remove(queDato)
{
switch (typeof (queDato)) {
case "number" :
var temp1:Array = listaFotos.slice(0, queDato - 1);
var temp2:Array = listaFotos.slice(queDato, listaFotos.length);
listaFotos = temp1.concat(temp2);
break;
case "string" :
for (var num in listaFotos) {
if (listaFotos[num] == queDato) {
remove(Number(num) + 1);
}
}
break;
}
}
public function clear()
{
listaFotos = [];
}
public function loadSec(queRaiz:String, queExtension:String, queNum:Number, queFin:Number)
{
var num = queNum;
var raiz = queRaiz;
var ext = queExtension;
if (queFin == undefined) {
var scope = this;
var url:String = raiz + num + ext;
contenedor.precarga.loadClip(url, contenedor.contenedor2);
contenedor.precarga.onLoadStart = function(mc:MovieClip)
{
contenedor.precarga.unloadClip(mc);
num++;
scope.loadSec(raiz, ext, num);
scope.listaFotos.push(url);
};
contenedor.precarga.onLoadError = function(mc:MovieClip, error:String)
{
if (error == "URLNotFound") {
scope.contenedor.precarga.onLoadStart = null;
scope.onLoadComplete();
}
};
} else {
for (var i:Number = queNum; i <= queFin; i++) {
var url:String = raiz + i + ext;
listaFotos.push(url);
}
this.onLoadComplete();
}
}
//——————–
private function SiguienteImagen()
{
(foto <(listaFotos.length - 1)) ? foto++ : foto = 0;
var cont:MovieClip = contenedor.getInstanceAtDepth(contenedor.getNextHighestDepth() - 2);
cont.swapDepths(contenedor.getInstanceAtDepth(contenedor.getNextHighestDepth() - 1));
cont._alpha = 0;
contenedor.precarga.loadClip(listaFotos[foto], cont);
}
}
{
private var ruta:MovieClip;
private var listaFotos:Array;
private var tiempo:Number;
private var isPaused:Boolean;
private var contenedor:MovieClip;
private var paseDeFotos:Number;
private var foto:Number;
private var i:Number = 0;
public var onLoadComplete:Function;
//————————-
public function LoopIMG(queRuta)
{
ruta = (ruta == undefined) ? _root : queRuta;
contenedor = ruta.createEmptyMovieClip("contenedor1", ruta.getNextHighestDepth());
contenedor.createEmptyMovieClip("contenedor1", contenedor.getNextHighestDepth());
contenedor.createEmptyMovieClip("contenedor2", contenedor.getNextHighestDepth());
listaFotos = new Array();
setTiempo(2000);
foto = 0;
//
contenedor.precarga = new MovieClipLoader();
contenedor.precarga.onLoadComplete = function(cont:MovieClip)
{
cont.onEnterFrame = function()
{
if (this._alpha <100) {
this._alpha += 10;
} else {
delete this.onEnterFrame;
}
};
};
}
public function setTiempo(queTiempo)
{
tiempo = queTiempo;
}
public function setPosicion(queX, queY)
{
contenedor._x = queX;
contenedor._y = queY;
}
public function start()
{
contenedor.contenedor2._alpha = 0;
contenedor.precarga.loadClip(listaFotos[foto], contenedor.contenedor2);
paseDeFotos = setInterval(this, "SiguienteImagen", tiempo);
}
public function stop()
{
clearInterval(paseDeFotos);
}
public function pause()
{
isPaused = !isPaused;
isPaused == true ? this.stop() : this.start();
}
public function push(queDato)
{
switch (typeof (queDato)) {
case "string" :
var extension:String = queDato.substr(queDato.length - 3, 3);
switch (extension) {
case "xml" :
var ruta = this;
var xmlFotos:XML = new XML();
xmlFotos.ignoreWhite = true;
xmlFotos.load(queDato);
xmlFotos.onLoad = function(success:Boolean)
{
if (success) {
var xmlNodo:XML = this.firstChild;
var total:Number = xmlNodo.childNodes.length;
for (var i:Number = 0; i <total; i++) {
ruta.listaFotos.push(xmlNodo.childNodes[i].firstChild.nodeValue);
}
}
};
break;
default :
listaFotos.push(queDato);
break;
}
break;
case "object" :
listaFotos = queDato;
break;
}
}
public function pop(queURL)
{
listaFotos.pop(queURL);
}
public function shift(queURL)
{
listaFotos.shift(queURL);
}
public function unshift(queURL)
{
listaFotos.unshift(queURL);
}
public function trace()
{
trace(listaFotos);
}
public function remove(queDato)
{
switch (typeof (queDato)) {
case "number" :
var temp1:Array = listaFotos.slice(0, queDato - 1);
var temp2:Array = listaFotos.slice(queDato, listaFotos.length);
listaFotos = temp1.concat(temp2);
break;
case "string" :
for (var num in listaFotos) {
if (listaFotos[num] == queDato) {
remove(Number(num) + 1);
}
}
break;
}
}
public function clear()
{
listaFotos = [];
}
public function loadSec(queRaiz:String, queExtension:String, queNum:Number, queFin:Number)
{
var num = queNum;
var raiz = queRaiz;
var ext = queExtension;
if (queFin == undefined) {
var scope = this;
var url:String = raiz + num + ext;
contenedor.precarga.loadClip(url, contenedor.contenedor2);
contenedor.precarga.onLoadStart = function(mc:MovieClip)
{
contenedor.precarga.unloadClip(mc);
num++;
scope.loadSec(raiz, ext, num);
scope.listaFotos.push(url);
};
contenedor.precarga.onLoadError = function(mc:MovieClip, error:String)
{
if (error == "URLNotFound") {
scope.contenedor.precarga.onLoadStart = null;
scope.onLoadComplete();
}
};
} else {
for (var i:Number = queNum; i <= queFin; i++) {
var url:String = raiz + i + ext;
listaFotos.push(url);
}
this.onLoadComplete();
}
}
//——————–
private function SiguienteImagen()
{
(foto <(listaFotos.length - 1)) ? foto++ : foto = 0;
var cont:MovieClip = contenedor.getInstanceAtDepth(contenedor.getNextHighestDepth() - 2);
cont.swapDepths(contenedor.getInstanceAtDepth(contenedor.getNextHighestDepth() - 1));
cont._alpha = 0;
contenedor.precarga.loadClip(listaFotos[foto], cont);
}
}
La clase contiene unos cuantos metodos para controlar el array de fotos:
fondoLoop.pop("foto.jpg")
fondoLoop.shift("foto.jpg")
fondoLoop.unshift("foto.jpg")
fondoLoop.trace() // realiza un trace del contenido del array
fondoLoop.clear() // borra el contenido del array
fondoLoop.remove(2) // Elimina una foto del array segun la posición
fondoLoop.remove("foto1.jpg") // Elimina una foto del array a partir del nombre
fondoLoop.shift("foto.jpg")
fondoLoop.unshift("foto.jpg")
fondoLoop.trace() // realiza un trace del contenido del array
fondoLoop.clear() // borra el contenido del array
fondoLoop.remove(2) // Elimina una foto del array segun la posición
fondoLoop.remove("foto1.jpg") // Elimina una foto del array a partir del nombre
La funcion push() admite diferentes tipos de datos. Las posibilidades son:
-un Array
-un Xml
-o archivo (jpg, tif…)
Ejemplo de uso:
Manual:
fondoLoop.push("foto1.jpg");
fondoLoop.push("foto2.jpg");
fondoLoop.push("foto3.jpg");
fondoLoop.push("foto4.jpg");
fondoLoop.push("foto5.jpg");
fondoLoop.push("foto2.jpg");
fondoLoop.push("foto3.jpg");
fondoLoop.push("foto4.jpg");
fondoLoop.push("foto5.jpg");
XML:
fondoLoop.pushXML("fotos.xml");
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<album>
<imagen>foto1.jpg</imagen>
<imagen>foto2.jpg</imagen>
<imagen>foto3.jpg</imagen>
<imagen>foto4.jpg</imagen>
<imagen>foto5.jpg</imagen>
</album>
<album>
<imagen>foto1.jpg</imagen>
<imagen>foto2.jpg</imagen>
<imagen>foto3.jpg</imagen>
<imagen>foto4.jpg</imagen>
<imagen>foto5.jpg</imagen>
</album>
Secuencia:
fondoLoop.loadSec("foto", ".jpg", 1, 5);
fondoLoop.start();
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;
fondoLoop.loadSec("foto", ".jpg", 1);
Post relacinonados:
18 Comments »
RSS feed for comments on this post. TrackBack URI
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
Claro, aqui estan todos los archivos:
http://www.cristalab.zguillez.com/LoopIMG/
Muy muy BUEno,
pero para que hiciera una precarga de cada imagen, imaginemos que son fotos muy grandes.?
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.
gracias ...en que Versión esta el archivo en flash 8 creo!!!
Quisiera aprender como convertir una foto en codigos para postiarla en mi myspace, si es posible
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
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.,
@alberto: En la función SiguienteImagen() controlas que al llegar a la última foto empieza de nuevo:
foto (listaFotos.length - 1)) ? foto++ : foto = 0Lo 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()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 !
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?
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 pushHay 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?
Hola, buenisimo el post, una pregunta mas, hay alguna forma que cargue las imagenes aleatoriamente?
saludos y gracias
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 !!
@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
como lo puedo hacer para uqe cada foto tenga su propio link??
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