Hay montones de métodos para hacer un pase de fotos ( o slideshow si te gusta la terminología anglosajona) tanto con Flash como con JavaScript, así que para complicarte la vida y hacerte más difícil decidir cuál usar, te voy a proponer uno más, realizado exclusivamente con código ActionScript y descrito en un archivo XML.
Pero no te preocupes que no todo van a ser dificultades. Se trata de un método fácil de implementar y que tiene sus ventajas. Las principales son:
- Soporta cualquier formato que Flash pueda manejar (jpg, png, gif, swf)
- Puede asignar un tiempo diferente de exposición a cada imagen o animación
- Permite asignar un vínculo a cada imagen
- Las imágenes y sus ajustes se configuran en un sencillo archivo externo XML
- Es fácil añadir nuevas opciones y prestaciones (si se tiene conocimiento de ActionScript)
El resultado final podría ser algo parecido a lo siguiente:
El archivo xml que describe nuestro pase de fotos es sencillo de entender
<galeria>
<imagen direccion="pasefotos/11setiemble.gif" vinculo="http://www.google.com" duracion="4" />
<imagen direccion="pasefotos/colegas.jpg" vinculo="http://www.develooping.com" duracion="8" />
<imagen direccion="pasefotos/fumador.jpg" vinculo="http://www.altavista.com" duracion="4" />
<imagen direccion="pasefotos/guerrero.jpg" vinculo="http://www.yahoo.com" duracion="4" />
<imagen direccion="pasefotos/mercado.jpg" vinculo="http://www.versiontracker.com" duracion="4" />
<imagen direccion="pasefotos/monstruos.jpg" vinculo="http://www.apple.com" duracion="4" />
<imagen direccion="pasefotos/surlandia.swf" vinculo="http://www.surlandia.com" duracion="8" />
</galeria>
Como ves, dentro de la marca galería, insertamos tantas marcas imagen como necesitemos. Las marcas imagen contienen los atributos direccion, con la url de la imagen en cuestión, vínculo, con el lugar al que nos llevará al pulsar en ella y duracion, que indica el número de segundos que se mostrará la imagen.
Ahora sólo nos queda ver el código ActionScript que generará el pase de fotos
//CREAMOS MOVIECLIPS CONTENEDORES DE IMAGENES/////////////////
_root.createEmptyMovieClip("imagen1_mc",1);
_root.createEmptyMovieClip("imagen2_mc",2);
//////////////////////////////////////////////////////////////
//ANALIZAMOS NODOS XML////////////////////////////////////////
function analiza_xml() {
direcciones = new Array();
vinculos = new Array();
duraciones = new Array();
primer_nodo = imagenes_xml.childNodes;
nodo_galeria = primer_nodo[0].childNodes;
for (var j = 0; j<nodo_galeria.length; j++) {
direcciones[j] = nodo_galeria[j].attributes.direccion;
vinculos[j] = nodo_galeria[j].attributes.vinculo;
duraciones[j] = nodo_galeria[j].attributes.duracion;
}
}
///////////////////////////////////////////////////////////////
//FUNCION PRINCIPAL////////////////////////////////////////////
function muestra_imagen(cual) {
var mclListener:Object = new Object();
mclListener.onLoadInit = function(objetivo_mc:MovieClip) {
if (objetivo_mc == imagen1_mc) {
objetivo_mc.swapDepths(imagen2_mc);
alphaTween = new mx.transitions.Tween(_root.imagen2_mc, "_alpha", mx.transitions.easing.Regular.easeOut, 100, 0, 2, true);
alphaTween2 = new mx.transitions.Tween(_root.imagen1_mc, "_alpha", mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
} else {
objetivo_mc.swapDepths(imagen1_mc);
alphaTween = new mx.transitions.Tween(_root.imagen1_mc, "_alpha", mx.transitions.easing.Regular.easeOut, 100, 0, 2, true);
alphaTween2 = new mx.transitions.Tween(_root.imagen2_mc, "_alpha", mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
}
if (vinculos[cual] != undefined) {
objetivo_mc.onRelease = function() {
getURL(vinculos[cual]);
};
} else {
objetivo_mc.onRollOver = function() {
objetivo_mc.useHandCursor = false;
};
}
mi_duracion = duraciones[cual];
objetivo_mc.onEnterFrame = function() {
var mi_fecha:Date = new Date();
milisegundos = mi_fecha.getTime();
if (hito == undefined) {
hito = milisegundos;
}
milisegundos_pasados = milisegundos-hito;
if (milisegundos_pasados>1000*mi_duracion) {
hito = milisegundos;
siguiente_imagen();
}
};
};
var imagen_mcl:MovieClipLoader = new MovieClipLoader();
imagen_mcl.addListener(mclListener);
if (imagen1_mc.getDepth()<imagen2_mc.getDepth()) {
imagen_mcl.loadClip(direcciones[cual],imagen1_mc);
} else {
imagen_mcl.loadClip(direcciones[cual],imagen2_mc);
}
}
//////////////////////////////////////////////////////////////
//SECUENCIA IMAGENES///////////////////////////////////////////
function siguiente_imagen() {
if (cual == undefined) {
cual = 0;
} else {
cual++;
}
if (cual == nodo_galeria.length) {
cual = 0;
}
muestra_imagen(cual);
}
//////////////////////////////////////////////////////////////
//LEE XML//////////////////////////////////////////////////////
var imagenes_xml:XML = new XML();
imagenes_xml.ignoreWhite = true;
imagenes_xml.onLoad = function(success) {
analiza_xml();
siguiente_imagen();
};
function lee_xml(que) {
imagenes_xml.load(que);
}
lee_xml("pasefotos.xml");
stop();
Basta con crear un nuevo archivo Flash del tamaño adecuado para las imágenes que vamos a mostrar, copiar el código en el primer fotograma y exportar el archivo swf que se encargará de realizar nuestro pase de diapositivas. Eso es todo. El código se encargará de leer el xml, crear los movieclips necesarios, cargar las imágenes, asignarles su duración y vínculos y crear las transiciones.
Sin entrar en demasiada profundidad, que ya habrá tiempo para eso, veamos por encima las diferentes partes del código. La primera crea los dos movieclips que nos servirán para contener las imágenes que vayamos cargando. Es necesario que sean dos para poder hacer un fundido entre ambas.
Después se describe la función —analiza_xml()— que navega el archivo XML y guarda los valores correspondientes en Arrays para su uso posterior. Esta función se llamará más adelante.
Le sigue la función principal, muestra_imagen(cual), la que encierra el meollo del asunto. Básicamente va cargando las imágenes cada vez en un movieclip de los que generó al principio. Una vez cargado usando la función loadClip, coloca el último encima del anterior y crea la transición entre ambos usando para ello la clase transition que incorporó Flash en su versión MX. Después le coloca el vínculo al movieclip y se asegura que pasa el tiempo asignado antes de llamar a la siguiente imagen.
Precisamente la función a la que llama viene detrás —siguiente_imagen()— y su finalidad es ir pasando la imágenes en orden y volver a la primera una vez alcanzada la última.
Una vez creados los dos movieclips y las funciones necesarias, sólo nos queda leer el archivo xml, de lo que se encarga el código que cierra. Una vez leído el archivo xml, se llama a la función que lo interpreta —analiza_xml()— y a la función siguiente_imagen() que irá diciéndole a muestra_imagen(cual) qué imagen cargar para pasar a la siguiente una vez que esta última función haya comprobado que ha pasado el tiempo que esa imagen tiene asignado.
Aunque este pase de diapositivas es sencillo, hay que entender que se trata sólo de un esquema que puede fácilmente ampliarse y desarrollarse con aquellas opciones que necesitemos. Sería fácil añadirle opciones para que muestre pies de foto, o para elegir entre distintos tipos de transiciones. También podría hacerse que manejara imágenes de distintos tamaños y las centrara en el espacio que le dediquemos, que decidamos el tiempo que toma para hacer el fundido o la transición escogida, que asignemos un nuevo atributo target para indicarle en qué ventana queremos abrir el vínculo, o que definamos en la galería un atributo loop por si queremos indicar si queremos o no que nuestro pase de fotos vuelva a empezar cuando acabe.
Las posibilidades son bastantes, así que lo vamos a dejar por ahora. Más adelante iremos añadiéndole prestaciones lo que nos ayudará, además, a entender algo mejor el código usado. Por lo pronto puedes ir jugueteando con lo que acabo de mostrar. Y como sé que eres tan perezoso que te cansa copiar y pegar te dejo un fichero zip con todos los archivos necesarios.
NOTA 1: Bueno, en realidad soy yo el perezoso, y como veo que wordpress se empeña en hacer cosas raras con las comillas y no tengo mucha gana de bregar con ello, mejor te lo bajas y listo
NOTA 2: Vale, vale. Para servir de modelo y ejemplo he vencido mi pereza y reemplazado las comillas para que puedas copiar y pegar el código si quieres hacerlo así
Muy bueno el tutorial, y un buen punto de partida para elaborar “slideShows” más sofisticados. Para los MUY PEREZOSOS, existe otra opción que yo he utilizado en algunos de mis proyectos, es el Slide Show Pro, que es un componente de Flash que tiene un coste de 25$ (que a ese precio si se puede comprar software!).
Entre las ventajas, y a ese precio, esta que el componente permite crear varios albumes en un solo “visor”, ilimitado número de fotos, un alto grado de personalización, posibilidad de añadir enlaces y pies de foto, y además….. además, existen varios plugins y componentes de servidor (PHP y otras plataformas) para generar los XMLs desde un panel de administración web, incluso directamente desde aplicaciones de escritorio, como iPhoto.
Merece la pena echarle un vistazo, sin desmerecer el tutorial que te has currado!
Cada cosa en su sitio. Está claro que el producto comercial que citas es mucho más completo, pero con él difícilmente se pueden entender los entresijos de los métodos con que Flash maneja estos asuntos.
Por otro lado, no sé si ese componente permite usar archivos swf ni asignar tiempos diferentes a cada imagen (por lo que veo en su web no lo parece), aunque efectivamente es una opción que se puede tener en cuenta si se adapta a unas necesidades concretas. Recuerdo haber usado también en alguna ocasión monoslideshow, cuyas opciones son similares al producto que citas (salvo que la creación del XML desde el lenguaje de servidor te la tienes que currar tú mismo) y se vende por 19.95$.
Pero la idea de esta entrada no es sólo ofrecer una opción sencilla y gratuita, sino mostrar un código que se pueda analizar, y que quien quiera y sepa, pueda modificar según sus necesidades.
Además, si el tiempo me lo permite, es posible que en futuras entradas desarrolle y explique cómo implementar más prestaciones.
1.- Si permite cargar archivos .swf, incluso videos con formato .flv (creo recordar).
2.- Efectivamente una cosa es mostrar el “CÓMO” se pueden hacer las cosas, que está claro es uno de los objetivos de tu entrada y está muy bien, y otra es referenciar soluciones comerciales que hacen lo que aquí tratas de explicar, que si bien no es el objetivo de tu entrada, también es bueno referenciarlas por si alguien prefiere esa opción. Que conste que no gano ninguna comisión por que alguien compre el “Slideshow Pro” ni nada de eso, pero en su momento me salvó unas cuantas horillas de programación y depurado, y la verdad que me pareció interesante la herramienta, sobre todo por el precio que tiene (antes costaba 19$). Me gusta esta política de “software especifico” a precio más que razonable, porque así si se justifica optar por soluciones comerciales.
Los que conocemos a Juan sabemos que tiene tendencia a reinventar la rueda. Así consigue aprenderla e intentar hacerla todavía más redonda.
En el ámbito de las soluciones “ya inventadas”, que no necesariamente comerciales porque es gratuita, está el antecesor al SlideShowPro en la página http://whatdoiknow.org/archives/001629.shtml que funciona bastante bien y que en filosofía es bastante similar a la entrada.
Más barato aún es el GrandmaSlidePro, que utilizan sobre todo las abuelas que muestran las fotos de sus nietos en sucesión con graciosas transiciones manuales entre foto y foto. Es gratuíto aunque sólo admite un formato de imagen, el .paper. De momento no hay versión para web.
Habrá que ir pensando en realizarla.
hola a todos
soy muy novata en esto del flash y me ha encantado este ejemplo de slider.
¿hay posibilidad de hacer que se carguen las fotos mediante una botonera (cada boton una foto) y se mantenga la transicion entre las fotos?
gracias
Hola kaquna.
Para cargar una foto concreta desde un botón bastaría con asociarle al botón cualquier cosa parecida a
on (release){_root.cual=4;
_root.carga_imagen(cual);
}
Donde 4 es el número de la foto a mostrar. De esta forma es fácil hacer una botonera que salte a la foto que se desee sin interrumpir las transiciones. Sin embargo, debido a que el código comprueba que cada foto ha estado el tiempo asignado antes de mostrar la siguiente, con lo indicado se cargarán las fotos que queramos, pero habría que esperar a que la anterior agote su tiempo.
Solventar esto también es sencillo.
En principio hacemos que el botón asigne una nueva variable para indicar que la transición ha de hacerse inmediatamente y no esperar el tiempo asignado. Esta variable se llamará avance_inmediato. Así el código anterior del botón nos queda
on (release){_root.avance_inmediato=1;
_root.cual=4;
_root.carga_imagen(cual);
}
Luego, sólo nos queda modificar la condición que mide el tiempo para que tenga en consideración esta nueva variable y muestre la imagen, no sólo si se ha pasado el tiempo, sino también si se le indica que el avance ha de ser inmediato. La parte del código principal que indicaba
if (milisegundos_pasados>1000*mi_duracion) {hito = milisegundos;
siguiente_imagen();
}
la modificamos cómo sigue
if ((milisegundos_pasados>1000*mi_duracion) or( _root.avance_inmediato==1)) {_root.avance_inmediato=0;
hito = milisegundos;
siguiente_imagen();
}
Y ya está. Al pulsar un botón al que le hayamos asociado el script indicado, saltaremos inmediatamente a la imagen solicitada sin interrumpir las transiciones.
Como verás, es sencillo hacer lo que indicas, pero todavía puede mejorarse: podríamos hacer que los botones se creen automáticamente basándose en el mismo xml, y que se marquen de alguna forma conforme avanza la transición para indicar cual de ellos corresponde a la imagen que se muestra en el momento. Como indicaba antes, las posibilidades son muchas, pero ya las iremos viendo cuando encuentre tiempo para ello.
gracias!
increible! que facilidad de codigo que teneis…
como se nota que no tengo mucha idea…
la verdad es que quiero buscar algun sitio donde hacer algun curso de flash y actionscript porque me encanta.
Y gracias de nuevo por la respuesta. voy a meterme inmediatamente a pelear con los codigos.
MILGRACIAS.
Hola, saben e intentado hacer algo muy similar pero con archivos FLV entremedio, pero no me resulta de ninguna forma.
saben más o menos como podria encontrar algoq ue me sirva pa aprender a mezclar este tipo de cosas?
Saludos y gracias desde ya.
Hola Juan Pedro. El método propuesto no admite archivos flv ya que Flash los trata de una manera distinta. Claro que no hay ningún problema si creas archivos swf a partir de los flv.
La idea de la entrada es que todo se cree y maneje desde ActionScript, pero si deseas introducir archivos flv, salvo que uses el nuevo ActionScript 3.0 no podrás crear un objeto de vídeo directamente (puedes ver una explicación en el blog de Peter deHaan), lo que nos alejaría de la solución “sólo con código”.
De todas formas, tanto si usas ActionScript 3.0 para poder crear el objeto de vídeo desde código, como si usas AS 2.0, necesitarás modificar el código para que detecte si la terminación del archivo es flv y actuar en consecuencia.
Otra alternativa consiste en colocar manualmente en el escenario un par de nuevos movieclips en cada uno de los cuales pongamos un componente FLVPlayBack. Digo que un par por si se quiere cargar un flv tras otro. Luego tendríamos que trastear el código para detectar, en función de la terminación del archivo, qué cargamos dónde (teniendo en cuenta que el flv lo cargaríamos de forma distinta) y con qué par de movieclips tendríamos que crear las transiciones. Todo esto te lo indico a grosso modo y a bote pronto, no es algo que haya probado
En el caso de que sólo se quisieran cargar archivos flv, la solución podría ser similar a la del código original, salvo que colocaríamos a mano los componentes FLVPlayBack y en lugar de cargar archivos mediante loadClip, podríamos modificar la propiedad contentPath del componente.
Por otro lado, que yo sepa, tampoco ninguno de los componentes comerciales para crear slideshows admiten el uso de archivos flv directamente.
Utilizo flash 8. y cuando descargue y quiero ejecutar no se abre el archivo sale un mensaje que dice ” ARCHIVO FORMATO INESPERADO…”
Hola Alejandro. Aunque no lo recuerdo bien, es posible que colocara una versión realizada con Flash CS3. En realidad basta con que copies y pegues el código en las acciones del primer fotograma de un nuevo proyecto de Flash 8, ya que, como comentaba previamente, todo se hace desde ActionScript. Una vez hecho esto puedes publicar un archivo swf perfectamente utilizable.
Si lo deseas Adobe también permite descargar la versión de prueba de CS3 válida por 30 días, que te permitirá abrir cualquier proyecto realizado con esta nueva versión y salvarlo (si no incluye prestaciones exclusivas) en formato Flash 8.
Y por último, si quieres ahorrarte todas las complicaciones previas, aquí tienes uno en formato Flash 8 (sólo incluye el archivo fla, el resto puedes obtenerlo de la descarga anterior).
Hola, muy buenos los datos que das.
Ahora, tengo un proyecto que debe cargar 4 imágenes (105×90px c/u) en xml, por ese lado todo bien, el problema se me presenta es que cada imagen cargada debe ser un botón que al hacer mouse-over muestre una imagen del tamaño completo del documento (432×90px) con transición de alpha de 0 a 100 y al hacer mouse-out regrese al estado inicial de las 4 imágenes, por supuesto esta segunda también debe ser cargada por xml.
Te agradezco tu ayuda.
Saludos.
Hola PB.
No me gustaría que esta entrada se convirtiera en un apartado de encargos gratuitos y a medida.
Con el código aportado y un poquito de investigación puede conseguirse fácilmente lo que pides.
Imagina que describimos el xml de la siguiente forma
<galeria directorio=”imagenes”>
<imagen peque=”imagen1.jpg” grande=”imagen1_grande.jpg” />
<imagen peque=”imagen2.jpg” grande=”imagen2_grande.jpg” />
<imagen peque=”imagen3.jpg” grande=”imagen3_grande.jpg” />
<imagen peque=”imagen4.jpg” grande=”imagen4_grande.jpg” />
</galeria>
Como ves, uso una marca galeria en la que indico el directorio en el que se encuentran las imágenes, y una sucesión de imágenes indicando el nombre de la pequeña y la grande. En teoría eso es todo lo que se necesita para tu proyecto.
Partiendo del código ofrecido al principio y adaptándolo para hacer lo que necesitas podría quedar en algo parecido a lo siguiente
//CREAMOS MOVIECLIPS CONTENEDORES DE IMAGENES PEQUEÑAS./////////////////
//ES IMPORTANTE QUE LOS NIVELES LLEVEN EL ORDEN./////////////////
_root.createEmptyMovieClip(”imagen1_mc”,1);
_root.createEmptyMovieClip(”imagen2_mc”,2);
_root.createEmptyMovieClip(”imagen3_mc”,3);
_root.createEmptyMovieClip(”imagen4_mc”,4);
//Y OTRO PARA LA GRANDE
_root.createEmptyMovieClip(”imagengrande_mc”,5);
//////////////////////////////////////////////////////////////
//SITUAMOS LAS IMAGENES DONDE CORRESPONDA (se podría hacer con un bucle)
imagen1_mc._x = 0;
imagen2_mc._x = 110;
imagen3_mc._x = 220;
imagen4_mc._x = 330;
imagengrande_mc._y = 50;
//inicializa la imagen grande con alpha 0
imagengrande_mc._alpha = 0;
//
//ANALIZAMOS NODOS XML////////////////////////////////////////
function analiza_xml() {
peques = new Array();
grandes = new Array();
primer_nodo = imagenes_xml.childNodes;
nodo_galeria = primer_nodo[0].childNodes;
directorio = primer_nodo[0].attributes.directorio;
for (var j = 0; j<nodo_galeria.length; j ) {
peques[j] = nodo_galeria[j].attributes.peque;
grandes[j] = nodo_galeria[j].attributes.grande;
}
}
///////////////////////////////////////////////////////////////
//muestra grandes////////////////////////////////////////////
function muestra_grande(cual) {
imagen_grande = grandes[_root[cual].getDepth()-1];
var mclListener_g:Object = new Object();
mclListener_g.onLoadInit = function(objetivo_mc:MovieClip) {
alphaTween = new mx.transitions.Tween(_root.imagengrande_mc, “_alpha”, mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
};
var g_mcl:MovieClipLoader = new MovieClipLoader();
g_mcl.addListener(mclListener_g);
g_mcl.loadClip(directorio+”/”+imagen_grande,_root.imagengrande_mc);
}
function oculta_grande() {
_root.imagengrande_mc._alpha=0;
}
//muestra peques////////////////////////////////////////////
function muestra_peques() {
var mclListener:Object = new Object();
mclListener.onLoadInit = function(objetivo_mc:MovieClip) {
objetivo_mc.onRollOver = function() {
muestra_grande(objetivo_mc._name);
};
objetivo_mc.onRollOut = function() {
oculta_grande();
};
};
for (i=0; i<=peques.length; i ) {
var imagen_mcl:MovieClipLoader = new MovieClipLoader();
imagen_mcl.addListener(mclListener);
imagen_mcl.loadClip(_root.directorio+”/”+peques[i-1],_root[’imagen’ i “_mc”]);
}
}
/////////
//LEE XML//////////////////////////////////////////////////////
var imagenes_xml:XML = new XML();
imagenes_xml.ignoreWhite = true;
imagenes_xml.onLoad = function(success) {
analiza_xml();
muestra_peques();
};
imagenes_xml.load(”galeria.xml”);
stop();
Por supuesto, esta es una de las muchas formas de acercarse al tema. Tiene mucho en común con el anterior código: lee el xml y guarda las variables y arrays que necesita. Luego carga las imágenes pequeñas (previamente se han creado los movieclips para ello y se han colocado donde se necesitan) y se les asigna a éstas las funciones para RollOver y RollOut, la primera averigua la imagen grande que le corresponde y hace la transición, y la segunda, vuelve a colocar la propiedad alpha a cero.
Y por si WordPress ha hecho otra de las suyas con el código te lo dejo aquí en formato flash 8 junto con el xml necesario. Por supuesto puede mejorarse mucho, pero hace lo que dices y es sencillo de entender (o eso creo). Por supuesto, la creación de los movieclips, así como su posicionamiento podría hacerse con un bucle que creara tantos como indicara el xml, pero como en principio has indicado que son cuatro imágenes, he creado y colocado los movieclips en bruto.
Hola, el tutorial esta perfecto. Muy claro y fácil de entender para aquellos que no somos desarrolladores o programadores. Los que quieran que compren el programa, pero es mejor hacer el esfuercito mental y tratar de entender el por qué y el para que. Yo prefiero buscar como solucionar las cosas y si me doy, levanto la mano y pido ayuda. Tengo 2 cosas, que si puedes, te agradecería que me explicaras:
1. Cree 5 botones para poder pasar através de 5 banners, pero la numeración de estos para que los muestre en orden es: Para ir al banner 2 _root.cual=4; Para ir al banner 3 _root.cual=0; para ir al banner 4 _root.cual=1; Para ir al banner 5 _root.cual=2; y para ir al banner 1 _root.cual=3;.
Lo que no entiendo es porque para ir al segundo banner, el primer botón tiene el número 4, al tercero el 0 y así hasta completar el ciclo. No se si me explico o esto esta igual de enredado que yo. :(
2. En mi pelicula, los botones me salen detrás de las imagenes y esto hace que funcione primero el link de cada imagen que el script de cada botón. ¿Qué tengo mal hecho que me salen detrás de la imagen y como lo puedo arreglar?
Muchas gracias por tu tiempo y espero tengas el tiempo para poderme ayudar.
Saludos
Hola raper0917.
Sobre el punto 1 es extraño que la función
on (release){
_root.avance_inmediato=1;
_root.cual=4;
_root.carga_imagen(_root.cual);
}
para llamar a una imagen concreta tal y como comenté, recoja los números cambiados, ya que precisamente usa el orden en que las imágenes están descritas en el archivo XML. Comprueba que la función siguiente_imagen() y la condición que contiene para devolver el valor de “cual” a cero al superar el número de imágenes está correcta, ya que por lo que comentas parece como si asignara la primera posición al 3 y contara desde allí.
Con respecto al segundo punto hay varias formas de hacerlo. Como supongo que los botones los habrás creado a mano y no con código, puedes optar por solucionarlo también “a mano”. Haz dos capas en la línea de tiempo. En la superior coloca los botones y en la inferior crea “a mano” dos movieclips vacíos. Flash los representa como puntos blancos. Dale los nombres de instancia imagen1_mc y imagen2_mc (en la paleta de propiedades) y coloca ambos en la posición 0,0. Luego elimina las líneas que creaban estos movieclips con createEmptyMovieClip, ya que los hemos puesto ya nosotros sobre el escenario.
También puedes hacerlo con código. Si no has creado los botones con actionscript, selecciónalos y haz con ellos un movieclip que contenga los cinco botones. Dale un nombre de instancia como “botones” (original, ¿eh?). De esta forma podemos referirlos desde actionscript. Ya que los movieclips de las imágenes los hemos hecho en los niveles 1 y 2, bastaría con colocar los botones en el 3 para que queden encima. Para ello usamos la función swapDepths que permite asignar una profundidad a un movieclip (o intercambiar la de dos como hacemos para crear las transiciones). Así que justo después de crear los movieclips que sirven de contenedores para las imágenes colocamos
botones.swapDepths(3);
y ya deberíamos estar servidos.
Buenos Días. Exelente tutorial.
Pero tengo una pregunta, como puedo unir este efecto con un menu estilo carrusel?. me explico mejor.
Tengo un menu giratorio http://www.washeebo.com/sargento/02_flsh/0214/0214.php (anexo ejemplo) y deseo que en vez de tener imagenes estaticas las mismas esten girando y posean un link tal cual como en tu ejemplo.
Gracias.
Saludos.
Hola, muchisimas gracias. Sos un duro en el tema. Ayer probé creando los movie clips, pero no quite las lineas donde se creaban en el código. Funciona demasiado bien. Muchas muchas gracias. Sigue con ejemplos así, prácticos, buenos y bien explicados.
Chau
Hola Gabriel.
Hacer lo que pides es sencillo, ya que el ejemplo aporta las funciones matemáticas que se necesitan.
De hecho voy a intentar unir en un sólo código casi todo lo que por ahora se ha solicitado en los comentarios. Y lo haré sólo desde ActionScript. El código nuevo hace lo siguiente:
- Lee un archivo XML que le indica las imágenes pequeñas y sus correspondientes grandes, así como el directorio en el que se encuentran.
- Crea botones con las pequeñas y las dispone como un carrusel.
- Después les asigna las funciones para que cada una al pulsarla muestre con un fundido la imagen grande que le corresponde.
- A la grande le asigna la función para que al pulsar sobre ella desaparezca y volvamos al carrusel.
Esto es, en esencia, lo que hace el código, que he intentado que sea aceptablemente comprensible para poder adaptarlo a las necesidades que se tengan.
Bien, imagina un XML como el anteriormente descrito
<galeria directorio=”gal”>
<imagen peque=”peques/1.jpg” grande=”1.jpg” />
<imagen peque=”peques/2.jpg” grande=”2.jpg” />
<imagen peque=”peques/3.jpg” grande=”3.jpg” />
<imagen peque=”peques/4.jpg” grande=”4.jpg” />
<imagen peque=”peques/5.jpg” grande=”5.jpg” />
<imagen peque=”peques/6.jpg” grande=”6.jpg” />
<imagen peque=”peques/7.jpg” grande=”7.jpg” />
<imagen peque=”peques/8.jpg” grande=”8.jpg” />
</galeria>
El código ActionScript para hacer lo indicado quedaría como sigue:
//adaptación dinámica de Juan Carlos Posé
// Basado en
// Tutorial cortesía de Sargento
// http://sargento.washeebo.com
vel = .08;
//ANALIZAMOS NODOS XML////////////////////////////////////////
function analiza_xml() {
peques = new Array();
grandes = new Array();
primer_nodo = imagenes_xml.childNodes;
nodo_galeria = primer_nodo[0].childNodes;
directorio = primer_nodo[0].attributes.directorio;
for (var j = 0; j<nodo_galeria.length; j++) {
peques[j] = nodo_galeria[j].attributes.peque;
grandes[j] = nodo_galeria[j].attributes.grande;
}
_root.cant = peques.length;
_root.incr = (2*Math.PI)/cant;
}
///////////////////////////////////////////////////////////////
var mclListener:Object = new Object();
mclListener.onLoadInit = function(objetivo_mc:MovieClip) {
objetivo_mc.mayor = grandes[((objetivo_mc.getDepth())-100)];
objetivo_mc.angulo = _root.incr*((objetivo_mc.getDepth())-100);
if (objetivo_mc.angulo>100) {//corrige bug
objetivo_mc.angulo = -incr;
}
objetivo_mc.eje_x = 170;
objetivo_mc.eje_y = 100;
objetivo_mc.amp_x = 150;
objetivo_mc.amp_y = 40;
objetivo_mc.onEnterFrame = function() {
objetivo_mc._x = (Math.cos(objetivo_mc.angulo)*objetivo_mc.amp_x)+objetivo_mc.eje_x;
objetivo_mc._y = (Math.sin(objetivo_mc.angulo)*objetivo_mc.amp_y)+objetivo_mc.eje_y;
objetivo_mc._yscale = objetivo_mc._xscale=(objetivo_mc._y-100)*.7+100;
if ((objetivo_mc.angulo+_root.vel)>(2*Math.PI)) {
objetivo_mc.angulo += _root.vel-(2*Math.PI);
} else if ((objetivo_mc.angulo+_root.vel)<0) {
objetivo_mc.angulo += _root.vel+(2*Math.PI);
} else {
objetivo_mc.angulo += _root.vel;
}
grado = int((objetivo_mc.angulo/Math.PI)*180);
if (grado>=0 && grado<=90) {
objetivo_mc.swapDepths(4000+grado);
}
if (grado>90 && grado<=180) {
objetivo_mc.swapDepths(3000-grado);
}
if (grado>180 && grado<=270) {
objetivo_mc.swapDepths(2000-grado);
}
if (grado>270) {
objetivo_mc.swapDepths(1000+grado);
}
};
objetivo_mc.onPress = function() {
muestra_grande(objetivo_mc.mayor);
};
};
function muestra_grande(cual) {
_root.createEmptyMovieClip(”imagengrande_mc”,50000);
var mclListener_g:Object = new Object();
mclListener_g.onLoadInit = function(objetivo_mc:MovieClip) {
alphaTween = new mx.transitions.Tween(_root.imagengrande_mc, “_alpha”, mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
objetivo_mc.onPress = function() {
removeMovieClip(objetivo_mc);
};
};
var g_mcl:MovieClipLoader = new MovieClipLoader();
g_mcl.addListener(mclListener_g);
g_mcl.loadClip(directorio+”/”+cual,_root.imagengrande_mc);
}
function muestra_peques() {
for (i=0; i
<peques.length; i++) {
//CREAMOS MOVIECLIPS PARA CARGAR LAS IMAGENES PEQUES
_root.createEmptyMovieClip(”imagen”+(i+1),100+i);
var imagen_mcl:MovieClipLoader = new MovieClipLoader();
imagen_mcl.addListener(mclListener);
imagen_mcl.loadClip(_root.directorio+”/”+peques[i],_root[”imagen”+(i+1)]);
}
}
onEnterFrame = function () {
vel = ((_xmouse-210)/210)*.08;
};
//LEE XML//////////////////////////////////////////////////////
var imagenes_xml:XML = new XML();
imagenes_xml.ignoreWhite = true;
imagenes_xml.onLoad = function(success) {
analiza_xml();
muestra_peques();
};
imagenes_xml.load(”galeria.xml”);
stop();
Y como WordPress habrá vuelto a hacer de las suyas con las comillas,
he aquí los documentos necesarios.NOTA: El código anterior tiene algunos fallos que no descubrí en su momento. Para una versión corregida y comentada, visita la nueva entrada “Carrusel de fotos con ActionScript“.
Gracias.
Funciono de Maravilla.
Muchas Gracias.
Y disculpa el abuso.
De nada. Pero ya que esto último es razonablemente distinto del código inicial, lo he publicado en una nueva entrada, sobre todo por no llenar ésta de montones de variaciones que podrían confundir. Además, así aprovecho para corregir algunos pequeños detalles.
Hola… me gustaria aplicar esto dentro de un clip contenedor y con unos botones cargar varios xml…
En los botones que he creado he puesto
item.onPress = function() {
lee_xml(this.archivo);
};
Pero no puedo hacer que pare de reproducir y se vuelve loco
Alguna idea???
Hola Diego. Sólo con la función asignada a la pulsación de los botones no se ve qué puede estar pasando.
Supongo que en algún momento le asignarás la variable .archivo al botón para que pueda pasarle este valor a la función lee_xml(). También supongo que la función lee_xml es idéntica a la explicada al principio. En todo caso podrías probar a recrear el xml cada vez que se pulse un botón
item.onPress = function() {
this.archivo=”nuevoXML.xml”;
var imagenes_xml:XML = new XML();
imagenes_xml.ignoreWhite = true;
lee_xml(this.archivo);
};
No es más que una sugerencia que no he podido probar por falta de tiempo.
hola! el tutorial esta buenisimo. por fin encontré lo que buscaba XD… y me animó a continuar ya que no me resultaba lo que buscaba :)… pero tengo una duda, que no la he podido resolver por más que intento… cuando quiero agregarle texto encima de cada imagen a modo de descripción no encuentro que código ponerle.. por más que intento no me resulta.. en un lugar lei acerca de los tree que era más o menos lo que necesitaba intente complementarlos pero me confundió aun más…
muchisimas gracias por tu tiempo a los que estamos empezando en esto… espero puedas tener un poco de tiempo para ayudarme :)
PD: lo del carrusel de fotos está genial!!!
Gracias Guthof.
Para mostrar un texto lo primero sería definirlo en el XML. Podrías por ejemplo poner un atributo texto a cada marca imagen del XML con el valor del texto a mostrar.
Luego hace falta leerlo. Para ello en la función analiza_xml() definimos una nueva array detrás de las demás con
textos = new Array();
y dentro del bucle for, llenamos el array con
textos[j] = nodo_galeria[j].attributes.texto;
Bien, ya tenemos los textos en el xml, podemos leerlos y meterlos en un array. Ya sólo nos falta qué hacer con ellos. Te sugiero una forma sencilla:
Haz un clip de película con nombre de instancia texto_mc, dentro del cual puedes poner un texto dinámico con nombre de instancia el_texto.
Primero ponemos el movieclip que contendrá el texto por encima de las imágenes con
_root.texto_mc.swapDepths(200);
esta línea la puedes poner al principio de todo. Luego sólo falta que el texto cambie con cada imagen. Por ejemplo, podría bastar con poner delante de
mclListener.onLoadInit = function(objetivo_mc:MovieClip) {
la línea
_root.texto_mc.el_texto.text=textos[cual];
Todo esto va “en bruto”. Por supuesto podría mejorarse haciendo que el texto haga la misma transición que la imagen o con otras variaciones, pero espero que con esta explicación puedas ver cómo pasar también un texto o un pié de foto.
on (release){
_root.avance_inmediato=1;
_root.cual=4;
_root.carga_imagen(_root.cual);
}
OUE SI ES CIERTO…le puse los botones con un instancia eejemplo boton 1…y su codigo
on (release){
_root.avance_inmediato=1;
_root.cual=1;
_root.carga_imagen(cual);
}
y se me va a la foto 3…. de 4 fotos que tengo..
bueno simplemente a ese boton ya le dije que es el boton 3 ejjejeje…… y así acomodé los demás botones jejeje
Hola, Este tutorial es muy claro y me ha sido de gran ayuda pero me he quedado atrancada casi en el último momento. He estado probando de diferentes maneras pero no he sido capaz de conseguir que el xml sea dinámico. Es decir, que se cargue en función de lo que se haya indicado en un parámetro Flashvars.
Ya lo he resuelto, era tan sencillo como incluir el parametro
sin olvidarse de (y en el embed).
//En el fla añadí al inicio:
archivo_xml = _root.archivo;
//y cambié
lee_xml(”pasefotos-intro.xml”);
//por
lee_xml(archivo_xml);
Ahora si que necesitaria que al hacer rollover sobre la imagen se detubiera el pase y se reanudara en el mismo punto al salir de ella. Alguna idea? Gracias
Muchas gracias por el tutorial. La verdad es que además de útil es práctico. Muy bueno el detalle de que cada foto tenga su tiempo
Pues es muy buen el tutorial. Funciona muy bien. Una inquietud. Que hacer cuando hay imágenes verticales, para que estas aparezcan en el centro y no en el punto 0,0?
dianaN. Para conseguir lo que pides bastaría con hacer que la función onloadInit de las imágenes centre las mismas antes de comenzar la transición alpha.
mclListener.onLoadInit = function(objetivo_mc:MovieClip) {
objetivo_mc._x=((Stage.width)/2)-((objetivo_mc._width)/2);
objetivo_mc._y=((Stage.height)/2)-((objetivo_mc._height)/2);
…
…
El código no lo he probado, pero no debería darte problemas.
Buenas hace mucho de este post pero haber si me puedes echar un cable. lo primero es que se muy poco de actioscript vamos casi solo el nombre, he echo una galeria como la que explicas pero querria saber si al acabar las fotos del xml se le puede decir que se vaya a un frame del flash.
me imagino que si si me pudieras ayudar
gracias de todos modos
Hola . El tutorial me pareció justo lo que buscaba, el problema es que tengo que insertar un slideshow más pequeño dentro de un flash de tamaño mayor. Intenté modificar el scrip para determinar dimensiones y posición pero no funcionó. Aquí va el scrip:
_root.createEmptyMovieClip(”imagen1_mc”,2);
imagen1_mc._x = 233;
imagen1_mc._y = 51;
imagen1_mc._height = 177;
imagen1_mc._width = 483;
_root.createEmptyMovieClip(”imagen2_mc”,3);
imagen1_mc._x = 233;
imagen1_mc._y = 51;
imagen2_mc._height = 177;
imagen2_mc._width = 483;
Muchas gracias. Espero tu ayuda
Saludos. Tengo una duda con el tutorial de develooping (me parece muy útil y claramente bien explicado). El problema que tengo es que ya tengo creado el swf con la galeria de imagenes, pero este swf quiero hacerlo reproducir dentro de un movie clip vacío que forma parte de la palicula principal, la index. Me explico mejor:
Tengo la index, con sus botones y un clip de pelicula vacio, en este clip, quiero que se cargue el swf de la galería de imagenes, pero no se carga…lo he probado con las combinaciones posibles y nunca carga. ¿Acaso es un problema de que esté intentando cargar un swf que en realidad solo contiene codigo?
Espero que me puedas ayudar. Gracias.
wow :-)
its very reasonable point of view.
Good post.
realy good post
thx :-)
hola chicos:soy un novato en esta materia asi que lo cque hize fue copiar y pegar el codigo, mi problema es que el swf no me corre cuando lo pongo en mi web, pero cuando lo ejecuto solo alli si corre con normalidad, podrian decirme cual es el error que estoy cometiendo?
Asegurate de que estas subiendo todo el contenido del archivo zip, a tu sitio, para hayudarte mejor, manda el link del swf en tu sitio.