asd

29

Jun

Como usar archivos XML en Flash

Publicado por: LeoBaraldi

Cuando nos encontramos con proyectos donde el cliente debe cargar datos de tipo dinámicos o datos que son sensibles a nuevos cambios la mejor manera de afrontar esos proyectos es usando XML, el potencia que tiene un XML es la posibilidad de manipular grande cantidades de información de una manera organizada y estructurada y simple de modificar, sin la necesidad de tocar nuestro SWF.

Para aquellos que quieran saber cómo construir un archivo de tipo XML o quieran saber cómo es su estructura les vendrá bien leer el siguiente artículo: http://www.leobaraldi.com.ar/2008/03/09/que-es-un-archivo-xml-y-escribir-archivos-xml
En este artículo veremos cómo cargar y gestionar un archivo XML para una galería de imágenes que el mismo roten con un intervalo de tiempo mas los controles habituales e información para cada imagen. En este caso también vamos a hacer uso de AS 2.0 recuerden que todos estos tutoriales vamos a ir pasándolos a AS 3.0 a medida que el tiempo surja.
Para utilizar XML flash cuenta con una clase nativa para ello, la cual nos permite manipular XML, nodos, métodos y parámetros de todo tipo. Como toda clase simplemente para comenzar a utilizarla debemos crear un nuevo objeto de tipo XML de la siguiente manera:
var miXML:XML = new XML();

Los siguientes pasos seria comenzar a levantar la información de nuestro XML y guardarla en el objeto XML que creamos (miXML), para ello usaremos el siguiente método load y el controlador onLoad para saber que sucede con nuestros datos. Ahora en mas la explicaciones van dentro del código cosa que vamos ir viendo paso a paso como trabajar el objeto XML.
Antes que todo vamos a necesitar por supuesto tener nuestro XML con su estructura y datos ya conformados, en este caso particular lo vamos a diseñar de la siguiente manera.

Importante: Nunca olvidarse de los cierre de cada nodo, sea padre o hijos!!!

Una vez que ya tenemos nuestro archivo XML con su estructura definida ya podemos pasar a nuestro AS, no es necesario por ahora que nuestro XML tenga todos los datos cargados, simplemente con que ya tengamos su estructura es suficiente para comenzar, después a su momento editaremos el XML con la información real requerida.

Clic para ver Texto Plano
Actionscript:
  1. //System.useCodepage = true //esto va en caso de que su cabecera no este en UTF 8
  2. var urlXML:String = "xmlgaleria.xml";//nombre del archivo xml
  3. var miXML:XML = new XML();//creamos un objeto XML para almacenarle adentro la información necesaria
  4. miXML.ignoreWhite = true;//Que ignore las líneas en blanco que puedan existir entre nodos y nodos
  5.  
  6. //El siguiente paso sería cargar nuestro archivo XML atreves de un controlador (onLoad)
  7. miXML.onLoad = function(ok) {//función encargada de evaluar si se cargo o no el XML
  8. if (ok) {//si la carga fue exitosa ejecutamos lo siguiente
  9. trace("carga exitosa!!!")
  10. } else {//si la carga no se realizo ejecutamos lo siguiente
  11. trace("error al cargar XML");
  12. }
  13. };
  14. miXML.load(urlXML);//iniamos la carga de nuestro XML, la función superior se encargara
  15. //de detectar si se realizo con éxito o no

Hasta aquí lo único que se realizo fue la carga a nuestro SWF del XML, posteriormente ahora trabajaremos en el uso del mismo. El paso más importante a continuación es guardar todos los nodos hijos (foto) y su información en un Array, ser como que cada uno de los nodos con todos sus datos lo pusiéramos en una carpeta individual para cada nodo y todas estas carpetas dentro de un archivador que ser nuestro Array.

Clic para ver Texto Plano
Actionscript:
  1. //System.useCodepage = true //esto va en caso de que su cabecera no este en UTF 8
  2. var urlXML:String = "xmlgaleria.xml";//nombre del archivo xml
  3. var id:Number = 0;//esta variable de tipo numérica es para indicar que hijo queremos llamar, ya que
  4. //los Array funcionan como un casillero diferenciados por numero
  5. var miXML:XML = new XML();//creamos un objeto XML para almacenarle adentro la información necesaria
  6. miXML.ignoreWhite = true;//Que ignore las líneas en blanco que puedan existir entre nodos y nodos
  7.  
  8. //El siguiente paso sería cargar nuestro archivo XML atreves de un controlador (onLoad)
  9. miXML.onLoad = function(ok) {//función encargada de evaluar si se cargo o no el XML
  10. if (ok) {//si la carga fue exitosa ejecutamos lo siguiente
  11. misNodos_Array = this.firstChild.childNodes;//creamos una variable de tipo array donde almacenamos
  12. //cada uno de los nodos. La partícula this hace referencia a miXML, firstChild es el nodo principal
  13. //de nuestro XML y childNodes son los nodos que están dentro del nodo principal
  14. //en definitiva le indicamos que solo guarde TODOS los nodos después del nodo principal.
  15. //si después de esta línea pusiéramos trace(misNodos_Array) el panel de salida nos muestra los
  16. //nodos almacenados en nuestro Array
  17. mcLoader.loadClip(misNodos_Array[id].attributes.url,contenedor_mc); //cargamos el primer nodo
  18. //misNodos_Array[id] <----este es el nodo que llamamos, entre [ ] va el numero referencia a la posición
  19. //que ocupa en el array, en este caso (0) - .attributes.url <--- con la partícula attributes indicamos
  20. //que atributo queremos cargar, en este caso la url que le corresponde al nodo 0
  21. comenzarIntervalo();//inicializamos el temporizador
  22. } else {//si la carga no se realizo ejecutamos lo siguiente
  23. trace("error al cargar XML");
  24. }
  25. };
  26. miXML.load(urlXML);//iniciamos la carga de nuestro XML, la función superior se encargara
  27. //de detectar si se realizo con éxito o no
  28. //FUNCION ENCARGADA DE CARGAR LAS FOTOS
  29. function loadImagen() {
  30. if (id //ultima foto que regrese a la primera y asi perpetuamente
  31. id++;//incremento el valor de id, este es la referencia a la posición del array
  32. } else {
  33. id = 0;//si llegue al final del array comienzo de nuevo el recorrido
  34. }
  35. mcLoader.loadClip(misNodos_Array[id].attributes.url,contenedor_mc);//cargamos la imagen
  36. }
  37. //OTROS ELEMENTOS NECESARIOS
  38. this.createEmptyMovieClip("contenedor_mc",this.getNextHighestDepth());//creamos un contenedor donde enviar
  39. //nuestras imágenes
  40.  
  41. //ACCION DE CARGA POR INTERVALOS DE TIEMPO
  42. var intervalId:Number;
  43. var duracion:Number = 10000;//tiempo de espera entre foto y foto en milisegundos 1000=1 segundo
  44. function comenzarIntervalo():Void {
  45. if (intervalId != null) {
  46. clearInterval(intervalId);
  47. }
  48. intervalId = setInterval(this, "loadImagen", duracion);
  49. }
  50.  
  51. //GESTOR DE CARGA DE IMAGENES
  52. var mcLoader:MovieClipLoader = new MovieClipLoader();
  53. var escuchar:Object = new Object();
  54. escuchar.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number) {//porcentaje de carga de la imagen
  55. var persoTotal = bytesTotal;
  56. var cargados = bytesLoaded;
  57. var porcentaje = Math.round(cargados*100/persoTotal);
  58. var miFormat:TextFormat = new TextFormat();//formateo el campo de texto %
  59. miFormat.size = 40;
  60. miFormat.color = 0xFFFFFF;
  61. miFormat.font = "arial";
  62. porcentaje_txt.text = porcentaje+"%";
  63. porcentaje_txt.setTextFormat(miFormat);
  64. };
  65. escuchar.onLoadInit = function(target:MovieClip) {
  66. };
  67. escuchar.onLoadStart = function(target:MovieClip) {
  68. //creo el campo de texto para porcentaje
  69. target._parent.createTextField("porcentaje_txt",target._parent.getNextHighestDepth(),10,10,1,1);
  70. porcentaje_txt.autoSize = true;
  71. porcentaje_txt.background = true;
  72. porcentaje_txt.backgroundColor = 0x000000;
  73. descripcion_txt.text = "";
  74. descripcion_txt.removeTextField();
  75. };
  76. escuchar.onLoadComplete = function(target:MovieClip, httpStatus:Number) {
  77. porcentaje_txt.removeTextField();
  78. //creo el campo de texto para la descripcion
  79. target._parent.createTextField("descripcion_txt",target._parent.getNextHighestDepth(),0,Stage.height-40,Stage.width,35);
  80. descripcion_txt.autoSize = false;
  81. descripcion_txt.textColor = 0xFFFFFF;
  82. descripcion_txt.background = true;
  83. descripcion_txt.backgroundColor = 0x000000;
  84. descripcion_txt.text = " "+misNodos_Array[id].attributes.titulo+" "+newline;
  85. descripcion_txt.text += " "+misNodos_Array[id].firstChild+" ";
  86. efectoBlur();
  87. };
  88. mcLoader.addListener(escuchar);
  89.  
  90. //EFECTO BLUR PARA CADA IMAGEN CARGADA
  91. function efectoBlur() {
  92. import flash.filters.BlurFilter;
  93. var blurX:Number = 30;
  94. var blurY:Number = 30;
  95. var quality:Number = 3;
  96. var filterArray:Array = new Array();
  97.  
  98. this.onEnterFrame = function() {
  99. var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
  100. filterArray.push(filter);
  101. contenedor_mc.filters = filterArray;
  102. blurX--;
  103. blurY--;
  104. filterArray = [];
  105. if (blurX<=0 || blurY<=0) {
  106. delete this.onEnterFrame;
  107. }
  108. };
  109. }

ver ejemplodescargar archivos

En el siguiente grafico pueden darse cuenta cómo funciona la estructura del XML y como flash la interpreta según este caso particular, pero el principio general es el mismo en todos los casos

En conclusión como pueden observar simplemente con pocas líneas de AS y un archivo XML hemos logrado una pequeña y simple galería que solo pesa 2kb y es totalmente actualizable desde afuera del SWF con solo modificar el XML . Estar de mas decir e imaginar las virtudes y posibilidades que dan el uso de archivos XML.

categorias: ActionScript 2 , XML Coment.: 12

12 Respuestas

    Martin Dice:
    13th Julio, 2008 at 10:17 pm

    Buenisima la galeria leo!!! Hice una parecida, pero le agrege algunas cosas mas :P Despues te la paso!! Saludos

    Greenkia Dice:
    2nd Agosto, 2008 at 2:23 pm

    Buenas tardes, realmente su curso ha sido bastante entendible. Tengo una duda:
    Estoy intentando realizar un ejemplo pero no consigo que funcione.
    Teniendo en cuenta que dentro de los xml hay bastantes datos, mi pregunta es la siguiente:
    Quiero capturar siempre los datos de un nodo, el cual dependiendo del xml generado por el servidor se posiciona en un sitio u otro. He intentado realizarlo de esta manera:
    for(var i:Number = 0; i< mi_xml.firstChild.childNodes; i ++){
    if(mi_xml.firstChild.childNodes[i].nodeName == "Setting"){
    trace(mi_xml);
    }
    }

    Pero no funciona.

    Si necesita todo el codigo digameló.

    Un saludo

    LeoBaraldi Dice:
    3rd Agosto, 2008 at 11:06 pm

    algo asi te va a funcionar:

    Clic para ver Texto Plano
    Actionscript:
    1. var xml:XML = new XML();
    2. xml.ignoreWhite = true;
    3. xml.onLoad = function(ok) {
    4.     if (ok) {
    5.         nodos_array = this.firstChild.firstChild.childNodes;
    6.         for (i=0; i<nodos_array.length; i++) {
    7.             if (nodos_array[i].localName == "generator") {
    8.                 trace("si existe");
    9.                 trace("numero de nodo: "+i);
    10.                 trace("texto: "+nodos_array[i].localName);
    11.             }
    12.         }
    13.     } else {
    14.     }
    15. };
    16. xml.load("prueba.xml");

    el xml utilizado es el feed de este sitio ;)

    Greenkia Dice:
    17th Agosto, 2008 at 9:36 am

    Buenas tardes, después de probar su codigo tengo que decirle que ha funcionado correctamente.
    Con su permiso le he añadido un par de definiciones para conseguir el resultado que me interesaba.

    Clic para ver Texto Plano
    Actionscript:
    1. var xml:XML = new XML();
    2. xml.ignoreWhite = true;
    3. xml.onLoad = function(ok) {
    4. if (ok) {
    5. nodos_array = this.firstChild.firstChild.childNodes;
    6. for (i=0; i<nodos_array.length; i++) {
    7. if (nodos_array[i].localName == "generator") {
    8. trace("si existe");
    9. trace("numero de nodo: "+i);
    10. trace("texto: "+nodos_array[i].firstChild.nodeValue);
    11. }
    12. }
    13. } else {
    14. }
    15. };
    16. xml.load("prueba.xml");

    Con esto me devuelve el valor del nodo.
    Muchas gracias

    pedro Dice:
    22nd Agosto, 2008 at 5:24 pm

    http://laorillaweb.com/webprat/uecpr.html

    en este enlace he puesto tu ejemplo...
    mira que te parece...
    es la galeria de abajo
    y esta en una pg que estoy diseñando de forma altruista
    pedro
    pdt.gracias

    Enzo Dice:
    6th Noviembre, 2008 at 11:59 am

    muy bueno,gracias por compartir tus conocimientos :) Salu2¡¡

    Samar Dice:
    28th Enero, 2009 at 8:33 pm

    Estoy probando un xml y no carga no se cual sera el problema con el script...

    Samar Dice:
    28th Enero, 2009 at 9:00 pm

    Esta Recontra buenazo este tutorial, bien chevere...

    estupido lento para aprender Dice:
    18th Febrero, 2009 at 12:46 pm

    hola quisiera saber que significa un array , se trata de una carpeta para cada foto? y donde va el segundo AS
    muchas gracias por ayudar !

    guillow Dice:
    4th Enero, 2010 at 11:53 pm

    quiciera saber como hago para cambiarle la fuente y el tamaño a la descripcion

    LeoBaraldi Dice:
    5th Enero, 2010 at 3:03 am

    2 opciones: usas la clase TextFormat y con font asignas la fuente o usas texto html y con la etiqueta font face asignas una fuente, con el tamaño pasa lo mismo. Si la fuente no es de sistema utiliza TextFormat

    pep Dice:
    25th Abril, 2010 at 4:49 pm

    Tengo un grave problema, modifico el xml, guardo como utf-8.

    Luego al poner en marcha la pelicula, las tildes, eñes, acentos en general no se me codifican correctamente...

    Me podéis ayudar ?

    Eternamente agradecido, ya le he hecho de todo¡¡

Publicar comentario

IMPORTANTE: Los comentarios son moderados. A la brevedad seran subidos.

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi