Como usar archivos XML en Flash
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 como es su estructura les vendría 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 más 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.
-
//System.useCodepage = true //esto va en caso de que su cabecera no este en UTF 8
-
var urlXML:String = "xmlgaleria.xml";//nombre del archivo xml
-
var miXML:XML = new XML();//creamos un objeto XML para almacenarle adentro la información necesaria
-
miXML.ignoreWhite = true;//Que ignore las lineas en blanco que puedan existir entre nodos y nodos
-
-
//El siguiente paso seria cargar nuestro archivo XML atravez de un controlador (onLoad)
-
miXML.onLoad = function(ok) {//función encargada de evaluar si se cargo o no el XML
-
if (ok) {//si la carga fue exitosa ejecutamos lo siguiente
-
trace("carga exitosa!!!")
-
} else {//si la carga no se realizo ejecutamos lo siguiente
-
trace("error al cargar XML");
-
}
-
};
-
miXML.load(urlXML);//iniamos la carga de nuestro XML, la funcion superior se encargara
-
//de detectar si se realizo con exito 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ía 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ía nuestro Array.
-
//System.useCodepage = true //esto va en caso de que su cabecera no este en UTF 8
-
var urlXML:String = "xmlgaleria.xml";//nombre del archivo xml
-
var id:Number = 0;//esta variable de tipo numerica es para indicar que hijo queremos llamar, ya que
-
//los Array funcionan como un casillero diferenciados por numero
-
var miXML:XML = new XML();//creamos un objeto XML para almacenarle adentro la información necesaria
-
miXML.ignoreWhite = true;//Que ignore las lineas en blanco que puedan existir entre nodos y nodos
-
-
//El siguiente paso seria cargar nuestro archivo XML atravez de un controlador (onLoad)
-
miXML.onLoad = function(ok) {//función encargada de evaluar si se cargo o no el XML
-
if (ok) {//si la carga fue exitosa ejecutamos lo siguiente
-
misNodos_Array = this.firstChild.childNodes;//creamos una variable de tipo array donde almacenamos
-
//cada uno de los nodos. La particula this hace referencia a miXML, firstChild es el nodo principal
-
//de nuestro XML y childNodes son los nodos que estan dentro del nodo principal
-
//en definitiva le indicamos que solo guarde TODOS los nodos despues del nodo principal.
-
//si despues de esta linea pusieramos trace(misNodos_Array) el panel de salida nos muestra los
-
//nodos almacenados en nuestro Array
-
mcLoader.loadClip(misNodos_Array[id].attributes.url,contenedor_mc); //cargamos el primer nodo
-
//misNodos_Array[id]<----este es el nodo que llamamos, entre [] va el numero referencia a la posicion
-
//que ocupa en el array, en este caso (0) - .attributes.url <--- con la particula attributes indicamos
-
//que atrubuto queremos cargar, en este caso la url que le corresponde al nodo 0
-
comenzarIntervalo();//inicializamos el temporizador
-
} else {//si la carga no se realizo ejecutamos lo siguiente
-
trace("error al cargar XML");
-
}
-
};
-
miXML.load(urlXML);//iniamos la carga de nuestro XML, la funcion superior se encargara
-
//de detectar si se realizo con exito o no
-
//FUNCION ENCARGADA DE CARGAR LAS FOTOS
-
function loadImagen() {
-
if (id<misNodos_Array.length-1) {//condicional para hacer un loop continuo, cuando llegamos a la
-
//ultima foto que regrese a la primera y asi perpetuamente
-
id++;//incremento el valor de id, este es la referencia a la posicion del array
-
} else {
-
id = 0;//si llegue al final del array comienzo de nuevo el recorrido
-
}
-
mcLoader.loadClip(misNodos_Array[id].attributes.url,contenedor_mc);//cargamos la imagen
-
}
-
//OTROS ELEMENTOS NECESARIOS
-
this.createEmptyMovieClip("contenedor_mc",this.getNextHighestDepth());//creamos un contenedor donde enviar
-
//nuestras imagenes
-
-
//ACCION DE CARGA POR INTERVALOS DE TIEMPO
-
var intervalId:Number;
-
var duracion:Number = 10000;//tiempo de espera entre foto y foto en milisegundos 1000=1 segundo
-
function comenzarIntervalo():Void {
-
if (intervalId != null) {
-
clearInterval(intervalId);
-
}
-
intervalId = setInterval(this, "loadImagen", duracion);
-
}
-
-
//GESTOR DE CARGA DE IMAGENES
-
var mcLoader:MovieClipLoader = new MovieClipLoader();
-
var escuchar:Object = new Object();
-
escuchar.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number) {//porcentaje de carga de la imagen
-
var persoTotal = bytesTotal;
-
var cargados = bytesLoaded;
-
var porcentaje = Math.round(cargados*100/persoTotal);
-
var miFormat:TextFormat = new TextFormat();//formateo el campo de texto %
-
miFormat.size = 40;
-
miFormat.color = 0xFFFFFF;
-
miFormat.font = "arial";
-
porcentaje_txt.text = porcentaje+"%";
-
porcentaje_txt.setTextFormat(miFormat);
-
};
-
escuchar.onLoadInit = function(target:MovieClip) {
-
};
-
escuchar.onLoadStart = function(target:MovieClip) {
-
//creo el campo de texto para porcentaje
-
target._parent.createTextField("porcentaje_txt",target._parent.getNextHighestDepth(),10,10,1,1);
-
porcentaje_txt.autoSize = true;
-
porcentaje_txt.background = true;
-
porcentaje_txt.backgroundColor = 0x000000;
-
descripcion_txt.text = "";
-
descripcion_txt.removeTextField();
-
};
-
escuchar.onLoadComplete = function(target:MovieClip, httpStatus:Number) {
-
porcentaje_txt.removeTextField();
-
//creo el campo de texto para la descripcion
-
target._parent.createTextField("descripcion_txt",target._parent.getNextHighestDepth(),0,Stage.height-40,Stage.width,35);
-
descripcion_txt.autoSize = false;
-
descripcion_txt.textColor = 0xFFFFFF;
-
descripcion_txt.background = true;
-
descripcion_txt.backgroundColor = 0x000000;
-
descripcion_txt.text = " "+misNodos_Array[id].attributes.titulo+" "+newline;
-
descripcion_txt.text += " "+misNodos_Array[id].firstChild+" ";
-
efectoBlur();
-
};
-
mcLoader.addListener(escuchar);
-
-
//EFECTO BLUR PARA CADA IMAGEN CARGADA
-
function efectoBlur() {
-
import flash.filters.BlurFilter;
-
var blurX:Number = 30;
-
var blurY:Number = 30;
-
var quality:Number = 3;
-
var filterArray:Array = new Array();
-
-
this.onEnterFrame = function() {
-
var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
-
filterArray.push(filter);
-
contenedor_mc.filters = filterArray;
-
blurX--;
-
blurY--;
-
filterArray = [];
-
if (blurX<=0 || blurY<=0) {
-
delete this.onEnterFrame;
-
}
-
};
-
}
Descargar archivos
Ver ejemplo funcionando
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ía de mas decir e imaginar las virtudes y posibilidades que dan el uso de archivos XML.
Artículo 23 de los derechos humanos