En este ejemplo, veremos como gracias a la clase Tween (Flash 8 ) y movieClipLoader este proceso puede ser limpio y sencillo, sin necesidad de utilizar complicadas funciones.
Ejemplo
Antes de pasar a ver el código, un ejemplo de lo que vamos a conseguir.
Importar la clase de Flash 8 Tween
-
import mx.transitions.Tween;
-
import mx.transitions.easing.*;
Declarar variables
Como siempre, para mayor claridad, se declaran las variables al principio.
-
var my_xml:XML = new XML ();
-
my_xml.ignoreWhite = true;
-
var time:Number = 5;
-
var urls:Array = new Array ();
-
var prevMovie:String;
-
var index:Number = 0;
-
var depth:Number = 0;
Cargar XML
Se pobla un array urls con los datos obtenidos de un archivo data.xml Ver xml
Una vez se ha terminado el proceso de leer XML y poblar el array, se llama a la función loadImages en intérvalos de tiempo, estos están supeditados al valor de la variable time. En el ejemplo, las imágenes tendran una rotación de 5 segundos (tiempo * 1000)
-
my_xml.onLoad = function (success) {
-
if (success) {
-
for (var i = 0; i <this.firstChild.childNodes.length; i++) {
-
urls.push (this.firstChild.childNodes[i].attributes.url);
-
}
-
// - - primera imagen
-
loadImages ();
-
intervalId = setInterval (_root, "loadImages", time * 1000);
-
} else {
-
trace ("Error al cargar el archivo");
-
}
-
};
-
//
-
my_xml.load ("data.xml");
Procesar registros
Se utiliza la variable prevMovie para almacenar el nombre de la imagen que se visualiza actualmente, de forma que al cargar la siguiente, disponemos del nombre de instancia de película cargada para borrar.
Cuando el archivo se ha descargado completamente, se crea una instancia de la clase Tween (para efecto desvanecimiento) y al mismo tiempo, aprovechando los métodos de la clase Tween, se detetecta el fin de la transición (cuando _alpha==100) para descargar la imagen anterior.
-
loadImages = function ():Void {
-
prevMovie = currentMovie;
-
currentMovie = this.createEmptyMovieClip ("currentMovie" + depth, depth);
-
var mclListener:Object = new Object ();
-
mclListener.onLoadComplete = function (target_mc:MovieClip) {
-
var tween_handler:Object = new Tween (target_mc, "_alpha",
-
Strong.easeOut, 0, 100, 3, true);
-
tween_handler.onMotionFinished = function () {
-
unloadMovie (prevMovie);
-
};
-
};
-
var movieClipLoader:MovieClipLoader = new MovieClipLoader ();
-
movieClipLoader.addListener (mclListener);
-
movieClipLoader.loadClip (urls[index], currentMovie);
-
index == urls.length - 1 ? index = 0 : index++;
-
depth++;
-
};
Descarga Slideshow
Slideshow se ha descargado 5,845 veces.
Loading ...
está genial!!
¿Sería muy complicado hacer que cada imagen sea un link? Así al apretar, se abre un .html con la foto más grande o algo así..
Me gustaría posicionar la imagen en un area específica del escenario, que debería modificar para poder lograrlo????
Yo lo que hago, es cargar el slideShow en un clip contenedor de esa forma lo puedo manejar a mi antojo. Como lo tengo hecho, te pego el código (que es prácticamente el mismo):
Saludos
Me gustaría detener el Slideshow por un momento y volverlo a iniciar interactivamente sin volver a cargar el archivo XML con las URLs, como podría yo aislar/separar la rutina que intercambia las imagenes?
Otro problema que tengo es que las imagenes se colocan siempre en primer plano dentro del escenario, como podría ponerlas bajo un marco (rectángulo transparente con borde de color), que ya está presente (dibujado) en el escenario?
Muchas gracias por ejemplo anterior
Muchas gracias, esto se ve muy bien!!!
pero tengo una pregunta, como podria independizar el tiempo de duracción de cada imagen?
gracias,
Hola,
Si te refieres a que cada imagen se muestre durante un periodo de tiempo diferente, no se puede debido a que el tiempo lo controla setInterval.
saludos
aprovechando el set interval s epodría poner un botón de pausa, no???
Si, tambien tendrías que aislar el setInterval dentro de una función para poder reactivarlo.
Por ejemplo:
Saludos
gracias!!
lo probaré si consigo leer algún otro tipo de dato del XML, estoy intentando añadirle un titular y un link... pero de momento no consigo que lo lea flash. Se introducen los datos del XML en una matriz nada más entrar en el.FLA porque son links (URLs vamos)
gracias!!!!
bueno, estoy ofuscado!!!
cualquier ayuda al respecto será bendecida!
Bueno , entonces ya tenemos que hacer unos cuantos cambios, a ver si saco un rato y te pongo un ejemplo.
saludos
si puedes, sería enorme!!
gracias igualmente!! creo que mi problema está en que no soy muy bueno con matrices y no se como llegar a los diferentes atributos del XML
sin ser pesado ni nada, pero me imagino que nadie ha conseguido alguna novedad, no?
Hola Gente,
Me gusta este slideshow, como se hace para agregarle un preloader cuando las imagenes no tienen un peso decente.
Gracias.
De acuerdo a:
http://www.kadazuro.com/blog/archives/000041.php
He creado lo siguiente: (pero me falla en la ultima imagen la primera vez, como que se pega un mento y luego se brinca la ultima y pasa otra vez a la primera)
Stage.scaleMode = "noScale";
//recibe bytes devuleve kb
function bytes2kb(val:Number):Number{
return Math.round(val/1024)
}
//holder para el contenido.
createEmptyMovieClip("holder",1);
//atachamos el preloader.
attachMovie("loader","loader",2,{_x:125,_y:150});
loader.box.autoSize = "right";
loader.barra._xscale = 1;
//objeto mcloader
my_mcl = new MovieClipLoader();
//listener
my_mcl_listener = new Object();
//callback para cuando empieze la carga
my_mcl_listener.onLoadStart = function(t){
trace("inicia carga");
t._visible = false;
}
//callback cada vez que se cargue algo
my_mcl_listener.onLoadProgress = function (t,bl,bt){
var p:Number = (bl / bt) * 100
loader.box.text = "cargados: " bytes2kb(bl) " de " bytes2kb(bt) "KB";
loader.barra._xscale = p;
}
//callback en caso de error
my_mcl_listener.onLoadError = function (t,ec){
trace("ups! error " ec)
loader.box.text = ec;
}
//callback para cuando se termina la carga.
my_mcl_listener.onLoadComplete = function(t){
loader._visible = false;
t._visible = true;
trace("fin de la carga.");
}
//agregamos el listener al mcloader
my_mcl.addListener(my_mcl_listener);
//cargamos la imagen.
my_mcl.loadClip("saltilloSunset.jpg",holder);
stop();
perdon el anterior no era el codigo es este:
/* ------------------------------------------------------------------ */
/* Tipo de alineacion Top Left para el Stage */
Stage.align = "TL";
/* Tamaño del Stage fixed o ajustado sin scalar */
Stage.scaleMode = "noScale";
/* ------------------------------------------------------------------ */
// Importar clase tween
/* ------------------------------------------------------------------ */
import mx.transitions.Tween;
import mx.transitions.easing.*;
/* ------------------------------------------------------------------ */
// Declarar variables
/* ------------------------------------------------------------------ */
var claseXML:XML = new XML();
claseXML.ignoreWhite = true;
/* Para ajsutar el setInterval */
var tiempo:Number = 6;
/* Arreglo que contiene los rutaDeImagen o rutas de las imagenes de acuerdo al archivo XML */
var rutasDeImagenes:Array = new Array();
var movieAnterior:String;
var indice:Number = 0;
var profundidad:Number = 0;
/* ------------------------------------------------------------------ */
// Cargar XML
/* ------------------------------------------------------------------ */
claseXML.onLoad = function (success) {
if ( success ) {
for ( var i = 0; i
Se podrá agregar 2 botoncitos para que aparte del slide automatico se pueda manejar en forma manual? o sea, volver a una foto anterior, o avanzar varias.
gracias!
mhhh tengo un problema!!! he conseguido poner un pequeño texto, un botón de pausa, stop pero hay una problema serio!
una vez los jpgs se cargan en la cache no los reproduce a la misma velocidad, da igual que yo haya puesto el tiempo de transición a 10 secs, si ya está cargado ( xq antes ya lo hemos cargado p.e.) se lo salta vilmente!
merci!!!
Voy a tener que revisar este fla.
la verdad es que sería la hostia!!
Yo estoy probando con la clase "cacheManager" pero de momento sólo soy capaz de aplicarlo al xml, no a las imagenes que carga
http://www.communitymx.com/content/article.cfm?page=2&cid=827EA
No creo que sea problema de cache la verdad, me parece que tiene mas que ver el hecho de usar setInterval.
Te digo algo.
saludos
yo lo he mirado en servidor y vamos si no es el setInterval acabará siendo esto, xq la primera vez que carga la imagen no hace nada es la segunda... no se! ojala sea el set Interval y lo saques!
muchas gracias!
no doy más la vara por hoy, pero el hecho de que sólo pase en servidor y en local chute perfectamente aumenta mis sospechas de que es algo de la cache!
miento dos veces, doy la vara una vez más y en local pasa lo mismo, así que no es nada de la cache!
confirmado, problema del setInterval!
Alguien ha encontrado solución al problema de que las imágenes vayan apareciendo cada vez más deprisa y acaba descontrolado??? En mi caso llega un momento en que la imagen se queda fija y ya no rota
Hola Jorge,
de momento yo no tuve tiempo para mirarlo, lo siento. En cuanto lo solucione, prometo publicarlo.
Un saludo
la solución es gastarse 20 ¢ de nada aquí www.slideshowpro.net
Que tipo tan simpático.
ya ves menuda mierda ta hecho el prog ese xDDD
Toni ta cojonudo el slideshow, lo único a saber porke cuando lo cargo dentro de mi pelicula principal mediante un loadmovie, el slideshow no funciona se keda parao en la primera imagen. bueno dudo que alguien responda porke parece ke el post es un tanto antiguo, pero weno, porsiaca!
salu2
Hola alo,
lo que vamos a hacer es lo siguiente:
En la película que hace el loadMovie tenemos;
En la película slideSHow.swf, haremos un pequeño cambio e introduciremos una variable nueva:
Al principio justo después de las líneas
escribes:
y substituyes _'root' por 'timeLine':
De esta forma no tendrás problemas.
Un saludo
Hola toni,
Estupendo tutorial, pero esto del setinterval sigue teniendo problemas cuando se sube al servidor. Si pruebas:
mclListener.onLoadProgress = function(target_mc, loadedBytes, totalBytes)
{
trace(Math.floor((loadedBytes/totalBytes)*100) " %");
}
verás que hace cosas raras. Yo he estado probando con el setTimeout però no hay manera. a ver si alguien lo sabe arreglar jeje