Google Web after-hours

Contador en flash JSFL Traductor

Para continuar esta serie de tutoriales básicos sobre la integración XML-Flash he confeccionado una galerí a de imagenes muy sencilla. El fla contempla basicamente como obtener una serie de imágenes tomando como base de datos un archivo XML.


<?xml version="1.0" encoding="iso-8859-1"?>
<imagenes>
<imagen id="img01.jpg"/>
<imagen id="img02.jpg"/>
<imagen id="img03.jpg"/>
<imagen id="img04.jpg"/>
<imagen id="img05.jpg"/>
<imagen id="img06.jpg"/>
<imagen id="img07.jpg"/>
<imagen id="img08.jpg"/>
<imagen id="img09.jpg"/>
</imagenes>
// -- posición donde se cargará la primera imagen
x = 3;
y = 3;
// -- ancho y alto de la imagen más 5 pixeles de espacio
ancho = 105;
alto = 80;
// -- numero de columnas
num_columnas = 3;
// -- creo un nuevo objeto XML
miXML = new XML();
// -- ignorar espacios
miXML.ignoreWhite = true;
// -- proceso si la carga tuvo éxito
miXML.onLoad = function(succes) {
	if (succes) {
		// -- por cada nodo hijo del nodo principal...
		for (var i = 0; i<this.firstChild.childNodes.length; i++) {
			// -- delaro una variable que recoje el atributo del nodo (nombre de la imagen)
			galeria = this.firstChild.childNodes[i].attributes.id;
			// -- creo un clip de película vacio
			_root.createEmptyMovieClip("diapo"+i, i+100);
			// --  cargo la imágen el clip vacio
			item = _root["diapo"+i];
			item.loadMovie(galeria);
			// -- indico posición x - y
			item._x = x;
			item._y = y;
			// -- incremento el valor de x para la siguiente imágen
			x += ancho;
			// -- incremento en 1 el número de columnas
			columna += 1;
			// -- ruptura de control, control de número de columnas
			if (columna == num_columnas) {
				columna = 0;
				x -= (ancho*num_columnas);
				y += alto;
			}
		}
	}
};
// -- cargar XML
miXML.load("imagenes.xml");

Descargar archivos » (xml,fla,jpg’s)

Cargando una url con la galeria UPDATE!

Utilizando el mismo .fla con una pequeñas variaciones en el código, podemos cargar url’s externas haciendo clic en cada imagen.

XML

<?xml version="1.0" encoding="iso-8859-1"?>
<imagenes>
<imagen id="img01.jpg" url = "http://www.after-hours.org"/>
<imagen id="img09.jpg" url = "http://www.google.com"/>
</imagenes>

fla

// -- posición donde se cargará la primera imagen
x = 3;
y = 3;
// -- ancho y alto de la imagen más 5 pixeles de espacio
ancho = 105;
alto = 80;
// -- numero de columnas
num_columnas = 3;
// -- creo un nuevo objeto XML
miXML = new XML();
// -- ignorar espacios
miXML.ignoreWhite = true;
// -- proceso si la carga tuvo éxito
miXML.onLoad = function(succes) {
	if (succes) {
		// -- por cada nodo hijo del nodo principal...
		for (var i = 0; i < this.firstChild.childNodes.length; i++) {
			// -- delaro una variable que recoje el atributo del nodo (nombre de la imagen)
			thumb = this.firstChild.childNodes[i].attributes.id;
			// -- creo un clip de película vacio
			holder_mc = createEmptyMovieClip("holder_mc" + i, i + 100);
			// -- creo un clip de película vacio
			item = holder_mc.createEmptyMovieClip("diapo" + i, i + 100);
			// --  cargo la imágen el clip vacio
			item.loadMovie(thumb);
			// -- indico posición x - y
			holder_mc._x = x;
			holder_mc._y = y;
			// -- se crea una variable que contiene la url correspondiente
			holder_mc.url = this.firstChild.childNodes[i].attributes.url;
			// -- abrir url al hacer clic
			holder_mc.onRelease = function() {
				getURL(this.url);
			};
			// -- incremento el valor de x para la siguiente imágen
			x += ancho;
			// -- incremento en 1 el número de columnas
			columna += 1;
			// -- ruptura de control, control de número de columnas
			if (columna == num_columnas) {
				columna = 0;
				x -= (ancho * num_columnas);
				y += alto;
			}
		}
	}
};
// -- cargar XML
miXML.load("imagenes.xml");

Descargar archivos actualización » (xml,fla,jpg’s) (4340 hits)

25 Responses to 'Flash + XML Galería de imágenes'

  1. xus Says:

    Hola Toni !!

    he estat vegent la teua fulla i esta de lo mes rebe, ademes he estat vegent la galeria de images que has fet i m’ha interessat molt pero desde fa mes de una semana, estic cercant tutorials i webs on conten coses sobre carregar images desde un arxiu .xml. ( en flashkit, nomaster, foros, actionscript.org .. ) pero en cap lloc he vist que a l’hora de cridar les images es faça de forma absoluta, es a dir, tu aconsegueixes la image mitjançant un atributes.id; pero a mi m’agradaria fer-ho introduint el nom de la image: per eixemple foto1.jpg

    series tan enrollat de dirme si aixo es posible??
    ( i si es pot comooorr ????? )

    gracies per tot.

    un saludet desde Valencia. 8 þ

  2. Muñeca Says:

    Gracias Sapos

  3. juanma Says:

    perdon por mi tradanza en esto pero me sirvio de muchooo lo que aqui explicas
    gracias amigo por tu tutorial tan valioso.
    escucha. como podria hacer para si tengo ejemplo 40 fotos y quiero que se vean en 4 pasos de 10 muestras, para pasar de una seccion a otra?? podria colocar el for de i <=10 en cada frame de la linea de tiempo hasta formar 4 nop??
    me fijo
    gracias

  4. Augusto Salazar Says:

    Hola.

    Tengo un proyecto en el cual tengo que cargar fotos de tamaños cambiantes y pesos bastante grandes, la info me la da un XML.
    La idea es tener la info sobre el porcentaje de carga en la pantalla, ahora, el el ambiente de programacion no tengo problemas, cuando emulo la conexion en FLASH todo funciona bien, pero una vez en internet nada se ve igual.

    como lo que digo suena extraño aqui adjunto una pagina en donde pueden ver a que me refiero y ver mi codigo.

    Muchas gracias de antemano.

    http://www.geocities.com/soha_soluciones/

    Augusto Salazar

  5. Marino Linaje Says:

    Solo una pregunta:
    Cuando cargas desde un servidor fotos mediante el componente Loader de MX 2004. ¿Has experimentado problemas cuando estas fotos son grandes y el solo te las deberí a resizar? (loader.scaleContent)

    Es que solo pasa la primera vez, con fotos grandes que tardan en cargarsen y no en local.

    Me gustarí a saber si alguien + ha observado ese problema.

    Gracias.

  6. Raul Says:

    Hola: no soy experto en flash, y vi vuestro ejemplo de galeria de imagenes.Quiero hacer una igual pero agregando texto a cada imagen(nombre de la imagen) y un pop up con la imagen ampliada con archivo externo.
    gracias

  7. Ernest Says:

    hola Amigos,
    se puede contectar archivo swf, dentro de director que funcionen estos como botones, y llamen a peliculas de director?

    Por ejemplo un swf de navegacion, el cual dentro de la pelicula de director hara lo mismo hacia otras peliculas o frames?
    Se puede?
    Como hacer?

  8. siddin Says:

    Muy Buenos dí as Sr.
    Primero déjeme expresarle mis mas calidos saludos de una persona desconocida pero gustosa de saber de su existencia.
    Quisiera expresarle que estoy buscando ayuda debido a que soy pasante-tesista y estoy encargado de hacer un Chat educativo en flash MX 2004. Actualmente estoy leyendo un libro (Flash MX Manual Avanzado), el cual me ha parecido realmente de gran ayuda para aprender. Las consideraciones son las siguientes:
    - Se tiene muy poco tiempo para yo construir este Chat. Prácticamente para enero 2005 aprox.
    - Lo que ha pretendido la compañí a en donde trabajo es adquirir un Chat ya construido para así agregarle las nuevas funcionalidades y/o módulos, pues el jefe afirma que construirlo todo desde un principio se llevarí a mucho tiempo.
    - Ya se tiene un Chat construido el cual tiene: 1. la parte del servidor realizado en java, y 2. todo lo demás en flash (interfas y código ActionScript), 3. se tiene el código de lo realizado en flash pero no lo que esta en java. 4. se tienen especificaciones de las conexiones (entradas y salidas) del servidor java. Por lo que supongo yo por lo que he leí do que podemos estar hablando de XML para la conexión entre flash y java.
    - Por otra parte las nuevas funcionalidades que se requieren integrar al Chat son principalmente:
    1. Un modulo de encuesta (pregunta y respuesta). Aquí lo que se quiere es por ejemplo es que un profesor el cual esta dentro de una sala en el Chat (Ej. matemáticas), pueda enviarles a todos los alumnos que se encuentran en esta sala una pregunta con sus posibles alternativas de respuestas como una prueba de ingreso universitaria (esto como check box o algo así ), el alumno hace los caculos y selecciona la respuesta que considere correcta y enví a si respuesta haciendo clic en un botón.
    2. El modulo debe determinar cuanto tiempo se llevo el alumno responder y si respondió mal o bien.
    3. Esta información debe ser presentada al profesor. Y al alumno al final, el resumen del numero de las correctas o incorrectas.
    4. Otra funcionalidad es integrar un pizarrón.
    Yo soy una persona sin experiencia en flash y es ahora que estoy aprendiendo por medio de sus bibliografí as de modo de alcanzar estas metas.
    Lo que desearí a es que me pueda prestar un apoyo en cuanto a esto ya que no estoy muy claro en acerca de las factibilidades, limitantes, etc. etc., etc.
    Si para usted considera que para prestarme algún servicio este debe tener la condición de ser pago, entonces por favor hágamelo saber para analizarlo.
    Es muy importante para mi lograr el desarrollo de lo propuesto en vista a la responsabilidad que tengo para con mi trabajo y requisitos academicos.
    Sin mas a que hacer referencia y en espera de toda su posible colaboracion se despide,
    Atentamente,

    Siddin Vargas Vagnoni
    04127315989 / 02122658213
    siddin@cantv.net
    siddinva@yahoo.es
    Caracas - Venezuela

  9. RaMMa Says:

    Hola, es posible hacer un scroll vertical de las imagenes cargadas?

  10. tonilopez Says:

    Hola Ranma, mira este enlace:

    http://www.after-hours.org/foro/viewtopic.php?p=9668#9668

    saludos!

  11. mentolin Says:

    Todo esta muy currado. Hasta he podido hacer alguna que otra modificación en la galería :smile:
    Ahora la duda seria como poder hacer una carga imagen a imagen para poder hacer una galeria apañada.

    Gracias!

  12. Javier Says:

    A esto sólo le veo un problema, y es que si quiero cargar dentro de una película esta galería ( osea un swf dentro de otro ) no puedo definir la posición de la galería, al definirme ésta su posición en x=3 e y=3 forzosamente. Me gustaría saber cómo hacer para que estas posiciones “x” e “y” sean “relativas", es decir que sirvan solo para indicar donde quieres poner las fotos en lo que es la galería sin que influya en el posicionamiento de ésta dentro de la película en la que se mete.

  13. dondiegote Says:

    Muy facil javier. Sustituye x = 3 por x = this._x + 3 y con las “y” igual.

  14. Guillermo Says:

    Hola me parece muy util tu ejemplo gracias, un pregunta como puedo hacer para linkear las imagenes a una url????????????????

    gracias por tu ayuda un saludo

  15. tonilopez Says:

    Hola Guillermo, he añadido al final del artículo el código modificado para el .fla y .xml. Tambien puedes descargar los archivos modificados.

    Saludos

  16. egoldy Says:

    I want to only show 3 pictures per page. I have added next page and prev page button.How to code next page and prev page button .
    thanks toni.

  17. tabares Says:

    hola, solamente kisiera saber si hay na función o etiketa para poder cargar una imagen a un frame en especifico por favor sería muy util
    tengo este codigo:

    //
    images/angel.jpg
    1.jpg
    ampliar

    lo ke kiero es ke cargue la 1.jpg a un frame llamado “der”
    este codigo es xml emulado por un swf, pero no he encontrado respuesta en ningun lado, espero me puedan ayudar

  18. tonilopez Says:

    Si estás en el fotograma 1 y quieres cargar una imagen en el fotograma 2, eso no se puede hacer. Deberás cargar la imagen una vez el lector esté en ese fotograma.

    saludos.

  19. Nina Says:

    Hola soy nueva en esto de flash y xml, quisiera que me ayudaran, he implementado este código de la galería de imágenes, pero al cambiar de una escena a otra, la imagen que ya he cargado en la primera escena aparece en la segunda y así sucesivamente para las siguietnes escenas…..existe una forma de que sólo se cargue una foto para la primera escena???????????????? y en las sig. ya no aparezca??

    Muchas gracias ;)

  20. tonilopez Says:

    Hola Nina,

    tenemos un foro donde podrias dejar un ejemplo de tu fla para analizarlo, ya que no veo porque te ocurre lo que comentas.

    La dirección del foro:

    http://www.after-hours.org/foro

    Un saludo

  21. Nina Says:

    Gracias Toni por tu respuesta tan rápida…..
    de hecho el código que utilicé es el mismo que aparece en esta página (el primero , no el que carga una url)……lo único q hice es agregar un botón que me llevara a la siguiente escena (scene2) que contiene texto….
    Pero resulta que al darle click a ese botón y al llevarme a la otra escena….pummm…aparece nuevamente la imagen que cargué en la escena 1….obviametne en la misma posición …pero yo quiero q solo aprezca en la primera escena y en la segunda ya no!!!! ojalá me pudieras ayudar….

    Muchas gracias :)

  22. tonilopez Says:

    Nina, es muy raro, bueno te digo que no trabajo con escenas hace años. Insisto, pon un enlace en el foro para descargar el .fla.

    Saludos

  23. Nina Says:

    Muchas gracias por tu ayuda toni..pues q crees!! efectivamente, dejé todo lo q voy a manejar en una sólo escena y ya me queda bien….gracias por tu atención y por tu tiempo… :razz:

  24. Huber Huaman Says:

    botones fade in fade out,

    he intentado hacerlos con los ejemplos de algunas paginas pero nada

    la parte que indica mover del estado up al final de area de influewncia en el 2do boton transpareten, como le llaman es lo que me ha estado dando dolores de cabeza

    necesito poder darle ese efecto para que no aparezcan como cortadas las animaciones de los botones.

    tambien sobre cargar en una carpeta en mi pagina web algunos mp3 y hacerlos ejecutar colo cuando habran mi pagina pero aleatoriamente, en los ejemplos que encontrè me doy con la sorpresa de que por logica deben ser cargados a la biblioteca y con ello bastaria,
    per como tengo en mente cargar arhivos mp3 de 1 mega ams o menos, necesito otra forma y ese serìa el modo del que tras estoy en donde en esta carpeta esten disponibles y al azar se ejecuten.

    Me he topado tambièn con el hacer una contador, pero bueno me he dado cuenta de que eso ya es otra cosa, solo me quedaria la pregunta de si el ASP o php que tengo en mi dreamweaver de macromedia me permite hacerlos?
    pues en insertar en la barra de menu, al final del mismo hay un monton de funciones refereidas a este tipo de softwares, php, asp, coldfusion, y no se cuales mas vi, en todo casdo necesito saber hacer este tipo de contadores simple no ma, pues
    el alcance de mi publicaciòn deseo medir ya que obedece a un intento forzado por el cual dependo al publicarlo.

    Ahora tambien me he quedado en el iniciode como hacer formularios como este que estoy llenando, los ejemplos que pude ver en flash necesitan de un leguajke de php y no se que otra cosa mas,

    no me es posible encontrarme con especialistas en este tema para hacer consultas por ello les escribo a ustedes que espero tengan en consideracion el presente mensage

    PAz

    Huber Huaman

  25. Jersh Says:

    Hola deseo saber si cuando usas el loadmovieClip() y ya subes tu pagina es necesario utilizar el preload porque no me jala las imagenes desde la ruta relativa.

    gracias