Como usar archivos XML en Flash

29 junio, 2008 by LeoBaraldi | 13 Comments

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.

//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 líneas en blanco que puedan existir entre nodos y nodos
//El siguiente paso sería cargar nuestro archivo XML atreves 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 función superior se encargara
//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.

//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 numérica 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 líneas en blanco que puedan existir entre nodos y nodos
//El siguiente paso sería cargar nuestro archivo XML atreves 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 partícula this hace referencia a miXML, firstChild es el nodo principal
//de nuestro XML y childNodes son los nodos que están dentro del nodo principal
//en definitiva le indicamos que solo guarde TODOS los nodos después del nodo principal.
//si después de esta línea pusiéramos 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 posición
//que ocupa en el array, en este caso (0) - .attributes.url < --- con la partícula attributes indicamos
//que atributo 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);//iniciamos la carga de nuestro XML, la función superior se encargara
//de detectar si se realizo con éxito o no
//FUNCION ENCARGADA DE CARGAR LAS FOTOS
function loadImagen() {
if (id //ultima foto que regrese a la primera y asi perpetuamente
id++;//incremento el valor de id, este es la referencia a la posición 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 imágenes
//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;
}
};
}

ver ejemplo descargar 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.

Share|

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, para sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, conocimientos en CEO. Desarrollador de sitios multi plataformas en, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Director de la carrera de diseño gráfico, Profesor de Diseño III y Diseño Web, en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Como usar archivos XML en Flash

Author: LeoBaraldi

13 Comments

Deja un comentario Cancelar respuesta